한줄 요약
랜딩페이지 섹션 순서를 테스트하고 싶었는데, A/B 테스트 방법을 전혀 몰랐지만 Claude Code와 대화하며 30분 만에 구현하고 뷰저블에서 결과까지 볼 수 있게 됐습니다.
이런 분들께 도움돼요
A/B 테스트를 해보고 싶지만 개발 리소스가 없는 비개발자
Optimizely, VWO 같은 유료 도구 없이 직접 구현하고 싶은 분
이미 뷰저블 같은 분석 도구를 쓰고 있 어서 거기서 A/B 결과도 보고 싶은 분
문제 상황 (Before)
랜딩페이지를 만들었는데, 섹션 순서가 최적인지 확신이 없었습니다.
특히 웹비나 신청 섹션이 페이지 거의 맨 아래(가격 섹션 뒤)에 있었는데, Case Study에서 성과를 본 직후에 웹비나로 연결하면 전환율이 더 높아지지 않을까 하는 가설이 있었어요.
테스트하고 싶었던 섹션
이미 뷰저블로 고객 행동 데이터를 수집하고 있었고, Voiceform으로 고객 설문도 받고 있었습니다. 여기에 A/B 테스트만 추가할 수 있다면 데이터 기반으로 랜딩페이지를 개선할 수 있을 것 같았어요.
문제는... A/B 테스트를 한 번도 해본 적이 없다는 것.
사용한 도구
도구명: Claude Code (CLI)
모델: Claude Opus 4.5
특이사항: 이 랜딩페이지 자체를 Claude Code로 만들어서, 코드 맥락을 이미 알고 있었음
AI와 협업한 과정
1. A/B 테스트 방법 론 탐색
상황: A/B 테스트가 뭔지는 알지만, 실제로 어떻게 구현하는지 전혀 몰랐습니다.
이렇게 요청했어요:
지금 만들어진 랜딩페이지 A/B 테스트를 하고 싶은데 보통 어떤 식으로 해? 2개의 URL을 만드는 건 좀 불편할 것 같긴 한데
결과: 3가지 방법을 비교해서 보여줬어요.
느낀 점: 여러 방법을 비교해주니까 내 상황에 맞는 걸 고르기 쉬웠어요. "뷰저블에서도 결과를 보고 싶다"고 했더니 URL 파라미터 방식을 추천해줬습니다.
2. 테스트 설계
상황: 방법은 정했는데, 구체적으로 뭘 테스트할지 정해야 했어요.
이렇게 요청했어요:
섹션 순서 변경을 하고 싶어. 현재 뷰저블에서 고객 데이터를 수집 중인데 뷰저블에도 A/B 테스트 결과가 보이면 좋겠어.
결과: 테스트 설계를 같이 해줬어요.
A안 (Control): 현재 순서 - 웨비나가 가격 섹션 뒤
B안 (Variant): 웨비나를 Case Study 바로 다음으로 이동
트래픽 분배: 50:50
측 정 지표: 웹비나 신청, 워크샵 결제
3. 구현 및 배포
상황: 설계가 끝나고 실제 구현 단계
이렇게 요청했어요:
URL 파라미터 + 쿠키 방식으로 구현해줘
결과:
랜딩페이지에 A/B 테스트 코드 추가
방문자가 자동으로 50:50 배정
URL에 ?v=a 또는 ?v=b가 붙어서 뷰저블에서 구분 가능
Vercel 배포까지 완료
소요 시간: 약 30분
4. [여기서 병목] 뷰저블 URL Split 연동
상황: 뷰저블의 URL Split 기능을 쓰려면 쿼리 파라미터(?v=b)가 아니라 경로(/b/)로 구분해야 했어요.
여기에 두 개의 링크를 넣어야 하는데 이미 하나는 'https://cto-workshop-fixed.vercel.app/' 이걸로 고정되어 있어서 수정이 불가. 추가로 하나만 등록해야하는 상황
이렇게 요청했어요:
뷰저블 URL Split이랑 연동하려면 /b/ 경로로 바꿔야 할 것 같아
결과:
A안:
https://cto-workshop-fixed.vercel.app/B안:
https://cto-workshop-fixed.vercel.app/b/Vercel 리라이트 설정으로 /b/ 경로도 같은 페이지 로드
경로에 따라 섹션 순서 자동 변경
막혔던 순간과 해결
문제 1: 테스트할 때 계속 같은 버전만 나옴
여러 번 새로고침해도 계속 B 버전만 나와서 "50:50이 아닌 거 아니야?" 싶었어요.
해결: 쿠키 때문이었습니다. 한 번 배정되면 30일간 같은 버전을 보여주는 게 정상 동작이래요. 시크릿 모드로 열면 새로 배정받을 수 있다고 알려줬습니다.
문제 2: 뷰저블에서 B페이지가 "미설치"로 표시
/b/ 페이지를 만들었는데 뷰저블 대시보드에서 미설치로 나왔어요.
해결: 뷰저블 서버 반영 지연이었습니다. 시간이 지나니 자동으로 해결됐어요.
결과 (After)
Before vs After
항목
Before
After
A/B 테스트 경험
전혀 없음
직접 구현 완료
소요 시간
-
30분
외부 도구 비용
-
무료 (기존 뷰저블만 사용)
데이터 분석
뷰저블만
뷰저블 + A/B 결과 통합
결과물
테스트 URL:
A안 (현재 순서): https://cto-workshop-fixed.vercel.app/
B안 (웨비나 상단 이동): https://cto-workshop-fixed.vercel.app/b/
뷰저블에서 확인:
URL Split 기능으로 A/B 페이지별 히트맵, 클릭맵 비교 가능
퍼널 분석에서 변형별 전환율 비교
다른 업무에 적용한다면?
랜딩페이지 문구 A/B 테스트: 헤드라인, CTA 버튼 문구 변경
가격 표시 방 식 테스트: 월간 vs 연간, 할인율 표시 등
섹션 추가/제거 테스트: 특정 섹션이 전환에 도움이 되는지
앞으로의 계획
1-2주 데이터 모은 후 승자 버전으로 고정
다른 섹션 순서나 문구도 A/B 테스트 예정
다른 랜딩페이지에도 같은 프레임워크 재사용 예정
