한 수제 비누 쇼핑몰 대표님이 울상 지으며 찾아오셨습니다. “제품은 진짜 좋은데, 사람들이 상세페이지 끝에 있는 후기까지 안 내려가고 다 나가버려요.” 원인은 간단했습니다. 모바일 화면에서 A4 용지 3장 분량의 텍스트 리뷰를 굳이 스크롤해서 읽어볼 인내심 있는 고객은 없었으니까요.
저는 즉시 길고 지루한 리뷰 목록을 지우고, 상세페이지 상단에 ‘알아서 넘어가는 후기 슬라이드(리뷰 캐러셀)’ 딱 하나를 배치했습니다. 결과는 어땠을까요? 2주 만에 구매 전환율이 2.4배나 뛰었습니다. 고객은 손가락을 아프게 움직이지 않아도, 알아서 눈앞에 스쳐 지나가는 ‘별점 5개짜리 증거’들에 마음을 연 것입니다.
이 글에서는 복잡한 자바스크립트(JS) 없이, 메모장에 복사해서 붙여넣기만 하면 끝나는 완벽한 후기 슬라이드 코드를 공유합니다. 당장 오늘 여러분의 웹사이트에 적용해 보세요.
1. 왜 ‘움직이는’ 리뷰 캐러셀이 필요할까요?
사람의 눈은 멈춰있는 글자보다 ‘움직이는 물체’에 먼저 반응하도록 진화했습니다. 웹사이트 방문자의 체류 시간은 평균 15초 남짓입니다. 그 짧은 시간 안에 우리가 던져야 할 가장 강력한 무기는 바로 ‘남들도 다 이걸 사서 만족했다’는 군중 심리(Social Proof)입니다.
“솔직히 고백하자면, 저도 예전엔 ‘플러그인’이나 ‘유료 스킨’을 사야만 이런 슬라이드 기능을 쓸 수 있는 줄 알았습니다. 하지만 복잡한 플러그인은 사이트 속도만 느리게 할 뿐이죠. 가벼운 HTML/CSS 코드 몇 줄이면 훨씬 부드럽고 빠른 슬라이드를 만들 수 있습니다.”
오늘 우리가 만들 슬라이드의 완성된 모습은 다음과 같습니다. 동그란 고객 프로필 사진이 있고, 노란색 별점(★★★★★)이 빛나며, 카드가 왼쪽으로 무한히 흘러갑니다. 그리고 가장 중요한 디테일! 고객이 마우스를 올리면 슬라이드가 일시 정지되어 편하게 리뷰를 읽을 수 있습니다.
2. 마우스만 있으면 끝나는 4단계 따라하기 (코드 복사)
겁먹을 필요 전혀 없습니다. 윈도우 기본 프로그램인 ‘메모장’과 마우스만 있으면 충분합니다. 아래의 순서대로 그대로 따라와 주세요.
- ✅ 1단계 (메모장 열기): 컴퓨터 바탕화면에서 마우스 우클릭 -> [새로 만들기] -> [텍스트 문서]를 클릭해 메모장을 엽니다.
- ✅ 2단계 (코드 복사): 바로 아래에 있는 회색 박스 안의 코드를 드래그해서 [Ctrl + C]로 복사합니다.
- ✅ 3단계 (붙여넣기): 열어둔 메모장에 [Ctrl + V]로 붙여넣습니다. (워드프레스나 티스토리를 쓰신다면, 글쓰기 창의 HTML 모드에 바로 붙여넣으셔도 됩니다.)
<!-- 후기 슬라이드 CSS -->
<style>
.review-wrapper { width: 100%; overflow: hidden; background: #f8f9fa; padding: 30px 0; }
.review-track { display: flex; width: calc(300px * 6); animation: scroll 15s linear infinite; }
.review-track:hover { animation-play-state: paused; } /* 마우스 오버 시 일시정지 */
.review-card { width: 300px; background: #fff; margin: 0 15px; padding: 20px; border-radius: 12px; box-shadow: 0 4px 10px rgba(0,0,0,0.05); flex-shrink: 0; }
.customer-info { display: flex; align-items: center; margin-bottom: 15px; }
.customer-photo { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; margin-right: 15px; }
.stars { color: #FFD700; font-size: 18px; margin-bottom: 10px; }
@keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(calc(-300px * 3)); } }
</style>
<!-- 후기 슬라이드 HTML -->
<div class="review-wrapper">
<div class="review-track">
<!-- 카드 1 -->
<div class="review-card">
<div class="customer-info">
<img src="고객사진URL_1.jpg" class="customer-photo" alt="고객 사진">
<strong>김코드 님</strong>
</div>
<div class="stars">★★★★★</div>
<p>"정말 최고의 제품입니다! 배송도 빠르고 품질도 기대 이상이에요. 재구매 의사 200% 입니다."</p>
</div>
<!-- 카드 2, 3... (이런 식으로 카드를 복사해서 이어 붙이세요) -->
</div>
</div>
3. 내 쇼핑몰/블로그에 맞게 정보 바꾸기 (커스텀)
위 코드를 사이트에 넣었다면, 이제 여러분의 진짜 고객 후기로 내용을 바꿔치기할 차례입니다. 코드에서 한글로 적힌 부분만 수정하시면 됩니다.
가장 먼저 img src="고객사진URL_1.jpg" 부분에 실제 이미지 주소를 넣어주세요. 만약 고객 사진이 없다면, 귀여운 기본 아이콘 이미지를 넣어도 좋습니다. <strong>김코드 님</strong> 부분에는 구매자 이름을 적고, 아래 <p> 태그 사이에는 정성스러운 리뷰 내용을 채워 넣으면 끝입니다.
💡 코드캠의 실전 TIP: 끊김 없는 ‘무한 반복’의 비밀
많은 분들이 놓치는 디테일이 있습니다. 슬라이드가 끝에서 뚝! 끊기지 않고 자연스럽게 무한 반복(Infinite Loop) 되게 하려면, 실제 카드 개수보다 카드를 두 배로 복사해서 넣어주어야 합니다. 예를 들어 후기가 3개라면, 똑같은 후기 3개를 뒤에 한 번 더 붙여서 총 6개를 만들어주세요. 그래야 기차가 꼬리를 물듯 자연스럽게 돌아갑니다.
적용 후 흔히 발생하는 레이아웃 깨짐 현상 체크리스트
코드를 넣었는데 슬라이드가 세로로 뚝 떨어지거나 애니메이션이 안 먹힌다면, 십중팔구 기존 웹사이트의 테마 CSS와 충돌이 난 것입니다. 당황하지 마시고 아래 두 가지를 확인해 보세요.
첫째, display: flex; 속성이 .review-track 클래스에 제대로 적용되었는지 확인하세요. 이게 없으면 카드가 가로로 나열되지 않습니다. 둘째, 사진이 타원형으로 찌그러진다면 이미지에 object-fit: cover;가 잘 들어가 있는지 체크해야 합니다. 이 속성이 사진의 비율을 예쁘게 잡아줍니다.
혹시 코드를 복사해서 넣었는데 사진이 안 나오거나 슬라이드 속도가 너무 빠르신가요? 댓글로 현재 사용 중인 플랫폼(워드프레스, 카페24, 아임웹 등)과 막히는 부분을 남겨주시면, 제가 아는 선에서 딱 맞는 해결 코드를 찾아 짚어드리겠습니다!
