경쟁이 치열한 오늘날의 모바일 앱 시장에서는 사용자를 효과적으로 참여시키고 적시에 필요한 정보를 전달하는 것이 성공의 핵심입니다.
Firebase Cloud Messaging(FCM)은 Firebase가 제공하는 강력한 푸시 알림 서비스로, 앱 사용자와 매끄럽게 연결하고 지속적인 관심을 유지할 수 있도록 도와줍니다.
이 튜토리얼에서는 Flutter에 FCM을 통합하는 과정을 심층적으로 다룹니다. FCM의 장점을 살펴보고, 사용자 참여도를 높이고 앱 성능을 개선하는 실제 사례도 함께 소개합니다.
Firebase Cloud Messaging은 서버와 기기 사이에 안정적이면서 배터리 효율이 뛰어난 연결을 제공합니다. 덕분에 iOS, Android, 웹 환경에서 비용 부담 없이 메시지와 알림을 주고받을 수 있습니다.
이번 글에서는 Firebase를 백엔드 서비스로 활용해 Flutter에서 FCM을 설정하고 사용하는 방법을 알아봅니다. 주로 Android 구현을 중심으로 설명하지만, 일부 설정 차이를 제외하면 iOS에서도 절차는 거의 동일합니다.
다룰 내용
- Firebase에서 앱을 생성하는 방법
- Flutter 프로젝트에 Firebase를 설정하는 방법
- FCM 토큰을 활용해 푸시 알림을 구현하는 방법
이 튜토리얼을 끝까지 따라 하면, Flutter로 실행 중인 앱에 Firebase를 통해 간단한 알림을 전송하는 방법까지 익힐 수 있습니다. 그럼 바로 시작해 보겠습니다.
Firebase에서 앱 생성하기
먼저 Firebase 콘솔에서 새 프로젝트를 생성하겠습니다. 프로젝트 설정, Firebase Cloud Messaging 구성, Flutter 앱에 필요한 인증 정보 및 설정 파일 발급 과정을 순서대로 안내해 드립니다.
앱을 만들기 전에 Firebase 계정이 없다면 먼저 Firebase 콘솔에 회원가입해야 합니다. 가입을 마친 후 새 프로젝트 생성을 진행하세요.
화면 예시: Firebase에서 새 프로젝트 생성하기
프로젝트 생성에는 잠시 시간이 걸릴 수 있습니다.
화면 예시: Firebase 프로젝트 생성 진행 중
프로젝트 생성이 완료되면 자동으로 프로젝트 대시보드로 이동합니다.
화면 예시: Firebase 콘솔의 프로젝트 개요 화면
Firebase 콘솔에서 프로젝트 생성을 마쳤다면, 이제 Flutter 앱 작업을 시작할 차례입니다.
Flutter에 Firebase 설정하기
이 글에서는 Visual Studio Code로 만든 간단한 Flutter 프로젝트를 사용합니다. Flutter 프로젝트 생성 방법이 익숙하지 않다면 공식 문서나 입문 튜토리얼을 먼저 참고하는 것을 추천합니다. 이미 익숙하다면 이 단계는 건너뛰어도 좋습니다.
화면 예시: Android 기기에서 실행 중인 간단한 Flutter 애플리케이션
이제 Flutter 프로젝트에 Firebase를 통합해 보겠습니다. 이를 위해서는 Firebase CLI 명령줄 도구가 필요합니다. 아직 설치하지 않았다면 Firebase 공식 문서를 참고해 먼저 설치해 주세요.
설치가 끝났다면 Firebase CLI로 로그인합니다.
firebase login
화면 예시: Firebase CLI로 Firebase 로그인하기
명령을 실행하면 브라우저가 열리고 Firebase 로그인 페이지로 이동합니다. 인증이 정상적으로 완료되면 다시 터미널로 돌아옵니다.
로그인에 성공했다면 다음으로 FlutterFire CLI를 설치합니다. FlutterFire CLI는 Flutter 앱을 Firebase에 손쉽게 연결하도록 도와주는 명령줄 도구로, Flutter 프로젝트에 Firebase 플러그인을 추가·구성·관리하는 편리한 방법을 제공합니다. 다음 명령으로 FlutterFire CLI를 활성화하세요.
dart pub global activate flutterfire_cli
화면 예시: FlutterFire CLI 설치 과정
다음 단계는 Flutter 프로젝트에 firebase_core 라이브러리를 추가하는 것입니다.
아래 명령을 실행하면 프로젝트의 pubspec.yaml 파일에 firebase_core 패키지가 의존성으로 자동 추가되고, pub.dev에서 최신 버전을 가져옵니다. 명령 실행 후에는 Dart 파일에서 firebase_core 패키지를 임포트해 Flutter 앱에서 Firebase 서비스를 사용할 수 있습니다.
flutter pub add firebase_core
화면 예시: firebase_core 패키지 설치
flutterfire configure 명령은 FlutterFire CLI를 사용해 Flutter 프로젝트의 Firebase 서비스를 구성할 때 사용합니다. 이 명령 하나로 Firebase 인증, Firestore, Cloud Messaging 등 다양한 Firebase 서비스를 빠르고 효율적으로 설정할 수 있습니다.
flutterfire configure
먼저 연결할 Firebase 프로젝트를 선택합니다.
화면 예시: Flutter 앱과 Firebase 앱 연결하기
다음은 플랫폼 선택 단계입니다. 여기서는 Android를 사용하므로 Android를 선택했습니다.
화면 예시: 플랫폼 선택 화면
구성이 성공적으로 완료되면 Firebase 앱 ID가 화면에 표시됩니다.
마지막으로 main.dart 파일에 몇 가지 코드를 추가해야 합니다.
먼저 아래 패키지들을 임포트합니다.
import 'package:firebase_core/firebase_core.dart';
import 'firebase_options.dart';
그다음 main.dart 파일의 main 함수 안에 다음 설정 코드를 추가해 Firebase를 초기화합니다.
await Firebase.initializeApp(
options: DefaultFirebaseOptions.currentPlatform,
);
축하합니다! Flutter 앱에서 Firebase 구성을 성공적으로 마쳤습니다. Firebase 서비스 설정은 강력하고 기능이 풍부한 앱을 만드는 데 있어 중요한 첫걸음입니다.
FCM 토큰으로 푸시 알림 구현하기
이제 푸시 알림을 받기 위해 기기를 등록하고, 각 기기에 할당된 고유한 FCM 토큰을 가져오는 과정을 구현해 보겠습니다. 특정 기기에 타깃팅된 알림을 보내려면 이 단계가 반드시 필요합니다.
또한 Firebase Cloud Messaging으로 기기에 푸시 알림을 전송하는 방법을 살펴봅니다. Firebase 콘솔에서 알림 메시지를 작성하고 전송하는 방법과, Flutter 앱에서 이러한 메시지를 처리하는 방법까지 함께 확인합니다.
먼저 firebase_messaging 패키지를 설치합니다.
flutter pub add firebase_messaging
화면 예시: firebase_messaging 패키지 설치
다음으로 setAutoInitEnabled 함수를 호출해 Flutter 앱에서 FCM의 자동 초기화를 활성화합니다. 이렇게 하면 앱이 시작될 때 FCM이 자동으로 초기화되고 기기 토큰을 가져옵니다.
main 메서드에 아래 함수 호출을 추가하세요.
import 'package:firebase_messaging/firebase_messaging.dart';
...
...
await FirebaseMessaging.instance.setAutoInitEnabled(true);
이제 Flutter 앱을 실행하고 알림이 정상적으로 수신되는지 확인해 보겠습니다.
Firebase 메시징 콘솔로 이동하세요. 첫 번째 메시지이므로 "첫 번째 캠페인 만들기(Create your first campaign)"를 선택합니다. "Firebase Notification messages"를 선택하고 "만들기" 버튼을 클릭합니다.
화면 예시: 샘플 테스트 메시지 템플릿
이제 알림 제목, 본문 텍스트, 메시지 이름을 입력합니다.
테스트 목적으로는 아래 코드를 사용해 FCM 토큰을 직접 가져올 수 있습니다. 현재 앱 인스턴스의 등록 토큰을 조회하려면 main() 메서드에서 getToken()을 호출하면 됩니다. 이 메서드는 알림 권한이 아직 허용되지 않은 경우 사용자에게 알림 권한을 요청하고, 권한이 있다면 토큰을 반환하거나 오류 발생 시 거부(reject)합니다.
final fcmToken = await FirebaseMessaging.instance.getToken();
log("FCMToken $fcmToken");
콘솔에 출력된 FCM 토큰을 복사해 "FCM 등록 토큰 추가" 입력란에 붙여넣습니다.
화면 예시: FCM 토큰으로 테스트 메시지 전송하기
테스트(Test) 버튼을 클릭하면, 타깃으로 지정된 클라이언트 기기(앱이 백그라운드에 있는 상태)에서 알림을 받을 수 있습니다.
화면 예시: Android 기기에서 수신된 푸시 알림
성공입니다! Android 기기에서 알림을 받았습니다. 알림을 클릭하면 기본 동작으로 앱이 열립니다.
알림을 탭했을 때 Android와 iOS의 기본 동작은 애플리케이션을 여는 것입니다. 앱이 종료된 상태라면 새로 시작되고, 백그라운드에 있는 상태라면 포그라운드로 전환됩니다.
아래는 Firebase 메시징을 초기화하는 기본 설정 코드입니다.
main.dart
import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_messaging/firebase_messaging.dart';
import 'firebase_options.dart';
void main() async {
runApp(const MyApp());
await Firebase.initializeApp(
options: DefaultFirebaseOptions.currentPlatform,
);
final fcmToken = await FirebaseMessaging.instance.getToken();
await FirebaseMessaging.instance.setAutoInitEnabled(true);
log("FCMToken $fcmToken");
}
마무리
이 튜토리얼에서는 Firebase Cloud Messaging(FCM)을 사용해 Flutter에서 푸시 알림을 구현하는 핵심 단계를 살펴보았습니다.
소개된 순서대로 진행하면 Firebase를 설정하고, Flutter 프로젝트에 통합한 뒤, 푸시 알림 기능까지 구현할 수 있습니다.
알림을 매끄럽게 주고받을 수 있게 되면 사용자 경험을 한층 향상시키고 앱 사용자와 효과적으로 소통할 수 있습니다. 다음 튜토리얼에서는 더 고급 주제와 기능을 다룰 예정이니 많은 기대 부탁드립니다.
Flutter에 대해 더 배우고 싶다면 관련 커뮤니티와 뉴스레터를 구독해 최신 소식을 놓치지 마세요.