실험 빠른 시작

실험과 기능 플래그는 Amplitude 실험 SDK 또는 REST API를 사용하여 Amplitude 실험과 통신합니다.

실험을 설정하는 것은 다음과 같은 절차를 거친 여러 단계의 프로세스입니다.

1. SDK 및 배포를 설치하고 설정합니다.
2. 기능 플래그를 생성합니다.
3. 배포를 선택하고 페이로드를 생성합니다.
4. 변형을 생성하고 페이로드를 전송합니다.
5. 실험을 설계합니다.

시작하기 전에

실험을 사용하기 전에:

• 실험 SDK에 대한 개발자 쓰기 권한이 있는지 확인하십시오.
• 실험 기능에 대한 액세스 권한이 있는지 확인하십시오.
• 기능 플래그를 통합할 응용 프로그램에 대한 개발자 액세스 권한이 있는지 확인하십시오.

SDK 설정

실험 클라이언트와 함께 Amplitude SDK를 설치하세요. 예를 들면 다음과 같습니다.

npm install @amplitude/analytics-browser @amplitude/experiment-js-client

import * as amplitude from "@amplitude/analytics-browser";
import { Experiment } from "@amplitude/experiment-js-client";
amplitude.init("AMPLITUDE_API_KEY");
const experiment = Experiment.initialize("DEPLOYMENT_API_KEY");
await experiment.start();

배포 설정

Experiment는 Amplitude 분석과 동일한 프로젝트를 사용합니다. 모범 사례로서, 각 제품과 각 환경에 대해 하나의 프로젝트를 만드는 것이 좋습니다. 플래그, 실험 및 배치는 단일 프로젝트 첫 사용 후 존재하므로 동일한 제품 첫 사용 후 여러 프로젝트 간에 이러한 객체를 복제해야 합니다.

Amplitude 실험에서 배치는 응용 프로그램에서 사용할 플래그 또는 실험 그룹을 제공합니다. 각 프로젝트에는 프로젝트 API 키를 배포 키로 사용하는 배포가 있으며, 이는 기본적으로 사용 가능합니다. 생성 시, 실험은 임의로 생성된 배치 키를 각 배치에 할당합니다. 실험은 배치 키를 사용하여 배치를 식별하고 평가 서버에 대한 요청을 승인합니다.

배포는 Amplitude 애널리틱스 프로젝트에 속하며, 하나의 프로젝트에 여러 개의 배포가 있을 수 있습니다. Amplitude는 Experiment가 변형을 제공하는 플랫폼(클라이언트측) 또는 서비스(서버측)의 이름을 따서 배포에 이름을 지정할 것을 권장합니다(예: android, ios, web). 기본 프로젝트 API 키 배포는 시작하는 데 유용합니다. 동일한 애플리케이션을 위해 여러 플랫폼에서 동일한 Amplitude 프로젝트를 공유할 수 있는 대규모 조직 또는 팀의 각 플랫폼 또는 서비스에 대해 명시적 배포를 사용하십시오. 각 배포는 애플리케이션에서 사용할 수 있는 고유 키를 받습니다.

배포를 생성하려면

1. _실험(Experiments) > 배포(Deployments)_로 이동합니다.
2. 배포 생성을 선택합니다.
3. 드롭다운 목록에서 원하는 프로젝트를 선택합니다.
4. 배포 이름을 지정합니다.
5. 배포가 클라이언트용인지 서버용인지 선택합니다.
6. 배포 작성을 선택합니다. 자세한 내용은 실험 구성으로 이동하세요.

새 플래그 만들기

플래그를 사용하면 매번 새로운 코드를 배포하지 않고도 제품의 함수나 기능을 활성화하거나 비활성화할 수 있습니다. 플래그는 실험과 기능 롤아웃을 모두 촉진합니다. 플래그는 충분한 데이터를 수집한 후 실험을 시작하고 종료할 때 유용하며, 새로운 기능을 롤아웃(및 필요한 경우 롤백)할 때도 유용합니다.

새 기능 플래그를 생성하려면

1. _실험 > 기능 플래그_로 이동합니다.
2. 기능 플래그 생성을 선택합니다.
3. 플래그 만들기 섹션의 드롭다운 목록에서 원하는 프로젝트를 선택한 다음 플래그에 이름을 지정하십시오. Amplitude 실험은 사용자가 선택한 이름으로 플래그 키를 생성합니다. 플래그 키는 코드베이스에서 사용되는 플래그의 식별자입니다.
4. 실험에 대한 평가 모드를 지정합니다. 원격 또는 로컬을 선택합니다.
5. 이 실험에 사용할 버킷팅 단위를 지정하십시오.

6. 생성을 선택합니다. 실험을 통해 플래그에 대한 빈 템플릿이 열립니다.
7. 디플로이먼트 드롭다운 메뉴에서 원하는 디플로이먼트를 선택합니다.
8. (선택 사항) 고급 설정을 선택하여 버킷팅 솔트 옵션을 수정합니다.

변형 생성

변형은 플래그 또는 실험 첫 사용 후 존재하며 사용자의 다양한 경험을 나타냅니다. 변형은 테스트하려는 A/B 변경사항을 구성합니다. 모든 기능 플래그에는 적어도 하나의 변형이 포함되어야 합니다. 플래그에 원하는 만큼 변형을 추가할 수 있습니다.

변형을 추가하려면

1. _실험 > 기능 플래그_로 이동하여 플래그를 선택합니다.
2. 변형 섹션에서 플러스 아이콘을 선택하여 변형을 생성합니다.
3. 변형의 이름, 값 및 설명을 입력합니다.
4. 적용을 선택합니다.

{
  "layout": "cards",
  "titlePosition": "above",
  "gradient": false,
  "showDescription": true,
  "cardCount": 3
}

플래그에 타겟팅 추가

할당 섹션에서 새로운 기능을 경험할 사용자 세그먼트를 정의합니다. 사용자 세그먼트를 정의하면 특정 지리적 위치에 있는 사용자, 특정 인구통계 그룹 또는 제품의 특정 사용 임계값을 충족하는 사용자(예: 고급 사용자)에게만 배포를 제한할 수 있습니다. 세분화에 대한 자세한 내용은 잠재고객 정의로 이동하십시오.

타겟팅을 추가하려면

1. 변형을 수신하는 사용자의 비율을 지정합니다.
2. 사용자 세그먼트를 정의하려면 규칙 기반 사용자 세그먼트 섹션으로 이동하여 세그먼트 1을 선택합니다. 그런 다음 Amplitude 분석에서 사용자 세그먼트를 구축하는 데 사용하는 것과 동일한 단계를 수행하십시오.

플래그 완성

플래그를 설정하고, 이를 배포와 연관시키고, 변형 또는 페이로드를 설정하고, 사용자를 대상으로 삼은 후에는 기능 플래그를 완성하십시오. 플래그를 완성하면 플래그가 활성화되고 사용할 수 있게 됩니다.

기능 플래그를 완료하려면

1. 기능 플래그로 이동합니다.
2. **[Activate flag]**를 선택합니다.

실험 설계

실험을 직접 생성하거나 기존 플래그를 실험으로 변환할 수 있습니다.

실험을 설계할 때:

• 실험에 대한 지표를 설정합니다.
• 추가 변형과 페이로드를 설정합니다.

목표(또는 측정 기준)를 추가하면 실험의 성공률을 추적할 수 있습니다. 모든 실험에는 적어도 하나의 지표가 있어야 합니다. Amplitude 실험에 원하는 기본 지표를 지정하고 전체 보조 지표를 정의하십시오. 기본 지표는 Amplitude가 가설을 수락 또는 거부할지 여부를 결정하며, 따라서 실험이 성공했는지 실패했는지를 결정합니다.

메트릭을 추가하려면

1. 실험을 열고 메트릭스 섹션으로 이동합니다.
2. 지표 드롭다운에서 권장 지표를 선택하거나 사용자 지정 지표를 생성하십시오.
3. "해야 함" 또는 "해서는 안됨"을 사용하여 지표 유형을 선택합니다.
   • '해야 함': 성공 지표는 목표 양과 방향에 따라 목표가 변했음을 나타냅니다.
   • '해서는 안됩니다': 가드레일 지표는 목표 수치와 방향에 따라 목표가 변경되지 않음을 나타냅니다.
4. 지표가 증가 또는 감소할 것으로 예상되는지 지정합니다.
5. (선택 사항) 실험에 대해 허용되는 최소 목표를 설정합니다. 이는 최소 감지 가능한 효과라고도 합니다. 최소 검출 가능한 효과는 실험이 긍정적 결과로 간주되기 위한 대조군과 변형 간의 최소 차이입니다.
6. 보조 지표를 추가하려면 지표 추가를 선택하고 포함하려는 각 추가 지표에 대해 이 프로세스를 반복합니다.

변형과 페이로드를 더 추가하려면

더 많은 변형과 페이로드를 생성하려면 플래그에서 변형 만들기의 단계를 반복하십시오.

실험 시작하기

실험 설계를 완료한 후 실험 시작을 선택하여 시작합니다.

코드 예제

다음 코드 예제에서는 기능 플래그 및 JSON 페이로드에 대한 코드를 보여 줍니다.

import { useState, useEffect } from 'react';
import { getBlogLayoutFlag } from '../services/featureFlags'; // Adjust to wherever you fetch your Amplitude flag
import type { BlogPost } from '../types';
type LayoutFlag = {
  layout: 'cards' | 'list' | 'carousel';
  titlePosition: 'above' | 'below' | 'center';
  gradient: boolean;
  showDescription: boolean;
  cardCount: number;
};
export default function BlogPostLayoutClient({ posts }: { posts: BlogPost[] }) {
  const [layoutFlag, setLayoutFlag] = useState<LayoutFlag | null>(null);
  useEffect(() => {
    getBlogLayoutFlag().then((flag) => {
      console.log(':magic_wand: Received Flag from Amplitude:', flag);
      if (flag) {
        setLayoutFlag(flag);
      } else {
        console.log(':warning: No flag returned, falling back to default layout');
        setLayoutFlag({
          layout: 'cards',
          titlePosition: 'above',
          gradient: false,
          showDescription: true,
          cardCount: 3,
        });
      }
    });
  }, []);
  if (!layoutFlag) {
    // You might render a loader here
    return null;
  }
  // Render your posts according to layoutFlag...
  return (
    <div>
      {/* e.g. layoutFlag.layout === 'cards' ? <CardGrid posts={posts} /> : ... */}
    </div>
  );
}