콘텐츠 대표 이미지 - 리액트 네이티브 앱 분석, Firebase Analytics로 날개 달기 🚀

리액트 네이티브 앱 분석, Firebase Analytics로 날개 달기 🚀

우리 앱에 접속한 유저들, 도대체 뭘 하고 있는 걸까?
데이터 기반 의사결정으로 앱의 운명을 바꾸는 실전 가이드!

데이터, 너란 녀석... 우리 앱의 미래를 부탁해!

안녕, 개발자 친구들! 👋 우리 다들 비슷한 경험 있잖아.
밤새워 코딩하고, 디자인 다듬고, 버그 잡고... 드디어 야심차게 앱을 출시했는데!
정작 유저들이 우리 앱에서 뭘 좋아하는지, 어디서 불편해하는지, 왜 떠나는지 알 길이 없어 막막했던 순간들 말이야.

다운로드 수는 그저 숫자일 뿐, 그 뒤에 숨겨진 유저들의 진짜 이야기를 모른다면 우리는 그저 안개 속을 헤매는 것과 같아.
어떤 기능을 더 발전시켜야 할까? 어떤 버튼의 위치를 바꿔야 할까?
이런 중요한 결정들을 오로지 '감'에만 의존하고 있다면, 그건 너무 위험한 도박 아닐까? 🤯

바로 이때, 우리에게 한 줄기 빛이 되어줄 구원투수가 등장해.
그 이름은 바로 Firebase Analytics!

Firebase Analytics는 구글이 제공하는 강력한 무료 앱 분석 도구야.
마치 우리 앱에 초소형 CCTV를 수만 개 설치해서 유저들의 모든 행동 패턴을 실시간으로 지켜보는 것과 같지.
어떤 화면을 가장 많이 보는지, 어떤 버튼을 클릭하는지, 어디서 구매를 포기하는지 등등.
유저의 모든 발자취를 데이터로 남겨주는 거야.

이 데이터를 손에 쥐는 순간, 우리는 더 이상 '감'이 아닌 '데이터'에 기반한 똑똑한 의사결정을 내릴 수 있게 돼.
유저들이 열광하는 기능을 찾아내 더 강력하게 만들고, 아무도 쓰지 않는 기능은 과감히 정리할 수 있지.
유저들이 자꾸만 이탈하는 구간을 발견하고 개선해서 앱의 생명력을 쭉쭉 늘릴 수도 있어.
이게 바로 데이터 드리븐(Data-Driven)의 힘이야! 💪

이 글에서는 리액트 네이티브(React Native)로 만든 우리 앱에 Firebase Analytics라는 날개를 어떻게 달아주는지, A부터 Z까지 아주 친절하고 상세하게 알려줄 거야.
설치부터 기본 세팅, 우리 앱에 딱 맞는 데이터 수집 방법, 그리고 수집한 데이터를 100% 활용하는 꿀팁까지!
코드를 한 줄 한 줄 따라오다 보면, 어느새 너도 데이터 좀 볼 줄 아는 '데이터잘알' 개발자가 되어 있을 거야.
자, 그럼 이제 우리 앱의 미래를 바꿀 여정을 함께 떠나볼까? 🚀

Firebase & React Native - 운명적인 첫 만남, 세팅부터 시작! 🛠️

자, 가장 먼저 할 일은 Firebase와 우리 리액트 네이티브 프로젝트를 연결해주는 거야.
결혼식으로 치면 상견례 같은 아주 중요한 단계지.
조금 복잡해 보일 수 있지만, 걱정 마! 내가 옆에서 하나하나 다 알려줄게. 그대로만 따라와!

1. Firebase 프로젝트 만들기: 우리 앱의 새 집 마련하기

가장 먼저 Firebase의 세계에 우리 앱을 위한 공간을 만들어야 해.

1. Firebase 콘솔 접속: 구글에 'Firebase'를 검색하거나 firebase.google.com으로 바로 접속해서 구글 계정으로 로그인해줘.
2. 프로젝트 추가: 콘솔 메인 화면에 보이는 '프로젝트 추가' 버튼을 과감하게 클릭!
3. 프로젝트 이름 입력: 우리 앱의 이름을 적어주면 돼. 'MyAwesomeApp'처럼 멋진 이름으로!
4. Google 애널리틱스 설정: 이 단계가 핵심이야! '이 프로젝트에서 Google 애널리틱스 사용 설정' 옵션이 보일 텐데, 반드시 활성화해야 해. 이걸 켜야 우리가 오늘 배울 모든 기능을 쓸 수 있거든.
5. 애널리틱스 계정 선택: 기존에 사용하던 구글 애널리틱스 계정이 있다면 연결하고, 없다면 '새 계정 만들기'를 선택해서 간단하게 만들어줘.

이렇게 몇 번의 클릭만으로 Firebase에 우리 앱을 위한 멋진 새 집이 마련됐어. 참 쉽지? 😉

2. 앱 등록하기: iOS와 Android, 각각 문패 달아주기

이제 막 생성된 프로젝트에 우리 리액트 네이티브 앱을 정식으로 등록할 차례야.
리액트 네이티브는 iOS와 Android를 모두 지원하니까, 각각 따로 등록해줘야 해.

iOS 앱 등록 (feat. Xcode)

1. Firebase 프로젝트 대시보드에서 동그란 iOS 아이콘을 클릭해.
2. Apple 번들 ID: 여기에 우리 앱의 고유 식별자인 번들 ID를 입력해야 해. 이건 Xcode에서 프로젝트를 열고, `General` 탭에서 `Bundle Identifier`를 찾으면 바로 확인할 수 있어. 보통 `com.companyname.appname` 같은 형식이야.
3. 앱 닉네임 (선택사항): 관리하기 편한 별명을 지어주자.
4. App Store ID (선택사항): 아직 앱스토어에 출시 안 했다면 비워둬도 괜찮아.
5. 구성 파일 다운로드: '앱 등록' 버튼을 누르면 `GoogleService-Info.plist`라는 파일을 다운로드하라고 나올 거야. 이게 바로 우리 앱과 Firebase를 연결해주는 비밀 열쇠 같은 파일이야.
6. Xcode에 파일 추가: 다운로드한 `GoogleService-Info.plist` 파일을 Xcode 프로젝트 네비게이터의 루트(보통 `Info.plist` 파일이 있는 곳)에 드래그 앤 드롭으로 쏙 넣어줘. 이때 'Copy items if needed' 옵션이 체크되어 있는지 꼭 확인해야 해!

Android 앱 등록 (feat. Android Studio)

1. 이번엔 Firebase 대시보드에서 안드로이드 아이콘을 클릭!
2. Android 패키지 이름: 안드로이드의 고유 식별자야. `android/app/build.gradle` 파일을 열어보면 `defaultConfig` 안에 `applicationId`라고 적힌 부분을 찾을 수 있어. 그걸 그대로 복사해서 붙여넣으면 돼.
3. 앱 닉네임 (선택사항): iOS와 마찬가지로 별명을 지어주자.
4. 디버그 서명 인증서 SHA-1 (선택사항): 지금 당장은 필요 없지만, 나중에 구글 로그인 같은 기능을 쓸 때 필요해. 일단은 넘어가도 좋아.
5. 구성 파일 다운로드: '앱 등록'을 누르면 이번엔 `google-services.json` 파일을 다운로드할 수 있어. 안드로이드용 비밀 열쇠지.
6. 프로젝트에 파일 추가: 다운로드한 `google-services.json` 파일을 리액트 네이티브 프로젝트의 `android/app/` 디렉토리 안에 넣어주면 돼.

✨ 잠깐! 이거 중요해!
`GoogleService-Info.plist`와 `google-services.json` 파일은 우리 프로젝트의 비밀 정보가 담겨있어.
그래서 Git 같은 버전 관리 시스템에 올리면 절대 안 돼! `.gitignore` 파일에 이 파일들의 이름을 추가해서 실수로라도 커밋되지 않도록 꼭! 방지해줘.

3. React Native Firebase 라이브러리 설치: 진짜 연결의 시작

이제 하드웨어적인 준비는 끝났어. 소프트웨어, 즉 코드로 연결할 차례야.
우리는 React Native Firebase라는 아주 훌륭한 라이브러리를 사용할 거야.
이 라이브러리가 Firebase의 네이티브 SDK와 우리 자바스크립트 코드 사이에서 다리 역할을 해줄 거거든.

프로젝트 터미널을 열고 아래 명령어를 입력해줘.


# 필수 코어 라이브러리 설치
npm install --save @react-native-firebase/app

# 우리가 사용할 Analytics 모듈 설치
npm install --save @react-native-firebase/analytics

# iOS 설정 (CocoaPods)
cd ios && pod install && cd ..
  

npm 대신 yarn을 쓴다면 `yarn add @react-native-firebase/app @react-native-firebase/analytics`로 설치하면 돼.
iOS의 경우, `pod install`을 실행하면 아까 Xcode에 추가했던 설정 파일과 라이브러리들이 네이티브 레벨에서 착착 연결될 거야.

4. 네이티브 설정 마무리: 마지막 한 스푼

라이브러리 설치만으로 끝이 아니야. 네이티브 코드에 '이제부터 Firebase 쓸 거야!'라고 알려주는 과정이 필요해.

iOS 설정 (`AppDelegate.m` 또는 `AppDelegate.swift`)

`ios/[YourProjectName]/AppDelegate.m` (Objective-C) 또는 `AppDelegate.swift` (Swift) 파일을 열어줘.
파일 상단에 Firebase를 import하고, `didFinishLaunchingWithOptions` 메소드 안에 초기화 코드를 한 줄 추가해야 해.

Objective-C (`AppDelegate.m`) 예시:


#import "AppDelegate.h"
#import <Firebase.h> // 이 줄 추가!

// ... (중간 코드 생략)

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  // ... (다른 코드들)
  [FIRApp configure]; // 이 줄 추가!
  return YES;
}
  

Swift (`AppDelegate.swift`) 예시:


import UIKit
import Firebase // 이 줄 추가!

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {
  func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
    FirebaseApp.configure() // 이 줄 추가!
    return true
  }
}
  

Android 설정 (`build.gradle`)

안드로이드는 조금 더 손볼 곳이 있어. 두 개의 `build.gradle` 파일을 수정해야 해.

1. `android/build.gradle` 파일:
`buildscript`의 `dependencies` 안에 다음 라인을 추가해줘.


buildscript {
    dependencies {
        // ...
        classpath 'com.google.gms:google-services:4.3.15' // 버전은 최신으로!
    }
}
  

2. `android/app/build.gradle` 파일:
파일의 맨 위, 다른 `apply plugin`들 바로 아래에 다음 라인을 추가해줘.


apply plugin: 'com.android.application'
apply plugin: 'com.google.gms.google-services' // 이 줄 추가!
  

그리고 `dependencies` 섹션에 analytics 관련 라이브러리를 추가해줘. (보통은 라이브러리 설치 시 자동으로 추가되지만 확인차!)


dependencies {
    // ...
    implementation platform('com.google.firebase:firebase-bom:31.2.3') // BOM을 사용하면 버전 관리가 편해!
    implementation 'com.google.firebase:firebase-analytics-ktx'
}
  

휴! 여기까지 따라오느라 정말 고생 많았어. 👏
이제 우리 리액트 네이티브 앱은 Firebase와 완벽하게 연결됐어.
지금부터는 본격적으로 데이터를 수집하고 분석하는 재미있는 일만 남았다고!
다음 챕터부터는 훨씬 더 쉽고 재밌을 테니 기대해도 좋아!

기본기 다지기 - 자동으로 수집되는 이벤트, 이거 완전 꿀이잖아? 🍯

자, 이제 막 우리 앱에 Firebase Analytics를 심었잖아?
놀랍게도, 우리가 아무것도 하지 않아도 Firebase는 벌써부터 열일하기 시작했어.
마치 집에 새로 들인 로봇 청소기처럼, 알아서 앱 구석구석을 돌아다니며 기본적인 데이터들을 청소기처럼 쏙쏙 빨아들이고 있다는 말씀! 🤖

이걸 바로 '자동 수집 이벤트(Automatically collected events)'라고 불러.
개발자가 단 한 줄의 코드도 추가하지 않아도, Firebase SDK가 알아서 앱의 중요한 사건들을 감지하고 기록해주는 거야. 이거 완전 꿀 아니야?

Firebase가 알아서 챙겨주는 기본 이벤트 리스트

그럼 도대체 뭘 알아서 수집해준다는 걸까? 대표적인 선수들을 만나보자.

  • first_open: 유저가 우리 앱을 설치하고 '생애 최초로' 실행한 바로 그 감격적인 순간! 이 이벤트를 통해 신규 유저가 얼마나 유입되는지 파악할 수 있어.
  • session_start: 유저가 앱을 실행하거나, 한동안 백그라운드에 있던 앱을 다시 포그라운드로 가져왔을 때 발생하는 이벤트야. 유저가 하루에 몇 번이나 우리 앱을 찾는지 알 수 있는 중요한 지표지.
  • screen_view: 유저가 앱의 어떤 화면을 보고 있는지 알려주는 이벤트. '홈 화면', '설정 화면', '상품 상세 화면' 등 어떤 화면이 가장 인기가 많은지, 유저들이 주로 어떤 동선으로 움직이는지 파악하는 데 핵심적인 역할을 해.
  • app_update: 유저가 앱을 새로운 버전으로 업데이트했을 때 기록돼. 새로운 기능을 배포했을 때 얼마나 많은 유저가 빠르게 업데이트하는지 알 수 있겠지?
  • app_remove: 슬프지만... 유저가 우리 앱을 삭제했을 때 발생하는 이벤트야 (안드로이드에서만 자동 수집). 어떤 업데이트 이후에 이 수치가 급증했다면, 뭔가 심각한 문제가 있다는 신호일 수 있어.
  • in_app_purchase: 앱 내 결제가 발생했을 때! (물론 스토어 연동 설정이 필요해) 우리 앱의 수익과 직결되는 아주아주 중요한 이벤트지.

이것들 말고도 여러 이벤트가 있지만, 이 정도만 알아도 벌써부터 우리 앱에 대해 꽤 많은 것을 알 수 있게 된 거야.
Firebase 콘솔의 'Analytics' -> 'Events' 탭에 가보면, 시간이 조금 지난 뒤에 이 이벤트들이 차곡차곡 쌓이는 걸 볼 수 있을 거야. (데이터가 집계되기까지 최대 24시간이 걸릴 수 있으니 조금만 기다려줘!)

💡 Pro Tip: screen_view 이벤트 커스터마이징하기
리액트 네이티브는 기본적으로 '하나의 액티비티' 위에서 동작하는 경우가 많아서, `screen_view` 이벤트가 우리가 원하는 대로 정확하게 동작하지 않을 수 있어.
특히 React Navigation 같은 라이브러리를 사용한다면, 화면이 바뀔 때마다 `screen_view` 이벤트를 수동으로 보내주는 게 훨씬 정확해!

예를 들어, React Navigation의 `onStateChange` 프롭을 사용해서 현재 화면 이름을 가져오고, Firebase Analytics로 보내주는 거지.

import analytics from '@react-native-firebase/analytics';
import { NavigationContainer } from '@react-navigation/native';

function App() {
  const routeNameRef = React.useRef();
  const navigationRef = React.useRef();

  return (
    <NavigationContainer
      ref={navigationRef}
      onReady={() => {
        routeNameRef.current = navigationRef.current.getCurrentRoute().name;
      }}
      onStateChange={async () => {
        const previousRouteName = routeNameRef.current;
        const currentRouteName = navigationRef.current.getCurrentRoute().name;

        if (previousRouteName !== currentRouteName) {
          // The line that sends the event to Firebase
          await analytics().logScreenView({
            screen_name: currentRouteName,
            screen_class: currentRouteName,
          });
        }
        
        // Save the current route name for later comparison
        routeNameRef.current = currentRouteName;
      }}
    >
      {/* ... 우리 앱의 네비게이터 ... */}
    </NavigationContainer>
  );
}
    
이렇게 하면 각 화면의 이름을 우리가 직접 제어할 수 있어서 훨씬 더 깔끔하고 의미 있는 데이터를 얻을 수 있어!

자동 수집, 끄고 싶을 땐 끌 수 있어!

물론 "나는 이 자동 수집 기능이 필요 없어!"라고 생각할 수도 있어.
특히 개인정보보호가 아주 민감한 앱이라면, 데이터 수집에 대한 유저의 동의를 받기 전까지는 자동 수집을 비활성화해야 할 수도 있지.

그럴 땐 각 플랫폼의 설정 파일에서 간단하게 제어할 수 있어.

  • iOS: `ios/[YourProjectName]/Info.plist` 파일에 `FirebaseAnalyticsCollectionEnabled` 키를 추가하고 값을 `false` (Boolean)로 설정해줘.
  • Android: `android/app/src/main/AndroidManifest.xml` 파일의 `` 태그 안에 아래 메타데이터를 추가해줘.
    
    <meta-data android:name="firebase_analytics_collection_enabled" android:value="false" />
          

이렇게 설정하면 앱이 시작될 때 자동 수집 기능이 꺼진 상태로 시작돼.
그리고 나중에 유저에게 동의를 받은 후에, 코드 내에서 아래와 같이 동적으로 활성화할 수 있지.


import analytics from '@react-native-firebase/analytics';

// 유저가 데이터 수집에 동의했을 때
async function grantDataCollection() {
  await analytics().setAnalyticsCollectionEnabled(true);
}
  

어때? 자동 수집 이벤트만 잘 이해해도 우리 앱의 기본적인 건강 상태는 충분히 체크할 수 있겠지?
하지만 이건 시작에 불과해. 진짜 재미있는 건 지금부터야.
우리 앱만의 특별한 행동들을 추적하는 '커스텀 이벤트'의 세계로 떠나보자! 🚀

커스텀 이벤트 - 우리 앱만의 발자취를 남겨보자! ✍️

자동 수집 이벤트가 '국영수' 같은 기본 과목이라면, 커스텀 이벤트는 '미술, 음악, 체육'처럼 우리 앱의 개성을 마음껏 뽐낼 수 있는 선택 과목이야.
Firebase가 자동으로 잡아주지 못하는, 우리 앱에만 있는 특별하고 중요한 유저 행동들을 직접 정의해서 추적하는 거지.

예를 들어, 우리 앱이 쇼핑몰 앱이라면 '장바구니 담기' 버튼 클릭, '찜하기' 버튼 클릭 같은 행동이 중요할 거고,
게임 앱이라면 '레벨 클리어', '아이템 사용' 같은 행동이 중요하겠지?
이런 핵심적인 행동들을 데이터로 남겨야 유저를 제대로 이해할 수 있어.

`logEvent`: 커스텀 이벤트의 핵심 명령어

리액트 네이티브에서 커스텀 이벤트를 기록하는 건 정말 간단해.
Firebase Analytics 모듈에서 제공하는 `logEvent`라는 함수 하나만 기억하면 돼.

기본적인 사용법은 이래.


import analytics from '@react-native-firebase/analytics';

// 'share_button'이라는 이름의 이벤트를 기록
await analytics().logEvent('share_button', {
  content_type: 'image',
  item_id: 'photo_123',
});
  

`logEvent` 함수는 두 개의 인자를 받아.

  1. 이벤트 이름 (Event Name): 문자열 형태의 이벤트 이름이야. '어떤 행동'을 했는지 명확하게 알 수 있도록 이름을 짓는 게 중요해. 예를 들면 `button_click` 보다는 `add_to_cart_button_click`처럼 구체적인 게 좋지.
  2. 파라미터 (Parameters): 이벤트에 대한 부가 정보를 담는 객체(Object)야. '무엇을', '어떻게' 했는지에 대한 상세한 내용이지. 위 예시에서는 '이미지(content_type)' 타입의 'photo_123(item_id)'이라는 아이템을 공유했다는 정보를 함께 보낸 거야. 이 파라미터는 선택사항이라서, 그냥 `await analytics().logEvent('logout');`처럼 이름만 보내도 괜찮아.
🚨 주의! 꼭 읽어봐!
Firebase에는 몇 가지 제한사항이 있어. 이걸 모르고 마구잡이로 이벤트를 만들면 나중에 곤란해질 수 있으니 꼭 기억해둬!
  • 이벤트 이름: 40자 이하여야 하고, 알파벳, 숫자, 언더스코어(_)만 사용 가능해. 알파벳으로 시작해야 하는 것도 잊지 마!
  • 파라미터 이름: 이벤트 이름과 규칙이 같아.
  • 파라미터 값: 문자열(String)이나 숫자(Number)만 가능해. 객체나 배열은 넣을 수 없어! 문자열 값은 100자 이하여야 해.
  • 고유 이벤트 이름 개수: 한 프로젝트당 최대 500개까지 만들 수 있어. 500개가 넘어가는 순간, 가장 오래되고 사용량이 적은 이벤트부터 삭제될 수 있으니 신중하게 이름을 지어야 해. `click_user_123`, `click_user_124`처럼 유저 ID를 이벤트 이름에 넣는 실수는 절대 금물!
  • 이벤트당 파라미터 개수: 한 이벤트에 최대 25개까지 파라미터를 포함할 수 있어.

실전! 시나리오별 커스텀 이벤트 설계하기

백문이 불여일견! 실제 앱 시나리오를 통해 어떻게 커스텀 이벤트를 설계하고 코드를 작성하는지 알아보자.

시나리오 1: E-커머스 앱 🛍️

우리 앱은 예쁜 옷을 파는 쇼핑몰이야. 유저가 상품을 보고, 장바구니에 담고, 구매하는 전체 과정을 추적하고 싶어.

1. 상품 상세 페이지 조회 (`view_item`)

유저가 특정 상품의 상세 페이지에 들어왔을 때 발생하는 이벤트. 어떤 상품이 인기가 많은지 알 수 있어.


// 상품 상세 페이지 컴포넌트 (ProductDetailScreen.js)
import analytics from '@react-native-firebase/analytics';

useEffect(() => {
  // 화면이 렌더링될 때 'view_item' 이벤트 기록
  analytics().logEvent('view_item', {
    item_id: 'P12345', // 상품 고유 ID
    item_name: '하늘하늘 쉬폰 원피스', // 상품명
    item_category: '원피스', // 카테고리
    price: 45000, // 가격
    currency: 'KRW', // 통화
  });
}, []);
  

2. 장바구니에 추가 (`add_to_cart`)

'장바구니 담기' 버튼을 눌렀을 때! 유저들이 구매를 망설이는 상품이 무엇인지 파악할 수 있지.


// '장바구니 담기' 버튼의 onPress 함수
const handleAddToCart = async () => {
  // ... (장바구니에 상품을 추가하는 로직)

  await analytics().logEvent('add_to_cart', {
    item_id: 'P12345',
    item_name: '하늘하늘 쉬폰 원피스',
    price: 45000,
    quantity: 1, // 수량
    currency: 'KRW',
  });
};
  

3. 구매 완료 (`purchase`)

결제가 성공적으로 완료되었을 때! 우리 앱의 최종 목표 달성 순간이야. 매출 분석의 핵심 데이터가 돼.


// 결제 완료 후 호출되는 함수
const onPaymentSuccess = async (paymentResult) => {
  // ... (결제 성공 처리 로직)

  await analytics().logEvent('purchase', {
    transaction_id: 'T98765', // 거래 고유 ID
    value: 85000, // 총 결제 금액 (배송비 포함)
    shipping: 3000, // 배송비
    currency: 'KRW',
    items: [ // 구매한 상품 목록 (이렇게 직접 보내진 못하고, 각 아이템별로 이벤트를 보내거나 파라미터를 분리해야 함)
      { item_id: 'P12345', quantity: 1 },
      { item_id: 'S54321', quantity: 2 },
    ]
  });
  // 참고: items 배열은 직접 보낼 수 없으므로, 보통은 value(총액)와 transaction_id만 보내거나,
  // BigQuery 연동 시 더 상세한 데이터를 보낼 수 있다.
};
  

이렇게 `view_item` -> `add_to_cart` -> `purchase`로 이어지는 유저의 여정을 데이터로 추적하면, 어떤 단계에서 유저들이 가장 많이 이탈하는지(drop-off)를 분석할 수 있어. 이걸 '퍼널 분석(Funnel Analysis)'이라고 하는데, 앱 개선에 정말 큰 도움이 돼.

시나리오 2: 콘텐츠 기반 소셜 앱 📝

우리 앱은 유저들이 글을 쓰고 공유하는 블로그 같은 앱이야. 유저들의 참여도를 측정하고 싶어.

1. 콘텐츠 공유 (`share`)

'공유하기' 버튼을 눌렀을 때. 어떤 콘텐츠가 바이럴될 가능성이 높은지 알 수 있어.


const handleShare = async (postId, postTitle) => {
  // ... (공유 기능 실행 로직)

  await analytics().logEvent('share', {
    method: 'KakaoTalk', // 공유 방식 (카카오톡, 페이스북 등)
    content_type: 'post', // 콘텐츠 타입
    item_id: postId, // 게시물 ID
  });
};
  

2. 좋아요 클릭 (`like_content`)

'좋아요' 하트를 눌렀을 때. 유저들의 콘텐츠 선호도를 파악하는 가장 직접적인 지표지.


const handleLike = async (postId) => {
  // ... (좋아요 상태 변경 로직)

  await analytics().logEvent('like_content', {
    item_id: postId,
    like_status: 'liked', // 'liked' 또는 'unliked'
  });
};
  

어때? `logEvent` 하나만 잘 써도 우리 앱의 거의 모든 중요한 행동들을 기록할 수 있겠지?
중요한 건, '우리가 무엇을 알고 싶은가?'를 먼저 고민하고, 그에 맞춰 이벤트를 설계하는 거야.
데이터는 그냥 쌓기만 하면 쓰레기가 되지만, 명확한 목표를 가지고 수집하면 우리 앱을 성장시키는 보물이 될 수 있어. 💎

커스텀 이벤트 데이터 흐름도 우리 앱에서 유저의 행동이 어떻게 Firebase로 전달될까? 📱 React Native 앱 유저가 '구매' 버튼 클릭! logEvent('purchase') ⚙️ Firebase SDK 이벤트 데이터를 수집하고 안전하게 서버로 전송 📊 Firebase 콘솔 수집된 데이터를 분석하고 인사이트 리포트 제공

유저 속성(User Properties) - 너 T야? F야? 우리 유저 MBTI 알아보기 🤔

이벤트가 유저의 '행동'을 기록하는 거라면, 유저 속성(User Property)은 유저 그 '자체'를 설명하는 꼬리표 같은 거야.
한 번의 행동으로 끝나는 이벤트와 달리, 유저 속성은 한 번 설정해두면 그 유저가 앱을 사용하는 내내 유지되는 특징을 가져.
마치 사람에게 '이름', '나이', '성별' 같은 속성이 붙어있는 것처럼 말이야.

예를 들어, 우리 앱에 '프리미엄 구독' 기능이 있다고 해보자.
어떤 유저는 '무료 유저'일 거고, 어떤 유저는 '프리미엄 유저'겠지?
이때 `subscription_tier`라는 유저 속성을 만들어서 'free' 또는 'premium'이라는 값을 설정해두는 거야.
그러면 나중에 '프리미엄 유저'들만 따로 필터링해서 그들의 행동 패턴을 분석하거나, '무료 유저'들에게만 프리미엄 구독 할인 푸시 메시지를 보내는 등의 타겟 마케팅이 가능해져. 🎯

`setUserProperty`: 유저에게 꼬리표 붙여주기

유저 속성을 설정하는 것도 아주 간단해. `setUserProperty`라는 함수를 사용하면 돼.
이 함수는 두 개의 문자열 인자를 받아. 첫 번째는 속성의 이름(key), 두 번째는 속성의 값(value)이야.


import analytics from '@react-native-firebase/analytics';

// 유저가 프리미엄 구독을 시작했을 때
const onSubscribePremium = async () => {
  // ... 구독 처리 로직 ...

  // 'subscription_tier'라는 속성을 'premium'으로 설정
  await analytics().setUserProperty('subscription_tier', 'premium');
};

// 유저가 선호 언어를 '한국어'로 설정했을 때
const onChangeLanguage = async () => {
  // ... 언어 변경 로직 ...

  // 'preferred_language' 속성을 'korean'으로 설정
  await analytics().setUserProperty('preferred_language', 'korean');
};
  

만약 특정 속성을 제거하고 싶다면, 값(value)에 `null`을 넣어주면 돼.


// 유저가 구독을 해지했을 때
const onUnsubscribe = async () => {
  // ... 구독 해지 로직 ...

  // 'subscription_tier' 속성을 'free'로 다시 변경하거나,
  await analytics().setUserProperty('subscription_tier', 'free');
  
  // 혹은 속성 자체를 제거할 수도 있다.
  // await analytics().setUserProperty('subscription_tier', null);
};
  

어떤 유저 속성을 사용하면 좋을까? (활용 예시)

유저 속성은 우리 앱의 특징에 맞춰 자유롭게 만들 수 있어. 몇 가지 아이디어를 던져줄게!

  • `user_tier`: free, premium, vip 등 유저의 등급
  • `preferred_category`: fashion, sports, tech 등 유저가 가장 좋아하는 콘텐츠 카테고리
  • `level`: 게임 앱에서 유저의 현재 레벨
  • `login_method`: email, google, kakao 등 로그인 방식
  • `is_notification_on`: 푸시 알림 수신 동의 여부 (true/false)
  • `total_purchase_amount`: 누적 구매 금액 (특정 구간으로 나눠서: 0-10000, 10001-50000 등)

이런 유저 속성들을 잘 설정해두면, Firebase 콘솔의 'Audiences(잠재고객)' 기능을 통해 특정 속성을 가진 유저 그룹을 만들 수 있어.
예를 들어, '누적 구매 금액이 5만원 이상이고, 푸시 알림을 수신 동의한 유저' 같은 아주 구체적인 타겟 그룹을 만들어서 특별 프로모션을 진행할 수 있는 거지. 정말 강력하지 않아? 💪

🚨 주의! 개인정보는 절대 금물!
유저 속성은 정말 강력한 기능이지만, 절대로! 네버! 개인을 식별할 수 있는 정보(PII - Personally Identifiable Information)를 담아서는 안 돼.
  • 절대 안 되는 정보 ❌: 이메일 주소, 이름, 전화번호, 주소 등
  • 사용 가능한 정보 ⭕: 유저의 등급, 선호 카테고리, 레벨 등 개인을 특정할 수 없는 일반적인 정보
이건 구글의 정책이기도 하고, 사용자의 개인정보를 보호하기 위한 가장 기본적인 원칙이야. 만약 실수로라도 개인정보를 수집하면 계정이 정지될 수도 있으니 꼭! 명심해야 해.

이벤트가 유저의 행동 하나하나를 점으로 찍는 것이라면, 유저 속성은 그 점들을 연결해서 유저라는 사람의 '모습'을 그려내는 스케치와 같아.
이 두 가지를 함께 사용하면, 우리는 비로소 유저를 입체적으로 이해하고, 그들에게 꼭 맞는 맞춤형 경험을 제공할 수 있게 될 거야.
자, 이제 이렇게 차곡차곡 모은 데이터들을 요리할 시간이야. Firebase 콘솔이라는 멋진 주방으로 함께 가보자! 🍳

Firebase 콘솔 대시보드 - 데이터, 이제 요리해볼 시간! 🍽️

자, 지금까지 우리는 열심히 밭을 갈고 씨앗을 심었어.
이제 탐스럽게 열린 데이터라는 열매를 수확하고, 맛있게 요리해서 맛볼 시간이야! 😋
우리의 주방은 바로 Firebase 콘솔에 있는 Analytics 대시보드야. 처음 보면 뭐가 뭔지 복잡해 보일 수 있지만, 걱정 마. 핵심 기능들만 쏙쏙 뽑아서 알려줄게.

가장 중요한 무기: DebugView 🐞

요리를 시작하기 전에, 재료가 신선한지 확인하는 게 먼저겠지?
우리가 앱에서 보낸 이벤트들이 Firebase에 잘 도착하고 있는지 실시간으로 확인할 수 있는 기능이 바로 'DebugView'야. 개발자에게는 생명수와도 같은 기능이지.

데이터가 대시보드에 정식으로 반영되려면 몇 시간씩 걸리지만, DebugView를 사용하면 이벤트를 보내는 즉시! 1초 만에! 확인할 수 있어.
이벤트 이름에 오타는 없는지, 파라미터는 제대로 담겨서 오는지 등을 바로바로 테스트할 수 있어서 개발 시간을 엄청나게 단축시켜 줘.

DebugView 활성화 방법

1. 시뮬레이터/에뮬레이터에서:

  • iOS 시뮬레이터: Xcode에서 `Product` > `Scheme` > `Edit Scheme`으로 이동한 뒤, `Run` > `Arguments` 탭에서 `Arguments Passed On Launch`에 `-FIRAnalyticsDebugEnabled`를 추가해주면 돼.
  • Android 에뮬레이터: 터미널에서 아래 명령어를 입력하면 디버그 모드가 활성화돼.
    adb shell setprop debug.firebase.analytics.app [우리 앱의 패키지 이름]
    비활성화하려면 `adb shell setprop debug.firebase.analytics.app .none.`을 입력하면 돼.

2. 실제 기기에서:

실제 기기에서 테스트하는 건 조금 더 까다롭지만 불가능하진 않아. 각 플랫폼별 네이티브 코드를 통해 디버그 모드를 활성화하는 방법이 있는데, 보통은 시뮬레이터/에뮬레이터에서 확인하는 것만으로도 충분해.

이렇게 디버그 모드를 켠 상태에서 앱을 실행하고 이벤트를 발생시켜 봐.
그리고 Firebase 콘솔의 왼쪽 메뉴에서 `Analytics` > `DebugView`로 들어가면, 마치 심장 박동 그래프처럼 실시간으로 이벤트가 타임라인에 찍히는 걸 볼 수 있을 거야.
이벤트 하나를 클릭하면 함께 전송된 파라미터와 유저 속성까지 상세하게 볼 수 있어. 이걸로 우리가 만든 코드가 잘 작동하는지 100% 확신할 수 있게 되는 거지!

대시보드 둘러보기: 우리 앱의 건강검진 결과표

DebugView로 데이터가 잘 들어오는 걸 확인했다면, 이제 진짜 대시보드를 살펴볼 차례야.

  • 대시보드 (Dashboard): 우리 앱의 핵심 지표들을 한눈에 볼 수 있는 종합 상황실이야. 활성 사용자 수(DAU/MAU), 평균 세션 시간, 수익 등을 요약해서 보여줘. 매일 아침 커피 한 잔 하면서 여기만 쓱 훑어봐도 우리 앱이 밤새 안녕했는지 알 수 있지.
  • 이벤트 (Events): 우리가 수집한 모든 이벤트들의 목록과 통계를 볼 수 있는 곳이야. `purchase` 이벤트가 총 몇 번 일어났는지, `add_to_cart` 이벤트는 어떤 파라미터와 함께 들어왔는지 등을 상세하게 분석할 수 있어. 특정 이벤트를 '전환(Conversion)'으로 표시해두면, 우리 앱의 핵심 목표 달성률을 더 비중 있게 추적할 수도 있어.
  • 잠재고객 (Audiences): 유저 속성 파트에서 잠깐 언급했지? 특정 조건을 만족하는 유저 그룹을 만드는 곳이야. '최근 일주일 내에 접속했지만 구매는 하지 않은 유저'나 '특정 레벨에 도달한 유저' 같은 그룹을 만들어서, 이들만을 위한 맞춤형 전략을 세울 수 있어. 예를 들어, Firebase의 다른 기능인 'Cloud Messaging'이나 'Remote Config'와 연동해서 이 잠재고객에게만 특정 푸시 메시지를 보내거나 다른 UI를 보여주는 등의 마법을 부릴 수 있지!
  • 사용자 속성 (User Properties): 우리가 `setUserProperty`로 설정한 모든 유저 속성들의 현황을 볼 수 있어. 예를 들어 `subscription_tier`라는 속성을 등록했다면, 'free' 유저와 'premium' 유저의 비율이 어떻게 되는지 파이 차트로 한눈에 볼 수 있지.

퍼널 분석: 유저 이탈 구간을 찾아내는 탐정 놀이 🕵️

Firebase Analytics의 꽃이라고 할 수 있는 기능 중 하나가 바로 '퍼널(Funnel)' 분석이야.
퍼널은 우리말로 '깔때기'라는 뜻인데, 유저가 우리가 원하는 최종 목표(예: 구매)에 도달하기까지 거쳐야 하는 여러 단계를 설정하고, 각 단계마다 얼마나 많은 유저가 다음 단계로 넘어가는지, 혹은 이탈하는지를 시각적으로 보여주는 기능이야.

예를 들어, 이런 퍼널을 만들 수 있어.

1단계: 상품 상세 페이지 조회 (`view_item`)
2단계: 장바구니에 추가 (`add_to_cart`)
3단계: 결제 페이지 진입 (`begin_checkout`)
4.단계: 구매 완료 (`purchase`)

이렇게 퍼널을 설정하고 나면, Firebase가 멋진 그래프로 보여줄 거야.
"1000명이 상품을 봤는데, 그중 200명만 장바구니에 담았고, 100명만 결제 페이지에 갔다가, 최종적으로 50명만 구매를 완료했네!" 와 같이 말이야.
만약 2단계에서 3단계로 넘어가는 비율이 유독 낮다면? 아, 우리 앱의 결제 페이지에 뭔가 심각한 문제가 있구나! (예: UI가 복잡하다, 로딩이 너무 길다 등) 라는 가설을 세우고 개선 작업을 진행할 수 있는 거지.

이처럼 데이터를 통해 문제점을 발견하고, 개선하고, 다시 데이터로 검증하는 사이클을 반복하다 보면 우리 앱은 점점 더 완벽에 가까워질 거야.
이런 전문적인 데이터 분석 기술은 개발자로서의 몸값을 높이는 데도 큰 도움이 될 거야. 혹시 더 깊이 있는 분석이나 전문가의 도움이 필요하다면, 재능넷 같은 플랫폼에서 데이터 분석 전문가에게 자문을 구해보는 것도 좋은 방법이 될 수 있겠지? 😉

고급 활용 팁 & 실전 전략 - 데이터 고인물이 되는 길 🌊

자, 이제 기본기는 모두 마스터했어.
이벤트도 쏠 줄 알고, 대시보드도 볼 줄 알게 됐지.
이제부터는 Firebase Analytics를 200% 활용해서 우리 앱을 한 단계 더 레벨업 시킬 수 있는 고급 전략들을 알아볼 거야.
이 기능들을 자유자재로 다루게 되면, 너는 더 이상 주니어 개발자가 아닐지도 몰라! 😎

1. Remote Config + Analytics: 유저 그룹별 맞춤 UI 제공하기

Firebase의 'Remote Config'는 앱을 업데이트하지 않고도 앱의 동작과 모양을 원격으로 변경할 수 있는 기능이야.
예를 들어, 버튼 색깔을 바꾸거나, 특정 기능을 켜고 끄거나, 이벤트 팝업 문구를 바꾸는 등의 작업을 서버에서 값을 내려주는 것만으로 할 수 있지.

이게 Analytics와 만나면 엄청난 시너지를 내.
우리가 Analytics에서 만들어 둔 '잠재고객(Audiences)'을 기억해?
Remote Config에서 특정 잠재고객에게만 다른 값을 내려주도록 설정할 수 있어!

실전 시나리오:

우리 앱의 '프리미엄 유저'(`subscription_tier` = 'premium')에게는 홈 화면의 배너를 '신규 기능 소개'로 보여주고,
'무료 유저'(`subscription_tier` = 'free')에게는 '프리미엄 50% 할인!' 배너를 보여주고 싶어.

이럴 때 Remote Config에서 `home_banner_type`이라는 파라미터를 만들고, 기본값은 'promotion'으로 설정해.
그리고 '조건 추가'를 눌러서 '잠재고객'이 '프리미엄 유저'일 경우에는 `home_banner_type` 값을 'new_feature'로 덮어쓰도록 설정하는 거야.

앱에서는 Remote Config SDK를 통해 `home_banner_type` 값을 받아오고, 그 값에 따라 다른 배너 컴포넌트를 렌더링해주기만 하면 끝!
이게 바로 개인화 마케팅의 시작이야. 유저별로 최적화된 경험을 제공함으로써 구매 전환율이나 유저 만족도를 극적으로 높일 수 있어.

2. Crashlytics + Analytics: 버그의 원인을 파헤치는 탐정

Firebase 'Crashlytics'는 앱에서 발생하는 크래시(비정상 종료)를 실시간으로 리포트해주는 아주 고마운 친구야.
그런데 이 친구가 Analytics와 만나면 그냥 크래시 리포트가 아니라, 한 편의 추리 소설이 돼.

Crashlytics는 크래시가 발생하기 직전에 유저가 어떤 행동을 했는지 Analytics 이벤트를 기반으로 '로그(Log)'를 남겨줘. 이걸 '브레드크럼(Breadcrumbs, 빵 부스러기)'이라고 불러. 헨젤과 그레텔이 길을 잃지 않으려고 빵 부스러기를 남긴 것처럼, 유저가 크래시라는 막다른 길에 도달하기까지의 경로를 그대로 보여주는 거지.

크래시 리포트 예시:


[ANALYTICS] screen_view: 'ProductListScreen'
[ANALYTICS] logEvent: 'select_item', { item_id: 'XYZ' }
[ANALYTICS] screen_view: 'ProductDetailScreen'
[ANALYTICS] logEvent: 'add_to_cart_button_click'
...
FATAL EXCEPTION: NullPointerException at com.myapp.CartManager.addItem
  

이 로그만 봐도 우리는 "아, 유저가 상품 목록에서 특정 아이템을 보고, 상세 화면으로 들어와서 장바구니 버튼을 눌렀을 때 CartManager에서 Null 에러가 나면서 앱이 죽었구나!"라고 명확하게 원인을 파악할 수 있어.
더 이상 "어떤 상황에서 크래시가 나는지 재현이 안 돼요 ㅠㅠ"라며 머리를 쥐어뜯을 필요가 없는 거야. 🤯

3. BigQuery 연동: 우리 앱 데이터의 우주를 탐험하기

Firebase Analytics 콘솔은 정말 훌륭하지만, 정해진 틀 안에서만 데이터를 볼 수 있다는 한계가 있어.
만약 우리가 정말 복잡하고 깊이 있는 분석을 하고 싶다면? 예를 들어, 특정 유저 그룹의 시간대별 접속 패턴과 구매 상품 카테고리의 상관관계를 분석하고 싶다면?

이럴 때 필요한 것이 바로 'BigQuery'야.
BigQuery는 구글 클라우드에서 제공하는 대용량 데이터 웨어하우스인데, Firebase Analytics의 모든 원시(raw) 데이터를 BigQuery로 내보내도록 설정할 수 있어. (참고: 유료 플랜인 Blaze 플랜을 사용해야 하지만, 무료 사용량이 넉넉해서 웬만한 규모의 앱은 부담 없이 쓸 수 있어.)

데이터가 BigQuery로 넘어가는 순간, 우리는 SQL 쿼리를 통해 상상할 수 있는 거의 모든 형태의 데이터 분석을 할 수 있게 돼.
Firebase 콘솔이 잘 차려진 레스토랑 코스 요리라면, BigQuery는 우리가 직접 신선한 재료를 골라 마음대로 요리할 수 있는 거대한 뷔페 같은 거지.

물론 SQL에 대한 지식이 필요하지만, 이 영역까지 마스터한다면 너는 단순한 앱 개발자를 넘어 '데이터를 다루는 개발자', 즉 그로스 해커(Growth Hacker)의 역량까지 갖추게 되는 거야.
이런 고급 기술과 경험은 재능넷과 같은 플랫폼에서 너의 가치를 더욱 빛나게 해줄 강력한 무기가 될 수 있어. ✨

이처럼 Firebase Analytics는 단순히 유저 수를 세는 카운터가 아니야.
Remote Config, Crashlytics, BigQuery 등 Firebase 생태계의 다른 서비스들과 결합했을 때, 우리 앱을 끊임없이 성장시키는 강력한 엔진이 되어줄 거야.

마무리 - 데이터는 답을 알고 있다

와, 정말 긴 여정이었어! 👏
Firebase 프로젝트를 만들고, 리액트 네이티브 앱에 SDK를 심는 첫걸음부터 시작해서,
자동 이벤트, 커스텀 이벤트, 유저 속성으로 데이터를 차곡차곡 쌓고,
DebugView와 대시보드로 데이터를 요리하는 방법,
그리고 다른 Firebase 서비스와 연계해서 데이터를 200% 활용하는 고급 전략까지.
정말 많은 것을 함께 배웠다, 그렇지?

처음에는 막막하고 복잡하게만 느껴졌을지 몰라.
하지만 이제 너는 더 이상 '감'에 의존해서 앱을 만들지 않아도 돼.
너의 손에는 이제 '데이터'라는 강력한 나침반이 쥐어져 있으니까.

유저들이 왜 떠나는지, 무엇에 열광하는지, 어디서 불편해하는지, 그들의 목소리가 데이터 속에 담겨 있어.
우리의 임무는 그 목소리에 귀를 기울이고, 그들이 더 행복하게 우리 앱을 사용할 수 있도록 끊임없이 개선해나가는 거야.
이것이 바로 성공하는 앱을 만드는 가장 확실하고 유일한 방법일지도 몰라.

기억해줘. 데이터 분석은 한 번 설정하고 끝나는 이벤트가 아니야.
가설을 세우고(Hypothesize), 데이터를 수집하고(Measure), 분석해서 배우고(Learn), 다시 개선하는(Iterate) 과정의 무한 반복이지.
처음부터 너무 거창하게 시작할 필요는 없어.
가장 중요하다고 생각하는 핵심 이벤트 몇 개부터 시작해서, 차근차근 추적의 범위를 넓혀나가 봐.

오늘 배운 내용들이 너의 개발 여정에 든든한 무기가 되기를 진심으로 바라.
이제 너의 코드는 단순히 기능을 구현하는 것을 넘어, 유저와 소통하고 앱을 성장시키는 살아있는 생명력을 갖게 될 거야.
데이터와 함께 춤추며, 세상에 없는 멋진 앱을 만들어나가길 응원할게! 🔥

Happy Coding! 💻

댓글 작성

이 글에 대한 여러분의 생각을 들려주세요

댓글 0
댓글을 불러오는 중입니다.

아직 댓글이 없습니다.