웹 퍼포먼스 최적화와 유저 행동 분석으로 전환율을 끌어올린 방법
이 글에서 다루는 내용
서비스 성과를 높이려면 빠른 페이지 로딩 속도와 효과적인 UI/UX 설계가 필수입니다. 캐시노트플러스 멤버십의 혜택 페이지 운영 과정에서, 느린 분기 처리와 비효율적인 유저 이동 방식이 문제였고, 이를 개선하여 유저 경험(UX)과 전환율을 크게 향상시킨 사례를 소개합니다.
개선 핵심 요약
트래픽 분기 최적화 → 빠른 유저 이동
- 기존: CSR 후 XHR 요청을 통해 분기 → 최대 3번의 페이지 갱신으로 느린 로딩
- 개선: Next.js API 핸들러에서 서버사이드에서 분기 처리 → 1번의 302 리디렉션으로 빠른 이동
- 결과: 유입 경로 통합, UX 개선, 유지보수 용이성 증가
유저 행동 분석을 통한 UI 개선
- Datadog RUM의 Heatmap & Scrollmap 분석
- 많은 유저가 클릭을 시도한 비활성 UI를 CTA 버튼으로 변경
- 스크롤 깊이 데이터 분석 → 상단에 중요한 정보 배치하여 이탈 방지
- 결과: 전환율 2.06% → 3.3%, 가입 페이지 내 전환율 3.51% → 6.16% 상승
이 글에서는 위 개선 과정을 자세히 설명합니다.
- 기존 방식의 문제점과 성능 병목
- Next.js API 핸들러 기반 리디렉션으로 트래픽 최적화
- Heatmap & Scrollmap 기반의 유저 행동 분석과 UI 개선 과정
- 비즈니스 지표(전환율) 개선 결과
어떻게 웹 퍼포먼스를 개선하고 유저 경험을 최적화했는지 자세히 살펴보겠습니다.
트래픽 라우팅 최적화 – 빠른 유저 이동을 위한 개선
캐시노트플러스 멤버십에서 제공하는 혜택들을 유저에게 소구하기 위해 혜택마다 랜딩 페이지를 운용하고 있습니다.
혜택별 랜딩페이지와 고객 유형별 랜딩페이지(고급형 전환 등), 프로모션 이벤트 페이지 등 수많은 유입 경로를 통해 고객에게 가장 최적화된 니즈 포인트를 찾아 멤버십 가입을 유도하고 있습니다.
유저 조건 또는 정책에 맞추어 트래픽을 각 페이지에 라우트하는 방식을 어떻게 하면 유저에겐 쾌적하고 빠른 경험을, 관리자에겐 더 나은 유지보수성을 제공할 수 있을까요?
기존엔 어떤 방식으로 분기되고 잇었는지, 그래서 무엇을 개선하였는지 설명드리겠습니다.
기존 트래픽 처리 방식 – 느린 유저 이동과 유지보수 문제
인계 이전 기존 캐시노트플러스 멤버십의 분기 처리는 CSR을 통해 렌더링 후 XHR fetching으로 조건 분기를 위한 응답값들을 일일히 비교하여 리다이렉션을 하고 있었습니다.
유저가 목적지에 도착하기까지 브라우저 페이지는 최소 3번 갱신되며 API 서버까지의 라운드 트립도 HTTPS 통신과 public domain으로 접근하기 때문에 지연이 발생할 여지가 많았습니다.
외부 통신은 HTTPS 통신이 필수이기 때문에 통신을 위한 TLS 레벨의 TCP connection도 이루어져야 합니다.
Next.js API 라우트 기반 트래픽 최적화 – 빠른 분기 처리
유저 식별 정보는 header credential을 통해 얻어내어 Next.js API 핸들러에서 조건 분기를 위한 통신 batch 수행 후 리디렉션 정보를 반환하는 방식의 현행 구조입니다.
만약 인바운드 트래픽에 ?referrer={...} 등의 요청 식별자 기준 리디렉션 정책은 사이클 앞단에 두어 early return을 수행하게 됩니다.
HTTP internal 통신으로 같은 VPC 내부의 Next.js 인스턴스와 API의 ALB가 직접 소통합니다. 방화벽 내부에서의 subnet간 통신이라 TLS 레이어를 사용할 필요가 없으며 훨씬 빠르게 응답을 받을 수 있게 됩니다.
Next.js 서버사이드에서 request batch가 모두 수행되면 조건을 판단하여 해당 주소로 302 temporary redirect 응답을 내려주고 클라이언트는 해당 주소로 라우트 이동을 하게 됩니다.
302 응답 코드를 사용하는 이유는 301 응답 코드를 사용했을때 브라우저에서 해당 리디렉션을 기억하고 있는 로컬 캐싱 문제가 있기 때문에 302를 사용하였습니다.
또한 /api/precheck 이라는 특정 프로모션이나 피쳐에 종속되지 않은 엔드포인트를 운용할 수 있기 때문에 추후 정책이 변경되더라도 이미 deploy 된 링크들을 컨트롤 할 수 있게 됩니다.
정리하면 위 개선 방식으로 아래의 이점을 얻을 수 있었습니다.
- 프로모션, 혜택마다 무수히 많았던 URL을 하나의 URL로 통합하여 유지 및 관리 측면에서 유리합니다.
- 브라우저 측에선 리디렉션 요청 단 한번만으로 목적지까지 이동할 수 있기 때문에 유저에게 쾌적하고 빠릅니다.
- 유저 정보 획득 및 분기 과정을 서버사이드에서 처리하기 때문에 해당 코드가 웹으로 노출시키지 않아도 됩니다.
트래픽 라우팅 개선 결과
- 기존 플로우와 비교하여 진입 후 웹뷰 TTI 지표
5000ms+→1000ms내외로 대폭 단축 (에이전트 트래픽 기반 측정 기준) - 렌더링 후 리디렉션 반복으로 인한 화면 플리커링 제거
유저 행동 데이터 분석을 통한 UI 개선 – CTA 버튼 최적화
그동안 멤버십 가입으로 이어지는 CTA 버튼은 스크롤 하단(Below the fold)에 위치해 있었습니다. 멤버십과 관련된 설명을 모두 본 후 유저가 버튼을 누를 것이라는 가정으로 만들어진 시안이었습니다.
현재 캐시노트플러스의 거의 모든 랜딩페이지의 user nudging 영역은 가입 팝업, 다이얼로그, 리디렉션 등 인터랙션이 Above the fold 영역에 위치해 있습니다.
| 마켓 쿠폰 넛징 | 쿠폰 타입 | 특정 피쳐 설명 |
|---|---|---|
 |  |  |
시안 전반에 이런 요소를 넣은 이유의 배경은 아래와 같습니다.
| heatmap | scrollmap(distribution) | scrollmap(scroll minimap) |
|---|---|---|
 |  |  |
유저가 화면을 어떻게 사용하고 있는지 파악하기 위해 Datadog RUM의 내장 기능인 heatmap과 scroll map을 사용하여 유저의 체류시간, 어떤 인터랙션을 기대하는지, 스크롤은 얼마나 내려가는지를 모니터링 하였습니다.
원래 저 부분은 버튼이 아니라 ‘버튼 처럼 생긴(button-like)' 헤더 섹션입니다. 하지만 많은 유저분들이 저 부분을 클릭하고 무언가 인터랙션이 일어나길 기대하는 것으로 보입니다. (heatmap의 frequency가 가장 높았습니다.)
그리고 랜딩페이지를 끝까지 봐주시는 유저는 25%에 불과하다는 사실도 발견하였습니다. 예상보다 많은 수치였지만 heatmap과 scrollmap을 토대로 Average fold 상단에서 유저에게 메시지를 확실히 전달하고 가입 전환까지의 인터랙션을 요소를 넣도록 제안을 드렸습니다.
최종 개선 결과 – 전환율 상승 및 UX 개선 효과
- 신규가입 전체 전환율 월평균 2.06% -> 2023년 10월 26일 기준 3.3% (최종 1.3%p 상승)
- 가입페이지에서 가입 전환율 3.51% -> 2023년 10월 26일 기준 6.16% (최종2.65%p 상승)
결론: 더 나은 유저 경험이 곧 비즈니스 성과로 연결된다
웹 퍼포먼스 개선과 유저 행동 분석을 통해 얻은 가장 중요한 교훈은, 유저 경험(UX)이 좋아질수록 비즈니스 성과도 함께 상승한다는 것입니다.
유저가 원하는 목적지에 더 빠르게 도착할 수 있도록 최적화
- Next.js API 라우트를 활용해 중앙화된 트래픽 분기 처리를 적용하고, 서버사이드에서 분기하여 클라이언트의 불필요한 요청을 줄였습니다.
- 이를 통해 빠르고 직관적인 서비스 경험을 제공하면서 유지보수도 용이해졌습니다.
프론트엔드 경계를 넘어 전체적인 최적화를 고민해야 한다
- 단순한 UI 최적화가 아니라, 라우팅과 네트워크 요청까지 고려한 아키텍처 최적화가 필요합니다.
- 프론트엔드 개발자는 단순히 화면을 그리는 것을 넘어, 서버와의 연결, 트래픽 흐름까지 설계하며 최적화할 수 있습니다.
유저의 행동을 모니터링하고 지속적으로 해석해야 한다
- Heatmap과 Scrollmap 분석을 통해 유저가 실제로 어떻게 행동하는지 데이터를 기반으로 개선할 수 있었습니다.
- 유저가 기대하는 인터랙션을 파악하고, 이를 서비스에 반영하는 과정이 전환율 상승으로 이어졌습니다.
기술적 최적화와 데이터 기반 UX 개선은 단순한 성능 개선을 넘어, 비즈니스 성과에도 직접적인 영향을 미칩니다.
프론트엔드 개발자로서 단순한 UI 개발을 넘어 서비스의 전체 흐름을 고민하고, 유저 경험을 지속적으로 관찰하며 최적화해야 합니다.
이러한 노력들이 모여 더 빠르고, 더 직관적이며, 더 만족스러운 서비스를 만들어 나가게 됩니다.
