15 KiB
15 KiB
Zellyy - UI 와이어프레임 (추가 화면)
1. 온보딩 화면
+----------------------------------+
| [건너뛰기] |
+----------------------------------+
| |
| |
| [일러스트레이션] |
| |
| |
| |
| 나만의 카드 만들기 |
| |
| 원하는 내용을 담은 카드를 |
| 쉽고 빠르게 만들어보세요. |
| |
| |
| |
| |
| [○] [○] [●] [○] (페이지 인디케이터) |
| |
| [이전] [다음] |
| |
+----------------------------------+
+----------------------------------+
| [건너뛰기] |
+----------------------------------+
| |
| |
| [일러스트레이션] |
| |
| |
| |
| 카드 공유하기 |
| |
| 만든 카드를 친구들과 공유하고 |
| 소통해보세요. |
| |
| |
| |
| |
| [○] [○] [○] [●] (페이지 인디케이터) |
| |
| [이전] [시작하기] |
| |
+----------------------------------+
2. 알림 화면
+----------------------------------+
| [뒤로] 알림 |
+----------------------------------+
| |
| +----------------------------+ |
| | [사용자 아이콘] | |
| | [사용자 이름]님이 회원님의 | |
| | 카드를 좋아합니다. | |
| | 2시간 전 | |
| +----------------------------+ |
| |
| +----------------------------+ |
| | [사용자 아이콘] | |
| | [사용자 이름]님이 회원님을 | |
| | 팔로우했습니다. | |
| | 5시간 전 | |
| +----------------------------+ |
| |
| +----------------------------+ |
| | [시스템 아이콘] | |
| | 회원님의 카드가 인기 카드에 | |
| | 선정되었습니다. | |
| | 어제 | |
| +----------------------------+ |
| |
| +----------------------------+ |
| | [사용자 아이콘] | |
| | [사용자 이름]님이 회원님의 | |
| | 카드에 댓글을 남겼습니다. | |
| | 어제 | |
| +----------------------------+ |
| |
| +----------------------------+ |
| | [사용자 아이콘] | |
| | [사용자 이름]님이 회원님의 | |
| | 카드를 공유했습니다. | |
| | 2일 전 | |
| +----------------------------+ |
| |
| [더 불러오기] |
| |
+----------------------------------+
| [홈] [검색] [+] [보관함] [프로필] |
+----------------------------------+
3. 카드 보관함 화면
+----------------------------------+
| [뒤로] 보관함 |
+----------------------------------+
| |
| +----------------------------+ |
| | 보관함 필터 | |
| | | |
| | [전체] [생성] [저장] [좋아요] | |
| +----------------------------+ |
| |
| +----------------------------+ |
| | 정렬 기준 | |
| | | |
| | [최신순 ▼] | |
| +----------------------------+ |
| |
| +----------------------------+ |
| | 카드 보기 방식 | |
| | | |
| | [그리드 ◉] [리스트 ◯] | |
| +----------------------------+ |
| |
| +----------------------------+ |
| | | |
| | [그리드 형태로 카드 표시] | |
| | | |
| | +-----+ +-----+ +-----+ | |
| | | | | | | | | |
| | | 1 | | 2 | | 3 | | |
| | | | | | | | | |
| | +-----+ +-----+ +-----+ | |
| | | |
| | +-----+ +-----+ +-----+ | |
| | | | | | | | | |
| | | 4 | | 5 | | 6 | | |
| | | | | | | | | |
| | +-----+ +-----+ +-----+ | |
| | | |
| | +-----+ +-----+ +-----+ | |
| | | | | | | | | |
| | | 7 | | 8 | | 9 | | |
| | | | | | | | | |
| | +-----+ +-----+ +-----+ | |
| | | |
| +----------------------------+ |
| |
| [더 불러오기] |
| |
+----------------------------------+
| [홈] [검색] [+] [보관함] [프로필] |
+----------------------------------+
4. 설정 화면
+----------------------------------+
| [뒤로] 설정 |
+----------------------------------+
| |
| +----------------------------+ |
| | 계정 설정 | |
| | | |
| | 프로필 편집 > | |
| | 비밀번호 변경 > | |
| | 개인정보 설정 > | |
| +----------------------------+ |
| |
| +----------------------------+ |
| | 알림 설정 | |
| | | |
| | 푸시 알림 [켜기 ◉] | |
| | 이메일 알림 [켜기 ◯] | |
| | 알림 유형 설정 > | |
| +----------------------------+ |
| |
| +----------------------------+ |
| | 앱 설정 | |
| | | |
| | 테마 [라이트 ▼] | |
| | 언어 [한국어 ▼] | |
| | 자동 재생 [켜기 ◉] | |
| | 데이터 사용 > | |
| +----------------------------+ |
| |
| +----------------------------+ |
| | 지원 및 정보 | |
| | | |
| | 도움말 센터 > | |
| | 이용약관 > | |
| | 개인정보처리방침 > | |
| | 앱 버전 v1.0.0 | |
| +----------------------------+ |
| |
| +----------------------------+ |
| | | |
| | 로그아웃 | |
| | | |
| +----------------------------+ |
| |
| +----------------------------+ |
| | | |
| | 계정 삭제 | |
| | | |
| +----------------------------+ |
| |
+----------------------------------+
5. 카드 공유 화면
+----------------------------------+
| [뒤로] 카드 공유 |
+----------------------------------+
| |
| +----------------------------+ |
| | | |
| | [카드 미리보기] | |
| | | |
| +----------------------------+ |
| |
| 공유 옵션: |
| |
| +----------------------------+ |
| | 소셜 미디어 | |
| | | |
| | [인스타] [페이스북] [트위터] | |
| | [카카오] [라인] [기타] | |
| +----------------------------+ |
| |
| +----------------------------+ |
| | 직접 공유 | |
| | | |
| | [링크 복사] [QR 코드] | |
| +----------------------------+ |
| |
| +----------------------------+ |
| | 공유 설정 | |
| | | |
| | 공개 범위: | |
| | [전체 공개 ◉] [친구만 ◯] | |
| | | |
| | 댓글 허용: | |
| | [허용 ◉] [비허용 ◯] | |
| +----------------------------+ |
| |
| +----------------------------+ |
| | | |
| | 공유하기 | |
| | | |
| +----------------------------+ |
| |
+----------------------------------+
6. 댓글 화면
+----------------------------------+
| [뒤로] 댓글 (23) |
+----------------------------------+
| |
| +----------------------------+ |
| | [사용자 아이콘] | |
| | [사용자 이름] | |
| | 정말 멋진 카드네요! 저도 | |
| | 이런 카드 만들고 싶어요. | |
| | 2시간 전 [좋아요] [답글] | |
| +----------------------------+ |
| |
| +----------------------------+ |
| | [사용자 아이콘] | |
| | [사용자 이름] | |
| | 어떤 도구로 만드셨나요? | |
| | 5시간 전 [좋아요] [답글] | |
| | | |
| | +------------------------+| |
| | | [사용자 아이콘] || |
| | | [작성자 이름] || |
| | | Zellyy 앱으로 만들었어요!|| |
| | | 3시간 전 [좋아요] || |
| | +------------------------+| |
| +----------------------------+ |
| |
| +----------------------------+ |
| | [사용자 아이콘] | |
| | [사용자 이름] | |
| | 색상 조합이 정말 좋네요. | |
| | 어제 [좋아요] [답글] | |
| +----------------------------+ |
| |
| [더 불러오기] |
| |
+----------------------------------+
| +----------------------------+ |
| | [댓글 입력] [전송] | |
| +----------------------------+ |
+----------------------------------+
7. 카드 템플릿 선택 화면
+----------------------------------+
| [뒤로] 템플릿 선택 |
+----------------------------------+
| |
| +----------------------------+ |
| | 템플릿 카테고리 | |
| | | |
| | [전체] [인기] [최신] [저장됨] | |
| +----------------------------+ |
| |
| +----------------------------+ |
| | | |
| | +-----+ +-----+ +-----+ | |
| | | | | | | | | |
| | | T1 | | T2 | | T3 | | |
| | | | | | | | | |
| | +-----+ +-----+ +-----+ | |
| | | |
| | +-----+ +-----+ +-----+ | |
| | | | | | | | | |
| | | T4 | | T5 | | T6 | | |
| | | | | | | | | |
| | +-----+ +-----+ +-----+ | |
| | | |
| | +-----+ +-----+ +-----+ | |
| | | | | | | | | |
| | | T7 | | T8 | | T9 | | |
| | | | | | | | | |
| | +-----+ +-----+ +-----+ | |
| | | |
| +----------------------------+ |
| |
| [더 불러오기] |
| |
+----------------------------------+
| [빈 카드] [선택하기] |
+----------------------------------+
8. 팔로워/팔로잉 화면
+----------------------------------+
| [뒤로] 팔로워 (125) |
+----------------------------------+
| |
| +----------------------------+ |
| | [검색어 입력] [검색] | |
| +----------------------------+ |
| |
| +----------------------------+ |
| | [사용자 아이콘] | |
| | [사용자 이름] | |
| | [사용자 소개] | |
| | [팔로우 중 ◉] [팔로우 ◯] | |
| +----------------------------+ |
| |
| +----------------------------+ |
| | [사용자 아이콘] | |
| | [사용자 이름] | |
| | [사용자 소개] | |
| | [팔로우 중 ◉] [팔로우 ◯] | |
| +----------------------------+ |
| |
| +----------------------------+ |
| | [사용자 아이콘] | |
| | [사용자 이름] | |
| | [사용자 소개] | |
| | [팔로우 중 ◉] [팔로우 ◯] | |
| +----------------------------+ |
| |
| +----------------------------+ |
| | [사용자 아이콘] | |
| | [사용자 이름] | |
| | [사용자 소개] | |
| | [팔로우 중 ◉] [팔로우 ◯] | |
| +----------------------------+ |
| |
| [더 불러오기] |
| |
+----------------------------------+
디자인 노트
1. 온보딩 화면
- 사용자가 앱을 처음 실행할 때 핵심 기능을 소개하는 화면
- 간결한 일러스트레이션과 짧은 텍스트로 핵심 기능 소개
- 최대 4개 화면으로 제한하여 사용자 피로도 최소화
- 건너뛰기 옵션 제공으로 사용자 선택권 보장
2. 알림 화면
- 사용자 활동과 관련된 모든 알림을 시간순으로 표시
- 알림 유형별 아이콘으로 시각적 구분 제공
- 각 알림은 관련 화면으로 직접 이동할 수 있는 링크 역할
- 읽지 않은 알림은 시각적으로 구분 (배경색 또는 표시)
3. 카드 보관함
- 사용자가 생성, 저장, 좋아요한 모든 카드를 관리하는 중앙 허브
- 필터링과 정렬 옵션으로 원하는 카드 쉽게 찾기 가능
- 그리드/리스트 뷰 전환으로 사용자 선호에 맞는 보기 방식 제공
- 길게 누르기로 다중 선택 및 일괄 작업 지원 (삭제, 공유 등)
4. 설정 화면
- 논리적으로 그룹화된 설정 옵션으로 쉬운 탐색
- 토글 스위치와 드롭다운 메뉴로 직관적인 조작
- 중요 설정(로그아웃, 계정 삭제)은 시각적으로 분리하여 실수 방지
- 각 설정 항목은 충분한 터치 영역 확보
5. 접근성 고려사항
- 모든 인터랙티브 요소는 최소 44x44dp 크기 유지
- 색상만으로 정보를 구분하지 않고 아이콘, 텍스트 등 보조 요소 활용
- 스크린 리더 호환성을 위한 적절한 레이블 제공
- 키보드 네비게이션 지원으로 모든 기능 접근 가능