13 KiB
13 KiB
Zellyy - UI 와이어프레임 (핵심 화면)
1. 로그인/회원가입 화면
+----------------------------------+
| |
| [로고 이미지] |
| |
| ZELLYY |
| |
+----------------------------------+
| |
| +----------------------------+ |
| | 이메일 주소 입력 | |
| +----------------------------+ |
| |
| +----------------------------+ |
| | 비밀번호 입력 | |
| +----------------------------+ |
| |
| +----------------------------+ |
| | 로그인 | |
| +----------------------------+ |
| |
| 비밀번호를 잊으셨나요? [찾기] |
| |
| --------- 또는 --------- |
| |
| +----------------------------+ |
| | 소셜 로그인 버튼 | |
| +----------------------------+ |
| |
| 계정이 없으신가요? [회원가입] |
| |
+----------------------------------+
+----------------------------------+
| |
| 회원가입 화면 |
| |
+----------------------------------+
| |
| +----------------------------+ |
| | 이름 입력 | |
| +----------------------------+ |
| |
| +----------------------------+ |
| | 이메일 주소 입력 | |
| +----------------------------+ |
| |
| +----------------------------+ |
| | 비밀번호 입력 | |
| +----------------------------+ |
| |
| +----------------------------+ |
| | 비밀번호 확인 입력 | |
| +----------------------------+ |
| |
| [ ] 이용약관에 동의합니다 |
| [ ] 개인정보 처리방침에 동의합니다 |
| |
| +----------------------------+ |
| | 회원가입 | |
| +----------------------------+ |
| |
| 이미 계정이 있으신가요? [로그인] |
| |
+----------------------------------+
2. 메인 대시보드 화면
+----------------------------------+
| [메뉴] 대시보드 [알림] |
+----------------------------------+
| |
| 안녕하세요, [사용자 이름]님! |
| |
| +----------------------------+ |
| | 카드 생성하기 | |
| | | |
| | [+ 새 카드 만들기] | |
| | | |
| +----------------------------+ |
| |
| +----------------------------+ |
| | 최근 생성한 카드 | |
| | | |
| | +---------------------+ | |
| | | | | |
| | | [카드 내용 1] | | |
| | | | | |
| | +---------------------+ | |
| | | |
| | +---------------------+ | |
| | | | | |
| | | [카드 내용 2] | | |
| | | | | |
| | +---------------------+ | |
| | | |
| | [더 보기 >] | |
| +----------------------------+ |
| |
| +----------------------------+ |
| | 인기 있는 카드 | |
| | | |
| | +---------------------+ | |
| | | | | |
| | | [인기 카드 1] | | |
| | | | | |
| | +---------------------+ | |
| | | |
| | +---------------------+ | |
| | | | | |
| | | [인기 카드 2] | | |
| | | | | |
| | +---------------------+ | |
| | | |
| | [더 보기 >] | |
| +----------------------------+ |
| |
+----------------------------------+
| [홈] [검색] [+] [보관함] [프로필] |
+----------------------------------+
3. 카드 생성 화면
+----------------------------------+
| [뒤로] 카드 생성 [저장] |
+----------------------------------+
| |
| +----------------------------+ |
| | | |
| | | |
| | | |
| | [카드 편집 영역] | |
| | | |
| | | |
| | | |
| +----------------------------+ |
| |
| +----------------------------+ |
| | 배경색 선택 | |
| | [색상1] [색상2] [색상3] | |
| +----------------------------+ |
| |
| +----------------------------+ |
| | 텍스트 스타일 | |
| | [B] [I] [U] [A] [크기▼] | |
| +----------------------------+ |
| |
| +----------------------------+ |
| | 텍스트 색상 | |
| | [색상1] [색상2] [색상3] | |
| +----------------------------+ |
| |
| +----------------------------+ |
| | 태그 추가 | |
| | [입력 필드] [추가] | |
| +----------------------------+ |
| |
| +----------------------------+ |
| | 공개 설정 | |
| | [공개 ◯] [비공개 ◉] | |
| +----------------------------+ |
| |
+----------------------------------+
| [템플릿] [텍스트] [이미지] [공유] |
+----------------------------------+
4. 카드 상세 화면
+----------------------------------+
| [뒤로] 카드 상세 [메뉴] |
+----------------------------------+
| |
| +----------------------------+ |
| | | |
| | | |
| | | |
| | [카드 내용 표시] | |
| | | |
| | | |
| | | |
| +----------------------------+ |
| |
| 작성자: [사용자 이름] |
| 작성일: 2025년 2월 27일 |
| 태그: #태그1 #태그2 |
| |
| +----------------------------+ |
| | 공유 정보 | |
| | 조회수: 125회 | |
| | 좋아요: 45개 | |
| | 공유: 12회 | |
| +----------------------------+ |
| |
| +----------------------------+ |
| | 관련 카드 | |
| | | |
| | +---------------------+ | |
| | | | | |
| | | [관련 카드 1] | | |
| | | | | |
| | +---------------------+ | |
| | | |
| | +---------------------+ | |
| | | | | |
| | | [관련 카드 2] | | |
| | | | | |
| | +---------------------+ | |
| | | |
| +----------------------------+ |
| |
+----------------------------------+
| [좋아요] [댓글] [저장] [공유] |
+----------------------------------+
5. 검색 화면
+----------------------------------+
| [뒤로] 검색 |
+----------------------------------+
| |
| +----------------------------+ |
| | [검색어 입력] [검색] | |
| +----------------------------+ |
| |
| 인기 검색어: |
| #여행 #요리 #독서 #영화 #음악 |
| |
| +----------------------------+ |
| | 검색 필터 | |
| | | |
| | [✓] 전체 | |
| | [ ] 카드 | |
| | [ ] 사용자 | |
| | [ ] 태그 | |
| +----------------------------+ |
| |
| +----------------------------+ |
| | 검색 결과 | |
| | | |
| | +---------------------+ | |
| | | | | |
| | | [검색 결과 1] | | |
| | | | | |
| | +---------------------+ | |
| | | |
| | +---------------------+ | |
| | | | | |
| | | [검색 결과 2] | | |
| | | | | |
| | +---------------------+ | |
| | | |
| | +---------------------+ | |
| | | | | |
| | | [검색 결과 3] | | |
| | | | | |
| | +---------------------+ | |
| | | |
| | [더 불러오기] | |
| +----------------------------+ |
| |
+----------------------------------+
| [홈] [검색] [+] [보관함] [프로필] |
+----------------------------------+
6. 프로필 화면
+----------------------------------+
| [뒤로] 내 프로필 [설정] |
+----------------------------------+
| |
| [프로필 이미지] |
| [사용자 이름] |
| [사용자 소개] |
| |
| 팔로워: 125 | 팔로잉: 78 |
| |
| +----------------------------+ |
| | 내 통계 | |
| | | |
| | 카드: 45개 | |
| | 좋아요 받은 수: 230개 | |
| | 조회수: 1,250회 | |
| +----------------------------+ |
| |
| +----------------------------+ |
| | 내 카드 | |
| | | |
| | [그리드 형태로 카드 표시] | |
| | | |
| | [더 보기 >] | |
| +----------------------------+ |
| |
| +----------------------------+ |
| | 저장한 카드 | |
| | | |
| | [그리드 형태로 카드 표시] | |
| | | |
| | [더 보기 >] | |
| +----------------------------+ |
| |
+----------------------------------+
| [홈] [검색] [+] [보관함] [프로필] |
+----------------------------------+
디자인 노트
1. 색상 팔레트
- 주요 색상: #4A6FFF (파란색) - 앱의 주요 브랜드 색상
- 보조 색상: #FF6B6B (빨간색) - 액션 버튼, 알림 등
- 중립 색상: #F8F9FA ~ #212529 - 배경, 텍스트 등
- 기능적 색상:
- 성공: #40C057 - 성공 메시지, 완료 상태
- 경고: #FD7E14 - 주의 필요 상태
- 오류: #FA5252 - 오류 메시지, 실패 상태
- 정보: #339AF0 - 정보성 메시지
2. 타이포그래피
- 주요 폰트:
- iOS: San Francisco
- Android: Roboto
- 웹: Inter 또는 시스템 기본 글꼴
- 크기 계층:
- 헤더 1: 24sp/px
- 헤더 2: 20sp/px
- 헤더 3: 18sp/px
- 본문 텍스트: 16sp/px
- 보조 텍스트: 14sp/px
- 작은 텍스트: 12sp/px
3. 아이콘 및 시각적 요소
- 라인 스타일의 심플한 아이콘 사용
- 카드는 기본적으로 정사각형 형태 (1:1 비율)
- 그리드 뷰에서는 화면 너비에 따라 2열 또는 3열로 표시
- 카드 간 간격: 16px
4. 사용자 경험 고려사항
- 한 손 조작을 위한 하단 탭 바 디자인
- 카드 생성을 위한 플로팅 액션 버튼(+)
- 카드 스와이프 제스처로 추가 작업 접근 (수정, 삭제 등)
- 화면 전환: 부드러운 슬라이드 또는 페이드 효과
5. 접근성 고려사항
- 텍스트와 배경 간 최소 대비율: 4.5:1
- 중요 텍스트와 배경 간 최소 대비율: 7:1
- 최소 터치 영역: 44px x 44px
- 터치 요소 간 최소 간격: 8px
- 다크 모드 지원