name	uiux-design
description	유저스토리를 기반으로 사용자 인터페이스와 경험을 디자인할 때 상세한 UI/UX 디자인 명세를 작성합니다. Use when this capability is needed.
metadata	{"author":"cna-bootcamp"}

UI/UX 디자인

목적

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

사용 시점

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

필수 입력

유저스토리: design/userstory.md (user-stories 결과)

유저스토리 연결 가이드

Epic → 주요 화면

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

User Story → 화면 플로우

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

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

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

UI/UX 디자인 작성 형식

# 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**: {설명}
  - 크기: {크기}
  - 색상: {색상}
  - 사용: {사용 케이스}

- **Text Button**: {설명}

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

- **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**: {설명}

---

## 접근성 (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)**: 추천 의향

스타일가이드 작성 형식

# 스타일 가이드

## 컬러 팔레트

\```
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. **로딩 상태**: {효과 설명}

---

## 결과 파일

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

---

## 주의사항
- 모바일 우선(Mobile First) 접근
- 최소 5개 이상 주요 화면 와이어프레임
- ASCII 아트 또는 텍스트 기반 와이어프레임 사용
- 컴포넌트 라이브러리 완전히 정의
- 모든 컴포넌트에 일관성 보장
- 스타일 가이드 구체적으로 (HEX 코드, px 단위)
- 접근성 표준 WCAG 2.1 AA 이상 준수
- 모든 인터랙션 정의
- 유저스토리와 일대일 매핑

---

## 다음 단계

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

---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/cna-bootcamp) — claim your Tome and manage your conversions.
<!-- tomevault:4.0:skill_md:2026-04-11 -->

name	uiux-design
description	유저스토리를 기반으로 사용자 인터페이스와 경험을 디자인할 때 상세한 UI/UX 디자인 명세를 작성합니다. Use when this capability is needed.
metadata	{"author":"cna-bootcamp"}

UI/UX 디자인

목적

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

사용 시점

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

필수 입력

유저스토리: design/userstory.md (user-stories 결과)

유저스토리 연결 가이드

Epic → 주요 화면

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

User Story → 화면 플로우

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

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

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

UI/UX 디자인 작성 형식

# 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**: {설명}
  - 크기: {크기}
  - 색상: {색상}
  - 사용: {사용 케이스}

- **Text Button**: {설명}

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

- **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**: {설명}

---

## 접근성 (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)**: 추천 의향

스타일가이드 작성 형식

# 스타일 가이드

## 컬러 팔레트

\```
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. **로딩 상태**: {효과 설명}

---

## 결과 파일

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

---

## 주의사항
- 모바일 우선(Mobile First) 접근
- 최소 5개 이상 주요 화면 와이어프레임
- ASCII 아트 또는 텍스트 기반 와이어프레임 사용
- 컴포넌트 라이브러리 완전히 정의
- 모든 컴포넌트에 일관성 보장
- 스타일 가이드 구체적으로 (HEX 코드, px 단위)
- 접근성 표준 WCAG 2.1 AA 이상 준수
- 모든 인터랙션 정의
- 유저스토리와 일대일 매핑

---

## 다음 단계

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

---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/cna-bootcamp) — claim your Tome and manage your conversions.
<!-- tomevault:4.0:skill_md:2026-04-11 -->