코드 없이 A/B 테스트 띄우기

마케터·PM·디자이너용 가이드. 인프런 페이지에 스크립트 한 줄 + 속성 두 개만 붙이면 헤드라인·CTA·이미지 등 무엇이든 A/B 테스트할 수 있어요. 코드는 한 줄도 안 적습니다.

0. 시작 전에

• 택클 계정·조직이 이미 있어야 해요. 없으면 홈에서 로그인부터.
• 인프런 어드민에서 페이지 HTML 편집 권한이 있어야 합니다.
• 결과는 익명 디바이스 기준입니다. 같은 브라우저는 항상 같은 버전이 보이고, 시크릿 모드면 새 사람으로 잡혀요.

1. 실험 만들기 (1분)

1. /experiments → “+ 새 실험”
2. key: 영문 소문자·숫자·하이픈·언더스코어만 (예: event-hero-2026q2).
   규칙: 영문 소문자·숫자로 시작, 그 뒤로 영문 소문자·숫자·하이픈(-)·언더스코어(_)만, 총 64자 이내. 한글·공백·대문자·특수문자는 거절됩니다.
3. 분기(variant) 2개 만들기 — A, B (또는 의미 있는 이름). 비율은 기본 1:1.
4. 저장하면 준비 상태. 아직 사용자에게 분배되지 않습니다. "실험 시작" 버튼을 눌러야 진짜로 시작돼요.

2. API 키 발급 (30초)

1. /api-keys → “발급”
2. 이름은 어디서 쓰는지 알 수 있게 (예: 인프런-이벤트페이지).
3. 허용 origin (선택, 강력 권장): 이 키를 호출할 웹사이트 주소를 콤마/공백 구분으로 입력. 예: https://www.inflearn.com (인프런 운영) 또는 https://www.inflearn.com, https://www.devinflearn.com (운영+스테이징). 입력하면 그 사이트에서만 키가 동작 — 키가 어디서 유출돼도 다른 도메인에선 거부됩니다. 비워두면 운영자가 환경변수로 설정한 기본 허용 목록(인플런 도메인)을 사용.
   다른 사이트에 임베드하려면 그 사이트의 origin도 함께 적어야 합니다.
4. 발급된 키 (tkl_xxxxxx…) 는 딱 한 번만 보입니다. 바로 복사하세요. 잃어버리면 다시 만들면 됩니다.

3. 인프런 페이지에 붙여넣기

3-1. 스크립트 한 줄

<script src="https://taekcle.cool/embed.js"
        data-api-key="tkl_여러분의키"></script>

embed.js 태그는 한 줄만 넣으세요. HTML 가장 끝쪽이 가장 안전해요 (</body> 가 보이면 그 바로 위, 안 보이면 그냥 페이지 제일 끝). AI에게 페이지를 통째로 만들어달라고 했다면 그 결과물 마지막 줄에 추가하면 됩니다.

3-2. 바꾸고 싶은 문구를 A/B 두 벌로 만들기

1. 먼저 화면에서 바꾸고 싶은 문구/버튼을 하나 고릅니다. 예: 메인 제목, CTA 버튼 텍스트.
2. 인프런 HTML 편집기에서 그 문구를 그대로 검색해서 위치를 찾습니다.
3. 찾은 코드에 아래처럼 A안 + B안 두 벌을 넣습니다.

<h1 data-taekcle-variant="{여기에 실험key를 동일하게 넣어주세요}" data-variant="A">
  지금 시작하면 50% 할인
</h1>
<h1 data-taekcle-variant="{여기에 실험key를 동일하게 넣어주세요}" data-variant="B" hidden>
  오늘 단 하루, 반값 부트캠프
</h1>

• 비교 가능한 것: 텍스트, 이미지, 섹션, CSS 클래스, 어떤 HTML이든.
• 정책을 먼저 고르세요: 깜빡임 최소화(No-flash) 또는 체감 속도 우선(Fast-first).
• key는 어드민의 키와 정확히 일치해야 합니다. data-taekcle-variant 값 = 실험 key, data-variant 값 = variant key. 대소문자·하이픈·언더스코어 그대로.

초기 렌더 정책 (중요)

• No-flash 모드 (정확성 우선): A/B/C를 모두 처음엔 숨기고, embed.js가 평가 후 선택된 1개만 보여줍니다.
• Fast-first 모드 (운영 기본 권장): A는 처음부터 보이게 두고 B/C만 숨깁니다. 대신 B/C 사용자에서는 A가 잠깐 보였다가 바뀔 수 있습니다.

<!-- No-flash 모드 예시: A/B 둘 다 초기 숨김 -->
<section data-taekcle-variant="{여기에 실험key를 동일하게 넣어주세요}" data-variant="A" hidden style="display:none">
  ...
</section>
<section data-taekcle-variant="{여기에 실험key를 동일하게 넣어주세요}" data-variant="B" hidden style="display:none">
  ...
</section>

느리게 느껴질 때: 스켈레톤 한 줄 추가

<!-- variant가 열리기 전 잠깐 보여줄 자리 -->
<div id="ab-skeleton">콘텐츠 불러오는 중...</div>

<!-- A/B 블록 (No-flash 모드) -->
<section data-taekcle-variant="{여기에 실험key를 동일하게 넣어주세요}" data-variant="A" hidden style="display:none">...</section>
<section data-taekcle-variant="{여기에 실험key를 동일하게 넣어주세요}" data-variant="B" hidden style="display:none">...</section>

<script src="https://taekcle.cool/embed.js" data-api-key="tkl_여러분의키"></script>
<script>
  // 간단 버전: 1.2초 뒤 스켈레톤 제거 (예시값, 팀 규칙에 맞게 조정)
  setTimeout(function () {
    var el = document.getElementById('ab-skeleton');
    if (el) el.remove();
  }, 1200);

  // fail-safe 예시: 평가가 길어질 때 A를 열어 완전 빈 화면을 피함
  setTimeout(function () {
    var a = document.querySelector('[data-taekcle-variant="{여기에 실험key를 동일하게 넣어주세요}"][data-variant="A"]');
    if (a && a.hasAttribute('hidden')) {
      a.removeAttribute('hidden');
      if (a.style) a.style.display = '';
    }
  }, 2200);
</script>

AI에게 바로 요청할 때는 아래 프롬프트를 복붙하면 됩니다.

AI 프롬프트 A (운영 기본: Fast-first)

아래 HTML에서 "지금 시작하면 50% 할인" 문구를 A/B 테스트로 바꿔줘.
- 실험 key: {여기에 실험key를 동일하게 넣어주세요}
- variant key: A, B
- A는 기존 문구 유지, B는 "오늘 단 하루, 반값 부트캠프"
- 정책: Fast-first (A는 보이게 유지, B만 hidden + style="display:none")
- <script src="https://taekcle.cool/embed.js" data-api-key="tkl_여러분의키"></script> 는 HTML 마지막 줄에 유지해줘
- 기존 클래스/링크 URL은 절대 바꾸지 말아줘
- 기존 style 속성이 있으면 통째로 덮어쓰지 말고 display 규칙만 병합(merge)해줘
- 결과는 "수정 전 코드"와 "수정 후 코드"를 각각 보여주고, 내가 어디에 붙이면 되는지도 한 줄로 설명해줘

[여기에 내 HTML 전체 붙여넣기]

AI 프롬프트 B (플래시 최소화: No-flash + 가드)

아래 HTML을 택클 A/B 테스트용으로 안전하게 바꿔줘.
- 목표: 비개발자 페이지에서 A/B가 동시에 보이거나 A가 잠깐 보였다가 B로 바뀌는 현상 방지
- 실험 key: {여기에 실험key를 동일하게 넣어주세요}
- variant key: A, B
- 정책: No-flash 모드 (A/B 모두 hidden + style="display:none")
- 로딩 체감 개선: <div id="ab-skeleton">콘텐츠 불러오는 중...</div> 1개 추가
- fail-safe: 2.2초 내 평가가 안 되면 A를 열어 빈 화면 방지
- embed.js 스크립트는 HTML 맨 끝에 단독으로 배치
- 기존 style 속성이 있으면 통째로 덮어쓰지 말고 display 규칙만 병합(merge)해줘
- 태그 구조 깨지지 않게 "전체 HTML" 형태로 출력하고, 마지막에 변경 요약 5줄 이내로 써줘

[여기에 내 HTML 전체 붙여넣기]

3-3. (선택) 클릭 트래킹

<button data-taekcle-track="signup_click">신청하기</button>

• 트래킹하고 싶은 버튼/링크에 data-taekcle-track 속성만 추가하면 됩니다.
• 값은 이벤트 이름입니다. 예: signup_click, pricing_click, hero_cta_click.
• 클릭하면 window.dataLayer 와 taekcle:track 이벤트가 함께 나가서 GTM·Mixpanel에서 전환 비교에 쓸 수 있습니다.

CTA 버튼이 여러 개면 AI에 아래처럼 요청하세요.

아래 HTML에서 CTA 버튼 3개에 클릭 트래킹을 넣어줘.
- "무료로 시작하기" 버튼: data-taekcle-track="primary_cta_click"
- "데모 보기" 버튼: data-taekcle-track="secondary_cta_click"
- "요금제 확인" 버튼: data-taekcle-track="pricing_click"
- 기존 클래스/스타일은 건드리지 말고 속성만 추가해줘
- 수정된 버튼 코드만 모아서 보여줘

[여기에 내 HTML 전체 붙여넣기]

4. 미리보기 — Test Cookie로 두 버전 직접 확인

실험을 시작하기 전에, 작성한 두 버전이 의도대로 보이는지 직접 확인합니다.

1. 브라우저(크롬 권장)에서 인프런 페이지 열기
2. F12 → Console 탭
3. A안 확인 코드 실행 → 새로고침된 화면에서 A가 보이는지 확인
4. B안 확인 코드 실행 → 새로고침된 화면에서 B가 보이는지 확인
5. 마지막에 원상복구 코드 실행 (자동 분배로 되돌리기)

// 0) 먼저 어드민에서 variant별 testCookie 값을 설정하세요.
//    예시: A -> hero_a, B -> hero_b

// 1) A 버전 강제 (event-hero-2026q2를 본인 실험 key로 바꾸세요)
document.cookie = 'taekcle_{여기에 실험key를 동일하게 넣어주세요}=hero_a; path=/';
location.reload();

// 2) B 버전 강제
document.cookie = 'taekcle_{여기에 실험key를 동일하게 넣어주세요}=hero_b; path=/';
location.reload();

// 3) 원상복구 (자동 분배로 돌아가기)
document.cookie = 'taekcle_{여기에 실험key를 동일하게 넣어주세요}=; max-age=0; path=/';
location.reload();

⚠️ 테스트 쿠키 값은 variant key(A/B)가 아니라 어드민에 저장한 variant.testCookie 값과 정확히 같아야 합니다. (기본 자동값은 없습니다) 자세한 내용은 /docs/test-cookies.

5. 실험 시작 + 결과 보기

1. /experiments → 해당 실험 → “실험 시작” 버튼
2. 이때부터 실제 트래픽이 가중치대로 분배됩니다.
3. 실험 상세 페이지의 “노출(Exposure)” 카드에서 최근 30분 variant별 노출 수 실시간 확인.
4. 클릭·전환은 GTM/Mixpanel 쪽에서 비교하세요 (3-3 트래킹 사용한 경우).

6. 자주 묻는 질문

노출 수가 안 올라가요

1. F12 → Console 탭에 빨간 에러? — 아래 항목 참고
2. F12 → Network 탭에 evaluate 요청이 있는지 확인. 없으면 스크립트가 안 들어갔거나 data-api-key 오타.
3. evaluate 응답이 200이 아니면: 401 → 키가 잘못됨, 429 → 트래픽 폭주 (드뭄).

콘솔에 “CORS” 또는 “Access-Control-Allow-Origin” 에러

현재 페이지의 도메인이 택클 서버의 허용 목록에 없어요. 인프런이 새 도메인을 추가했거나 내부 스테이징 도메인이라면, #cell-platform에 도메인을 알려주세요. 허용 목록에 추가하면 됩니다 (배포 1분).

콘솔에 “Refused to load script” (CSP)

인프런 페이지에 Content-Security-Policy가 걸려 있어요. 인프런 운영팀에 script-src 'https://taekcle.cool' 추가를 요청하세요.

3안(A/B/C) 비교도 되나요?

됩니다. 어드민에서 variant 3개 만들고 가중치 조정 (예: 1:1:1). HTML도 같은 expKey로data-variant="A", "B", "C" 세 벌.

실험 시작/중단하면 즉시 반영되나요?

embed.js는 페이지가 로드될 때마다 새 평가를 받아옵니다. 새 방문자뿐 아니라 새로고침한 기존 방문자도 즉시 새 상태를 봅니다. 단, 인프런이 페이지 HTML 자체를 CDN 캐시한다면 인프런 쪽 캐시 무효화가 별도로 필요할 수 있어요.

A가 잠깐 보였다가 B로 바뀌어요 (초기 플래시)

기본 HTML에서 A를 바로 노출하면, B 사용자에서 평가 응답 전까지 A가 잠깐 보일 수 있습니다. 이 경우 No-flash 모드를 쓰세요: A/B/C 모두에 hidden + style="display:none"를 넣고, 필요하면 스켈레톤을 추가합니다.

키를 누가 훔쳐서 가짜 노출 데이터를 보내면요?

호출 한도(같은 키·IP당 분당 600회) + 같은 사용자의 같은 (실험, 분기) 조합은 30분간 중복 노출을 합쳐서 1회로 계산하기 때문에 의미 있는 왜곡이 어렵습니다. 그래도 의심되면 즉시 키 회수. 상세 모델은 /docs/security.

7. 퍼블리시 전 체크리스트

• ☐ 어드민에서 실험 “시작” 눌렀나요?
• ☐ 스크립트의 data-api-key 가 정확한가요? (앞 4자, 뒤 4자만이라도 비교)
• ☐ 비교할 모든 요소에 같은 expKey가 들어갔나요?
• ☐ 각 variant에 data-variant 식별값이 있나요? (어드민 키와 정확히 일치)
• ☐ No-flash 모드라면 A/B/C 모두 hidden + style="display:none"가 있나요?
• ☐ Fast-first 모드라면 B/C만 숨기되 A→B 전환 플래시 가능성을 팀에 공유했나요?
• ☐ 체감 속도가 느리면 스켈레톤(로딩 문구) 1개를 넣었나요?
• ☐ Test cookie로 두 버전 모두 미리 봤나요?
• ☐ 실험 상세의 노출 카드에서 카운트가 올라오는지 확인했나요?

참고

• 보안 정책 — 키 노출·rate limit·dedupe 등 전체 보안 모델
• 테스트 쿠키 — 강제 분배 더 자세히
• A/B 테스트 따라하기 — 개발자용 (React SDK) 가이드