랜딩페이지를 떠나려는 방문자에게 "왜 신청 안 했는지" 물어보는 Voiceform 팝업을 Claude Code로 구현했습니다.
CTO 워크샵 랜딩페이지를 만들었고, 이제 곧 오픈을 할텐데요. (👉 랜딩페이지 구경가기)
"방문자가 왜 신청 안 하고 떠나는지 이유를 수집하는걸 세팅해둬야겠다"
페이지뷰는 있는데 전환이 안 될 때, 보통은 추측으로 페이지를 수정하게 됩니다. 하지만 실제로 이탈하는 사람에게 직접 물어볼 수 있다면?
상황: 이탈 피드백을 받을 수 있는 도구를 찾아봤습니다. Hotjar, FullStory 등 여러 서비스를 검토했어요.
이렇게 요청했어요:
랜딩페이지 이탈자에게 피드백 받을 수 있는 도구 뭐가 있어?
결과: Claude가 여러 도구를 비교 정리해줬습니다. Hotjar 같은 전용 도구들도 있었지만, 저는 이미 다른 용도로 쓰고 있던 Voiceform을 선택했어요. 전용 피드백 툴은 아니지만, 음성으로 피드백을 받을 수 있다는 점이 마음에 들었거든요. 텍스트보다 음성이 더 솔직한 피드백을 받을 수 있을 것 같았습니다.
느낀 점: AI한테 도구 비교를 요청하면 빠르게 옵션을 파악할 수 있어요. 최종 선택은 내 상황에 맞게 하면 됩니다.
<!-- 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" />
상황: "사용자가 이탈하려고 할 때 팝업을 띄우고 싶다"고 했더니, Claude가 "exit intent"라는 개념을 알려줬습니다. 마우스가 브라우저 상단으로 이동하면 이탈 의도로 판단하는 방식이라고요.
왜 효과적인가:
결과: Claude가 exit intent라는 개념을 설명해주고, 마우스 이벤트를 감지해서 팝업을 띄우는 코드를 바로 만들어줬습니다.
-> 마우스를 뒤로가기 / 엑스 근처로 다가가면 팝업이 뜹니다.
상황: 팝업이 뜰 때 iframe이 로딩되면서 하얀 화면이 잠깐 보이는 문제가 있었습니다.
Voiceform 프리로드 깜빡임 방지 개선해줘
결과: Claude가 iframe을 미리 숨겨서 로드해두고, 팝업이 열릴 때만 보여주는 방식으로 수정했습니다. 로딩이 완료된 후에만 표시되도록 개선.
느낀 점: 문제 현상만 말했는데 원인 분석부터 해결책까지 알아서 제안해줬습니다.
이 경험을 바탕으로 다른 상황에도 적용할 수 있을 것 같습니다:
댓글을 작성하려면 로그인이 필요합니다.
랜딩페이지를 떠나려는 방문자에게 "왜 신청 안 했는지" 물어보는 Voiceform 팝업을 Claude Code로 구현했습니다.
CTO 워크샵 랜딩페이지를 만들었고, 이제 곧 오픈을 할텐데요. (👉 랜딩페이지 구경가기)
"방문자가 왜 신청 안 하고 떠나는지 이유를 수집하는걸 세팅해둬야겠다"
페이지뷰는 있는데 전환이 안 될 때, 보통은 추측으로 페이지를 수정하게 됩니다. 하지만 실제로 이탈하는 사람에게 직접 물어볼 수 있다면?
상황: 이탈 피드백을 받을 수 있는 도구를 찾아봤습니다. Hotjar, FullStory 등 여러 서비스를 검토했어요.
이렇게 요청했어요:
랜딩페이지 이탈자에게 피드백 받을 수 있는 도구 뭐가 있어?
결과: Claude가 여러 도구를 비교 정리해줬습니다. Hotjar 같은 전용 도구들도 있었지만, 저는 이미 다른 용도로 쓰고 있던 Voiceform을 선택했어요. 전용 피드백 툴은 아니지만, 음성으로 피드백을 받을 수 있다는 점이 마음에 들었거든요. 텍스트보다 음성이 더 솔직한 피드백을 받을 수 있을 것 같았습니다.
느낀 점: AI한테 도구 비교를 요청하면 빠르게 옵션을 파악할 수 있어요. 최종 선택은 내 상황에 맞게 하면 됩니다.
<!-- 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" />
상황: "사용자가 이탈하려고 할 때 팝업을 띄우고 싶다"고 했더니, Claude가 "exit intent"라는 개념을 알려줬습니다. 마우스가 브라우저 상단으로 이동하면 이탈 의도로 판단하는 방식이라고요.
왜 효과적인가:
결과: Claude가 exit intent라는 개념을 설명해주고, 마우스 이벤트를 감지해서 팝업을 띄우는 코드를 바로 만들어줬습니다.
-> 마우스를 뒤로가기 / 엑스 근처로 다가가면 팝업이 뜹니다.
상황: 팝업이 뜰 때 iframe이 로딩되면서 하얀 화면이 잠깐 보이는 문제가 있었습니다.
Voiceform 프리로드 깜빡임 방지 개선해줘
결과: Claude가 iframe을 미리 숨겨서 로드해두고, 팝업이 열릴 때만 보여주는 방식으로 수정했습니다. 로딩이 완료된 후에만 표시되도록 개선.
느낀 점: 문제 현상만 말했는데 원인 분석부터 해결책까지 알아서 제안해줬습니다.
이 경험을 바탕으로 다른 상황에도 적용할 수 있을 것 같습니다:
댓글을 작성하려면 로그인이 필요합니다.
