# 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 - 다크 모드 지원