# UI/UX 가이드라인

이 문서는 Zellyy 앱의 사용자 인터페이스(UI) 및 사용자 경험(UX) 설계에 대한 가이드라인을 제공합니다.

## 1. 디자인 원칙

Zellyy 앱의 디자인은 다음 원칙을 따릅니다:

### 1.1 단순함 (Simplicity)
- 불필요한 요소를 제거하고 핵심 기능에 집중합니다.
- 사용자가 직관적으로 이해할 수 있는 인터페이스를 제공합니다.

### 1.2 일관성 (Consistency)
- 앱 전체에 걸쳐 일관된 디자인 언어를 사용합니다.
- 색상, 타이포그래피, 아이콘 등의 요소를 일관되게 적용합니다.

### 1.3 피드백 (Feedback)
- 사용자 행동에 대한 명확한 피드백을 제공합니다.
- 로딩 상태, 성공/실패 메시지 등을 시각적으로 표현합니다.

### 1.4 접근성 (Accessibility)
- 다양한 사용자가 앱을 사용할 수 있도록 접근성을 고려합니다.
- 충분한 대비, 적절한 글꼴 크기, 스크린 리더 지원 등을 제공합니다.

### 1.5 효율성 (Efficiency)
- 최소한의 단계로 작업을 완료할 수 있도록 설계합니다.
- 자주 사용하는 기능에 쉽게 접근할 수 있도록 합니다.

## 2. 브랜드 아이덴티티

### 2.1 로고

Zellyy 로고는 앱의 핵심 아이덴티티를 나타냅니다:
- 정사각형 카드 형태를 기반으로 한 심플한 디자인
- 앱 아이콘, 스플래시 화면, 마케팅 자료 등에 일관되게 사용

### 2.2 색상 팔레트

#### 기본 색상
- **주 색상(Primary)**: `#4A6FFF` - 버튼, 링크, 강조 요소에 사용
- **보조 색상(Secondary)**: `#FF6B6B` - 액션 버튼, 알림 등에 사용
- **중립 색상(Neutral)**: `#F8F9FA` ~ `#212529` - 배경, 텍스트 등에 사용

#### 기능적 색상
- **성공(Success)**: `#40C057` - 성공 메시지, 완료 상태 등에 사용
- **경고(Warning)**: `#FD7E14` - 주의가 필요한 상태에 사용
- **오류(Error)**: `#FA5252` - 오류 메시지, 실패 상태 등에 사용
- **정보(Info)**: `#339AF0` - 정보성 메시지에 사용

### 2.3 타이포그래피

#### 기본 글꼴
- **iOS**: San Francisco
- **Android**: Roboto
- **웹**: Inter 또는 시스템 기본 글꼴

#### 글꼴 크기
- **헤더 1**: 24sp/px
- **헤더 2**: 20sp/px
- **헤더 3**: 18sp/px
- **본문 텍스트**: 16sp/px
- **보조 텍스트**: 14sp/px
- **작은 텍스트**: 12sp/px

#### 글꼴 두께
- **Regular**: 400
- **Medium**: 500
- **Bold**: 700

### 2.4 아이콘

- 라인 스타일의 심플한 아이콘 사용
- 일관된 스트로크 두께와 스타일 유지
- 의미가 명확하고 인식하기 쉬운 아이콘 선택

## 3. 레이아웃 및 그리드 시스템

### 3.1 기본 그리드

- 8포인트 그리드 시스템 사용
- 모든 간격, 패딩, 마진은 8의 배수(8, 16, 24, 32, ...)로 설정
- 요소 간 일관된 간격 유지

### 3.2 카드 레이아웃

- 카드는 기본적으로 정사각형 형태 (1:1 비율)
- 그리드 뷰에서는 화면 너비에 따라 2열 또는 3열로 표시
- 카드 간 간격: 16px

### 3.3 화면 패딩

- 기본 화면 좌우 패딩: 16px
- 콘텐츠 영역 상하 패딩: 16px
- 섹션 간 간격: 24px

## 4. 컴포넌트 가이드라인

### 4.1 버튼

#### 기본 버튼
- 높이: 48px
- 패딩: 좌우 16px
- 테두리 반경: 8px
- 텍스트: 16px, Medium

#### 버튼 상태
- **기본(Default)**: 주 색상 배경, 흰색 텍스트
- **비활성화(Disabled)**: 회색 배경, 어두운 회색 텍스트
- **누름(Pressed)**: 어두운 주 색상 배경, 흰색 텍스트

#### 버튼 종류
- **기본 버튼(Primary)**: 주 색상 배경, 흰색 텍스트
- **보조 버튼(Secondary)**: 흰색 배경, 주 색상 테두리, 주 색상 텍스트
- **텍스트 버튼(Text)**: 배경 없음, 주 색상 텍스트

### 4.2 입력 필드

- 높이: 56px
- 패딩: 좌우 16px, 상하 12px
- 테두리 반경: 8px
- 테두리 색상: 중립 색상
- 포커스 상태: 주 색상 테두리
- 오류 상태: 오류 색상 테두리, 오류 메시지 표시

### 4.3 카드 컴포넌트

- 크기: 화면 너비에 따라 조정 (기본적으로 정사각형)
- 테두리 반경: 12px
- 그림자: 약한 그림자 효과
- 배경색: 사용자 설정 또는 기본 흰색
- 텍스트 색상: 사용자 설정 또는 기본 검정색
- 패딩: 16px

### 4.4 탭 바

- 높이: 56px
- 아이콘 크기: 24px
- 레이블 텍스트: 12px, Regular
- 활성 상태: 주 색상 아이콘 및 텍스트
- 비활성 상태: 중립 색상 아이콘 및 텍스트

### 4.5 모달 및 다이얼로그

- 테두리 반경: 16px
- 패딩: 24px
- 배경색: 흰색
- 그림자: 중간 강도의 그림자 효과
- 제목: 20px, Bold
- 내용: 16px, Regular
- 버튼 정렬: 우측 또는 중앙 정렬

## 5. 화면별 설계

### 5.1 온보딩 화면

- 간결한 일러스트레이션과 짧은 텍스트로 핵심 기능 소개
- 최대 3-4개 화면으로 제한
- 건너뛰기 옵션 제공
- 마지막 화면에 시작하기/로그인 버튼 배치

### 5.2 인증 화면

#### 로그인 화면
- 이메일/비밀번호 입력 필드
- 소셜 로그인 옵션
- 비밀번호 찾기 링크
- 회원가입 링크

#### 회원가입 화면
- 이메일, 비밀번호, 사용자 이름 입력 필드
- 약관 동의 체크박스
- 소셜 회원가입 옵션

### 5.3 홈 화면

- 상단에 앱 로고 및 검색 버튼
- 카드 생성 버튼 (플로팅 액션 버튼)
- 카드 그리드 또는 리스트 뷰
- 필터링 및 정렬 옵션

### 5.4 카드 작성 화면

- 전체 화면 편집기
- 상단에 취소 및 저장 버튼
- 텍스트 입력 영역
- 하단에 스타일링 옵션 (배경색, 텍스트 색상, 폰트 등)
- 공개/비공개 설정 토글
- 태그 추가 옵션

### 5.5 카드 상세 화면

- 카드 전체 보기
- 하단에 편집, 삭제, 공유 버튼
- 생성 날짜 및 태그 정보
- 공유 기록 (있는 경우)

### 5.6 프로필 화면

- 사용자 정보 (이름, 프로필 이미지)
- 통계 정보 (카드 수, 공유 수 등)
- 설정 메뉴
- 구독 상태 및 관리 옵션

### 5.7 설정 화면

- 계정 설정
- 알림 설정
- 테마 설정
- 소셜 계정 연동 관리
- 구독 관리
- 로그아웃 및 계정 삭제 옵션

## 6. 상호작용 및 애니메이션

### 6.1 전환 애니메이션

- 화면 전환: 부드러운 슬라이드 또는 페이드 효과
- 모달 표시: 페이드 인 및 스케일 효과
- 전환 시간: 300ms (기본)

### 6.2 피드백 애니메이션

- 버튼 누름: 스케일 다운 효과 (95%)
- 카드 선택: 약간의 확대 및 그림자 강화
- 스와이프 제스처: 부드러운 따라오기 효과

### 6.3 로딩 상태

- 스켈레톤 로딩 UI 사용
- 진행 상태가 명확한 로딩 인디케이터
- 긴 작업의 경우 진행률 표시

### 6.4 제스처

- 카드 스와이프: 좌우 스와이프로 카드 간 이동
- 당겨서 새로고침: 목록 화면에서 당겨서 새로고침
- 길게 누르기: 카드에 대한 추가 옵션 표시

## 7. 반응형 디자인

### 7.1 모바일 화면 (< 600px)

- 카드 그리드: 2열
- 하단 탭 바 네비게이션
- 간소화된 UI 요소

### 7.2 태블릿 화면 (600px ~ 1024px)

- 카드 그리드: 3열 또는 4열
- 사이드 네비게이션 + 하단 탭 바 (가로 모드)
- 분할 화면 레이아웃 지원

### 7.3 데스크톱 화면 (> 1024px)

- 카드 그리드: 4열 이상
- 사이드 네비게이션
- 고급 편집 기능 및 키보드 단축키 지원

## 8. 접근성 가이드라인

### 8.1 색상 대비

- 텍스트와 배경 간 최소 대비율: 4.5:1
- 중요 텍스트와 배경 간 최소 대비율: 7:1
- 색상만으로 정보를 구분하지 않음

### 8.2 터치 타겟

- 최소 터치 영역: 44px x 44px
- 터치 요소 간 최소 간격: 8px

### 8.3 스크린 리더 지원

- 모든 이미지에 대체 텍스트 제공
- 의미 있는 요소에 적절한 레이블 제공
- 논리적인 포커스 순서 유지

### 8.4 키보드 네비게이션

- 모든 기능을 키보드로 접근 가능하도록 설계
- 포커스 상태를 시각적으로 명확하게 표시
- 논리적인 탭 순서 유지

## 9. 다크 모드

### 9.1 색상 조정

- **배경색**: 
  - 라이트 모드: `#FFFFFF`
  - 다크 모드: `#121212`
  
- **텍스트 색상**:
  - 라이트 모드: `#212529`
  - 다크 모드: `#E9ECEF`
  
- **주 색상**:
  - 라이트 모드: `#4A6FFF`
  - 다크 모드: `#738FFE`

### 9.2 그림자 및 구분선

- 다크 모드에서는 그림자 대신 약간 밝은 배경색으로 구분
- 구분선 색상 조정하여 가시성 유지

### 9.3 이미지 및 아이콘

- 아이콘은 다크 모드에 맞게 색상 반전
- 이미지에 다크 모드용 대체 버전 제공 (필요한 경우)

## 10. 에러 상태 및 빈 상태

### 10.1 에러 상태

- 명확한 오류 메시지 제공
- 문제 해결을 위한 행동 지침 제공
- 친근하고 이해하기 쉬운 언어 사용
- 시각적 아이콘으로 오류 유형 표시

### 10.2 빈 상태

- 데이터가 없는 화면에 적절한 안내 메시지 표시
- 시작하기 위한 행동 유도 (CTA) 제공
- 간단한 일러스트레이션으로 빈 상태 시각화

## 11. 마이크로인터랙션

### 11.1 피드백 마이크로인터랙션

- 카드 저장 시 성공 애니메이션
- 공유 완료 시 축하 효과
- 오류 발생 시 주의 효과

### 11.2 상태 변화 마이크로인터랙션

- 토글 스위치 전환 애니메이션
- 드롭다운 메뉴 펼침/접힘 효과
- 탭 전환 시 부드러운 인디케이터 이동

## 12. 테스트 및 검증

### 12.1 사용성 테스트

- 프로토타입을 사용한 사용자 테스트 진행
- 핵심 사용자 흐름에 대한 태스크 완료율 측정
- 사용자 피드백 수집 및 분석

### 12.2 A/B 테스트

- 중요한 UI 요소에 대한 A/B 테스트 진행
- 데이터 기반 디자인 의사 결정
- 지속적인 개선 사이클 유지

## 결론

이 UI/UX 가이드라인은 Zellyy 앱의 일관된 사용자 경험을 위한 기준을 제공합니다. 디자인 과정에서 이 가이드라인을 참조하여 사용자 중심의 직관적이고 매력적인 인터페이스를 구현하세요. 프로젝트가 발전함에 따라 이 가이드라인도 지속적으로 업데이트될 예정입니다.