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}

정보 아키텍처

네비게이션 구조

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

사용자 플로우

플로우 1: {기능명}

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

플로우 설명:

{화면명}: {설명}
{화면명}: {설명}
{화면명}: {설명}

(다음 플로우 반복)

와이어프레임

화면 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: {효과 설명}

마이크로 인터랙션

버튼 클릭: {효과 설명}
폼 입력: {효과 설명}
페이지 전환: {효과 설명}
로딩 상태: {효과 설명}

결과 파일

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 디자인 완료 후:

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