---
name: html-wireframe
description: >
화면 구조, 정보 위계, 내비게이션, 작업 순서를 아직 정하지 못했을 때 저충실도 HTML
와이어프레임으로 먼저 검증할 때 로드한다. 구조가 서로 다른 방향을 두셋 만들어 한
파일에서 비교한다. "구조부터 잡자", "레이아웃 두어 개 비교해 줘", "뭐가 어디 들어갈지
보자"가 트리거다. 눌러볼 수 있는 목업과 프로토타입은 html-prototype이, 제품에 들어갈
완성 UI 코드는 frontend-design이, 개념을 큰 그림으로 설명하는 지면은 html-explainer가
맡는다.
compatibility: >
SaveFile 빌트인이 제시된 런에서는 HTML 파일로 남기고, 없으면 코드 블록으로 낸다.
브라우저가 없어 렌더링을 직접 확인하지 못하므로 확인하지 못한 항목을 밝힌다.
---
# HTML 와이어프레임
제품 질문 하나를 보고 고치고 이야기하기 쉬운 저충실도 HTML로 바꾼다. 이 산출물은 무엇이
화면에 들어가야 하는지와 작업이 어떤 순서로 흘러야 하는지를 정하는 자리다. **완성된 제품처럼
보이면 실패한 것이다.** 브랜드 리뷰가 열리는 순간 구조 논의가 끝나기 때문이다.
## 리뷰 질문을 먼저 정한다
대화, 받은 자료, 프로젝트 문서를 읽고 제품의 어휘·콘텐츠 모델·이미 정해진 제약을 그대로
쓴다. 충돌하면 위가 이긴다.
1. 사용자가 명시한 지시와 이미 합의된 결정
2. 제품의 기존 구조와 용어
3. 모델링하는 사용자, 작업, 콘텐츠
4. 모델 자신의 레이아웃 판단
만들기 전에 다음을 정한다.
- 사용자와 그가 끝내야 하는 일
- 검토 대상인 화면 또는 경계가 분명한 흐름 하나
- 반드시 들어가야 하는 정보와 행동
- 안전하게 가정해도 되는 것
- 이 와이어프레임이 답해야 할 구조적 질문
**실제 라벨과 대표 콘텐츠를 쓴다.** 저충실도는 익명 상자와 lorem ipsum 을 써도 된다는
뜻이 아니다. 문구 길이가 레이아웃을 바꾸므로 진짜 문장을 넣는다.
## 구조가 미정이면 방향을 비교한다
두셋을 만들되 **제품 결정이 다른 방향**이어야 한다.
- 내비게이션 모델
- 묶는 방식과 순서
- 주요 행동의 위치
- 콘텐츠 밀도
- 한눈에 보는 개요 대 단계별 진행
- 데스크톱에서 모바일로 접히는 방식
색을 바꾸거나 카드를 재배치한 것은 별개 방향이 아니다. 방향마다 짧은 이름과 트레이드오프
한 문장을 붙인다. 핵심 콘텐츠와 작업은 방향들 사이에서 같게 유지한다.
가능하면 **한 파일에 담고** 키보드로 조작되는 작은 선택기로 전환한다. 여러 파일로 나누면
리뷰어가 비교를 못 한다. 사용자가 이미 구조를 정했다면 그 방향 하나만 만든다.
선택기는 **리뷰 도구이지 제품의 일부가 아니다.** 회색조로 눌러 놓은 지면에서는 제품의
내비게이션과 구분되지 않으므로, 와이어프레임 바깥에 이름을 붙인 별도 영역으로 두고
(`