한줄 요약
랜딩페이지를 떠나려는 방문자에게 "왜 신청 안 했는지" 물어보는 Voiceform 팝업을 Claude Code로 구현했습니다.
우선 결과부터 보시죠.
스크롤을 내리다가 이탈하려고 브라우저 위쪽으로 마우스를 옮기면 (뒤로가기 혹은 엑스 버튼 클릭) 설문 폼이 뜹니다.
이런 분들께 도움돼요
개발자 없이 랜딩페이지에 기능을 직접 추가하고 싶은 분
AI로 반복적인 개발 업무를 자동화하고 싶은 실무자
랜딩페이지 전환율을 높이기 위해 이탈 원인을 파악하고 싶은 마케터
문제 상황 (Before)
CTO 워크샵 랜딩페이지를 만들었고, 이제 곧 오픈을 할텐데요. (👉 랜딩페이지 구경가기)
"방문자가 왜 신청 안 하고 떠나는지 이유를 수집하는걸 세팅해둬야겠다"
페이지뷰는 있는데 전환이 안 될 때, 보통은 추측으로 페이지를 수정하게 됩니다. 하지만 실제로 이탈하는 사람에게 직접 물어볼 수 있다면?
사용한 도구
도구명: Claude Code (CLI 버전)
모델: Opus
연동 서비스: Voiceform (음성/텍스트 피드백 수집 서비스)
AI와 협업한 과정
1. 피드백 수집 도구 리서치
상황: 이탈 피드백을 받을 수 있는 도구를 찾아봤습니다. Hotjar, FullStory 등 여러 서비스를 검토했어요.
이렇게 요청했어요:
랜딩페이지 이탈자에게 피드백 받을 수 있는 도구 뭐가 있어?
결과: Claude가 여러 도구를 비교 정리해줬습니다. Hotjar 같은 전용 도구들도 있었지만, 저는 이미 다른 용도로 쓰고 있던 Voiceform을 선택했어요. 전용 피드백 툴은 아니지만, 음성으로 피드백을 받을 수 있다는 점이 마음에 들었거든요. 텍스트보다 음성이 더 솔직한 피드백을 받을 수 있을 것 같았습니다.
느낀 점: AI한테 도구 비교를 요청하면 빠르게 옵션을 파악할 수 있어요. 최종 선택은 내 상황에 맞게 하면 됩니다.
도구
가격
특징
추천 상황
무료~$32/월
뷰저블과 유사 + 피드백 위젯
이미 뷰저블 있으면 중복
$19.99/월~
Nudge™ 마이크로 서베이, AI 분석
가장 추천
무료~$99/월
부분 응답도 수집, 30+ 연동
HubSpot 사용 시
무료
히트맵+녹화 (피드백 위젯 없음)
예산 0원일 때
무료
임베드 가능 폼, 노션 스타일
초간단 구현
Voiceform생성
객관식 질문 (왜 신청을 안 하려고 하는지)
다음 단계 - 추가로 답변해주면 커피 쿠폰을 준다고 함
수락 → 음성 질문 쪽으로 이동해서 AI 음성 인터뷰를 짧게 하게 됨
거절 → 바로 제출됨
랜딩페이지에 Voiceform 설문 삽입
Share > Embed in a webpage 에서 원하는 형태로 삽입 가능
popup 방식을 선택함
<!-- Include the Voiceform script in the <head> of your page, if not already included -->
<script src="<https://cdn.voiceform.com/widgets/next/widgets.umd.js>"></script>
<!-- Insert the Voiceform widget code within the <body> of your HTML document -->
<vf-widget
data-vf-btn-label="Speak up" data-vf-btn-color="#0066FF" data-vf-btn-style="filled" data-vf-btn-size="medium" data-vf-btn-border-radius="4px" data-vf-btn-fonts-size="16px" data-vf-btn-icon-only="false" data-mode="popup" data-hash="ChVzv9LMatvVWuPM" />
위와 같은 코드를 얻을 수 있음
클로드코드에게 넣어달라고 하면 해줍니다.
2. Exit Intent 개념 학습 및 구현
상황: "사용자가 이탈하려고 할 때 팝업을 띄우고 싶다"고 했더니, Claude가 "exit intent"라는 개념을 알려줬습니다. 마우스가 브라우저 상단으로 이동하면 이탈 의도로 판단하는 방식이라고요.
마우스가 브라우저 상단 밖으로 이동 시 (clientY < 0)
30일 내 이미 본 사용자는 제외 (localStorage)
이미 전환(신청)한 사용자는 제외
왜 효과적인가:
이미 떠나려는 사람 → 추가 방해 아님
전환 장벽을 직접적으로 파악
응답률 15-25% (일반 팝업 대비 3-5배)
결과: Claude가 exit intent라는 개념을 설명해주고, 마우스 이벤트를 감지해서 팝업을 띄우는 코드를 바로 만들어줬습니다.
-> 마우스를 뒤로가기 / 엑스 근처로 다가가면 팝업이 뜹니다.
3. 팝업 깜빡임 문제 해결
상황: 팝업이 뜰 때 iframe이 로딩되면서 하얀 화면이 잠깐 보이는 문제가 있었습니다.
이렇게 요청했어요:
Voiceform 프리로드 깜빡임 방지 개선해줘
결과: Claude가 iframe을 미리 숨겨서 로드해두고, 팝업이 열릴 때만 보여주는 방식으로 수정했습니다. 로딩이 완료된 후에만 표시되도록 개선.
느낀 점: 문제 현상만 말했는데 원인 분석부터 해결책까지 알아서 제안해줬습니다.
4. 뷰저블 트래킹 코드로 정량 지표 수집
이탈하려는 고객의 정량/정성 피드백 외에 실제로 우리 사이트에서 어떻게 행동하는지를 추가로 수집하고 싶었습니다.
뷰저블이라는 서비스를 활용했고 (뷰저블 링크) - 트래킹 코드라는 것을 받아서 만들어둔 랜딩페이지에 삽입하면 1-2시간 후부터는 데이터를 차곡차곡 쌓아서 볼 수 있습니다.
트래킹 코드도 복붙한 다음 클로드코드한테 붙여달라고 하기...
클릭, 마우스 이동, 스크롤 뎁스, 체류시간, 가장 많이 눌러본 영역, 모바일/PC에서의 행동 비교, 신규/재방문 유저 행동 등을 확인할 수 있어요.
이렇게 Voiceform 응답 / 뷰저블 데이터를 기반으로 고객 데이터를 수집하고, 추후에는 이 데이터를 바탕으로 A/B 테스트까지 진행해볼 수 있을 것 같습니다.
결과 (After)
Before vs After
항목
Before
After
이탈 피드백 수집
불가능
이탈 시 자동 팝업
구현 소요 시간
1~2주 (개발팀 요청)
하루
수정 대응
재요청 필요
바로 수정 가능
결과물
사용자가 페이지를 떠나려고 하면 자연스럽게 Voiceform 피드백 팝업이 표시됩니다
"왜 신청을 안 하셨나요?" 같은 질문으로 실제 이탈 원인을 수집할 수 있게 됐습니다
다른 업무에 적용한다면?
이 경험을 바탕으로 다른 상황에도 적용할 수 있을 것 같습니다:
뉴스레터 구독 팝업: 스크롤 일정 % 이상 내리면 구독 폼 표시
할인 쿠폰 팝업: 특정 시간 이상 체류 시 쿠폰 제공
앞으로의 계획
템플릿화: 이번에 만든 랜딩페이지 + Voiceform 구조를 템플릿으로 만들어서 다른 프로젝트에도 재사용 예정
피드백 분석: 수집된 피드백을 바탕으로 랜딩페이지 개선 진행
