레이팅

컴포넌트

레이팅

Rating

레이팅은 별 같은 아이콘을 여러 개 늘어놓고 그중 몇 개를 선택해 점수를 매기는 입력 방식입니다.

3 / 5
별에 올리면 미리보기, 누르면 확정됩니다.

정의

레이팅은 별 같은 아이콘을 여러 개 늘어놓고 그중 몇 개를 선택해 점수를 매기는 입력 방식입니다. 가장 익숙한 형태는 다섯 개의 별로, 마우스를 별 위에 올리면 그 지점까지 미리 채워져 어떤 점수가 될지 보여 주고, 실제로 누르면 그 값으로 점수가 확정됩니다. 올려 보는 미리보기와 눌러서 정하는 확정을 나누어 두는 것이 레이팅의 특징입니다. 별점을 매기는 입력용으로만 쓰이는 것은 아니고, 이미 매겨진 평균 평점을 보여 주기만 하는 표시 전용으로도 자주 등장합니다. 이 둘의 목적은 분명히 다르며, 누를 수 있는지 없는지를 사용자가 헷갈리지 않도록 겉모습부터 구분해 주어야 합니다.

왜 중요한가

레이팅이 중요한 이유는 복잡한 평가를 아주 단순한 동작 하나로 압축해 주기 때문입니다. 사용자는 긴 문장을 쓰지 않고도 별 몇 개만 눌러 만족도를 표현할 수 있어, 참여의 문턱이 크게 낮아집니다. 그렇게 모인 평점은 다른 사용자에게는 선택을 돕는 강력한 근거가 됩니다. 우리는 낯선 상품이나 콘텐츠를 고를 때 평균 별점과 평가 수를 먼저 훑어보고 신뢰 여부를 빠르게 판단합니다. 즉 레이팅은 한쪽에서는 손쉬운 표현 수단이고 다른 쪽에서는 압축된 신뢰 정보라, 적은 노력으로 서비스 전체에 값진 데이터를 쌓아 주는 작지만 영향력이 큰 요소입니다. 그래서 정확하고 정직하게 다루는 것이 중요합니다.

흔한 실수

  • 호버 미리보기와 확정 클릭을 구분하지 않는 경우입니다. 마우스를 올린 것만으로 점수가 정해지거나, 반대로 눌러도 변화가 없으면 사용자는 자신이 몇 점을 준 것인지 확신하지 못하고 헷갈려하며, 결국 원치 않는 값이 남는 실수로 이어집니다.
  • 표시 전용 평점을 입력처럼 보이게 만드는 경우입니다. 누를 수 있을 것 같은 별을 눌렀는데 아무 일도 없으면 고장 난 것으로 오해합니다.
  • 한 번 매긴 점수를 되돌리거나 다시 고칠 방법을 주지 않는 경우입니다. 실수로 잘못 누른 사용자가 값을 수정하지 못하면, 다음부터 아예 평가를 남기지 않게 됩니다.

실무 팁

  • 올려 보는 미리보기와 눌러서 정하는 확정을 분명히 나누세요. 미리보기 상태와 확정 상태를 색이나 채움으로 다르게 보여 주면, 잘못 누르는 실수가 줄고 사용자가 자기 선택을 확신하게 됩니다.
  • 점수를 보여 주기만 하는 표시용과 실제로 입력받는 입력용을 명확히 구분하세요. 표시 전용이라면 커서 모양이나 크기로 누를 수 없다는 인상을 주어, 사용자가 괜히 눌러 보고 반응이 없다고 당황하는 일을 막아야 합니다.
  • 접근성을 위해 별 그림과 함께 숫자 값도 제공하세요. 별 다섯 중 넷 처럼 텍스트로도 읽히면 화면 낭독기 사용자와 반 개 단위 표현 모두에 도움이 되고, 검색이나 정렬에도 그 값을 그대로 활용할 수 있습니다.

관련 개념