기능 플래그

기능 플래그를 사용하면 특정 사용자나 무작위로 선택한 사용자에 대해 원격으로 기능을 활성화 또는 비활성화할 수 있습니다. 중요한 점은 추가 코드 배포나 앱 스토어 업데이트 없이 프로덕션 환경에서 기능을 켜고 끌 수 있다는 것입니다. 이를 통해 새로운 기능을 안심하고 안전하게 출시할 수 있습니다.

팁

나만의 기능 플래그를 만들 준비가 되었다면 기능 플래그 생성을 참조하세요.

전제 조건

기능 플래그를 사용하기 위해 필요한 최소 SDK 버전은 다음과 같습니다:

사용 사례

점진적 출시

기능 플래그를 사용하여 샘플 모집단에 점진적으로 기능을 활성화할 수 있습니다. 예를 들어, VIP 사용자에게 먼저 새로운 기능을 소프트 론칭할 수 있습니다. 이 전략은 모든 사용자에게 한꺼번에 새로운 기능을 배포할 때 발생하는 위험을 줄이고 초기에 버그를 발견하는 데 도움이 됩니다.

예를 들어, 보다 빠른 고객 서비스를 위해 앱에 새로운 “실시간 채팅 지원” 링크를 추가하기로 했다고 가정해 보겠습니다. 이 기능을 모든 고객에게 한꺼번에 출시할 수도 있습니다. 그러나 대규모 출시에는 다음과 같은 위험이 따릅니다:

• 지원 팀이 아직 교육 중인데 출시 후 고객이 지원 티켓을 생성하기 시작합니다. 지원 팀에 더 많은 시간이 필요한 경우 여유가 없습니다.
• 새로운 지원 케이스의 실제 수량을 확신할 수 없어 적절한 인력이 배치되지 않았을 수 있습니다.
• 지원 팀이 과부하 상태가 되면 이 기능을 빠르게 다시 끌 수 있는 전략이 없습니다.
• 채팅 위젯에 버그가 도입될 수 있으며, 고객에게 부정적인 경험을 제공하고 싶지 않습니다.

Braze 기능 플래그를 사용하면 기능을 점진적으로 출시하고 이러한 모든 위험을 완화할 수 있습니다:

• 지원 팀이 준비가 되었다고 말할 때 “실시간 채팅 지원” 기능을 활성화합니다.
• 적절한 인력이 배치되었는지 확인하기 위해 사용자의 10%에게만 이 새로운 기능을 활성화합니다.
• 버그가 있는 경우 새 릴리스를 서둘러 배포하는 대신 빠르게 기능을 비활성화할 수 있습니다.

이 기능을 점진적으로 출시하기 위해 “Live Chat Widget”이라는 이름의 기능 플래그를 생성할 수 있습니다.

앱 코드에서 Braze 기능 플래그가 활성화된 경우에만 Start Live Chat 버튼을 표시합니다:

• javascript
• java
• kotlin
• swift

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

import {useState} from "react";
import * as braze from "@braze/web-sdk";

// Get the initial value from the Braze SDK
const featureFlag = braze.getFeatureFlag("enable_live_chat");
const [liveChatEnabled, setLiveChatEnabled] = useState(featureFlag.enabled);

// Listen for updates from the Braze SDK
braze.subscribeToFeatureFlagsUpdates(() => {
    const newValue = braze.getFeatureFlag("enable_live_chat").enabled;
    setLiveChatEnabled(newValue);
});

// Only show the Live Chat if the Braze SDK determines it is enabled
return (<>
  Need help? <button>Email Our Team</button>
  {liveChatEnabled && <button>Start Live Chat</button>}
</>)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

// Get the initial value from the Braze SDK
FeatureFlag featureFlag = braze.getFeatureFlag("enable_live_chat");
Boolean liveChatEnabled = featureFlag != null && featureFlag.getEnabled();

// Listen for updates from the Braze SDK
braze.subscribeToFeatureFlagsUpdates(event -> {
  FeatureFlag newFeatureFlag = braze.getFeatureFlag("enable_live_chat");
  Boolean newValue = newFeatureFlag != null && newFeatureFlag.getEnabled();
  liveChatEnabled = newValue;
});

// Only show the Live Chat view if the Braze SDK determines it is enabled
if (liveChatEnabled) {
  liveChatView.setVisibility(View.VISIBLE);
} else {
  liveChatView.setVisibility(View.GONE);
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

// Get the initial value from the Braze SDK
val featureFlag = braze.getFeatureFlag("enable_live_chat")
var liveChatEnabled = featureFlag?.enabled

// Listen for updates from the Braze SDK
braze.subscribeToFeatureFlagsUpdates() { event ->
  val newValue = braze.getFeatureFlag("enable_live_chat")?.enabled
  liveChatEnabled = newValue
}

// Only show the Live Chat view if the Braze SDK determines it is enabled
if (liveChatEnabled) {
  liveChatView.visibility = View.VISIBLE
} else {
  liveChatView.visibility = View.GONE
}

참고

braze.featureFlags.featureFlags 또는 braze.featureFlags.featureFlag(id:)를 읽으면 SDK가 초기화 후 작업을 완료할 때까지 호출 스레드가 차단됩니다. 메인 스레드 또는 지연에 민감한 상황에서는 대신 getAllFeatureFlags(_:)를 사용하세요.

1
2
3
4
5

// Non-blocking — completion handler always delivers on the main thread.
braze.featureFlags.getAllFeatureFlags { flags in
  let liveChatEnabled = flags.first(where: { $0.id == "enable_live_chat" })?.enabled ?? false
  liveChatView.isHidden = !liveChatEnabled
}

Objective-C에서:

1
2
3

[braze.featureFlags getAllFeatureFlagsWithCompletion:^(NSArray<BRZFeatureFlag *> *flags) {
  // Use `flags` here.
}];

1
2
3
4
5
6
7
8
9
10
11
12

// Get the initial value from the Braze SDK
let featureFlag = braze.featureFlags.featureFlag(id: "enable_live_chat")
var liveChatEnabled = featureFlag?.enabled ?? false

// Listen for updates from the Braze SDK
braze.featureFlags.subscribeToUpdates() { _ in
  let newValue = braze.featureFlags.featureFlag(id: "enable_live_chat")?.enabled ?? false
  liveChatEnabled = newValue
}

// Only show the Live Chat view if the Braze SDK determines it is enabled
liveChatView.isHidden = !liveChatEnabled

앱 변수 원격 제어

기능 플래그를 사용하여 프로덕션 환경에서 앱의 기능을 수정할 수 있습니다. 이는 앱 스토어 승인으로 인해 모든 사용자에게 변경 사항을 신속하게 배포할 수 없는 모바일 앱에서 특히 중요할 수 있습니다.

예를 들어, 마케팅 팀이 현재 세일 및 프로모션을 앱의 내비게이션에 표시하고자 한다고 가정해 보겠습니다. 일반적으로 엔지니어에게는 변경 사항에 대해 1주일의 리드 타임이 필요하고, 앱 스토어 검토에 3일이 소요됩니다. 하지만 추수감사절, 블랙 프라이데이, 사이버 먼데이, 하누카, 크리스마스, 새해가 모두 두 달 안에 있으므로, 이런 촉박한 기한을 맞출 수 없습니다.

기능 플래그를 사용하면 Braze가 앱 내비게이션 링크의 콘텐츠를 제공하도록 하여, 마케팅 매니저가 며칠이 아닌 몇 분 만에 변경할 수 있습니다.

이 기능을 원격으로 구성하기 위해 navigation_promo_link라는 새 기능 플래그를 생성하고 다음 초기 속성정보를 정의합니다:

앱에서 Braze의 getter 메서드를 사용하여 이 기능 플래그의 속성정보를 가져오고 해당 값을 기반으로 내비게이션 링크를 구성합니다:

• javascript
• java
• kotlin
• swift

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

import * as braze from "@braze/web-sdk";
import {useState} from "react";

const featureFlag = braze.getFeatureFlag("navigation_promo_link");
// Check if the feature flag is enabled
const [promoEnabled, setPromoEnabled] = useState(featureFlag.enabled);
// Read the "link" property
const [promoLink, setPromoLink] = useState(featureFlag.getStringProperty("link"));
// Read the "text" property
const [promoText, setPromoText] = useState(featureFlag.getStringProperty("text"));

return (<>
  <div>
    <a href="/">Home</a>
    { promoEnabled && <a href={promoLink}>{promoText}</a> }
    <a href="/products">Products</a>
    <a href="/categories">Categories
  </div>
</>)

1
2
3
4
5
6
7
8
9
10

// liveChatView is the View container for the Live Chat UI
FeatureFlag featureFlag = braze.getFeatureFlag("navigation_promo_link");
if (featureFlag != null && featureFlag.getEnabled()) {
  liveChatView.setVisibility(View.VISIBLE);
} else {
  liveChatView.setVisibility(View.GONE);
}
liveChatView.setPromoLink(featureFlag.getStringProperty("link"));
liveChatView.setPromoText(featureFlag.getStringProperty("text"));

1
2
3
4
5
6
7
8
9

// liveChatView is the View container for the Live Chat UI
val featureFlag = braze.getFeatureFlag("navigation_promo_link")
if (featureFlag?.enabled == true) {
  liveChatView.visibility = View.VISIBLE
} else {
  liveChatView.visibility = View.GONE
}
liveChatView.promoLink = featureFlag?.getStringProperty("link")
liveChatView.promoText = featureFlag?.getStringProperty("text")

1
2
3
4
5
6
7
8

let featureFlag = braze.featureFlags.featureFlag(id: "navigation_promo_link")
if let featureFlag {
  liveChatView.isHidden = !featureFlag.enabled
} else {
  liveChatView.isHidden = true
}
liveChatView.promoLink = featureFlag?.stringProperty("link")
liveChatView.promoText = featureFlag?.stringProperty("text")

이제 추수감사절 전날, Braze 대시보드에서 해당 속성정보 값만 변경하면 됩니다.

결과적으로, 다음에 누군가가 앱을 로드하면 새로운 추수감사절 딜이 표시됩니다.

메시지 조율

기능 플래그를 사용하여 기능의 출시와 메시징을 동기화하고 제품 팀과 마케팅 팀 간의 협업을 강화할 수 있습니다. 기능 플래그를 통해 기능 출시와 메시징을 조율하면, 두 팀 모두 전략을 정렬하고 일관된 사용자 경험을 만들 수 있습니다.

예를 들어, 사용자를 위한 새로운 로열티 리워드 프로그램을 출시한다고 가정해 보겠습니다. 마케팅 팀과 제품 팀이 프로모션 메시징의 타이밍을 기능 출시와 완벽하게 조율하기 어려울 수 있습니다. 그러나 Canvas의 기능 플래그를 사용하면, 제품 팀은 정교한 로직을 적용하여 특정 오디언스에 기능을 활성화하고, 마케팅 팀은 동일한 사용자에게 관련 메시징을 관리할 수 있습니다.

기능 출시와 메시징을 효과적으로 조율하기 위해 show_loyalty_program이라는 새 기능 플래그를 생성합니다. 초기 단계적 출시를 위해 Canvas가 기능 플래그의 활성화 시기와 대상을 제어하도록 합니다. 현재로서는 출시 비율을 0%로 두고 타겟 Segment를 선택하지 않습니다.

그런 다음 Canvas에서 “고가치 고객” Segment에 대해 show_loyalty_program 기능 플래그를 활성화하는 기능 플래그 단계를 생성합니다:

이제 이 Segment에 속한 사용자가 새로운 로열티 프로그램을 보기 시작하고, 활성화된 후 이메일과 설문조사가 자동으로 발송되어 팀이 피드백을 수집할 수 있습니다.

기능 실험

기능 플래그를 사용하여 새로운 기능에 대한 가설을 실험하고 확인할 수 있습니다. 트래픽을 두 개 이상의 그룹으로 나누어 그룹 간 기능 플래그의 영향을 비교하고, 결과를 기반으로 최선의 조치를 결정할 수 있습니다.

기능 플래그 실험에서는 최대 9개의 그룹을 사용할 수 있습니다: 1개의 대조군과 최대 8개의 배리언트.

A/B 테스트는 변수의 여러 버전에 대한 사용자의 반응을 비교하는 강력한 도구입니다.

이 예시에서 우리 팀은 이커머스 앱에 새로운 결제 플로우를 구축했습니다. 사용자 경험을 개선한다고 확신하지만, 앱 매출에 미치는 영향을 측정하기 위해 A/B 테스트를 실행하고 싶습니다.

시작하기 위해 enable_checkout_v2라는 새 기능 플래그를 생성합니다. 오디언스나 출시 비율을 추가하지 않습니다. 대신, 기능 플래그 실험을 사용하여 트래픽을 분할하고, 기능을 활성화하고, 결과를 측정합니다.

앱에서 기능 플래그가 활성화되었는지 여부를 확인하고 응답에 따라 결제 플로우를 전환합니다:

• javascript
• java
• kotlin
• swift

1
2
3
4
5
6
7
8
9

import * as braze from "@braze/web-sdk";

const featureFlag = braze.getFeatureFlag("enable_checkout_v2");
braze.logFeatureFlagImpression("enable_checkout_v2");
if (featureFlag?.enabled) {
  return <NewCheckoutFlow />
} else {
  return <OldCheckoutFlow />
}

1
2
3
4
5
6
7

FeatureFlag featureFlag = braze.getFeatureFlag("enable_checkout_v2");
braze.logFeatureFlagImpression("enable_checkout_v2");
if (featureFlag != null && featureFlag.getEnabled()) {
  return new NewCheckoutFlow();
} else {
  return new OldCheckoutFlow();
}

1
2
3
4
5
6
7

val featureFlag = braze.getFeatureFlag("enable_checkout_v2")
braze.logFeatureFlagImpression("enable_checkout_v2")
if (featureFlag?.enabled == true) {
  return NewCheckoutFlow()
} else {
  return OldCheckoutFlow()
}

1
2
3
4
5
6
7

let featureFlag = braze.featureFlags.featureFlag(id: "enable_checkout_v2")
braze.featureFlags.logFeatureFlagImpression(id: "enable_checkout_v2")
if let featureFlag, featureFlag.enabled {
  return NewCheckoutFlow()
} else {
  return OldCheckoutFlow()
}

기능 플래그 실험에서 A/B 테스트를 설정합니다.

이제 사용자의 50%는 기존 경험을 보고, 나머지 50%는 새로운 경험을 보게 됩니다. 그런 다음 두 배리언트를 분석하여 어떤 결제 플로우가 더 높은 전환율을 가져왔는지 확인할 수 있습니다.

전환율은 메시지의 모든 수신자 대비 정의된 이벤트가 발생한 횟수의 백분율입니다. 이 정의된 이벤트는 Campaign을 구축할 때 결정됩니다.

위너가 결정되면 이 Campaign을 중지하고 기능 플래그의 출시 비율을 100%로 높여 모든 사용자에게 적용하며, 엔지니어링 팀이 다음 앱 릴리스에 이를 하드코딩합니다.

세분화

기능 플래그 필터를 사용하여 Segment를 생성하거나, 기능 플래그가 활성화된 사용자에게 메시징을 타겟팅할 수 있습니다. 예를 들어, 앱에서 프리미엄 콘텐츠를 제어하는 기능 플래그가 있다고 가정해 보겠습니다. 기능 플래그가 활성화되지 않은 사용자를 필터링하는 Segment를 생성한 다음, 해당 Segment에 프리미엄 콘텐츠를 보려면 계정을 업그레이드하라는 메시지를 보낼 수 있습니다.

1. Segment 또는 메시지 오디언스를 엽니다.
2. 기능 플래그 필터를 추가합니다.
3. 기능 플래그를 선택합니다.
4. 비교 연산자를 is로 설정하여 기능 플래그가 활성화된 사용자를 포함하거나, is not으로 설정하여 활성화되지 않은 사용자를 포함합니다.

Segment 필터링에 대한 자세한 내용은 Segment 생성을 참조하세요.

참고

재귀적 Segment를 방지하기 위해 다른 기능 플래그를 참조하는 Segment는 생성할 수 없습니다.

요금제 제한 사항

다음은 무료 및 유료 요금제의 기능 플래그 제한 사항입니다.

다음 조건 중 하나라도 해당하면 기능 플래그는 활성으로 간주되며 제한에 포함됩니다:

• 출시 비율이 0%를 초과하는 경우
• 활성 Canvas에서 사용 중인 경우
• 활성 실험에서 사용 중인 경우

동일한 기능 플래그가 여러 기준에 해당하더라도(예: Canvas에서 사용 중이고 출시 비율이 50%인 경우) 제한에는 활성 기능 플래그 1개로만 집계됩니다.

참고

기능 플래그의 유료 버전을 구매하려면 Braze 계정 매니저에게 문의하거나 Braze 대시보드에서 업그레이드를 요청하세요.