plan-4-ui-layout

name	plan-4-ui-layout
description	기획 UI Layout 스킬. "UI 레이아웃", "화면 구성", "UI 설명", "레이아웃 만들어주세요", "화면 그려주세요" 등의 요청 시 트리거. 사용자가 대략적으로 설명하는 UI를 듣고 텍스트 기반 와이어프레임으로 표현하고, flowchart Memory와 진입 경로 일관성을 검증한다. AI Driven Development 파이프라인의 4단계. 반드시 Step 3(Edge Case 검사)가 완료된 상태에서 사용한다.
compatibility	이전 대화에 기획 초안 + Edge Case 결과(Step 2-3 결과)가 존재해야 함

UI Layout 설명 (AI Driven Development Step 4/6)

이 스킬은 AI Driven Development 파이프라인의 네 번째 단계이다. Step 2-3의 기획 초안과 edge case를 기반으로 동작한다. 완료 후 사용자에게 Step 5: 와이어프레임 생성 스킬 사용을 안내한다.

전제 조건

Step 2(기획 시작)의 로컬 md 파일(.claude/docs/draft-*.md)과 Step 3(Edge Case)의 로컬 md 파일(.claude/docs/edge-case-*.md)이 존재해야 한다. 파일이 없으면 사용자에게 이전 단계를 먼저 완료하도록 안내한다. 로컬 md 파일에 Notion 상세 문서 링크가 있으면 해당 Notion 페이지도 notion-fetch로 로드한다.

Memory Bootstrap (공통)

이 스킬은 Notion Memory를 읽기 전용으로 참조한다.

1. .claude/docs/edge-case-*.md의 프론트매터에서 flowchart_url을 읽는다.
2. 이 단계에서 사용할 memory: flowchart_url (화면 진입 경로 검증)
3. flowchart_url이 없으면 1.5단계(화면↔플로우 일관성 검증)를 스킵하고 사용자에게 보고한다.
4. 프론트매터가 없으면 "plan-1부터 다시 실행해 주세요" 안내 후 중단.

출력 전략

채널	용도	내용
터미널	대화 전용	질문, 응답, 화면 목록 요약, 와이어프레임 (ASCII는 터미널에서 직접 확인)
Notion	상세 문서	화면별 구성 요소 상세, 화면 흐름, 상태별 설명
로컬 md	파이프라인 입력	plan-6-document가 참조할 구조화된 요약 + Memory URL 프론트매터 계승

터미널 출력 규칙

• 화면 목록: 테이블 요약만 터미널에 출력.
• 와이어프레임: ASCII 와이어프레임은 터미널에서 직접 보여준다 (시각적 확인 필요).
• 화면 상세/흐름: Notion에 작성. 터미널에는 요약만 출력.
• 완료 시: Notion 링크와 로컬 파일 경로만 터미널에 출력.

Notion 저장

이전 Step에서 사용한 Notion 페이지에 이어서 작성한다. 로컬 md 파일에서 Notion 페이지 URL을 읽어온다.

로컬 md 파일

• 저장 경로: 프로젝트 루트의 .claude/docs/ui-layout-{기획주제}.md

• 프론트매터는 plan-3의 값을 그대로 계승하여 기록한다:

  ---
  project_name: {계승}
  glossary_url: {URL}
  flowchart_url: {URL}
  principle_url: {URL}
  constraint_url: {URL}
  ---
  

• 본문은 plan-6-document가 참조할 수 있도록 아래 구조로 작성:

  • 화면 목록 (S-ID, 화면명, 진입 경로, 관련 기능)
  • 각 화면의 와이어프레임 (ASCII)
  • 화면 흐름 (출발 → 도착, 전환 방식)
  • 화면↔flowchart 일관성 검증 결과
  • Notion 상세 문서 링크

1단계: 화면 목록 도출

기획 초안의 사용 흐름에서 필요한 화면 목록을 자동 도출하여 사용자에게 확인한다.

화면 ID	화면명	진입 경로	관련 기능
S-001	(예: 앨범 등록 화면)	(예: 앨범 목록 > 등록 버튼 탭)	F-001

사용자에게 확인:

• 도출된 화면 목록이 맞는지
• 빠진 화면이 있는지
• 화면 간 이동 방식 (페이지 이동, 모달, 바텀시트 등)

1.5단계: 화면 ↔ 플로우 일관성 검증

도출된 화면 목록을 flowchart Memory와 교차 검증한다. flowchart_url이 DB이면 전체 row를 조회하여 Mermaid 노드와 대조한다.

검증 항목	방법	실패 시 조치
화면 진입 경로	각 화면의 "진입 경로"가 flowchart의 기존 row/노드와 연결 가능한지	연결 불가: "flowchart 업데이트 필요" 항목으로 기록 후 plan-6 "9. 미결 항목"으로 전달
관련 기능 매핑	각 화면의 연관 기능(F-ID)이 flowchart row 본문(Mermaid)에 언급되는지	미언급: 신규 기능이면 OK. 신규가 아니라면 기획 초안 재검토 요청
네비게이션 흐름	도출된 화면 간 이동이 기존 네비게이션 패턴과 충돌하지 않는지	충돌: 사용자에게 알림 + 의도적 변경인지 확인

검증 결과는 아래 표로 기록한다:

S-ID	검증 항목	결과	비고
S-001	진입 경로 일관성	OK / 불일치 / flowchart 누락

2단계: 화면별 UI 설명 수집

각 화면에 대해 사용자에게 대략적인 UI를 자연어로 설명해 달라고 요청한다.

수집할 내용:

• 화면에 어떤 요소가 있는지 (버튼, 입력 필드, 목록, 이미지 등)
• 대략적인 배치 (상단에 뭐가 있고, 중간에 뭐가 있고, 하단에 뭐가 있는지)
• 참고할 기존 화면이나 앱이 있는지
• 특별히 강조하고 싶은 UI 요소가 있는지

사용자가 설명하기 어려워하면 질문으로 유도한다:

• "이 화면에서 사용자가 가장 먼저 보게 될 건 뭔가요?"
• "버튼이 몇 개 정도 필요하고, 어디에 위치하면 좋을까요?"
• "목록이 있다면 각 항목에 어떤 정보가 보여야 하나요?"

3단계: 와이어프레임 텍스트 생성

사용자의 설명을 기반으로 각 화면의 와이어프레임을 텍스트(ASCII)로 생성한다.

와이어프레임 작성 규칙

• 목적: 디자이너에게 구조와 배치 의도를 전달하는 것이 목적이다. 완성된 디자인이 아님.
• 표현 방식: ASCII 박스(┌┐└┘├┤─│)를 사용하여 레이아웃을 시각적으로 표현
• 레이블: 모든 UI 요소에 한글 레이블 표기
• 상태 표시: 기본 상태(default) 와이어프레임을 먼저 그리고, 그 아래에 변경되는 상태(loading, error, empty 등)를 별도 섹션으로 기술
• 기준 너비: 모바일 기준 (대략 30자 폭)
• UI 요소 표기 규칙:
  • 버튼: [ 버튼명 ]
  • 입력 필드: [ 레이블: ____________ ]
  • 이미지/미디어 영역: [■■■ 이미지 설명 ■■■]
  • 목록 항목: • 항목명 / 설명
  • 탭/세그먼트: [ 탭1 ] | [ 탭2 ] | [ 탭3 ]
  • 토글/체크박스: ○ 항목명 / ● 항목명(선택됨)
  • 텍스트 영역: ─ ─ ─ (텍스트 내용 설명) ─ ─ ─

화면별 출력 구조

각 화면(S-ID)에 대해 아래를 생성한다:

## S-001: (화면명)

- 진입 경로: (경로)
- 관련 기능: F-001
- 화면 상태: default / loading / error / empty

### Default 상태

┌──────────────────────────────┐  ← 상태바
│  [< 뒤로]      화면 제목      │  ← 네비게이션 바
├──────────────────────────────┤
│                              │
│  [■■■■■ 대표 이미지 ■■■■■]  │
│                              │
├──────────────────────────────┤
│  항목명: __________________  │  ← 입력 필드
│  설명: ____________________  │
├──────────────────────────────┤
│         [ 확인 버튼 ]         │  ← CTA
└──────────────────────────────┘

### Loading 상태
(변경되는 부분만 기술)
- 대표 이미지 영역 → 스피너 표시
- 확인 버튼 → 비활성화

### Error 상태
- 입력 필드 하단 → "오류 메시지" 텍스트 표시 (빨간색 계열)

4단계: 사용자 리뷰 및 수정

생성된 와이어프레임을 사용자에게 보여주고 피드백을 수집한다.

확인 사항:

• 배치가 의도와 맞는지
• 빠진 UI 요소가 있는지
• 수정이 필요한 부분

사용자 피드백을 반영하여 와이어프레임을 수정한다. 합의될 때까지 반복한다.

5단계: UI Layout 요약 및 다음 단계 안내

UI Layout 요약

화면 ID	화면명	포함 상태	주요 컴포넌트
S-001		default, loading, error, empty	(주요 요소 나열)

화면 흐름 정리

출발 화면	사용자 행동	도착 화면	전환 방식
S-001	(행동)	S-002	페이지 이동 / 모달 / 바텀시트

UI Layout 결과를 Notion 페이지에 작성하고 로컬 md 파일에 요약 + 프론트매터를 저장한 뒤, 사용자에게 Notion 링크와 로컬 파일 경로를 안내한다. 수정 사항이 있으면 Notion과 로컬 md를 모두 업데이트한다.

사용자에게 아래 메시지로 다음 단계를 안내한다:

✅ UI Layout 완료 (Step 4/6)

다음 단계로 와이어프레임 생성을 진행합니다. 킥오프용 HTML 와이어프레임을 만들어 기획서에 첨부합니다. 아래와 같이 요청해 주세요:

👉 "와이어프레임 만들어주세요" 또는 "wireframe"

와이어프레임을 건너뛰고 기획서를 바로 작성하려면: 👉 "기획서 작성해주세요"