Rating

Rating (레이팅)

Rating은 사용자의 만족도(sentiment)를 전달하는 요소예요. 또한 고객이 상품이나 서비스의 가치를 가늠할 수 있게 도와줘요. 별점이나 평가 점수를 통해 '다른 사람들이 어떻게 생각했는지'를 한눈에 알려주는 역할을 해요.

출처: React Rating 문서

본문

Types (유형)

Rating display — 이 형식은 아이콘 전체 세트를 평가 점수와 리뷰 개수와 함께 보여줘서, 사용자에게 명확하고 상세한 화면을 제공해요. 더 많은 정보를 담을 공간이 충분할 때 잘 어울려요.

Rating — 사용자가 상호작용해 자신의 경험을 평가할 수 있는 윤곽선(outlined) 스타일의 레이팅이에요. 윤곽선 스타일은 피드백을 제공하기 위해 클릭 가능하다는 것을 보여줘요.

Rating display, compact — 이 버전은 레이팅을 숫자 점수와 리뷰 개수가 있는 하나의 아이콘으로 압축해서, 좁은 공간에서도 핵심 정보를 계속 보여주기에 적합해요.

Behavior (동작)

Interaction (상호작용)

레이팅 컴포넌트에는 hover(마우스를 올렸을 때), focus(포커스), pressed(누름) 상태가 있어요. 상호작용형 레이팅의 기본 크기는 XLarge예요.

Rating display는 이미 제출된 레이팅을 보여주는 데 사용되며 상호작용하지 않아요.

Appearance (모양)

레이팅 아이콘은 세 가지 방식으로 나타날 수 있어요 — 비어 있음(empty), 부분 채움(partially filled), 채움(filled).

Default (empty) — 비어 있음

Partially filled (0.5 step) — 부분 채움 (0.5 단계)

Filled — 채움

Shape (모양)

레이팅 아이콘은 별(star), 원(circle), 사각형(square) 등 다양한 형태로 나타날 수 있어요.

Star — 별

Circle — 원

Square — 사각형

Layout (레이아웃)

컴포넌트는 Fluent 아이콘과 같은 척도로 크기가 정해지며, 기본 크기는 16이고 최대는 20이에요. 사용자 입력을 요청할 때는 XLarge 변형을 사용하세요.

Small

Medium

Large

Large

Accessibility (접근성)

Contrast ratio (대비 비율)

별점 레이팅은 Foreground(전경) 대 Background(배경), 그리고 Selected(선택됨) 대 Unselected(선택 안 됨) 모두에서 3:1 비율을 유지해야 해요. 단, 레이팅 값이 명시적(예: 3.5)이고 시각적으로 숨겨진(classe visually hidden) 클래스가 적용되면 이 요구사항은 우회할 수 있어요. 이 조건이 충족되면 레이팅 그래픽은 정보적 가치를 지니지 않게 되죠. 또한 상호작용 상태에서 Marigold 같은 밝은 색으로 레이팅 값 슬롯을 사용해서, 그래픽에만 의존하지 않아도 이해를 돕는 것을 고려하세요.

더 알아보기 (Learn more)

• Rating 스토리북 및 React 가이드: react.fluentui.dev
• 상호작용형 레이팅에는 XLarge 크기, 표시용에는 compact 표시를 활용하세요
• 색상 대비와 접근성 요구사항은 Fluent 2 색상 가이드 참고