legendtkl UI/UX 디자인
목적
유저스토리를 기반으로 상세한 UI/UX 디자인 명세를 작성합니다.
사용 시점
- 유저스토리 작성이 완료된 후
- 프로토타입 개발 전
- 디자인 시스템을 정의해야 할 때
- 사용자가 "UI 디자인", "UX", "와이어프레임"을 언급할 때
필수 입력
- 유저스토리:
design/userstory.md(user-stories 결과) - 선정된 솔루션:
think/핵심솔루션.md(solution-selection 결과)
디자인 명세 프레임워크
1. 디자인 원칙
핵심 원칙 (5개)
- [원칙 1]: [설명]
- [원칙 2]: [설명]
- [원칙 3]: [설명]
- [원칙 4]: [설명]
- [원칙 5]: [설명]
디자인 언어
- 톤 앤 매너: [예: 친근하고 직관적]
- 브랜드 키워드: [3-5개 키워드]
2. 정보 아키텍처
사이트맵
홈
├── 기능 A
│ ├── 하위기능 A-1
│ └── 하위기능 A-2
├── 기능 B
│ ├── 하위기능 B-1
│ └── 하위기능 B-2
├── 마이페이지
│ ├── 프로필
│ └── 설정
└── 고객지원
네비게이션 구조
- 주 네비게이션: 메인 메뉴 항목
- 부 네비게이션: 서브 메뉴 항목
- 푸터 네비게이션: 푸터 링크
3. 사용자 플로우
각 주요 기능에 대해:
플로우 1: [기능 플로우]
시작
↓
[화면 1: 랜딩] → [화면 2: 선택]
↓ ↓
[화면 3: 입력] ← [화면 4: 확인]
↓
완료
플로우 설명:
- 단계 1: [설명]
- 단계 2: [설명]
- 단계 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: [설명]
마이크로 인터랙션
- 버튼 클릭: [효과]
- 폼 입력: [효과]
- 페이지 전환: [효과]
- 로딩: [효과]
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 디자인 완료 후:
- 프로토타입 개발 (기술 스택, 구현)
- 디자인 리뷰 및 피드백
- 개발 핸드오프