6.9 KiB
6.9 KiB
ZELLYY - UI/UX 설계
디자인 원칙
ZELLYY의 UI/UX 설계는 다음과 같은 핵심 원칙을 기반으로 합니다:
- 단순함(Simplicity): 복잡한 기능을 단순한 인터페이스로 제공하여 사용자의 인지 부하 최소화
- 직관성(Intuitiveness): 사용자가 별도의 학습 없이도 앱을 사용할 수 있도록 직관적인 디자인 적용
- 효율성(Efficiency): 최소한의 탭과 제스처로 작업을 완료할 수 있는 효율적인 워크플로우 설계
- 일관성(Consistency): 모든 화면과 기능에서 일관된 디자인 언어와 상호작용 패턴 유지
- 피드백(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. 소셜 미디어 공유 흐름
- 카드 에디터 또는 갤러리에서 공유 버튼 탭
- 공유 플랫폼 선택
- 플랫폼별 최적화 옵션 조정
- 캡션 및 해시태그 추가
- 공유 실행 또는 예약
반응형 디자인
기기별 최적화
- 스마트폰 (소형): 5.5인치 이하 화면에 최적화된 컴팩트 레이아웃
- 스마트폰 (대형): 5.5인치 이상 화면에 최적화된 확장 레이아웃
- 태블릿: 분할 화면 및 확장된 도구 패널 지원
- 방향: 세로 및 가로 모드 모두 지원
접근성 고려사항
- 텍스트 크기 조정: 시스템 텍스트 크기 설정에 반응
- 색상 대비: WCAG 2.1 AA 기준 준수
- 스크린 리더 지원: 모든 UI 요소에 적절한 접근성 레이블 제공
- 터치 타겟: 최소 44x44pt 크기의 터치 영역 확보
- 다크 모드: 시스템 설정에 따른 다크 모드 지원
프로토타입 및 테스트
프로토타입 도구
- 로우 피델리티: Figma, Sketch
- 하이 피델리티: Figma, Protopie
- 인터랙션 테스트: Figma 프로토타입, 개발 빌드
사용성 테스트 계획
- 참가자: 주요 페르소나에 맞는 사용자 그룹 (콘텐츠 크리에이터, 비즈니스 사용자, 개인 사용자)
- 테스트 방법: 과제 기반 테스트, 사고 구술법, 인터뷰
- 측정 지표: 작업 완료율, 오류율, 작업 완료 시간, SUS 점수
- 피드백 반영: 반복적인 디자인 개선 사이클
디자인 에셋
모든 디자인 에셋은 Figma 프로젝트에서 관리되며, 다음 항목을 포함합니다:
-
디자인 시스템 라이브러리
- 색상 스타일
- 텍스트 스타일
- 컴포넌트 라이브러리
- 아이콘 세트
-
와이어프레임
- 주요 화면 구조
- 사용자 흐름 다이어그램
- 인터랙션 모델
-
하이 피델리티 목업
- 모든 화면의 상세 디자인
- 상태 변화 및 애니메이션
- 다양한 기기 및 화면 크기 대응
-
프로토타입
- 인터랙티브 프로토타입
- 사용자 테스트용 시나리오
- 개발 참조용 상세 명세