이 페이지는 Cloud Translation API를 통해 번역되었습니다.

첫 번째 인앱 메시지 실험

1. 소개

목표

이 Codelab에서는 Flutter 및 Cloud Firestore에서 제공하는 멀티플랫폼 모바일 레스토랑 추천 앱의 인앱 메시지 실험을 계측합니다.

완료하면 최소한의 코드만 작성하여 iOS 또는 Android 앱의 사용자 참여도를 효과적으로 높이는 인앱 메시지 실험을 설계하고 구현할 수 있습니다.

학습 내용

Flutter 앱에서 Firebase 인앱 메시지 (FIAM)를 사용하는 방법
인앱 메시지의 모양을 맞춤설정하는 방법
인앱 메시지 실험을 설계하고 앱에 구현하는 방법
인앱 메시지 실험 결과를 해석하는 방법

이 Codelab에서 배우고 싶은 내용은 무엇인가요?

주제를 처음 접하기 때문에 간단하게 내용을 파악하고 싶습니다.

이 주제에 관해 약간 알고 있지만 한 번 더 확인하고 싶습니다.

프로젝트에 사용할 코드 예시를 찾고 있습니다.

구체적인 항목에 관한 설명을 찾고 있습니다.

Firebase 인앱 메시지

Firebase 인앱 메시지 (FIAM)를 사용하면 게임 레벨 달성, 상품 구매, 콘텐츠 구독 등 주요 인앱 액션을 완료하도록 권장하는 타겟팅된 상황별 메시지를 보내 앱을 적극적으로 사용하는 사용자의 참여를 유도할 수 있습니다.

Firebase A/B 테스팅

Google 최적화 도구를 기반으로 하는 Firebase A/B 테스팅 (ABT)을 사용하면 제품 및 마케팅 실험을 쉽게 실행, 분석, 확장하여 앱 환경을 최적화할 수 있습니다. 앱 UI, 기능 또는 참여 캠페인의 변경사항을 테스트하여, 변경사항을 전반적으로 반영하기 전에 수익 및 유지와 같은 주요 측정항목이 실제로 변화하는지 확인할 수 있습니다.

필요한 항목

Flutter 또는 Firestore를 잘 알지 못하는 경우 먼저 Flutter용 Firebase Codelab을 완료합니다.

다음 기기 중 하나를 사용하여 이 Codelab을 실행할 수 있습니다.

컴퓨터에 연결되어 있으며 개발자 모드로 설정된 실제 기기 (Android 또는 iOS)
iOS 시뮬레이터 (Xcode 도구 설치 필요)
Android Emulator (Android 스튜디오에서 설정 필요)

또한 다음이 필요합니다.

원하는 브라우저(예: Chrome)
원하는 IDE 또는 텍스트 편집기(예: Dart 및 Flutter 플러그인으로 구성된 Android 스튜디오 또는 VS Code) Flutter에는 VS Code를 사용하는 것이 좋습니다.
최신 안정화 버전의 Flutter (또는 최신 기능을 사용해 보고 싶은 경우 베타)
Firebase 프로젝트를 만들고 관리하기 위한 Google 계정(예: Gmail 계정)
Codelab의 샘플 코드 코드를 가져오는 방법은 다음 단계를 참고하세요.

2. 설정

코드 가져오기

명령줄에서 GitHub 저장소를 클론합니다.

git clone https://github.com/FirebaseExtended/codelab-friendlyeats-flutter.git friendlyeats-flutter

샘플 코드가 friendlyeats-flutter 디렉터리에 클론됩니다. 이제부터 이 디렉터리에서 명령어를 실행해야 합니다.

cd friendlyeats-flutter

그런 다음 codelab 디렉터리로 변경하고 fiam-abt 브랜치를 체크아웃합니다.

git checkout fiam-abt

이 브랜치에는 done 폴더의 완성된 버전을 포함하여 이 Codelab에 필요한 모든 코드가 포함되어 있습니다. 이 저장소의 다른 브랜치에는 멀티플랫폼 Firestore Flutter Codelab에 표시된 대로 FriendlyEats 앱을 빌드하기 위한 코드가 포함되어 있습니다. 이 Codelab의 목적상 이 브랜치에서 웹 통합을 삭제했습니다.

시작 앱 가져오기

codelab-fiam-abt 디렉터리를 열거나 원하는 IDE로 가져옵니다. 이 디렉터리에는 레스토랑 추천 앱으로 구성된 Codelab의 시작 코드가 포함되어 있습니다. 이 Codelab을 통해 이 앱 사용자를 위한 인앱 메시지 실험을 계측합니다.

Firebase 프로젝트 만들기

Firebase Console에서 프로젝트 추가를 클릭한 후 Firebase 프로젝트의 이름을 FriendlyEats로 지정합니다. Firebase 프로젝트의 프로젝트 ID를 기억합니다 (또는 수정 아이콘을 클릭하여 선호하는 프로젝트 ID 설정).
프로젝트에 Google 애널리틱스가 사용 설정되어 있는지 확인한 다음 계속을 클릭합니다.
프로젝트 만들기를 클릭합니다.

수고하셨습니다. 첫 번째 Firebase 프로젝트를 만들었습니다. 이제 프로젝트 이름을 클릭하여 콘솔에 들어갈 수 있습니다.

다음으로 Firebase Console을 사용하여 필요한 서비스를 구성하고 사용 설정하는 방법을 안내합니다.

익명 인증 사용 설정

이 Codelab에서 인증을 중점적으로 다루지는 않지만 앱에 어떤 형태로든 인증이 있는 것이 중요합니다. 따라서 익명 로그인을 사용합니다. 즉, 사용자에게 로그인하라는 메시지가 표시되지 않고 사용자가 자동으로 로그인됩니다.

익명 로그인을 사용 설정하는 방법은 다음과 같습니다.

Firebase Console의 왼쪽 탐색 메뉴에서 인증을 찾습니다.
인증을 클릭한 후 시작하기를 클릭하고 로그인 방법 탭을 선택합니다 (또는 Firebase Console로 직접 이동).
익명 로그인 제공업체를 사용 설정하고 저장을 클릭합니다.

익명 로그인을 사용 설정하면 사용자가 앱에 액세스할 때 애플리케이션에 자동으로 로그인할 수 있습니다. 자세한 내용은 Android 및 iOS용 익명 인증 문서를 참고하세요.

Cloud Firestore 설정

앱이 Cloud Firestore를 사용하여 레스토랑 정보 및 평점을 저장하고 수신합니다.

Firebase 프로젝트에서 Cloud Firestore를 설정하는 방법은 다음과 같습니다.

Firebase Console의 왼쪽 패널에서 빌드를 펼친 다음 Firestore 데이터베이스를 선택합니다.
데이터베이스 만들기를 클릭합니다.
데이터베이스 ID는 (default)로 설정된 채로 둡니다.
데이터베이스의 위치를 선택한 다음 다음을 클릭합니다.
실제 앱의 경우 사용자와 가까운 위치를 선택해야 합니다.
테스트 모드로 시작을 클릭합니다. 보안 규칙에 관한 면책 조항을 읽습니다.
이 Codelab의 후반부에서 데이터를 보호하는 보안 규칙을 추가합니다. 데이터베이스에 대한 보안 규칙을 추가하지 않은 채 앱을 공개적으로 배포하거나 노출하지 마세요.
만들기를 클릭합니다.

3. 모바일별 Firebase 구성

Firebase 지원을 사용 설정하는 데 필요한 대부분의 코드 변경사항은 작업 중인 프로젝트에 이미 체크인되어 있습니다. 그러나 모바일 플랫폼을 위한 지원을 추가하려면 다음을 실행해야 합니다.

Firebase 프로젝트에 원하는 플랫폼을 등록합니다.
플랫폼별 구성 파일을 다운로드하여 코드에 추가합니다.

Flutter 앱의 최상위 디렉터리에는 ios 및 android라는 하위 디렉터리가 있습니다. 이러한 디렉터리에는 각각 iOS 및 Android용 플랫폼별 구성 파일이 들어 있습니다.

iOS 구성

Firebase Console의 왼쪽 탐색 메뉴 상단에서 프로젝트 설정을 선택하고 일반 페이지의 내 앱 아래에 있는 iOS 버튼을 클릭합니다.

다음 대화상자가 표시됩니다.

제공해야 할 중요한 값은 iOS 번들 ID입니다. 다음 세 단계를 진행하여 번들 ID를 얻습니다.

명령줄 도구에서 Flutter 앱의 최상위 디렉터리로 이동합니다.
open ios/Runner.xcworkspace 명령어를 실행하여 Xcode를 엽니다.

아래와 같이 Xcode의 왼쪽 창에서 최상위 Runner를 클릭하면 오른쪽 창에 General 탭이 표시됩니다. Bundle Identifier 값을 복사합니다.

Firebase 대화상자로 돌아가서, 복사한 번들 식별자를 iOS 번들 ID 필드에 붙여넣고 앱 등록을 클릭합니다.

Firebase에서 계속 진행하여 안내에 따라 구성 파일 GoogleService-Info.plist을 다운로드합니다.
Xcode로 돌아갑니다. Runner에는 Runner라는 하위 폴더도 있습니다 (위 이미지 참조).
방금 다운로드한 GoogleService-Info.plist 파일을 이 Runner 하위 폴더로 드래그합니다.
Xcode에 표시되는 대화상자에서 Finish(완료)를 클릭합니다.
Firebase Console로 돌아갑니다. 설정 단계에서 다음을 클릭하고 나머지 단계를 건너뛰며 Firebase Console의 기본 페이지로 돌아갑니다.

iOS용 Flutter 앱 구성을 완료했습니다.

Android 구성

Firebase Console의 왼쪽 탐색 메뉴 상단에서 프로젝트 설정을 선택하고 일반 페이지의 내 앱에서 Android 버튼을 클릭합니다.

다음 대화상자가 표시됩니다.

제공해야 할 중요한 값은 Android 패키지 이름입니다. 다음 두 단계를 진행하면 패키지 이름을 얻을 수 있습니다.

Flutter 앱 디렉터리에서 android/app/src/main/AndroidManifest.xml 파일을 엽니다.
manifest 요소에서 package 속성의 문자열 값을 찾습니다. 이 값이 Android 패키지 이름입니다 (예: com.yourcompany.yourproject). 이 값을 복사합니다.
Firebase 대화상자에서 복사한 패키지 이름을 Android 패키지 이름 필드에 붙여넣습니다.
이 Codelab에서는 디버그 서명 인증서 SHA-1이 필요하지 않습니다. 이 입력란은 비워둡니다.
앱 등록을 클릭합니다.
Firebase에서 계속 진행하여 안내에 따라 구성 파일 google-services.json을 다운로드합니다.
Flutter 앱 디렉터리로 이동하여 방금 다운로드한 google-services.json 파일을 android/app 디렉터리로 이동합니다.
다시 Firebase Console에서 나머지 단계를 건너뛰고 Firebase Console의 기본 페이지로 돌아갑니다.
모든 Gradle 구성이 이미 체크인되어 있습니다. 앱이 여전히 실행 중인 경우 앱을 닫았다가 다시 빌드하여 Gradle이 종속 항목을 설치할 수 있도록 합니다.

Android용 Flutter 앱 구성을 완료했습니다.

4. 로컬에서 앱 실행

이제 앱에 관한 작업을 시작할 수 있습니다. 먼저 로컬에서 앱을 실행합니다. 이제 구성한 (그리고 기기 및 에뮬레이터를 사용할 수 있는) 모든 플랫폼에서 앱을 실행할 수 있습니다.

다음 명령어로 사용할 수 있는 기기를 검색해 보세요.

flutter devices

사용 가능한 기기에 따라 위 명령어의 출력은 다음과 비슷합니다.

이제 다음 명령어를 사용하여 앱을 로컬에서 실행합니다.

flutter run

이제 Firebase 프로젝트에 연결된 FriendlyEats 복사본이 표시됩니다.

앱이 Firebase 프로젝트에 자동으로 연결되고 익명 사용자로 자동 로그인됩니다.

5. 첫 번째 메시지 만들기 및 테스트

Firebase 인앱 메시지를 앱에 통합

인앱 메시지 기본 통합은 완전히 코드가 없습니다. 종속 항목을 추가하기만 하면 됩니다. pubspec.yaml 파일에 다음 종속 항목을 추가합니다.

dependencies:
  # ...
  firebase_in_app_messaging: ^0.4.0
  # ...

Firebase Console에서 메시지 작성

이제 앱에 FIAM을 추가했으므로 앱이 처음 열릴 때 트리거되는 메시지를 작성해 보겠습니다.

첫 번째 메시지를 작성하려면 다음 단계를 따르세요.

Firebase Console의 참여 섹션에서 인앱 메시지를 클릭합니다.
인앱 메시지 창에서 첫 번째 캠페인 만들기를 클릭합니다.

통합이 작동하는지 확인하기 위해 기본 모달 메시지를 작성해 보겠습니다. 이미지, 버튼을 추가하거나 색상을 변경하는 등 원하는 대로 메시지를 맞춤설정할 수 있습니다.

테스트할 앱을 타겟팅해야 합니다. 사용 중인 통합 경로에 따라 iOS, Android 또는 둘 다를 사용할 수 있습니다.

앱이 열릴 때 메시지가 트리거되도록 하려면 기본 예약 구성을 사용하면 됩니다.

예약이 완료되면 메시지를 게시할 수 있습니다. '검토'를 클릭하면 다음과 같이 표시됩니다.

앱에서 메시지 보기

이제 앱을 제거했다가 다시 설치합니다. 그러면 앱을 열 때 만든 메시지가 표시됩니다. 축하합니다. 첫 번째 인앱 메시지를 보냈습니다. 다음 단계에서는 사용자가 앱에서 취하는 작업에 따라 인앱 메시지를 트리거하기 위해 애널리틱스 이벤트를 추가하는 방법을 알아봅니다.

6. 고급 메시지 트리거를 위해 Firebase 애널리틱스 통합

Firebase 애널리틱스를 앱에 통합

사용자가 앱과 상호작용하는 방식을 파악하고 사용자의 작업에 따라 인앱 메시지를 트리거하기 위해 사용자가 음식점을 클릭할 때의 애널리틱스 이벤트를 추가합니다.

pubspec.yaml에서 Flutter에 Firebase 애널리틱스 종속 항목 추가

dependencies:
  # ...
  firebase_analytics: ^1.0.1
  # ...

home_page.dart에서 애널리틱스 가져오기

import 'package:firebase_analytics/firebase_analytics.dart';

home_page.dart의 HomePage 클래스에 Firebase 애널리틱스 인스턴스를 추가합니다.

class HomePage extends StatefulWidget {
  static const route = '/';
  static FirebaseAnalytics analytics = FirebaseAnalytics();
  HomePage({Key key}) : super(key: key);
  @override
  _HomePageState createState() => _HomePageState();
}

사용자가 home_page.dart에서 식당 카드를 클릭할 때 애널리틱스 이벤트 실행

onRestaurantPressed: (id) async {
  await HomePage.analytics.logEvent(name: 'click_restaurant');
  Navigator.pushNamed(context,
                      RestaurantPage.route,
                      arguments: RestaurantPageArguments(id: id));
})

분석 이벤트에서 트리거되도록 메시지 수정

이제 'click_restaurant' 이벤트가 있으므로 사용자가 앱을 열 때가 아닌 이 이벤트를 기반으로 인앱 메시지를 트리거해 보겠습니다.

Firebase Console에서 인앱 메시지로 돌아가 기존 캠페인을 수정합니다.

이제 새 일정의 메시지를 트리거하도록 예약 섹션을 변경합니다.

여기에서 '검토' 버튼을 클릭하여 변경사항을 게시할 수 있습니다.

앱에서 트리거 테스트하기

이제 다음과 같이 앱을 실행할 수 있습니다.

flutter run

레스토랑을 클릭하면 인앱 메시지가 표시됩니다.

7. FIAM+ABT 캠페인 만들기

목표 설정 및 시작하기

Friendlyeats 앱은 이미 멋진 모습입니다. 하지만 유용하게 사용하려면 리뷰가 필요합니다. 리뷰는 Friendlyeats 사용자로부터 얻을 수 있으므로 사용자가 리뷰를 남기도록 유도하는 방법을 찾아보겠습니다.

먼저 전환 이벤트를 정의해 보겠습니다

사용자가 음식점을 리뷰하는지 확인하려면 이 동작을 측정하는 분석 이벤트를 추가하겠습니다.

이전과 마찬가지로 Firebase 애널리틱스를 가져오고 restaurant_page.dart의 RestaurantPage에 애널리틱스 인스턴스를 추가합니다.

class RestaurantPage extends StatefulWidget {
  static const route = '/restaurant';
  static FirebaseAnalytics analytics = FirebaseAnalytics();
  final String _restaurantId;
  RestaurantPage({Key key, @required String restaurantId})
      : _restaurantId = restaurantId,
        super(key: key);
  @override
  _RestaurantPageState createState() =>
      _RestaurantPageState(restaurantId: _restaurantId);
}

이제 restaurant_page.dart에서 리뷰를 저장할 때 _onCreateReviewPressed에서 이벤트를 트리거해 보겠습니다.

 if (newReview != null) {
   // Log successful review
   await RestaurantPage.analytics.logEvent(name: 'review_success');
   // Save the review
   return data.addReview(restaurantId: _restaurant.id, review: newReview);
 }

Firebase Console에서 A/B 테스트 구성

이제 인앱 메시지 캠페인을 만드는 방법을 알았으므로 이러한 캠페인을 통해 앱에서 어떤 종류의 행동을 유도할지 고려해 보겠습니다. FriendlyEats의 경우 더 많은 사용자가 리뷰를 남겨 앱을 더 유용하게 만들어 주시기 바랍니다. 인앱 메시지를 사용하여 이를 유도하는 방법에는 몇 가지가 있습니다. 하나는 사용자에게 FriendlyEats 앱을 개선하는 데 도움이 되도록 음식점에 리뷰를 작성해야 한다고 알리는 간단한 인앱 메시지를 보내는 것입니다. 다른 방법은 인앱 메시지를 사용하여 특정 음식점에 대한 쿠폰이나 할인 코드와 같은 리뷰 작성 인센티브를 제공하는 것입니다.

두 가지 접근 방식 모두 사용자가 FriendlyEats에서 음식점에 리뷰를 제공하는 빈도를 늘릴 수 있지만, 이 경우 쿠폰을 제공하는 것이 더 큰 영향을 미칠 수 있습니다. 하지만 이 쿠폰을 제공하면 사용자가 리뷰를 작성할 가능성이 얼마나 높아질까요? 쿠폰의 비용이 들더라도 가치가 있나요? 이를 확인하기 위해 인앱 메시지 실험을 진행할 예정입니다. Firebase A/B 테스팅을 사용하여 인앱 메시지 중 하나를 무작위로 사용자에게 표시하고, 임상 실험과 마찬가지로 이 메시지가 사용자 행동에 미치는 영향을 측정할 수 있습니다. 무엇보다도 코딩 없이 Firebase 콘솔을 통해 이 작업을 완전히 할 수 있습니다.

첫 번째 인앱 메시지 실험을 작성하려면 다음 단계를 따르세요.

Firebase Console의 참여 섹션에서 A/B 테스팅을 클릭합니다.
실험 만들기를 클릭하고 인앱 메시지를 실험하겠다고 선택합니다. 그러면 아래에 표시된 실험 작성 도구로 이동합니다.

실험에 이름을 지정하고 설명(선택사항)을 입력합니다.

다음 단계에서는 실험에서 사용자에게 전송할 다양한 인앱 메시지를 작성합니다. 작성할 첫 번째 인앱 메시지는 '기준값' 또는 실험의 대조군입니다. 간단한 '리뷰를 작성해 주세요' 메시지로 만들 수 있습니다.

이제 기준이 있으므로 사용자에게 리뷰를 남기도록 유도하는 쿠폰 코드를 제공하는 인앱 메시지라는 대안을 작성합니다. 아래 미리보기에서는 완전히 보이지 않지만 메시지 제목은 '쿠폰 사용하고 리뷰 작성하기'이고 메시지 본문은 '다음에 Burrito Cafe에서 주문할 때 결제 시 쿠폰 코드 FRIENDLYEATS-15를 사용하면 15% 할인받으실 수 있습니다. 사용해 보고 리뷰도 남겨주세요." 이로 인해 일부 사용자가 Burrito Cafe를 확인해 보게 되기를 바랍니다.

다음 단계에서는 앱을 타겟팅하고 노출을 설정합니다. 실험에서 메시지 중 하나가 표시되는 대상 사용자 (타겟팅/트리거 조건을 충족하는 사용자)의 비율입니다. 이 예에서는 모든 사용자에게 기준 또는 쿠폰 변형을 표시할 예정이므로 이 값을 100% 로 설정하면 됩니다. 인앱 메시지가 전혀 표시되지 않는 대조군을 만들려면 이 노출 비율을 줄이면 됩니다.

다음으로 실험의 목표를 정의합니다. 측정하려는 실험의 결과입니다. 다양한 인앱 메시지가 레스토랑 리뷰를 작성하는 사용자에게 미치는 영향을 확인할 수 있도록 이 이벤트를 이전 섹션에서 정의한 review_success 애널리틱스 이벤트로 설정합니다.
예약의 경우 캠페인을 즉시 시작하고 click_restaurant를 트리거 조건으로 설정하여 사용자가 음식점을 클릭할 때 두 가지 인앱 메시지 중 하나가 표시되도록 합니다.

이제 실험을 검토하고 실험 시작을 클릭하기만 하면 됩니다. 이제 실험 데이터가 들어올 때까지 편안하게 기다리면 됩니다.

실시간으로 데이터 수집 확인하기

이제 실험이 시작되었으므로 FriendlyEats 사용자는 음식점을 클릭할 때 기준 메시지 또는 대안 메시지 중 하나가 무작위로 표시됩니다. 이렇게 하면 사용자가 본 메시지에 따라 두 그룹으로 나뉩니다. 그런 다음 Firebase Console (A/B 테스팅 섹션 아래)에서 두 그룹의 실시간 애널리틱스 데이터를 비교할 수 있습니다. 사용자가 실제로 인앱 메시지를 보고 그에 따라 조치를 취할 때까지 기다려야 하므로 데이터가 들어오는 데 다소 시간이 걸립니다. 충분한 데이터가 확보되면 다음과 같은 결과가 표시될 수 있습니다.

이 경우 대안이 기준치보다 크게 개선되었으므로 대안 출시를 선택하여 모든 사용자에게 쿠폰이 포함된 인앱 메시지를 출시할 수 있습니다.

8. 축하합니다

축하합니다. 첫 번째 인앱 메시지 실험을 만들고 실행했습니다. 이제 자체 앱에서 실험을 실행하고 그 결과를 토대로 인앱 메시지 캠페인의 효과를 높일 수 있습니다.

다음 단계

다음 Codelab을 확인해 보세요.

추가 자료

Firebase 인앱 메시지 및 Firebase A/B 테스팅으로 할 수 있는 작업은 이보다 훨씬 많습니다. 자세한 내용을 알아보려면 다음을 확인하세요.

참조 문서

A/B 테스팅으로 인앱 메시지 실험 만들기