skill-115

UI/UX 디자인

목적

유저스토리를 기반으로 상세한 UI/UX 디자인 명세를 작성합니다.

사용 시점

• 유저스토리 작성이 완료된 후
• 프로토타입 개발 전
• 디자인 시스템을 정의해야 할 때
• 사용자가 "UI 디자인", "UX", "와이어프레임"을 언급할 때

필수 입력

• 유저스토리: design/userstory.md (user-stories 결과)
• 선정된 솔루션: think/핵심솔루션.md (solution-selection 결과)

디자인 명세 프레임워크

1. 디자인 원칙

핵심 원칙 (5개)

1. [원칙 1]: [설명]
2. [원칙 2]: [설명]
3. [원칙 3]: [설명]
4. [원칙 4]: [설명]
5. [원칙 5]: [설명]

디자인 언어

• 톤 앤 매너: [예: 친근하고 직관적]
• 브랜드 키워드: [3-5개 키워드]

2. 정보 아키텍처

사이트맵

홈
├── 기능 A
│   ├── 하위기능 A-1
│   └── 하위기능 A-2
├── 기능 B
│   ├── 하위기능 B-1
│   └── 하위기능 B-2
├── 마이페이지
│   ├── 프로필
│   └── 설정
└── 고객지원

네비게이션 구조

• 주 네비게이션: 메인 메뉴 항목
• 부 네비게이션: 서브 메뉴 항목
• 푸터 네비게이션: 푸터 링크

3. 사용자 플로우

각 주요 기능에 대해:

플로우 1: [기능 플로우]

시작
 ↓
[화면 1: 랜딩] → [화면 2: 선택]
 ↓                ↓
[화면 3: 입력] ← [화면 4: 확인]
 ↓
완료

플로우 설명:

1. 단계 1: [설명]
2. 단계 2: [설명]
3. 단계 3: [설명]

4. 와이어프레임

각 주요 화면에 대해 (최소 5개):

화면 1: 홈 화면

+----------------------------------+
|  [로고]    [메뉴] [메뉴] [메뉴]     |
+----------------------------------+
|                                  |
|     [히어로 섹션]                 |
|     - 메인 메시지                 |
|     - CTA 버튼                   |
|                                  |
+----------------------------------+
|  [기능 1]   [기능 2]   [기능 3]   |
|   설명      설명       설명       |
+----------------------------------+
|                                  |
|     [메인 컨텐츠 영역]            |
|                                  |
+----------------------------------+
|  푸터                            |
+----------------------------------+

핵심 요소:

• 헤더: [설명]
• 히어로 섹션: [설명]
• 컨텐츠 영역: [설명]
• CTA: [설명]

5. 컴포넌트 라이브러리

버튼

• Primary Button
• Secondary Button
• Text Button

폼 요소

• Input Field
• Dropdown
• Checkbox / Radio
• Date Picker
• File Upload

카드

• Content Card
• Product Card
• User Card

네비게이션

• Top Navigation Bar
• Sidebar
• Breadcrumb
• Pagination

피드백

• Toast / Snackbar
• Modal / Dialog
• Alert / Error Messages
• Loading Spinner