Obsidian/ZELLYY/zellyy note/03_UI_UX_설계/UI_UX_가이드라인.md

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