와이어프레임 스케치 템플릿은(는) 무엇을 하나요?
명시적으로 초안임을 보여주는 손그림 저충실도 와이어프레임 — 레이아웃 피드백을 유도하고, '배송 불가'를 암시하며, 시각 디자인에 대한 약속 없이 IA를 문서화합니다.
⚠️ 뼈대를 먼저 선택하세요
이 스킬의 가장 큰 실패 패턴: 모델이 붓 터치(떨림, 점선, 손글씨)는 계승하지만 잘못된 문서 구조를 작성하는 경우입니다. 예를 들어 다중 화면 흐름 문서가 필요할 때 3개의 분리된 앱 화면을 만들거나, 사이트맵에 에디토리얼 도형을 채워 넣는 경우입니다.
한 줄도 쓰기 전에, 응답에서 어떤 뼈대를 사용할지와 그 이유를 선언하세요. 사용자의 말을 다음 중 하나와 일치시키세요:
| 사용자 말 | 뼈대 | 이유 |
|---|---|---|
| 신문 / 잡지 / 랜딩 / 공식 사이트 / 브로셔 / 단일 페이지 / 원페이지 / 에디토리얼 | A. 단일 페이지 에디토리얼 | 하나의 긴 페이지, 섹션이 쌓임, 콘텐츠 밀도 높음 |
| 앱 / 모바일 / 폰 / 데스크톱 앱 / SaaS 흐름 / 사용자 경로 / 가입 흐름 / 결제 흐름 / 다중 화면 / 다중 페이지 / 회원가입 / 로그인 / 온보딩 / 설정 / 탭 / 폼 흐름 | B. 앱 다중 화면 흐름 | 여러 화면, 내비게이션, 상태, 트리거 |
| 정보 아키텍처 / IA / 사이트맵 / 사이트 맵 / 순서도 / 관계 그래프 / 노드 그래프 / 데이터 흐름 / 상태 머신 / 권한 매트릭스 | C. IA / 사이트맵 다이어그램 | 노드 + 엣지, 실제 화면 없음 |
| 불명확 / 사용자가 말하지 않음 / 둘 다 가능 | 선택하기 전에 사용자에게 물어보세요 — 기본값으로 선택하지 마세요 | — |
사용자가 주제를 주었지만 뼈대 힌트가 없다면, 어느 것을 사용할지 물어보세요. 잘못 고르면 일을 두 번 해야 합니다.
뼈대 A — 단일 페이지 에디토리얼
foolscap-wireframe.html이 이 뼈대의 참조입니다. 산출물이 하나의 스크롤 가능한 페이지(신문, 잡지 스프레드, 랜딩 페이지 와이어프레임, 브로셔, 단일 페이지 PRD 일러스트레이션)일 때 사용하세요.
필수 섹션 (순서대로, 1~2개는 생략 가능하지만 리듬은 유지):
- 마스트헤드 / 배너 — 제목, 호/버전, 날짜
- 히어로 피처 — 헤드라인 + 소개 + 손그림 일러스트레이션 자리 표시자가 포함된 하나의 큰 주요 블록
- 3~5개의 콘텐츠 섹션 — 각각 자체 h2, 텍스트 그림과 스케치 일러스트레이션 혼합
- 사이드바 / 브리프 / 목록 블록 — 짧은 항목, 조밀한 유형, 리듬을 깨는 역할
- CTA / 가입 / 푸터
밀도: foolscap 참조의 평방인치당 콘텐츠 양을 목표로 하세요 — 콘텐츠가 부족한 단일 페이지 와이어프레임은 초안이 아니라 빈 껍데기처럼 느껴집니다.
뼈대 B — 앱 다중 화면 흐름 ⛔ 하드 최소 요구 사항
foolscap-wireframe.html은 이 뼈대의 참조가 아닙니다 — SVG 필터, 폰트 스택, 점선 셀 미학만 빌려오세요. 문서 구조는 아래 체크리스트에서 조립해야 합니다.
필수 섹션 (모두 있어야 함 — 없으면 페이지 불완전)
- 커버 — 앱 이름 + 버전 + 역할/페르소나 + 한 줄 범위 (