| 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를 읽기 전용으로 참조한다.
.claude/docs/edge-case-*.md의 프론트매터에서 flowchart_url을 읽는다.- 이 단계에서 사용할 memory:
flowchart_url (화면 진입 경로 검증)
flowchart_url이 없으면 1.5단계(화면↔플로우 일관성 검증)를 스킵하고 사용자에게 보고한다.- 프론트매터가 없으면 "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"
와이어프레임을 건너뛰고 기획서를 바로 작성하려면:
👉 "기획서 작성해주세요"
