A/B 테스트를 클라이언트 사이드에서 처리하면 페이지 로드 후 레이아웃이 교체되어 CLS(Cumulative Layout Shift)가 발생하고, 서버 사이드로 처리하면 매 요청마다 실험 평가로 응답이 느려진다. 이 글은 정적 생성 + Edge Config + Middleware를 조합해 두 문제를 동시에 해결하는 아키텍처를 설명한다.
핵심 포인트- Edge Config는 P99 15ms 이내에 실험 규칙을 읽어 응답 지연을 최소화한다.
- getStaticPaths/getStaticProps로 실험 변형(variants)을 빌드 시 사전 렌더링해 런타임 SSR 비용을 없앤다.
- Middleware에서 사용자 쿠키 또는 Edge Config 값으로 적절한 variant 페이지로 리라이트하고, 브라우저에는 원본 URL을 유지한다.
- URL에 실험 변형 값을 인코딩해 정적 경로에 매핑, 빌드 시 최대 100개 변형까지 사전 생성한다.
- React Context로 EXPERIMENT_VIEWED 이벤트를 자동 발송해 데이터 웨어하우스로 실험 성과를 추적한다.
상세 정리- CLS 문제의 원인: 클라이언트 A/B 테스트는 초기 렌더 후 JS가 실험 규칙을 평가하고 다른 variant로 교체할 때 레이아웃이 이동한다. Google Optimize 같은 도구가 이 방식을 사용해 CLS가 발생했다.
- 서버 SSR 방식의 한계: 매 요청마다 실험 규칙을 서버에서 평가하면 응답 시간이 늘어나고 캐싱이 어렵다.
- 해결 아키텍처 3단: (1) 변형을 빌드 시 정적 페이지로 생성 → (2) Edge Config로 실험 규칙을 초저지연으로 제공 → (3) Middleware에서 규칙을 읽어 올바른 정적 페이지로 리라이트.
- Edge Config 역할: P99 15ms 이내 응답하는 JSON 저장소로 실험 on/off, 트래픽 비율, variant 정의를 담는다. 코드 배포 없이 실험 규칙을 즉시 변경할 수 있다.
- 정적 생성 + 동적 라우팅: getStaticPaths로 /experiment/[variant] 경로를 정의하고, getStaticProps로 각 variant 콘텐츠를 빌드 시 사전 생성한다. 변형이 많으면 최대 100개까지만 빌드 시 생성하고 나머지는 on-demand ISR로 처리한다.
- Middleware 라우팅: 사용자의 기존 쿠키(이미 배정된 variant)를 확인하거나, 없으면 Edge Config의 비율 설정에 따라 새 variant를 배정한다. URL 리라이트로 내부적으로 variant 페이지로 라우팅하되 브라우저는 원본 경로를 유지한다.
- URL 인코딩: 실험 변형 식별자를 URL 경로에 직접 인코딩(예: /page/variant-control, /page/variant-treatment)해 정적 파일과 1대1로 매핑한다.
- 이벤트 추적: React Context를 통해 컴포넌트가 마운트될 때 EXPERIMENT_VIEWED 이벤트를 자동 발송한다. 이벤트에 variant 정보를 attribute로 첨부해 클릭, 전환 등 후속 이벤트와 조인 가능하다.
- 성과: CLS가 제거되고 정적 페이지 성능을 유지하면서 실험 규칙을 코드 배포 없이 즉시 변경할 수 있다.
왜 읽나Next.js 환경에서 Core Web Vitals 점수를 유지하면서 서버 수준 A/B 테스트를 구현하려는 프론트엔드/풀스택 개발자에게 구체적인 아키텍처와 구현 패턴 레퍼런스.
Vercel Blog·
LINE Engineering·