콘솔로 이동

Flutter 앱에 Firebase 추가

이 가이드에 따라 Flutter 앱에 Firebase 제품을 추가하세요.

1단계: 환경 설정

  • 다음 항목 설치를 비롯하여 사용 중인 운영 체제에 맞는 Flutter를 설치합니다.

    • Flutter SDK
    • 지원 라이브러리
    • 플랫폼별 소프트웨어 및 SDK
  • Android 스튜디오, IntelliJ, Xcode, VS Code 등 선호하는 편집기 또는 IDE를 설치합니다.

  • 선호하는 편집기 또는 IDE에서 Flutter 앱을 엽니다.

    • iOS 개발 — 앱이 iOS 8 이상을 타겟팅해야 합니다.
    • Android 개발 — 앱이 API 레벨 16(Jelly Bean) 이상을 타겟팅해야 합니다.
  • 앱을 실행할 기기 또는 에뮬레이터를 설정합니다.

    • Android 개발 — 에뮬레이터가 Google Play에서 에뮬레이터 이미지를 사용해야 합니다.
  • Google 계정을 사용하여 Firebase에 로그인합니다.

2단계: Firebase 프로젝트 만들기

Flutter 앱에 Firebase를 추가하려면 우선 앱에 연결할 Firebase 프로젝트를 만들어야 합니다. Firebase 프로젝트에 대한 자세한 내용은 Firebase 프로젝트 이해를 참조하세요.

3단계: Firebase를 사용하도록 앱 구성

하나 이상의 앱을 Firebase 프로젝트와 연결하도록 구성할 수 있습니다. 그러려면 앱의 플랫폼별 ID를 Firebase 프로젝트에 등록하세요. Firebase가 앱의 구성 파일을 자동으로 생성합니다.

앱 구성 방법에 대한 자세한 안내는 아래의 iOSAndroid 플랫폼별 단계를 참조하세요.

Flutter 앱의 최상위 디렉토리에서 iosandroid 디렉토리에 iOS 및 Android용 플랫폼별 구성 파일이 보관됩니다.

iOS 앱 구성

  1. Firebase Console의 프로젝트 개요 페이지 중앙에 있는 iOS 아이콘을 클릭하여 설정 워크플로를 시작합니다.

    Firebase 프로젝트에 앱을 이미 추가한 경우 앱 추가를 클릭하여 플랫폼 옵션을 표시합니다.

  2. 앱을 Firebase 프로젝트에 추가합니다.

    1. iOS 번들 ID 필드에 앱의 번들 ID를 입력합니다.

      • XCode에서 앱을 열고 최상위 Runner 디렉토리의 General(일반) 탭에 액세스하여 이 번들 ID를 찾습니다. Bundle Identifier(번들 식별자) 필드의 값이 iOS 번들 ID입니다(예: com.yourcompany.yourproject).
    2. (선택사항) 설정 워크플로의 안내에 따라 기타 앱 정보를 입력합니다.

    3. 앱 등록을 클릭합니다.

  3. 앱에 Firebase iOS 구성 파일을 추가합니다.

    1. GoogleService-Info.plist 다운로드를 클릭하여 Firebase iOS 구성 파일(GoogleService-Info.plist)을 가져옵니다.

      언제든지 다시 Firebase iOS 구성 파일을 다운로드할 수 있습니다.

    2. 파일을 Flutter 앱의 Runner/Runner 디렉토리로 이동합니다.

  4. Firebase 콘솔 설정 워크플로로 돌아가서 다음을 클릭하여 나머지 단계를 건너뜁니다.

  5. FlutterFire 플러그인 추가로 넘어갑니다.

Android 앱 구성

  1. Firebase Console의 프로젝트 개요 페이지 중앙에 있는 Android 아이콘을 클릭하여 설정 워크플로를 시작합니다.

  2. 앱을 Firebase 프로젝트에 추가합니다.

    1. Android 패키지 이름 필드에 앱의 애플리케이션 ID를 입력합니다.

      • 애플리케이션 ID를 때때로 패키지 이름이라고도 합니다.

      • 이 애플리케이션 ID를 모듈(앱 레벨) Gradle 파일(주로 android/app/build.gradle)에서 찾습니다(애플리케이션 ID 예: com.yourcompany.yourproject).

    2. (선택사항) 설정 워크플로의 안내를 따라 기타 앱 정보를 입력합니다.

    3. 앱 등록을 클릭합니다.

  3. 앱에 Firebase Android 구성 파일을 추가합니다.

    1. google-services.json 다운로드를 클릭하여 Firebase Android 구성 파일(google-services.json)을 가져옵니다.

      언제든지 다시 Firebase Android 구성 파일을 다운로드할 수 있습니다.

    2. 구성 파일을 Flutter 앱의 android/app 디렉토리로 이동합니다.

  4. Android 앱에서 Firebase 서비스를 사용할 수 있도록 google-services 플러그인을 Gradle 파일에 추가합니다.

    1. 루트 레벨(프로젝트 레벨) Gradle 파일(android/build.gradle)에서 규칙을 추가하여 Google 서비스 플러그인을 포함합니다. Google의 Maven 저장소도 있는지 확인합니다.

      buildscript {
      
        repositories {
          // Check that you have the following line (if not, add it):
          google()  // Google's Maven repository
        }
      
        // ...
        dependencies {
          // ...
      
          // Add the following line:
          classpath 'com.google.gms:google-services:3.2.1'  // Google Services plugin
        }
      }
      allprojects {
        // ...
      
        repositories {
          // Check that you have following line (if not, add it):
          google()  // Google's Maven repository
          // ...
        }
      }
      
    2. 모듈(앱 수준) Gradle 파일(일반적으로 android/app/build.gradle)에서 다음 줄을 파일 맨 아래에 추가합니다.

      dependencies {
        // ...
      }
      
      // ...
      
      // Add the following line to the bottom of the file:
      apply plugin: 'com.google.gms.google-services'  // Google Play services Gradle plugin
      
    3. flutter packages get을 실행합니다.

      패키지 및 플러그인 관리에 대한 자세한 내용은 패키지 사용을 참조하세요.

  5. FlutterFire 플러그인 추가로 넘어갑니다.

4단계: FlutterFire 플러그인 추가

Flutter는 플러그인을 사용하여 Firebase API 등 다양한 플랫폼별 서비스에 대한 액세스를 제공합니다. 플러그인에는 각 플랫폼의 서비스 및 API에 액세스하기 위한 플랫폼별 코드가 포함되어 있습니다.

각 Firebase 제품(예: 데이터베이스, 인증, 애널리틱스, 저장소)에 하나씩 여러 다양한 라이브러리를 통해 Firebase에 액세스할 수 있습니다. Flutter는 일련의 Firebase 플러그인을 제공하며, 이를 총칭하여 FlutterFire라고 합니다.

Flutter는 멀티 플랫폼 SDK이므로 각 FlutterFire 플러그인을 iOS와 Android 모두에 적용할 수 있습니다. 따라서 FlutterFire 플러그인을 Flutter 앱에 추가하면 Firebase 앱의 iOS 및 Android 버전 모두에서 사용됩니다.

FlutterFire 플러그인의 최신 목록은 FlutterFire 문서를 확인하세요.

  1. 에뮬레이터나 기기에서 현재 앱이 실행되고 있지 않은지 확인합니다.

  2. Flutter 앱의 루트 디렉토리에서 pubspec.yaml 파일을 엽니다.

  3. Firebase Core SDK용 FlutterFire 플러그인을 추가합니다.

    dependencies:
      flutter:
        sdk: flutter
      firebase_core: ^0.2.5  # add dependency for Firebase Core
    
  4. 특정 Firebase 제품 사용을 위한 추가 FlutterFire 플러그인을 추가합니다.

    다음 섹션인 애널리틱스 추가는 FlutterFire 플러그인을 앱에 추가하는 방법의 예입니다.

  5. 앱을 실행하여 설치를 확인합니다.

이제 준비가 끝났습니다. Firebase를 사용하기 위한 Flutter 앱 등록 및 구성 작업을 마쳤습니다.

애널리틱스 추가(선택사항)

Flutter 프로젝트에 Firebase용 Google 애널리틱스를 추가하는 것은 선택사항이지만 Firebase가 Flutter 프로젝트에서 제대로 작동하고 있는지 비교적 쉽게 확인할 수 있는 방법입니다. 또한 애널리틱스는 프로덕션 앱의 성공 여부를 추적하는 데 도움이 될 뿐 아니라 개발 및 디버깅 중에도 매우 유용하게 사용할 수 있습니다.

  1. 에뮬레이터나 기기에서 현재 앱이 실행되고 있지 않은지 확인합니다.

  2. pubspec.yaml 파일에서 Firebase용 Google 애널리틱스에 대한 FlutterFire 플러그인을 추가합니다.

    dependencies:
      flutter:
        sdk: flutter
      firebase_core: ^0.2.5       # This dependency was added during initial configuration.
      firebase_analytics: ^1.0.4  # add dependency for Google Analytics for Firebase
    
  3. flutter packages get을 실행합니다.

    패키지 및 플러그인 관리에 대한 자세한 내용은 패키지 사용을 참조하세요.

애널리틱스 앱 예

모든 패키지와 마찬가지로 firebase_analytics 플러그인은 프로그램 예와 함께 제공됩니다.

  1. 이미 Firebase를 사용하도록 구성한 Flutter 앱을 엽니다.

  2. 앱의 lib 디렉토리에 액세스한 후에 기존 main.dart 파일을 삭제합니다.

  3. Firebase용 Google 애널리틱스 프로그램 예 저장소에서 다음의 두 파일을 복사하여 앱의 lib 디렉토리에 붙여넣습니다.

    • main.dart
    • tabs_page.dart
  4. Flutter 앱을 실행합니다.

  5. Firebase Console에서 앱의 Firebase 프로젝트로 이동한 후 왼쪽 탐색 메뉴에서 애널리틱스를 클릭합니다.

    • 대시보드를 클릭합니다. 애널리틱스가 제대로 작동 중이면 대시보드의 '지난 30분 동안의 활성 사용자' 패널에 활성 사용자가 표시됩니다. 이 패널에 정보가 표시되는 데 시간이 다소 걸릴 수 있습니다.

    • DebugView를 클릭합니다. 기능을 사용 설정하여 프로그램 예에서 생성된 모든 이벤트가 표시되도록 합니다.

애널리틱스 설정에 대한 자세한 내용은 iOSAndroid 시작 가이드를 참조하세요.

다음 단계