| name | mockup |
| description | 화면 설명이나 [[screen-spec]]을 받아 자체 완결 HTML 저충실도 목업(와이어프레임)을 만들어 파일로 저장하고 브라우저로 보여준다. "목업 만들어줘 / 와이어프레임 그려줘 / 화면 대충 그려봐 / 레이아웃 잡아줘 / 이 화면 어떻게 생겼는지 보여줘"라고 할 때. |
작업 흐름(항상): 왜(목적·의도) → 무엇을 → 어떻게 → 기존 컨텍스트·리서치 → 기획 → 시각화 → 호출·실행 → 🔁회고·보완. 자세히 [[method]].
mockup — 저충실도 목업/와이어프레임 생성
화면을 말로 백날 설명해도 안 맞는다. 회색 박스라도 눈앞에 띄워야 "아 여기가 아니지"가 나온다.
목적은 레이아웃·플로우 합의지 예쁜 디자인이 아니다. 색·폰트·실데이터에 시간 쓰지 마라.
왜 저충실도인가 (사람 말로)
- 고충실도로 만들면 사람들이 "색깔"을 지적하지 "구조"를 못 본다. 회색 박스가 오히려 본질을 보게 한다.
- 빨리 만들고 빨리 버리는 게 핵심. 목업은 초안이지 결과물이 아니다.
입력
- [[screen-spec]]이 있으면 그걸 기준으로. 없으면 화면 목적/주요 요소/사용자 플로우를 먼저 물어라.
- 근거 없는 요소는 넣지 마라. 스펙에 없는데 필요해 보이면 "확인 필요"로 표시하고 물어봐라.
규칙 (반드시)
- 자체 완결 HTML — 인라인 CSS만. 외부 CSS/JS/폰트/이미지/CDN 전부 금지.
- 저충실도 — 회색 박스(
#e0e0e0), 점선 테두리, [이미지] [버튼] [표] 같은 플레이스홀더 텍스트.
- 상단에 배너 고정:
⚠️ 저충실도 목업 — 실제 데이터/디자인 아님. 레이아웃·플로우 검토용
- 실데이터 금지.
홍길동, 상품명 A, 0000 같은 더미만.
절차 (반자동: 초안 → 사람 검토)
- 화면당 HTML 1개. 여러 화면이면
~/.pm-copilot/data/mockups/<프로젝트>/01-로그인.html 식으로 저장.
- 저장 후 브라우저로 열어 사람에게 보여준다.
- "이 레이아웃에서 뭐가 어색한지, 빠진 요소 있는지" 3가지만 콕 집어 물어라.
- 플로우가 여러 화면이면 화면 하단에
→ 다음: 02-대시보드 링크로 이동 흐름을 표현.
구조 예시 (한 화면)
[상단 배너: ⚠️ 저충실도 목업]
[헤더: 로고자리 | 메뉴 | 프로필]
[본문: 회색 박스 = 리스트영역 / 우측 필터 패널]
[하단: [저장] [취소] 버튼 자리]
체크리스트
코칭 (신입이면)
목업은 "합의 도구"다. 예쁘게 만들려다 리뷰가 색깔 얘기로 새면 실패다.
다음 단계로 클릭되는 걸 원하면 [[prototype]], 화면 요구사항부터 정리하려면 [[screen-spec]],
UI 설계 원칙이 궁금하면 [[simple-design]]로 넘어가라.
🎨 Figma 연동 (커넥터 figma 연결 시)
- 목업을 HTML 대신 Figma에 직접 생성/편집(use_figma·generate_figma_design) — 편집 권한이 있을 때. 기존 디자인이 있으면 열람 후 확장. 권한이 없으면 별도 파일로 만들어 디자이너에게 전달.
