구조 및 와이어프레임
이유: 콘텐츠가 디자인보다 우선합니다. 어떻게 보일지 결정하기 전에 무엇이 어디에 들어갈지 결정하세요. 평범한 회색 와이어프레임은 구조에 대한 비판을 불러일으킵니다. 무언가 완성된 것처럼 보이면 사람들은 색상에 대해서만 코멘트합니다. 좋은 결과를 내는 AI 사이트 빌더(Relume, Google Stitch)도 같은 이유로 사이트맵 → 와이어프레임 → 스타일 순서로 진행합니다.
필요 사항: 01-facts/facts.md, 01-facts/inventory.md(재설계), 02-personas/personas.md, 03-brand/brand.md.
생성 결과: 04-structure/sitemap.md(페이지 트리, 내비게이션, URL 규칙, 리디렉션, 메시지 순서), 04-structure/wireframes/r<round>/*.html.
이 단계는 각각 리뷰가 있는 두 부분으로 구성됩니다. 구조와 와이어프레임을 한 번에 처리하기에는 너무 많기 때문입니다. 파트 1에서는 페이지 트리를 확정하고, 파트 2에서는 와이어프레임을 보여줍니다.
1. 페이지 트리
기존 사이트나 조직도가 아닌 페르소나의 질문에서 시작하세요. 각 페이지는 하나의 주요 페르소나에 대해 하나의 주요 질문에 답변합니다.
sitemap.md에서 각 페이지에 대해: URL, 제목, 주요 질문, 기본 페르소나, 주요 액션, 상태(출시 / 추후). 그런 다음:
- 내비게이션: 최상위 항목(5~7개 목표), 푸터에 들어갈 항목, 메가 메뉴 필요 여부.
- URL 규칙: 언어 접두사, 후행 슬래시 유무, 소문자, 단어(IDs 아님).
- 리디렉션: 인벤토리에 표시된 모든 페이지에 대해 이전 URL → 새 URL.
- 출시 범위: 기본 페르소나의 질문에 답변하는 가장 작은 페이지 집합. 빈 섹션("블로그 – 준비 중")은 제외합니다.
오퍼가 허용하는 한 작게 유지하세요. 모든 페이지는 작성, 디자인 및 유지 관리되어야 합니다.
리뷰, 파트 1 (review/04-structure-r1.html): 페이지 트리, 내비게이션, URL 규칙, 리디렉션, 출시 범위. 중지: 와이어프레임을 구축하기 전에 결정을 기다리세요.
2. 주요 페이지별 메시지 순서
sitemap.md에 페이지당 하나의 블록으로 작성하세요. 홈페이지와 각 페이지 유형(제품, 가격, 회사 소개, 문의, 기사 등)에 대해: 섹션을 위에서 아래로 나열하세요. 각 섹션에 대해: 해당 지점에서 방문자의 질문, 한 줄로 된 답변, facts.md의 증거, 그리고 다음 섹션으로 이어지는 내용. 첫 화면은 약속과 주요 액션을 명시합니다.
3. 와이어프레임
주요 페이지 유형당 하나의 HTML 와이어프레임을 모바일 우선으로 구축하고 데스크톱 너비에서도 확인하세요. 첫 번째 와이어프레임 라운드에서는 최대 4개(홈페이지와 가장 중요한 세 가지 페이지 유형)를 보여주세요. 추가 유형은 다음 라운드에서 처리합니다. 각 라운드를 자체 폴더(wireframes/r2/ 등)에 저장하고 하나의 스타일시트를 공유하세요.
- 회색만 사용, 하나의 시스템 폰트, 이미지에는 십자가가 있는 상자, 브랜드 색상 없음, 아이콘 세트 없음, 그림자 없음.
brand.md와facts.md의 실제 초안 카피를 사용하며, 절대 로렘 입숨을 사용하지 마세요. 헤드라인은 여전히 거칠 수 있습니다.draft로 표시하세요.- 실제 길이: 목록에 12개 항목이 있으면 12개를 표시하세요.
- 각 섹션 위에 작은 회색 텍스트로 해당 섹션이 답변하는 질문을 레이블로 표시하세요.
- 각 와이어프레임을 390px와 1440px에서 렌더링하고 살펴본 후 보여주세요.
리뷰, 파트 2
메시지 순서와 와이어프레임을 스크린샷으로 나란히(모바일 및 데스크톱) 보여주고, 각각 해당 HTML 파일에 링크하세요. 일반적인 결정 사항: 페이지별 섹션 순서, 누락되거나 중복된 페이지 유형, 첫 화면에 반드시 포함되어야 할 내용.
완료 조건: 페이지 트리, 내비게이션, URL 규칙, 리디렉션 및 주요 페이지의 섹션 순서가 결정되었을 때. 카피는 8단계에서 개선됩니다. 레이아웃 세부 사항은 9단계에서 변경될 수 있습니다.