# ZELLYY - UI/UX 설계

## 디자인 원칙

ZELLYY의 UI/UX 설계는 다음과 같은 핵심 원칙을 기반으로 합니다:

1. **단순함(Simplicity)**: 복잡한 기능을 단순한 인터페이스로 제공하여 사용자의 인지 부하 최소화
2. **직관성(Intuitiveness)**: 사용자가 별도의 학습 없이도 앱을 사용할 수 있도록 직관적인 디자인 적용
3. **효율성(Efficiency)**: 최소한의 탭과 제스처로 작업을 완료할 수 있는 효율적인 워크플로우 설계
4. **일관성(Consistency)**: 모든 화면과 기능에서 일관된 디자인 언어와 상호작용 패턴 유지
5. **피드백(Feedback)**: 사용자 행동에 대한 명확한 시각적, 촉각적 피드백 제공

## 디자인 시스템

### 색상 팔레트

#### 주요 색상
- **Primary**: #4A6FFF (파란색) - 주요 액션, 강조 요소
- **Secondary**: #FF6B6B (코랄 레드) - 보조 액션, 알림
- **Tertiary**: #6CD9CC (민트 그린) - 성공, 완료 상태

#### 중립 색상
- **Background**: #FFFFFF (흰색) - 기본 배경
- **Surface**: #F8F9FA (연한 회색) - 카드, 컨테이너 배경
- **On Background**: #212529 (진한 회색) - 기본 텍스트
- **On Surface**: #495057 (중간 회색) - 보조 텍스트

#### 상태 색상
- **Success**: #40C057 (녹색) - 성공 상태
- **Warning**: #FD7E14 (주황색) - 경고 상태
- **Error**: #FA5252 (빨간색) - 오류 상태
- **Info**: #339AF0 (하늘색) - 정보 상태

### 타이포그래피

#### 폰트 패밀리
- **기본 폰트**: SF Pro (iOS), Roboto (Android)
- **대체 폰트**: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif

#### 텍스트 스타일
- **Heading 1**: 24px, Bold, 1.2 line-height
- **Heading 2**: 20px, Bold, 1.3 line-height
- **Heading 3**: 18px, SemiBold, 1.4 line-height
- **Body 1**: 16px, Regular, 1.5 line-height
- **Body 2**: 14px, Regular, 1.5 line-height
- **Caption**: 12px, Regular, 1.4 line-height
- **Button**: 16px, Medium, 1.2 line-height

### 컴포넌트

#### 기본 컴포넌트
- **버튼**: 기본, 강조, 텍스트, 아이콘 버튼
- **입력 필드**: 텍스트 입력, 숫자 입력, 멀티라인 입력
- **선택 컨트롤**: 체크박스, 라디오 버튼, 토글 스위치
- **카드**: 기본 카드, 그림자 카드, 테두리 카드
- **리스트**: 기본 리스트, 아이콘 리스트, 썸네일 리스트
- **다이얼로그**: 알림, 확인, 입력 다이얼로그
- **탭**: 상단 탭, 하단 탭, 스크롤 탭

#### 특화 컴포넌트
- **템플릿 카드**: 템플릿 미리보기 및 선택을 위한 카드
- **컬러 피커**: 색상 및 그라데이션 선택 컴포넌트
- **텍스트 에디터**: 텍스트 스타일링 및 편집 컴포넌트
- **갤러리 그리드**: 카드 갤러리 표시를 위한 그리드
- **플랫폼 프리뷰**: 다양한 소셜 미디어 플랫폼 미리보기

## 화면 구조

### 주요 화면

1. **온보딩 화면**
   - 앱 소개 및 주요 기능 하이라이트
   - 회원가입 및 로그인 옵션
   - 퀵 스타트 튜토리얼

2. **홈 화면**
   - 최근 작업한 카드
   - 추천 템플릿
   - 빠른 액션 버튼 (새 카드 만들기, 템플릿 탐색)
   - 사용 통계 요약

3. **템플릿 갤러리**
   - 카테고리별 템플릿 분류
   - 검색 및 필터 옵션
   - 템플릿 미리보기 및 선택

4. **카드 에디터**
   - 텍스트 편집 영역
   - 스타일링 도구 모음
   - 배경 설정 옵션
   - 레이아웃 조정 도구
   - 저장 및 공유 버튼

5. **내 카드 갤러리**
   - 그리드 및 리스트 뷰 옵션
   - 정렬 및 필터 도구
   - 카드 관리 옵션 (삭제, 복제, 편집)
   - 컬렉션 및 폴더 구성

6. **설정 화면**
   - 계정 관리
   - 앱 환경 설정
   - 알림 설정
   - 저장소 관리
   - 도움말 및 지원

### 네비게이션 구조

- **하단 탭 바**: 홈, 템플릿, 에디터, 내 카드, 설정
- **계층적 네비게이션**: 드릴다운 방식의 화면 전환
- **모달 다이얼로그**: 빠른 작업 및 설정을 위한 오버레이
- **제스처 기반 네비게이션**: 스와이프, 핀치, 탭 제스처 지원

## 주요 사용자 흐름

### 1. 새 카드 제작 흐름

1. 홈 화면에서 '새 카드 만들기' 버튼 탭
2. 템플릿 카테고리 선택
3. 특정 템플릿 선택
4. 텍스트 내용 입력 및 편집
5. 스타일 조정 (폰트, 색상, 배치)
6. 미리보기 확인
7. 저장 및/또는 공유

### 2. 템플릿 커스터마이징 흐름

1. 템플릿 갤러리에서 템플릿 선택
2. 기본 요소 편집 (텍스트, 색상)
3. 고급 커스터마이징 (레이아웃, 요소 추가/제거)
4. 커스텀 템플릿으로 저장
5. 새 카드에 적용

### 3. 소셜 미디어 공유 흐름

1. 카드 에디터 또는 갤러리에서 공유 버튼 탭
2. 공유 플랫폼 선택
3. 플랫폼별 최적화 옵션 조정
4. 캡션 및 해시태그 추가
5. 공유 실행 또는 예약

## 반응형 디자인

### 기기별 최적화

- **스마트폰 (소형)**: 5.5인치 이하 화면에 최적화된 컴팩트 레이아웃
- **스마트폰 (대형)**: 5.5인치 이상 화면에 최적화된 확장 레이아웃
- **태블릿**: 분할 화면 및 확장된 도구 패널 지원
- **방향**: 세로 및 가로 모드 모두 지원

### 접근성 고려사항

- **텍스트 크기 조정**: 시스템 텍스트 크기 설정에 반응
- **색상 대비**: WCAG 2.1 AA 기준 준수
- **스크린 리더 지원**: 모든 UI 요소에 적절한 접근성 레이블 제공
- **터치 타겟**: 최소 44x44pt 크기의 터치 영역 확보
- **다크 모드**: 시스템 설정에 따른 다크 모드 지원

## 프로토타입 및 테스트

### 프로토타입 도구
- **로우 피델리티**: Figma, Sketch
- **하이 피델리티**: Figma, Protopie
- **인터랙션 테스트**: Figma 프로토타입, 개발 빌드

### 사용성 테스트 계획
- **참가자**: 주요 페르소나에 맞는 사용자 그룹 (콘텐츠 크리에이터, 비즈니스 사용자, 개인 사용자)
- **테스트 방법**: 과제 기반 테스트, 사고 구술법, 인터뷰
- **측정 지표**: 작업 완료율, 오류율, 작업 완료 시간, SUS 점수
- **피드백 반영**: 반복적인 디자인 개선 사이클

## 디자인 에셋

모든 디자인 에셋은 Figma 프로젝트에서 관리되며, 다음 항목을 포함합니다:

1. **디자인 시스템 라이브러리**
   - 색상 스타일
   - 텍스트 스타일
   - 컴포넌트 라이브러리
   - 아이콘 세트

2. **와이어프레임**
   - 주요 화면 구조
   - 사용자 흐름 다이어그램
   - 인터랙션 모델

3. **하이 피델리티 목업**
   - 모든 화면의 상세 디자인
   - 상태 변화 및 애니메이션
   - 다양한 기기 및 화면 크기 대응

4. **프로토타입**
   - 인터랙티브 프로토타입
   - 사용자 테스트용 시나리오
   - 개발 참조용 상세 명세