개요
로그인 후 가장 먼저 보이는 메인 화면.
화면 구조
| 영역 | 내용 | 스크롤 |
|---|
| 검색 영역 | 검색창 + 마이크 | - |
| 최근 본 상품 | 최근 조회 상품 목록 | 가로 |
| 추천 상품 | AI 추천 상품 | 세로 (메인) |
| 오늘의 특가 | 할인 상품 | 가로 |
| 하단 탭 바 | 네비게이션 | 고정 |
검색 영역
UI 구성
| 요소 | 내용 |
|---|
| 검색 입력창 | Placeholder: "상품을 검색해보세요" |
| 마이크 아이콘 | 음성 검색 (우측) |
동작
| 액션 | 결과 |
|---|
| 검색창 터치 | 검색 화면으로 이동 |
| 마이크 터치 | 음성 검색 시작 |
접근성
| 항목 | 처리 |
|---|
| 검색창 | "검색창, 버튼. 상품을 검색해보세요. 이중 탭 하여 검색 화면 열기" |
| 마이크 | "음성으로 검색, 버튼" |
최근 본 상품
노출 조건
- 상품 상세를 1회 이상 조회한 경우
- 조회 이력이 없으면 섹션 미노출
UI 구성
| 요소 | 내용 |
|---|
| 섹션 타이틀 | "최근 본 상품" (Heading) |
| 상품 카드 | 가로 스크롤 리스트 |
| 최대 개수 | 10개 |
상품 카드 (소형)
| 요소 | 내용 |
|---|
| 썸네일 | 정사각형 이미지 |
| 상품명 | 최대 2줄, 말줄임 |
| 가격 | 판매가 |
동작
| 액션 | 결과 |
|---|
| 상품 카드 터치 | 상품 상세 이동 |
| 가로 스와이프 | 목록 스크롤 |
접근성
| 항목 | 처리 |
|---|
| 섹션 | "최근 본 상품, 가로 목록. 스와이프 하여 더 보기" |
| 상품 | "상품명, 가격원. 이중 탭 하여 상세 보기" |
추천 상품
UI 구성
| 요소 | 내용 |
|---|
| 섹션 타이틀 | "추천 상품" (Heading) |
| 상품 카드 | 2열 그리드 |
| 로딩 | 무한 스크롤 |
상품 카드 (그리드형)
| 요소 | 내용 |
|---|
| 썸네일 | 정사각형 이미지 |
| 상품명 | 최대 2줄, 말줄임 |
| 가격 | 판매가 |
무한 스크롤
| 상태 | 표시 |
|---|
| 로딩 중 | 하단 스피너 |
| 데이터 없음 | "더 이상 추천 상품이 없습니다" |
오늘의 특가
UI 구성
| 요소 | 내용 |
|---|
| 섹션 타이틀 | "오늘의 특가" (Heading) |
| 상품 카드 | 가로 스크롤 리스트 |
상품 카드 (특가형)
| 요소 | 내용 |
|---|
| 썸네일 | 정사각형 이미지 |
| 할인 뱃지 | "N% 할인" (빨간색) |
| 상품명 | 최대 2줄, 말줄임 |
| 원가 | 취소선 |
| 판매가 | 강조 표시 |
접근성
| 항목 | 처리 |
|---|
| 상품 | "상품명, N% 할인, 원가 N원에서 판매가 N원" |
상품 카드 공통
터치 영역
- 전체 카드 영역 터치 가능
- 최소 터치 영역: 44x44pt
이미지 로딩
| 상태 | 표시 |
|---|
| 로딩 중 | 회색 placeholder |
| 로딩 실패 | 기본 이미지 아이콘 |
하단 탭 바
UI 구성
| 순서 | 탭 | 아이콘 | 이동 화면 |
|---|
| 1 | 홈 | 홈 | 홈 화면 |
| 2 | 카테고리 | 메뉴 | 카테고리 화면 |
| 3 | 위시리스트 | 하트 | 위시리스트 화면 |
| 4 | 마이페이지 | 사람 | 마이페이지 화면 |
상태
| 상태 | 표시 |
|---|
| 선택됨 | 아이콘 + 텍스트 강조색 |
| 미선택 | 아이콘 + 텍스트 회색 |
접근성
| 항목 | 처리 |
|---|
| 탭 | "홈, 탭, 4개 중 1번째, 선택됨" |
핀치 줌 기능
목적
저시력 사용자를 위한 화면 확대/축소
동작
| 제스처 | 결과 |
|---|
| 핀치 아웃 (벌리기) | 화면 확대 |
| 핀치 인 (모으기) | 화면 축소 |
| 더블 탭 | 기본 크기 복귀 |
범위
| 항목 | 값 |
|---|
| 최소 | 100% (기본) |
| 최대 | 300% |
| 단계 | 10% 단위 |
접근성
| 항목 | 처리 |
|---|
| 확대 시 | "화면 N% 확대됨" 안내 |
| 기본 복귀 | "기본 크기로 복귀" 안내 |
접근성 종합
Heading 구조 (로터 이동)
H1: 홈 (암묵적) → H2: 최근 본 상품 → H2: 추천 상품 → H2: 오늘의 특가
포커스 순서
검색창 → 마이크 → 최근 본 상품 → 추천 상품 → 오늘의 특가 → 탭 바
스크린리더 안내
| 상황 | 안내 |
|---|
| 화면 진입 | "홈 화면" |
| 새로고침 완료 | "새로고침 완료" |
| 추가 로딩 완료 | "상품 N개 추가됨" |