디자인 아틀라스
EN
⟳ 디자인 프로세스

A/B 테스트

A/B test

같은 화면의 두 버전을 실제 사용자에게 무작위로 나눠 보여주고 지표 차이를 통계로 비교하는 실험.

다른 이름: Split test분할 테스트
···
html
<div class="stage">
  <div class="tag">example data</div>
  <div class="cols">
    <div class="v">
      <div class="hd">A</div>
      <button class="mock a">Buy now</button>
      <div class="metric"><span id="ca">0</span>%</div>
      <div class="meter"><span id="ma"></span></div>
    </div>
    <div class="v">
      <div class="hd">B</div>
      <button class="mock b">Get it today</button>
      <div class="metric win"><span id="cb">0</span>%</div>
      <div class="meter"><span id="mb" class="win"></span></div>
    </div>
  </div>
</div>
css
.stage{width:94%;height:88%;display:flex;flex-direction:column;gap:8px}
.tag{align-self:flex-end;font:700 9px/1 monospace;color:var(--muted);letter-spacing:.04em}
.cols{flex:1;display:flex;gap:10px}
.v{flex:1;border:1px solid var(--line);border-radius:10px;background:var(--surface);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:8px;padding:6%}
.hd{font:700 11px/1 monospace;color:var(--muted)}
.mock{border:none;border-radius:8px;padding:8px 14px;font:700 11px/1 sans-serif;color:#fff}
.mock.a{background:var(--muted)}
.mock.b{background:var(--accent)}
.metric{font:800 20px/1 monospace;color:var(--fg)}
.metric.win{color:var(--accent-3)}
.meter{width:80%;height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.meter span{display:block;height:100%;width:0;background:var(--muted)}
.meter span.win{background:var(--accent-3)}
js
const ca = document.getElementById('ca');
const cb = document.getElementById('cb');
const ma = document.getElementById('ma');
const mb = document.getElementById('mb');
function run() {
  let a = 0, b = 0;
  ma.style.width = '0%'; mb.style.width = '0%';
  const id = setInterval(() => {
    a = Math.min(3.2, a + Math.random() * 0.35);
    b = Math.min(5.8, b + Math.random() * 0.55);
    ca.textContent = a.toFixed(1);
    cb.textContent = b.toFixed(1);
    ma.style.width = (a / 6 * 100) + '%';
    mb.style.width = (b / 6 * 100) + '%';
    if (a >= 3.2 && b >= 5.8) clearInterval(id);
  }, 120);
}
run();
setInterval(run, 3600);

A/B 테스트는 의견이 아니라 실험으로 답을 냅니다. 버전 A(대조군)와 버전 B(변형)를 트래픽을 무작위로 나눠 동시에 노출시키고, 클릭률·전환율 같은 지표를 비교합니다. "동시에"가 핵심입니다 — 순서대로 A를 한 달, B를 한 달 돌리면 계절성·트렌드 같은 다른 변수가 섞여 어느 쪽 때문에 지표가 바뀐 건지 알 수 없습니다.

숫자 하나가 더 높다고 바로 승자를 선언하면 안 됩니다. 표본이 작으면 우연히 갈린 차이를 진짜 효과로 착각하기 쉬워서, 통계적 유의성(우연히 이 정도 차이가 날 확률이 충분히 낮은가)을 확인하고 나서야 결론을 냅니다.

사용성 테스트가 "왜"(어디서 헤매는가)를 알려주는 정성적 방법이라면, A/B 테스트는 "어느 쪽이 더 나은가"를 알려주는 정량적 방법입니다. 보통 사용성 테스트로 후보안을 좁힌 뒤 A/B 테스트로 실제 트래픽에서 검증하는 순서로 이어집니다.

아래 카운터는 개념을 보여주기 위한 예시 데이터이며 실제 실험 결과가 아닙니다.

언제 쓰나

이미 후보가 둘로 좁혀졌고 트래픽이 충분할 때 최종 결정에 씁니다. 트래픽이 적으면 유의미한 차이를 보는 데 오래 걸리니 정성적 방법을 먼저 고려하세요.