복잡한 예약 과정을 3단계로 단축하여 결제 이탈률을 20% 개선하다
상세페이지 정보 구조 재설계 및 Sticky CTA 도입을 통한 구매 전환 개선 프로젝트
The Challenge
"방문자는 많은데, 왜 결제 버튼을 누르지 않을까요?"
로컬트립의 상세페이지 이탈률은 85%에 육박했습니다. GA4 데이터와 히트맵 분석 결과, 사용자는 '예약하기' 버튼을 찾기 위해 스크롤을 여러 번 위아래로 움직이는 패턴을 보였으며, 날짜와 인원을 선택하는 과정에서 오류를 경험하고 이탈하는 비율이 높았습니다.
- 분산된 옵션 UI: 날짜, 인원, 추가 선택 항목이 페이지 곳곳에 흩어져 있어 사용자의 인지 부하가 높음.
- 낮은 CTA 접근성: 긴 상세 설명을 읽고 나면 '구매 버튼'이 보이지 않아 다시 최상단으로 스크롤해야 하는 불편함.
The Process
데이터 기반 병목 구간 발견
스크롤 깊이(Scroll Depth) 데이터와 클릭 히트맵을 분석하여, 사용자가 가장 많이 이탈하는 구간이 '상세 설명 하단'임을 특정했습니다. 구매 의사결정이 일어나는 순간에 적절한 행동 유도 장치가 부재함을 확인했습니다.
Sticky CTA 및 바텀시트 도입
스크롤 위치와 관계없이 항상 하단에 노출되는 'Sticky CTA' 버튼을 도입했습니다. 버튼 클릭 시 페이지 이동 없이 바로 옵션을 선택할 수 있는 '바텀시트(Bottom Sheet)' UI를 적용하여 결제 뎁스(Depth)를 3단계에서 1단계로 단축했습니다.
A/B 테스트 및 검증
기존 안(A)과 개선 안(B)을 50:50으로 노출하는 A/B 테스트를 2주간 진행했습니다. '예약하기' 버튼 클릭률(CTR)과 최종 결제 완료율을 핵심 지표로 모니터링했습니다.
4
The Result
옵션 선택 단계에서의 이탈률이 기존 대비 20% 감소했습니다.
최종 결제 완료율이 상승하여 월 매출이 유의미하게 증가했습니다.
"저희 내부 팀에서는 단순히 '디자인이 트렌디하지 않아서'라고만 생각했는데, 문제는 '구조'에 있었다는 것을 명확하게 짚어주셨습니다. 개선 후 실제 매출 그래프가 꺾이는 것을 보고 놀랐습니다. 다음 프로젝트도 맡기고 싶습니다."