이 페이지는 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 플러그인으로 구성된 VS Code 또는 Android 스튜디오) 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로 직접 이동).
익명 로그인 제공업체를 사용 설정하고 저장을 클릭합니다.

수수료6c3ebdf904459.png

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

Cloud Firestore 사용 설정

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

Cloud Firestore를 사용 설정하려면 다음 안내를 따르세요.

Firebase Console의 왼쪽 탐색 메뉴에서 Firestore를 클릭합니다.
Cloud Firestore 창에서 데이터베이스 만들기를 클릭합니다.

테스트 모드에서 시작 옵션을 선택하고 보안 규칙에 관한 면책조항을 읽은 후 다음을 클릭한 다음 사용 설정을 클릭합니다.

테스트 모드를 사용하면 개발 중에 데이터베이스에 자유롭게 쓸 수 있습니다. 이 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';

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

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_레스토랑' 이벤트가 있으므로 사용자가 앱을 열 때가 아니라 이벤트에 따라 인앱 메시지를 트리거해 보겠습니다.

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 Console을 통해 이 작업을 완전히 수행할 수 있으며 코드가 필요하지 않습니다.

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

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 테스팅으로 인앱 메시지 실험 만들기