본 문서는 Framer를 배우는 국내 사용자들이 한글 자료의 부족으로 겪는 어려움을 해결하고자, 공식 블로그의 내용을 한국어로 번역하고 실무에 유용한 정보를 추가했습니다. 프레이머를 사용하는 여러분께 작게나마 도움이 되길 바랍니다.

Framer A/B 테스트 소개

Framer에는 A/B 테스트 기능이 내장되어 있는데요. 이는 디자이너와 마케터가 단 몇 분 만에 테스트를 설정하고 결과를 분석할 수 있도록 설계된 도구입니다.
해당 가이드를 참고하셔서 손쉽게 A/B 테스트를 설계해보고, 결과를 통해 더 나은 웹사이트를 만들어보세요.

Framer A/B 테스트의 장점

• 노코드 설정: 클릭 몇 번으로 테스트 생성이 가능해요.

• 빠른 실시간 데이터: 즉시 결과를 수집하고 공유할 수 있어요.

• 퍼포먼스 영향 없음: 페이지 로딩에 지연이나 레이아웃 흔들림이 없어요.

• 다국어 페이지 작동: 여러 지역 버전의 사이트에도 동일하게 적용돼요.

A/B 테스트는 언제 실행하면 좋나요?

A/B 테스트는 방문자 트래픽이 많은 페이지에서 가장 효과적이며, 방문자가 많을수록 의미 있는 결과를 더 빠르게 얻어볼 수 있습니다.
특히 전환을 유도할 수 있게 설계된 페이지에서 새로운 아이디어를 테스트하는 데 적합한데요. 즉, 링크 클릭이나 폼 작성과 같은 명확한 전환 이벤트가 페이지에 있는 상황에서 적합합니다.

A/B 테스트 설정하기

1. 새로운 테스트 생성하기

A/B 테스트는 항상 페이지 내에서 시작되며, 이를 시작하려면 페이지 하나와 전환 이벤트 하나가 필요합니다. 여기서 전환 이벤트는 링크 클릭, 폼 제출, 특정 페이지 조회수 등이 될 수 있습니다.

1. 테스트할 페이지를 우클릭하기

2. “New A/B Test” 를 선택하기

3. 페이지의 새로운 변형(Variant)이 생성되면 완료

페이지당 최대 5개의 Variant 페이지를 만들 수 있으며, 나중에 결과를 볼 때 쉽게 식별할 수 있도록 각각의 이름을 바꿔 구분할 수 있습니다. 이제 자유롭게 디자인을 변경하되, 모든 Variant에서 동일한 트래킹 ID를 사용하여 특정 행동 유도(CTA)에 최적화 되도록 해주는 것이 중요합니다.

Note: CMS 페이지는 현재 지원되지 않으므로, 참고하시길 바랍니다.

2. 테스트 구성하기

변경 사항을 추가했으면 이제 테스트를 구성할 차례입니다.

1. 상단 배너에서 “Configure” 버튼을 클릭하기

2. Analytics 탭에서 전환 단계를 선택하라는 메세지 확인하기

3. 오른쪽 패널에서 “Steps”의 “+”를 클릭하기

4. 추적할 이벤트 유형을 선택하기

Note: 여러 단계를 추가할 수 있지만, 마지막 단계가 전환율을 계산하고 결과를 측정하는 데에 사용돼요.

3. 테스트 시작하기

구성이 완료되면 “Start” 버튼을 클릭하고 사이트를 게시(Publish)하면 됩니다. 스테이징 환경을 사용하는 경우 사이트를 배포해야 하는 것도 잘 알아두셔야 합니다.
이후 Framer가 테스트 페이지 조회수와 이벤트를 기록하기 시작하며, 분석에서 언제든지 결과를 확인할 수 있습니다. 예를 들어 Variant가 2개라면 각각 방문자의 50%에 랜덤으로 할당되는 구조입니다.

4. 결과 분석하기

방문자 수가 충분하면 결과가 즉시 표시되기 시작합니다. 하지만 신뢰할 수 있는 결론을 내리려면 일정 수준의 데이터가 쌓일 때까지 기다리는 것이 좋습니다. Framer의 결과 요약에서는 주요 지표와 당첨자 발표까지 남은 기간 등이 표시되어 이를 확인할 수 있습니다.

결과 분석 화면에서는 아래의 핵심 지표를 확인할 수 있습니다.

• Conversion Rate(전환율)
  전환 단계를 완료한 고유 방문자의 비율을 전체 고유 방문자로 나눈 값으로, 전환 완료 방문자의 비율을 나타내요.
  
  

• Lift(상승도)
  대조군 대비 전환율의 증가/감소 비율을 나타냅니다. 해당 수치가 양수이면 해당 Variant의 성과가 대조군보다 더 좋을 가능성이 높다는 것을 의미해요.
  
  

• Best (Probability of Being Best)
  "최고 확률" 백분율로, 해당 Variant가 최고 확률이 될 가능성을 나타냅니다. 이 값이 90%를 초과하고 충분한 데이터가 수집되면 Framer에서 우승자로 선언됩니다.

Framer는 충분한 데이터가 확보되면 그래프를 표시합니다. 그래프가 표시되면, 각 Variant의 성과를 시간 경과에 따라 비교할 수 있습니다. 또한 결과선 주변의 띠는 신뢰 구간을 나타내며, 해당 구간이 좁을수록 결과의 신뢰도가 높아집니다. 그래프의 선이 안정적으로 분리되면 최종 결과를 확실하게 판별할 수 있습니다.

5. A/B 테스트 종료

테스트 결과가 충분히 명확해졌다면 결과를 검토하고 결정을 내려야 합니다. 결과가 크게 차이가 나는 경우, “Stop Test” 버튼을 클릭하여 테스트를 안전하게 중지할 수 있습니다.

테스트가 종료되면, 대조군의 버전을 다른 Variant 중 하나로 대체하라는 메시지가 표시됩니다. 특정 Variant가 대조군보다 성능이 훨씬 더 우수하다면, 해당 Variant를 선택하여 새로운 대조군으로 지정할 수 있습니다. 이후 사이트를 다시 게시(Publish) 하면 모든 방문자가 최고점을 받은 페이지를 보게 되며, 이제 다른 Variant는 자유롭게 삭제해도 됩니다.

때로는 데이터가 충분하더라도 확실한 최고 확률을 나타내는 페이지가 없는 경우가 있습니다. 이 경우에도 대조군을 통해 대체할 수는 있지만, 이러한 대체 자체가 분석에 큰 영향을 미치지 않을 수 있다는 점을 유의하세요.

자주 묻는 질문 (FAQ)

Q. Framer의 A/B 테스트는 쿠키를 사용하나요?
Framer의 A/B 테스트는 쿠키 없이 작동합니다. 방문자마다 IP 주소와 브라우저 정보를 기반으로 익명 식별자가 할당되어, 방문자가 하루 동안 동일한 페이지를 볼 수 있도록 합니다. 이 익명성은 매일 재설정되며, 여러 날짜/기기에 걸쳐 사용자를 추적하는 데에 사용될 수 없습니다.
쿠키에 의존하지 않아서 얻는 이점으로 신뢰성을 높여준다는 것이 있지만, 일간 단위로만 전환을 추적할 수 있다는 제한이 있습니다. Framer에서 사용하는 A/B테스트는 표준화된 고급 A/B 테스트 도구이지만, 추후 더 장기적이고 유연한 전환 도구를 제공하기 위해 쿠키 기반 시스템을 추가할 계획입니다.

Q. 테스트 중 변형을 수정해도 되나요?
결과에 영향을 미칠 수 있기에 수정을 권장하지 않습니다. 하지만 수정을 원할 경우, 기존 테스트를 종료한 뒤 새 테스트를 시작하는 걸 추천합니다.

Q. Framer는 어떤 통계 방식을 사용하여 우승자를 결정하나요?
Framer는 베이지안 접근법(Bayesian approach)을 사용합니다. 이는 데이터가 쌓일 때마다 한 Variant가 다른 Variant보다 우수할 확률을 실시간으로 계산합니다. 고정된 표본 크기나 p-값에 의존하며 빈도를 중요하게 생각하던 기존의 방법과 달리, 베이지안 모델은 성과 기반 예상(PBB)을 계산합니다. Variant의 PBB 확률이 90%를 초과하면 우승자로 간주하는 구조입니다.

Q. 우승한 Variant를 판정하기에 필요한 최소 방문자 횟수는 얼마인가요?
우승자를 선정하려면 해당 Variant의 PBB가 최소 90%의 확률로 최상의 결과를 낼 수 있어야 하며, 방문 횟수에 대한 내부 기준을 충족해야 합니다. 이를 통해 결과가 신뢰할 수 있고 적은 표본 크기에 기반하지 않다는 것이 보장됩니다.

Q. 테스트는 얼마나 오래 실행해야 하나요?
정해진 기간은 없습니다. 하지만 트래픽이 적거나 여러 Variant의 성과가 비슷한 경우, 테스트 데이터가 충분하지 않아 최종 결과를 예측하기 어려울 수 있습니다. 이러한 경우의 결과는 확실하지 않은 것으로 표시되며, 이때에는 테스트를 중단하거나 계속 실행하여 더 많은 인사이트를 얻을 수 있습니다.

A/B 테스트를 제공하는 가격 정책

A/B 테스트와 퍼널 기능은 Scale 플랜의 Advanced Analytics 애드온에 포함되어 있습니다. 아래의 정보를 확인하여 애드온에 대한 정보를 확인해보시길 바라며, 자세한 요금제는 Framer Pricing 페이지에서 확인하실 수 있습니다.

• 14일 무료 체험 가능

• 이후 이벤트(페이지 뷰, 클릭, 폼 제출) 단위로 과금

• 사용량은 월 단위로 계산되며, 사이트 플랜 결제 주기에 포함되어 청구

본 글은 Framer 공식 블로그의 ‘How to run an A/B test on your Framer site’를 번역·각색한 콘텐츠입니다.