# 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 크기 유지 - 색상만으로 정보를 구분하지 않고 아이콘, 텍스트 등 보조 요소 활용 - 스크린 리더 호환성을 위한 적절한 레이블 제공 - 키보드 네비게이션 지원으로 모든 기능 접근 가능