coastdigitalgroup/coastai-skills

리뷰 및 평점 UI 시스템

목적

리뷰 및 평점 UI 시스템은 사용자 생성 피드백의 시각적 및 구조적 프레임워크를 디자인하기 위한 방법론을 제공합니다. 정량적 데이터(별점)와 정성적 데이터(서면 리뷰)를 스캔 가능하고 신뢰할 수 있으며 접근성 높은 인터페이스로 구성합니다. 이 시스템은 가장 관련성 높은 피드백을 표시하여 사용자가 정보에 기반한 결정을 내릴 수 있도록 돕고, 전반적인 사이트 디자인과 시각적 일관성을 유지합니다.

사용 사례

• 전자상거래 제품 페이지: 제품 만족도와 상세 고객 경험 표시.
• 서비스/SaaS 마켓플레이스: 제공자, 도구 또는 애플리케이션 평가.
• 콘텐츠 플랫폼: 사용자가 기사, 강좌 또는 미디어를 평가할 수 있도록 허용.
• 피드백 수집 양식: 평점 시스템의 입력 측면 디자인.
• 리뷰 요약: "한눈에 보는" 평점 분포 생성 (예: 5성 막대 차트).

사용하지 말아야 할 경우

• 내부 품질 감사: 피드백이 비공개이며 공개 UI 없이 내부 처리에만 사용되는 경우.
• 이진 피드백: 목표가 단순한 "도움됨/도움 안 됨" 또는 "추천/비추천"인 경우, interactive-state-system의 더 간단한 상호 작용 패턴을 사용하세요.
• 소량 콘텐츠: 사이트에 항목당 일반적으로 0-2개의 리뷰만 있는 경우, 복잡한 분포 요약이 "비어 있거나" 실망스러워 보일 수 있습니다.
• 엄격한 정량적 데이터: 성과 메트릭 또는 시스템 상태(예: "99.9% 가동 시간")의 경우 간단한 badge-and-tag-system 또는 데이터 시각화를 사용하세요.

입력

1. 피드백 스키마: 캡처/표시할 데이터 (1-5점 평점, 제목, 본문, 날짜, 사용자 ID, 확인 상태, 사진).
2. 집계 메타데이터: 총 리뷰 수와 평균 점수.
3. 분포 데이터: 각 별점 수준(5, 4, 3, 2, 1)의 리뷰 수.
4. 상호 작용 요구 사항: 정렬(최신순, 높은 평점순), 필터링(확인된 구매자만, 사진 포함) 및 "도움됨" 투표.

출력

1. 평점 컴포넌트 사양: "별 행"에 대한 시각적 디자인 (빈 별, 반 별, 가득 찬 별 상태 포함).
2. 리뷰 요약 구성: 집계 점수와 분포 막대 차트를 위한 레이아웃.
3. 개별 리뷰 청사진: 단일 리뷰 항목의 구조적 레이아웃 (사용자, 평점, 내용, 액션).
4. 입력 상호 작용 사양: 평점 선택 및 리뷰 제출 양식 디자인.

워크플로우

1. 집계 요약 디자인 (스냅샷)

개별 리뷰를 보여주기 전에, 빠른 이해를 위한 단축키를 제공하세요:

• 평균 점수: 크고 눈에 띄는 숫자 (예: "4.8").
• 별 시각화: 평균을 반영한 5개 별 행.
• 총 개수: "1,240개 리뷰 기준".
• 분포 막대: 5, 4, 3, 2, 1점 리뷰의 백분율을 보여주는 세로 또는 가로 목록. 이상적으로는 상호 작용이 가능해야 합니다 (막대를 클릭하면 목록이 필터링됨).

2. 개별 리뷰 구성 확립

리뷰 카드에 visual-hierarchy-system을 적용하세요:

• 헤더: 사용자 이름 (선택적으로 익명 처리) 및 "확인된 구매" 배지.
• 평점 및 날짜: 별점과 게시 날짜.
• 제목 및 본문: 핵심 감정에 대한 굵은 제목과 설명 텍스트.
• 미디어 (선택 사항): 사용자가 업로드한 사진의 썸네일.
• 바닥글/액션: "이 리뷰가 도움이 되었나요? (예/아니오)" 및 "신고" 버튼.

3. 상호 작용 및 검색 패턴 선택

사용자가 자신에게 가장 관련성 높은 피드백을 찾을 수 있도록 지원하세요:

• 정렬: 기본값 "가장 관련성 높음" (최신성과 도움됨의 혼합). "최신순" 또는 "높은/낮은 평점순"으로 전환 가능하도록 허용.
• 필터링: "이미지 포함", "확인된 구매자만" 또는 특정 별점 수에 대한 빠른 토글 제공.

4. 피드백 입력 디자인 (양식)

수집 과정이 원활하도록 보장하세요:

• 초기 트리거: 호버 시 상태가 변경되는 크고 상호 작용 가능한 별을 사용하세요. :has() 선택자 (예: label:has(~ input:checked))로 스타일링된 별 입력의 라디오 그룹은 추가 JavaScript 없이 호버/선택됨 채우기 상태를 제공합니다.
• 점진적 공개: 별점이 선택된 후에만 텍스트 입력 영역을 표시하세요.
• 맥락적 안내: "무엇이 마음에 들거나 싫었나요?"와 같은 플레이스홀더를 사용하여 유용한 피드백을 유도하세요.

5. 콘텐츠 변동 계획

• 빈 상태: "아직 리뷰가 없습니다. 첫 리뷰를 작성해 보세요!" 상태를 디자인하세요.
• 긴 리뷰: 매우 긴 정성적 피드백에 대해 "더 읽기" 자르기 구현.
• 반응형 쌓기: 모바일에서는 분포 요약을 접을 수 있는 섹션으로 이동하거나 리뷰 목록 위에 쌓으세요.

결정 규칙

• 별의 "가늘게 뜨고 보기" 테스트: 별이 작을 때도 구별 가능해야 합니다. 배경과 대비되는 높은 명암비 색상(예: 호박색/금색)을 사용하세요.
• 확인된 구매자 우선 순위: "확인된 구매" 배지는 즉각적인 신뢰를 구축하기 위해 시각적으로 구별되어야 합니다 (종종 녹색 또는 체크 아이콘 사용).
• 평균 정밀도: 숫자 평균을 소수점 한 자리로 반올림(예: 4.7)하되, 별 행이 반 별을 시각적으로 올바르게 표현하는지 확인하세요.
• 도움됨 로직: "도움됨" 투표를 사용하여 최고의 리뷰를 표면화하되, UI가 너무 많은 보조 액션으로 복잡해지지 않도록 하세요.
• 이미지 종횡비: 사용자 업로드 리뷰 이미지에는 정사각형(1:1) 썸네일을 사용하여 리뷰 목록을 정리하세요.

제약 조건

• 접근성: 별점은 aria-label을 사용해야 합니다 (예: "5점 만점에 4점"). 상호 작용 가능한 별 입력은 키보드 접근이 가능해야 하며 role="radiogroup" 또는 이와 유사한 것을 사용하고, 각 별은 최소 24x24px (WCAG 2.2, 2.5.8)이어야 하며, 작은 별 대상이 잘못 탭하기 쉬우므로 44x44px가 권장됩니다.
• 대비: 빈 별(배경)은 페이지 배경과 3:1 대비를 유지해야 하고, 채워진 별은 배경 또는 강한 테두리와 4.5:1 대비를 유지해야 합니다.
• 반응성: 리뷰 목록은 유동적이어야 합니다. 모바일에서는 다열 리뷰 카드를 피하고 모든 메타데이터를 세로로 쌓으세요.

일반적인 실패 패턴

• "이진 별" 실수: 반 별 상태 없이 "켜짐" 또는 "꺼짐"만 있는 별을 사용하는 경우, 4.3과 같은 평균을 잘못 표현합니다.
• 숨겨진 분포: 평균 점수는 표시하지만 세부 내역을 표시하지 않아, 사용자가 부정적 리뷰와 긍정적 리뷰의 양을 볼 수 없게 합니다.
• 확인 부족: 확인된 구매자와 일반 사용자를 구별하지 못하여 전체 시스템의 신뢰도를 떨어뜨립니다.
• "리뷰 벽": 정렬 또는 필터링을 제공하지 않아 사용자가 수백 개의 관련 없는 항목을 스크롤하도록 강요합니다.
• 접근 불가능한 입력: 키보드 전용 사용자가 도달하거나 선택할 수 없는 아이콘 전용 별점 입력을 사용하는 경우.

검증 기준

• 평균 평점과 분포 요약이 존재하며 스캔 가능합니다.
• 개별 리뷰에 명확한 위계가 있습니다 (사용자 -> 평점 -> 콘텐츠).
• "확인된 구매" 상태가 시각적으로 표시됩니다.
• 대량 시나리오를 위한 정렬 및 필터링 컨트롤이 존재합니다.
• 접근성: 별점에 설명적인 ARIA 레이블이 있습니다.
• 상호 작용 가능한 평점 입력이 키보드 탐색 가능하며 포커스 상태가 있습니다.
• 레이아웃이 반응형이며 작은 화면에서 요소가 논리적으로 쌓입니다.