개요
AI가 분석한 상품 정보를 시각장애인에게 최적화된 형태로 제공하는 핵심 화면.
진입 조건
| 조건 | 설명 |
|---|
| 상품 카드 터치 | 홈/검색결과/카테고리/위시리스트에서 |
| URL 검색 | 검색 화면 URL 검색 결과에서 |
상품 기본 정보
| 요소 | 내용 |
|---|
| 대표 이미지 | 상품 메인 이미지 (가로 풀사이즈) |
| 상품명 | 전체 텍스트 |
| 할인율 | 할인 시 표시 (빨간색) |
| 판매가 | 강조 표시 |
| 평점 | 별 + 점수 (예: 4.6점) |
접근성
| 항목 | 처리 |
|---|
| 이미지 | "상품 대표 이미지" (AI 설명은 별도 섹션) |
| 가격 | "12,200원" |
| 할인 | "12% 할인" |
| 평점 | "평점 4.6점" |
섹션 1: 전체 요약
목적
상품 핵심 정보를 3~5줄로 빠르게 전달
UI 구성
| 요소 | 내용 |
|---|
| 섹션 타이틀 | "전체 요약" (Heading) |
| 요약 텍스트 | 3~5줄 서술형 |
로딩 상태
| 상태 | 표시 |
|---|
| 로딩 중 | "AI가 요약하고 있어요.." |
| 완료 | 요약 텍스트 |
섹션 2: 이미지 설명
목적
상품 외관을 텍스트로 상세 묘사
UI 구성
| 요소 | 내용 |
|---|
| 섹션 타이틀 | "이미지 설명" (Heading) |
| 설명 텍스트 | 상품 생김새, 색상, 구조 묘사 |
로딩 상태
| 상태 | 표시 |
|---|
| 로딩 중 | "AI가 분석하고 있어요.." |
| 완료 | 설명 텍스트 |
섹션 3: 상세 페이지 요약
목적
이미지로 제공된 상세 정보를 카테고리별 구조화
UI 구성
| 요소 | 내용 |
|---|
| 섹션 타이틀 | "상세 페이지 요약" (Heading) |
| 소제목 목록 | 더보기/접기 가능 |
소제목 구조 (예시)
| 소제목 | 내용 |
|---|
| [상품정보] | 용량, 구성, 유효기간 |
| [장점] | 제품의 장점 설명 |
| [사용방법] | 조작 순서 |
| [주의사항] | 안전 관련 정보 |
| [보관방법] | 보관 관련 정보 |
로딩 상태
| 상태 | 표시 |
|---|
| 로딩 중 | "AI가 꼼꼼히 적고 있어요.." |
| 완료 | 구조화된 텍스트 |
더보기/접기
| 상태 | 버튼 | 동작 |
|---|
| 접힌 상태 | 더보기 (v) | 전체 펼치기 |
| 펼친 상태 | 접기 (^) | 기본 상태로 복귀 |
접근성
| 항목 | 처리 |
|---|
| 더보기 | "더보기, 접힌 상태. 이중 탭 하여 펼치기" |
| 펼침 후 | 첫 번째 소제목으로 포커스 이동 |
섹션 4: 리뷰 요약
목적
다수 리뷰를 긍정/부정으로 분류하여 핵심 전달
UI 구성
| 요소 | 내용 |
|---|
| 섹션 타이틀 | "리뷰 요약" (Heading) |
| 평점 | 별 4.6점 |
| 긍정적인 리뷰 | 최대 5개 리스트 |
| 부정적인 리뷰 | 최대 5개 리스트 |
리뷰 항목
| 유형 | 형식 |
|---|
| 긍정 | "긍정적인 리뷰" 섹션 아래 나열 |
| 부정 | "부정적인 리뷰" 섹션 아래 나열 |
하단 고정 버튼
UI 구성
| 요소 | 위치 | 스타일 |
|---|
| 찜 버튼 (하트) | 좌측 | 아이콘 버튼 |
| 질문하기 | 중앙 | Secondary (Outline) |
| 구매하러 가기 | 우측 | Primary (Black) |
동작
| 버튼 | 결과 |
|---|
| 찜 버튼 | 위시리스트 추가/제거 토글 |
| 질문하기 | 상태에 따라 팝업 또는 챗봇 이동 |
| 구매하러 가기 | 쿠팡 파트너스 링크로 외부 이동 |
질문하기 진입 분기
정상 진입 조건
- AI포미 패스 구독 중
- 매니저 패스 구독 중
- 올인원 패스 구독 중
- 무료 체험 기간 내
비구독자/무료체험 종료 팝업
| 요소 | 내용 |
|---|
| 타이틀 | "무료 체험이 종료되었어요" |
| 설명 | "멤버십에 가입하면 상품에 대해 언제든지 질문할 수 있어요" |
| 버튼 1 | [멤버십 구경하기] → 멤버십 화면 이동 |
| 버튼 2 | [닫기] → 팝업 닫기 |
멤버십 만료 팝업
| 요소 | 내용 |
|---|
| 타이틀 | "멤버십 기간이 끝났어요" |
| 설명 | "멤버십을 갱신하면 상품에 대해 다시 질문할 수 있어요" |
| 버튼 1 | [멤버십 갱신하기] → 멤버십 화면 이동 |
| 버튼 2 | [닫기] → 팝업 닫기 |
비정상 활동 감지 팝업
| 요소 | 내용 |
|---|
| 타이틀 | "서비스 이용이 잠시 제한되었어요" |
| 설명 | "일반적이지 않은 활동이 감지되어 잠시 서비스 이용이 제한되었어요. 운영진 검토 후, 최대 1일 이내에 해제될 예정이에요" |
| 버튼 | [확인] → 팝업 닫기 |
AI 분석 로딩
로딩 순서
| 순서 | 내용 | 로딩 메시지 |
|---|
| 1 | 기본 정보 (API) | - |
| 2 | 전체 요약 | "AI가 요약하고 있어요.." |
| 3 | 이미지 설명 | "AI가 분석하고 있어요.." |
| 4 | 상세 페이지 요약 | "AI가 꼼꼼히 적고 있어요.." |
| 5 | 리뷰 요약 | 스켈레톤 |
스켈레톤 UI
- 회색 막대 애니메이션 (shimmer)
- 실제 콘텐츠와 유사한 레이아웃
접근성
| 항목 | 처리 |
|---|
| 로딩 중 | "AI가 상품 정보를 분석하고 있습니다..." |
| 섹션 완료 | 해당 섹션 내용 읽기 시작 |
접근성 종합
Heading 구조 (로터 이동)
H1: 상품 상세 (암묵적) → H2: 전체 요약 → H2: 이미지 설명 → H2: 상세 페이지 요약 → H2: 리뷰 요약
포커스 순서
뒤로가기 → 찜버튼 → 검색버튼 → 이미지 → 상품명 → 가격 → 평점 → 전체요약 → 이미지설명 → 상세페이지요약 → 리뷰요약 → 찜버튼 → 질문하기 → 구매하러가기
찜 버튼 상태
"찜하기, 버튼, 선택 안 됨" / "찜하기, 버튼, 선택됨"