mockup

name	mockup
description	화면 설명이나 [[screen-spec]]을 받아 자체 완결 HTML 저충실도 목업(와이어프레임)을 만들어 파일로 저장하고 브라우저로 보여준다. "목업 만들어줘 / 와이어프레임 그려줘 / 화면 대충 그려봐 / 레이아웃 잡아줘 / 이 화면 어떻게 생겼는지 보여줘"라고 할 때.

작업 흐름(항상): 왜(목적·의도) → 무엇을 → 어떻게 → 기존 컨텍스트·리서치 → 기획 → 시각화 → 호출·실행 → 🔁회고·보완. 자세히 [[method]].

mockup — 저충실도 목업/와이어프레임 생성

화면을 말로 백날 설명해도 안 맞는다. 회색 박스라도 눈앞에 띄워야 "아 여기가 아니지"가 나온다. 목적은 레이아웃·플로우 합의지 예쁜 디자인이 아니다. 색·폰트·실데이터에 시간 쓰지 마라.

왜 저충실도인가 (사람 말로)

• 고충실도로 만들면 사람들이 "색깔"을 지적하지 "구조"를 못 본다. 회색 박스가 오히려 본질을 보게 한다.
• 빨리 만들고 빨리 버리는 게 핵심. 목업은 초안이지 결과물이 아니다.

입력

• [[screen-spec]]이 있으면 그걸 기준으로. 없으면 화면 목적/주요 요소/사용자 플로우를 먼저 물어라.
• 근거 없는 요소는 넣지 마라. 스펙에 없는데 필요해 보이면 "확인 필요"로 표시하고 물어봐라.

규칙 (반드시)

1. 자체 완결 HTML — 인라인 CSS만. 외부 CSS/JS/폰트/이미지/CDN 전부 금지.
2. 저충실도 — 회색 박스(#e0e0e0), 점선 테두리, [이미지] [버튼] [표] 같은 플레이스홀더 텍스트.
3. 상단에 배너 고정: ⚠️ 저충실도 목업 — 실제 데이터/디자인 아님. 레이아웃·플로우 검토용
4. 실데이터 금지. 홍길동, 상품명 A, 0000 같은 더미만.

절차 (반자동: 초안 → 사람 검토)

1. 화면당 HTML 1개. 여러 화면이면 ~/.pm-copilot/data/mockups/<프로젝트>/01-로그인.html 식으로 저장.
2. 저장 후 브라우저로 열어 사람에게 보여준다.
3. "이 레이아웃에서 뭐가 어색한지, 빠진 요소 있는지" 3가지만 콕 집어 물어라.
4. 플로우가 여러 화면이면 화면 하단에 → 다음: 02-대시보드 링크로 이동 흐름을 표현.

구조 예시 (한 화면)

[상단 배너: ⚠️ 저충실도 목업]
[헤더: 로고자리 | 메뉴 | 프로필]
[본문: 회색 박스 = 리스트영역 / 우측 필터 패널]
[하단: [저장] [취소] 버튼 자리]

체크리스트

• 외부 리소스 0개 (파일 하나만으로 열림)
• "목업임" 배너 있음 / 실데이터 없음
• 스펙 근거 있는 요소만, 추측한 건 "확인 필요" 표시
• 저장 경로 + 브라우저로 보여줌 + 검토 질문 3개

코칭 (신입이면)

목업은 "합의 도구"다. 예쁘게 만들려다 리뷰가 색깔 얘기로 새면 실패다. 다음 단계로 클릭되는 걸 원하면 [[prototype]], 화면 요구사항부터 정리하려면 [[screen-spec]], UI 설계 원칙이 궁금하면 [[simple-design]]로 넘어가라.

🎨 Figma 연동 (커넥터 figma 연결 시)

• 목업을 HTML 대신 Figma에 직접 생성/편집(use_figma·generate_figma_design) — 편집 권한이 있을 때. 기존 디자인이 있으면 열람 후 확장. 권한이 없으면 별도 파일로 만들어 디자이너에게 전달.