JS 없이 순수 CSS로 리뷰 블로그에 별점 삽입하는 법 4단계
"CSS 별점"은 JavaScript 없이 순수 HTML과 CSS만으로 구현할 수 있다. 리뷰 글에 별점 위젯을 넣으면 시각적 신뢰도가 올라가고, 구조화 데이터(Schema.org)와 함께 설정하면 구글 검색 결과에 별점이 직접 노출된다. 클릭률(CTR)이 평균 20~30% 상승하는 효과가 있다.
리뷰 블로그를 운영하면서 별점을 넣고 싶었는데 JavaScript 라이브러리를 쓰기엔 부담스럽고, 그냥 ★ 기호를 복붙하자니 너무 투박한 느낌이 들었던 적이 있을 거다. "CSS 별점"으로 검색하면 복잡한 코드만 나오고 설명도 불친절하다. 이 글에서는 초보자도 바로 복붙해서 쓸 수 있는 CSS 별점 코드 4단계를 정리했다.
CSS 별점 구현의 기본 원리
"CSS 별점"의 핵심은 두 레이어의 겹침이다. 회색 별(★★★★★)을 전체 배경으로 깔고, 그 위에 노란 별을 원하는 점수 비율(%)만큼 `clip-path`나 `width`로 덮는다. 예를 들어 4점이면 노란 레이어가 80% 너비로 회색 별을 덮는 방식이다. 이 방법은 소수점 별점도 깔끔하게 처리할 수 있어서 많이 쓰인다.
또 다른 방법은 라디오 버튼과 CSS `~` 인접 선택자를 조합해서 인터랙티브 별점을 만드는 방식이다. JS 없이 클릭으로 별점을 선택할 수 있는 방법인데, 리뷰 블로그에서 표시 전용으로만 쓴다면 더 단순한 정적 방법이 낫다.
정적 별점 (표시 전용) 만들기
가장 실용적이고 간단한 방법이다. 리뷰 글에 "이 제품은 4.5점"처럼 고정된 별점을 보여줄 때 쓴다.
/* CSS */
.star-rating {
position: relative;
display: inline-block;
font-size: 28px;
line-height: 1;
vertical-align: middle;
}
.star-bg {
color: #ddd;
letter-spacing: 2px;
}
.star-fill {
position: absolute;
top: 0;
left: 0;
white-space: nowrap;
overflow: hidden;
color: #FFD700; /* 골드 색상 */
letter-spacing: 2px;
}
.rating-text {
font-size: 14px;
color: #555;
margin-left: 8px;
vertical-align: middle;
}
style 속성의 `width` 값만 바꾸면 점수를 자유롭게 조정할 수 있다. 4점이면 80%, 3.5점이면 70%, 4.5점이면 90%다. 5점 만점 기준으로 (점수 ÷ 5) × 100 = %다.
유니코드 별표로 만드는 간단 버전
더 단순하게 HTML 특수문자만으로도 만들 수 있다. 코드 한 줄로 처리하고 싶을 때 유용하다.
★★★★ ★ 4.0
이 방법은 코드가 단순하지만 0.5점 단위를 깔끔하게 표현하기 어렵다는 단점이 있다. 정수 점수만 표시해도 충분한 리뷰라면 이 방법이 가장 빠르다.
반별점(0.5점) 처리하는 법
첫 번째 방법(겹침 레이어 방식)을 쓰면 width 값만으로 반별도 자연스럽게 표현된다. `width: 70%`면 3.5점이 된다. 하지만 유니코드 방식에서 반별을 표현하고 싶다면 half-star 유니코드를 쓰는 방법도 있다.
/* 반별 CSS */
.half-star {
position: relative;
display: inline-block;
color: #ddd;
font-size: 28px;
}
.half-star::before {
content: '★';
position: absolute;
left: 0;
top: 0;
width: 50%; /* 절반만 노란색으로 */
overflow: hidden;
color: #FFD700;
}
이 방법으로 정확히 절반 별표(반별)를 만들 수 있다. `content: '★'`을 before에 넣고 `width: 50%`로 절반만 보이게 하는 트릭이다.
구조화 데이터(JSON-LD)로 구글 검색에 별점 노출하기
이 부분이 "CSS 별점"의 진짜 가치다. 시각적 별점과 함께 JSON-LD 구조화 데이터를 페이지에 추가하면 구글 검색 결과에서 별점과 평점이 스니펫으로 노출된다. 다른 검색 결과 대비 클릭률이 확연히 올라간다.
이 코드를 `` 또는 `` 내 어디든 넣으면 구글 크롤러가 인식한다. 구글 Search Console의 리치 결과 테스트(search.google.com/test/rich-results)에서 검증할 수 있다.
모바일 최적화와 접근성 처리
모바일에서 별점이 너무 작으면 구분이 안 된다. 최소 font-size 24px 이상을 유지해야 모바일에서 별점이 명확히 보인다. 접근성을 위해 `aria-label`도 추가해야 한다. 시각 장애인용 스크린 리더가 "별점 4.5점"처럼 읽어줄 수 있도록 처리한다.
참고 출처
- Schema.org Review 마크업
- Google 구조화 데이터 가이드
- MDN Web Docs – CSS position
- Google Rich Results Test
- WAI-ARIA roles