LEVEL 50 QUEST

A/B 테스트 가능한 랜딩 페이지 시스템

A/B 테스트 가능한 랜딩 페이지 시스템 — DevFoil 바이브코딩 Stage 11, Lv.50

A/B 테스트란?

데이터로 최적의 페이지를 찾는 방법

A/B 테스트는 두 가지 버전의 페이지를 만들어 방문자에게 무작위로 보여주고, 어떤 버전이 더 좋은 성과를 내는지 데이터로 판단하는 방법입니다.

"이 버튼 색이 나을까, 저 색이 나을까?" 같은 주관적 논쟁을 끝내고, 실제 숫자로 답을 찾습니다.

A/B 테스트 흐름

방문자 100명 접속
    │
    ├── 50명 → 버전 A (파란 버튼)  → 5명 클릭 (전환율 10%)
    │
    └── 50명 → 버전 B (초록 버튼)  → 8명 클릭 (전환율 16%)

결론: 버전 B가 60% 더 효과적 → B를 기본으로 채택

한 번에 하나만 변경

A/B 테스트의 핵심 규칙은 한 번에 하나의 요소만 변경하는 것입니다. 버튼 색과 텍스트를 동시에 바꾸면, 어떤 변경이 효과를 냈는지 알 수 없습니다.

A/B 테스트 직접 구현하기

React로 간단한 A/B 테스트 시스템

// src/lib/ab-test.ts
// A/B 테스트 유틸리티

type Variant = 'A' | 'B';

export function getVariant(testName: string): Variant {
  // 쿠키에 저장된 변형이 있으면 재사용 (일관성)
  const stored = getCookie(`ab_${testName}`);
  if (stored === 'A' || stored === 'B') return stored;

  // 50:50 랜덤 배정
  const variant: Variant = Math.random() 
    

A/B 테스트 컴포넌트

// src/components/ABTest.tsx
'use client';
import { useEffect, useState } from 'react';
import { getVariant, trackConversion } from '@/lib/ab-test';

interface ABTestProps {
  testName: string;
  variantA: React.ReactNode;
  variantB: React.ReactNode;
}

export function ABTest({ testName, variantA, variantB }: ABTestProps) {
  const [variant, setVariant] = useState<'A' | 'B' | null>(null);

  useEffect(() => {
    setVariant(getVariant(testName));
  }, [testName]);

  if (!variant) return null; // SSR 시 깜빡임 방지

  return variant === 'A' ? variantA : variantB;
}

// 사용 예시
<ABTest
  testName="hero-headline"
  variantA={
    <h1>프로젝트 관리 시간을 50% 줄여드립니다</h1>
  }
  variantB={
    <h1>더 이상 엑셀로 프로젝트 관리하지 마세요</h1>
  }
/>

전환율 추적 시스템

API 라우트로 전환 데이터 수집

// src/app/api/ab-track/route.ts
import { NextRequest, NextResponse } from 'next/server';

// 간단한 인메모리 저장 (실전에서는 DB 사용)
const results: Record<string, {
  A: { views: number; conversions: number };
  B: { views: number; conversions: number };
}> = {};

export async function POST(req: NextRequest) {
  const { testName, variant, type } = await req.json();

  if (!results[testName]) {
    results[testName] = {
      A: { views: 0, conversions: 0 },
      B: { views: 0, conversions: 0 },
    };
  }

  if (type === 'view') {
    results[testName][variant].views++;
  } else if (type === 'conversion') {
    results[testName][variant].conversions++;
  }

  return NextResponse.json({ success: true });
}

// 결과 조회
export async function GET(req: NextRequest) {
  const testName = req.nextUrl.searchParams.get('test');
  if (!testName || !results[testName]) {
    return NextResponse.json({ error: 'Test not found' }, { status: 404 });
  }

  const data = results[testName];
  return NextResponse.json({
    A: {
      ...data.A,
      rate: data.A.views > 0
        ? ((data.A.conversions / data.A.views) * 100).toFixed(1) + '%'
        : '0%'
    },
    B: {
      ...data.B,
      rate: data.B.views > 0
        ? ((data.B.conversions / data.B.views) * 100).toFixed(1) + '%'
        : '0%'
    }
  });
}

Google Analytics 연동

GA4로 전환 이벤트 추적

// src/components/GoogleAnalytics.tsx
'use client';
import Script from 'next/script';

export function GoogleAnalytics({ gaId }: { gaId: string }) {
  return (
    <>
      <Script
        src={`https://www.googletagmanager.com/gtag/js?id=${gaId}`}
        strategy="afterInteractive"
      />
      <Script id="google-analytics" strategy="afterInteractive">
        {`
          window.dataLayer = window.dataLayer || [];
          function gtag(){dataLayer.push(arguments);}
          gtag('js', new Date());
          gtag('config', '${gaId}');
        `}
      </Script>
    </>
  );
}

// CTA 버튼에서 전환 추적
function CTAButton({ variant }: { variant: 'A' | 'B' }) {
  const handleClick = () => {
    // GA4 이벤트 전송
    gtag('event', 'cta_click', {
      variant: variant,
      page: 'landing',
      button_text: '무료 체험 시작',
    });

    // 전환 추적
    trackConversion('cta-button', variant);

    // 실제 동작 (가입 페이지로 이동 등)
    window.location.href = '/signup';
  };

  return (
    <button onClick={handleClick}>
      무료 체험 시작
    </button>
  );
}

데이터 기반 의사결정

테스트 결과 해석하기

A/B 테스트 결과를 올바르게 해석하는 것이 중요합니다. 충분한 데이터가 모이기 전에 판단하면 잘못된 결론을 내릴 수 있습니다.

항목	최소 기준	설명
샘플 크기	각 변형 200+ 방문	최소 200명 이상이 각 버전을 봐야 유의미
테스트 기간	최소 1~2주	요일별 트래픽 차이를 감안해 1주 이상 실행
통계적 유의성	95% 이상	결과가 우연이 아닐 확률이 95% 이상이어야 채택
전환율 차이	10% 이상	너무 작은 차이는 실무적 의미가 없을 수 있음

자주 테스트하는 요소들

헤드라인: 전환율에 가장 큰 영향 (보통 20~50% 차이)
CTA 버튼: 텍스트, 색상, 크기, 위치
가격 표시: 월간 vs 연간, 할인 표시 방식
Social Proof: 후기 유무, 수치 표시 방식

핵심 용어 정리

A/B 테스트

두 버전을 비교하여 더 효과적인 것을 데이터로 판별하는 실험 방법

통계적 유의성

테스트 결과가 우연이 아닌 실제 차이일 확률. 95% 이상이면 신뢰

전환 이벤트

사용자가 원하는 행동을 완료한 시점. 가입 완료, 결제 완료 등

GA4 (Google Analytics 4)

Google의 웹 분석 도구. 이벤트 기반으로 사용자 행동을 추적

실습 과제

직접 해보기

과제 1: ABTest 컴포넌트를 만들고 두 가지 헤드라인을 테스트해보세요.
과제 2: 전환 추적 API를 구현하고 클릭 이벤트를 수집해보세요.
과제 3: Google Analytics를 프로젝트에 설정해보세요.
과제 4: CTA 버튼의 텍스트 2가지를 A/B 테스트해보세요.

⚡ 필수 이 레슨의 난이도는 어땠나요?

👆 레슨 완료를 위해 난이도를 선택해주세요!

🤖 AI 학습 도우미 API 키 필요

AI 도우미를 사용하려면 API 키를 설정하세요.
Gemini는 무료로 사용 가능합니다!

API 키 설정하기

💬 피드백 & 요청사항 🧵 Threads 인증 필요

🧵

피드백을 남기려면 Threads 연동이 필요해요

설정에서 연동하기

🔒

여기까지는 미리보기입니다

A/B 테스트 가능한 랜딩 페이지 시스템
무료 가입하면 이어서 볼 수 있고, 강의를 완료할 때마다 XP와 레벨이 쌓입니다.

Google로 3초 만에 시작 →🧵 Threads로 시작 무료 공개 강의 둘러보기 (Lv.1~3)