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. 개발 핸드오프