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

6. 스타일 가이드

컬러 팔레트

Primary Color: #[HEX] - 메인 브랜드 컬러
Secondary Color: #[HEX] - 보조 컬러
Accent Color: #[HEX] - 강조 컬러

텍스트 컬러:
- Primary Text: #[HEX]
- Secondary Text: #[HEX]
- Disabled Text: #[HEX]

배경:
- Light: #[HEX]
- Dark: #[HEX]

상태 컬러:
- Success: #[HEX]
- Warning: #[HEX]
- Error: #[HEX]
- Info: #[HEX]

타이포그래피

Font Family: [폰트명]

제목:
- H1: [크기]px, [굵기], [행간]
- H2: [크기]px, [굵기], [행간]
- H3: [크기]px, [굵기], [행간]

본문:
- Body 1: [크기]px, [굵기], [행간]
- Body 2: [크기]px, [굵기], [행간]

Caption: [크기]px, [굵기], [행간]

간격

XS: 4px
S: 8px
M: 16px
L: 24px
XL: 32px
XXL: 48px

아이콘

• 아이콘 라이브러리: [예: Material Icons, Font Awesome]
• 크기: 16px, 24px, 32px

7. 반응형 디자인

브레이크포인트

모바일: < 768px
태블릿: 768px - 1024px
데스크톱: > 1024px

화면별 레이아웃

• 모바일: 단일 컬럼, 햄버거 메뉴
• 태블릿: 2단 컬럼, 사이드바
• 데스크톱: 다단 컬럼, 전체 네비게이션

8. 인터랙션 디자인

애니메이션

• Transition Duration: 300ms
• Easing: ease-in-out
• Hover Effects: [설명]
• Click Feedback: [설명]

마이크로 인터랙션

1. 버튼 클릭: [효과]
2. 폼 입력: [효과]
3. 페이지 전환: [효과]
4. 로딩: [효과]

9. 접근성 (WCAG 2.1)

준수 체크리스트:

• 키보드 네비게이션 지원
• 스크린 리더 호환
• 색상 대비율 ≥ 4.5:1
• 이미지 대체 텍스트
• ARIA 레이블

10. 사용성 테스트 체크리스트

• 5초 테스트 (첫인상)
• 태스크 완료율
• 에러율
• 만족도 점수

11. 디자인 시스템 도구

권장 도구:

• 디자인: Figma, Adobe XD
• 프로토타이핑: Figma, InVision, Proto.io
• 협업: Zeplin, Abstract
• 디자인 토큰: Style Dictionary
• 컴포넌트 문서화: Storybook

작성 형식

# UI/UX 디자인 명세

## 디자인 원칙

### 핵심 원칙 (5개)
1. **{원칙명}**: {설명}
2. **{원칙명}**: {설명}
3. **{원칙명}**: {설명}
4. **{원칙명}**: {설명}
5. **{원칙명}**: {설명}

### 디자인 언어
- **톤 앤 매너**: {예: 친근하고 직관적}
- **브랜드 키워드**: {키워드1}, {키워드2}, {키워드3}

## 정보 아키텍처

### 사이트맵
\```
홈
├── {기능 A}
│   ├── {하위기능 A-1}
│   └── {하위기능 A-2}
├── {기능 B}
│   ├── {하위기능 B-1}
│   └── {하위기능 B-2}
└── {기능 C}
\```

### 네비게이션 구조
- **주 네비게이션**: {메뉴1}, {메뉴2}, {메뉴3}
- **부 네비게이션**: {서브메뉴 항목}
- **푸터 네비게이션**: {푸터 링크}

## 사용자 플로우

### 플로우 1: {기능명}

\```
시작
 ↓
[화면 1: {화면명}] → [화면 2: {화면명}]
 ↓                    ↓
[화면 3: {화면명}] ← [화면 4: {화면명}]
 ↓
완료
\```

**플로우 설명**:
1. **{화면명}**: {설명}
2. **{화면명}**: {설명}
3. **{화면명}**: {설명}

(다음 플로우 반복)

## 와이어프레임

### 화면 1: {화면명}

\```
+----------------------------------------+
|  [로고]     [메뉴] [메뉴] [메뉴]          |
+----------------------------------------+
|                                        |
|     [{영역명}]                          |
|     - {요소 1}                          |
|     - {요소 2}                          |
|                                        |
+----------------------------------------+
|  [{컴포넌트1}] [{컴포넌트2}] [{컴포넌트3}] |
+----------------------------------------+
|                                        |
|     [{메인 컨텐츠 영역}]                 |
|                                        |
+----------------------------------------+
|  {푸터}                                |
+----------------------------------------+
\```

**핵심 요소**:
- **{요소명}**: {설명}
- **{요소명}**: {설명}
- **{요소명}**: {설명}

(다음 화면 반복, 최소 5개)

## 컴포넌트 라이브러리

### 버튼
- **Primary Button**: {설명}
  - 크기: {크기}
  - 색상: {색상}
  - 사용: {사용 케이스}

- **Secondary Button**: {설명}
  - 크기: {크기}
  - 색상: {색상}
  - 사용: {사용 케이스}

### 폼 요소
- **Input Field**: {설명}
  - 타입: {text, email, password 등}
  - 상태: {default, focus, error, disabled}

- **Dropdown**: {설명}
  - 옵션 표시 방식: {설명}
  - 검색 기능: {유/무}

(모든 컴포넌트 반복)

## 스타일 가이드

### 컬러 팔레트
\```
Primary Color: #{HEX} - {설명}
Secondary Color: #{HEX} - {설명}
Accent Color: #{HEX} - {설명}

텍스트 컬러:
- Primary Text: #{HEX}
- Secondary Text: #{HEX}
- Disabled Text: #{HEX}

배경:
- Light: #{HEX}
- Dark: #{HEX}

상태 컬러:
- Success: #{HEX}
- Warning: #{HEX}
- Error: #{HEX}
- Info: #{HEX}
\```

### 타이포그래피
\```
Font Family: {폰트명}

제목:
- H1: {크기}px, {굵기}, {행간}
- H2: {크기}px, {굵기}, {행간}
- H3: {크기}px, {굵기}, {행간}

본문:
- Body 1: {크기}px, {굵기}, {행간}
- Body 2: {크기}px, {굵기}, {행간}

Caption: {크기}px, {굵기}, {행간}
\```

### 간격 시스템
\```
XS: 4px   - {사용 예시}
S:  8px   - {사용 예시}
M:  16px  - {사용 예시}
L:  24px  - {사용 예시}
XL: 32px  - {사용 예시}
XXL: 48px - {사용 예시}
\```

### 아이콘
- **아이콘 라이브러리**: {Material Icons, Font Awesome 등}
- **크기**: 16px, 24px, 32px
- **스타일**: {Filled, Outlined, Rounded 등}

## 반응형 디자인

### 브레이크포인트
\```
모바일: < 768px
태블릿: 768px - 1024px
데스크톱: > 1024px
\```

### 화면별 레이아웃 전략
- **모바일** (< 768px)
  - 레이아웃: 단일 컬럼
  - 네비게이션: 햄버거 메뉴
  - 터치 타겟: 최소 44x44px

- **태블릿** (768px - 1024px)
  - 레이아웃: 2단 컬럼
  - 네비게이션: 사이드바 또는 탭
  - 터치 타겟: 최소 44x44px

- **데스크톱** (> 1024px)
  - 레이아웃: 다단 컬럼
  - 네비게이션: 전체 메뉴바
  - 마우스/키보드 인터랙션

## 인터랙션 디자인

### 애니메이션 원칙
- **Duration**: 300ms (기본)
- **Easing**: ease-in-out
- **Hover Effects**: {효과 설명}
- **Click Feedback**: {효과 설명}

### 마이크로 인터랙션
1. **버튼 클릭**: {효과 설명}
2. **폼 입력**: {효과 설명}
3. **페이지 전환**: {효과 설명}
4. **로딩 상태**: {효과 설명}

## 접근성 (WCAG 2.1 AA)

### 준수 체크리스트
- [ ] 키보드 네비게이션 지원 (Tab, Enter, Space, Arrow keys)
- [ ] 스크린 리더 호환 (적절한 HTML 시맨틱 사용)
- [ ] 색상 대비율 ≥ 4.5:1 (텍스트), ≥ 3:1 (UI 컴포넌트)
- [ ] 이미지 대체 텍스트 (alt 속성)
- [ ] ARIA 레이블 (role, aria-label, aria-describedby)
- [ ] 폼 레이블 (label 요소)
- [ ] 포커스 인디케이터 (visible focus indicator)

## 사용성 테스트

### 테스트 체크리스트
- [ ] **5초 테스트**: 첫인상 평가
- [ ] **태스크 완료율**: 주요 태스크 완료 여부
- [ ] **에러율**: 사용 중 발생한 에러 빈도
- [ ] **만족도 점수**: SUS (System Usability Scale)
- [ ] **NPS (Net Promoter Score)**: 추천 의향

## 디자인 시스템 도구

### 권장 도구
- **디자인**: Figma, Adobe XD
- **프로토타이핑**: Figma, InVision, Proto.io
- **협업**: Zeplin, Abstract
- **디자인 토큰**: Style Dictionary
- **컴포넌트 문서화**: Storybook

디자인 가이드라인

• ASCII 아트 또는 텍스트 기반 와이어프레임 사용
• 최소 5개 이상의 주요 화면 와이어프레임 작성
• 모든 컴포넌트에 일관성 보장
• 모바일 우선 디자인
• 접근성 표준 준수
• 모든 디자인 결정 문서화
• 재사용 가능한 컴포넌트 패턴 생성
• 유저스토리와 직접 연결

유저스토리 연결 가이드

Epic → 주요 화면

• 각 Epic을 주요 화면 그룹으로 변환
• 예시: "사용자 관리" Epic → 회원가입, 로그인, 프로필 화면

User Story → 화면 플로우

• 각 User Story를 화면 플로우로 변환
• Acceptance Criteria를 화면 상태와 전환으로 표현

비기능적 요구사항 → 디자인 제약

• 성능 요구사항 → 로딩 전략, 최적화
• 접근성 요구사항 → WCAG 준수
• 반응형 요구사항 → 브레이크포인트, 레이아웃

결과 파일

• UI/UX 디자인.md: design/uiux/uiux.md
• 스타일 가이드.md: design/uiux/style-guide.md

주의사항

• 최소 5개 이상 주요 화면 와이어프레임
• ASCII 아트로 명확히 시각화
• 컴포넌트 라이브러리 완전히 정의
• 스타일 가이드 구체적으로 (HEX 코드, px 단위)
• WCAG 2.1 AA 이상 준수
• 모바일 우선 접근
• 모든 인터랙션 정의
• 유저스토리와 일대일 매핑

다음 단계

UI/UX 디자인 완료 후:

1. 프로토타입 개발 (기술 스택, 구현)
2. 디자인 리뷰 및 피드백
3. 개발 핸드오프