고품질 와이어프레임을 즉시 만들고 싶습니다.
이번에는 그러한 프롬프트들을 하나의 가이드로 모아봤습니다.
Claude 에게 와이어프레임 규칙을 가르치면 시간을 크게 절약할 수 있습니다.
목차
- "스킬" 규칙으로 등록하기
- 복사-붙여넣기 프롬프트
- 각 규칙 설명
- 다중 페이지 사이트는 Claude Code 사용
"스킬" 규칙으로 등록하기
프롬프트를 붙여넣으면 Claude 가 스킬 파일을 준비합니다. 등록이 완료되면, 그 후로는 "와이어프레임 만들어줘"라고 말하기만 하면 됩니다.
- 아래 "복사-붙여넣기 프롬프트" 를 Claude 에 전달하면 ZIP 파일이 생성됩니다.
- 채팅에 표시된 "저장 버튼"을 누릅니다.
이렇게 하면 매번 프롬프트를 붙여넣을 필요가 없어집니다.
*스킬 기능은 Pro 및 Max 와 같은 유료 요금제에서 사용할 수 있습니다.
복사-붙여넣기 프롬프트
다음을 Claude 채팅에 붙여넣어 스킬 등록 (규칙으로 기억하도록 등록) 을 시작하세요.
채팅 안내에 따라 ✔️ 저장 버튼을 누르기만 하면 됩니다.
다음은 와이어프레임 프롬프트입니다. 이것을 스킬로 만들어 주세요.
HTML 로 와이어프레임을 만들어 주세요. 아래의 모든 규칙을 따라 주세요.
[레이아웃] ・읽기에 부담이 없고 한눈에 이해하기 쉬운 레이아웃을 만드세요. ・세련되고, 도시적이며, 미니멀한 레이아웃을 만드세요. ・여백과 균형을 위해 페이지 전체를 잘 활용하세요. ・글꼴은 Noto Sans JP 를 사용하고, 약간 작게 만드세요.
[디자인] ・색상은 "흰색, 검정색, 회색"만 사용하세요. ・배경은 기본적으로 흰색으로 유지하세요. 전체가 검은색인 페이지를 만들지 마세요. ・불필요한 영어, 선, 그림자 또는 기타 장식을 사용하지 마세요. ・다이어그램이나 이미지가 필요한 부분에는 회색 상자를 사용하세요. ・아이콘은 "Font Awesome" 무료 버전을 사용하세요.
[글쓰기] ・각 문장을 다소 짧게 유지하세요. 문장당 최소 한 번은 쉼표를 사용하세요. ・1-2 문장마다 단락을 구분하세요. ・자연스러운 한자 표기는 히라가나로 변경하세요 (예: 行う → おこなう). ・강조하고 싶은 이름이나 대화에는 「」를 사용하세요. ・오타나 생략된 문자를 수정하고, 어조를 정중체 (Desu/Masu)로 통일하세요.
각 규칙 설명
규칙의 세부 내용을 알고 싶은 분들을 위한 설명입니다.
1. 레이아웃 및 디자인
"이해하기 쉬운 레이아웃"은 정보의 우선순위를 정리합니다. 색상을 "흰색, 검정색, 회색"으로 제한하면 디자인이 통제 불능이 되는 것을 방지할 수 있습니다.
https://x.com/hiroho150cm/status/2061576024878633393
2. 아이콘
아이콘에 "Font Awesome"을 지정하면 외관이 크게 개선됩니다.
https://x.com/hiroho150cm/status/2062376294688387540
3. HTML 로 제작하기
HTML 을 사용하면 생성 및 수정이 원활해집니다.
https://x.com/hiroho150cm/status/2061938409577574818
https://x.com/hiroho150cm/status/2064112737865576597
4. 글쓰기
내부 텍스트를 그대로 사용할 수 있을 정도로 가독성이 높아집니다.
https://x.com/hiroho150cm/status/2063750350776287429
다중 페이지 사이트는 Claude Code 사용
지금까지는 LP (단일 페이지)에 대한 내용이었습니다. 다중 페이지 사이트의 경우 접근 방식을 변경합니다.
채팅 미리보기는 여러 HTML 파일 간 전환을 잘 처리하지 못합니다. 따라서 "Claude Code"를 사용합니다.
데스크탑에 폴더를 준비하고 모든 것을 그 안에서 관리하세요. 그러면 Claude Code 가 여러 HTML 파일을 적절하게 편집할 수 있습니다.
https://x.com/hiroho150cm/status/2065267853922898022
저는 Claude 를 활용한 웹 제작 및 디렉션의 시간 절약 기술을 공유하고 있습니다.
앞으로도 유용한 정보를 계속 제공할 예정이니, 마음에 드셨다면 팔로우 부탁드립니다.
