[파이어베이스] 플러터에서 FCM 구현하기: 초보자 가이드

 

Firebase Cloud Messaging (FCM)은 모바일 앱에 푸시 알림을 전송하는 데 사용되는 무료 서비스입니다.

플러터 앱에서 FCM을 사용하면 사용자에게 중요한 업데이트, 마케팅 메시지, 기타 알림을 보낼 수 있습니다.

이 가이드에서는 플러터 앱에 FCM을 구현하는 방법을 단계별로 안내하며, 초보자가 쉽게 이해할 수 있도록 자세한 설명과 코드 예시를 제공합니다.

 

필수 조건

• Flutter 개발 환경 설정
• Firebase 계정

단계

 

1. Firebase 프로젝트 설정

1. Firebase 콘솔([유효하지 않은 URL 삭제됨] 이동하여 로그인합니다.
2. 새로운 프로젝트를 생성하거나 기존 프로젝트를 선택합니다.
3. 왼쪽 메뉴에서 Cloud Messaging을 선택합니다.
4. 앱 추가 버튼을 클릭합니다.
5. 플랫폼으로 Android와 iOS를 선택합니다.
6. 각 플랫폼에 대한 지침을 따르고 앱을 등록합니다.
7. Android의 경우 SENDER_ID를, iOS의 경우 App ID를 기록해 둡니다.

2. 플러터 프로젝트에 종속성 추가

1. pubspec.yaml 파일을 엽니다.
2. dependencies 섹션에 다음 종속성을 추가합니다.

dependencies:
  firebase_messaging: ^2.0.0
  flutter_local_notifications: ^2.4.0

 

1. flutter pub get 명령을 사용하여 종속성을 설치합니다.

3. AndroidManifest.xml 설정

1. AndroidManifest.xml 파일을 엽니다.
2. application 태그 안에 다음 메타데이터를 추가합니다.

<meta-data
  android:name="com.google.firebase.messaging.SenderId"
  android:value="[SENDER_ID]" />

 

1. [SENDER_ID]를 1단계에서 기록한 값으로 바꿉니다.

4. iOS 설정

1. Xcode 프로젝트를 엽니다.
2. Capabilities 탭으로 이동합니다.
3. Push Notifications 기능을 켭니다.
4. Bundle ID 필드에 앱의 Bundle ID를 입력합니다.
5. Signing Certificate 섹션에서 앱에 서명하는 데 사용하는 인증서를 선택합니다.

5. FCM 토큰 가져오기

FCM 토큰은 앱이 FCM 서버와 통신하기 위해 사용하는 고유 식별자입니다. 다음 코드를 사용하여 FCM 토큰을 가져올 수 있습니다.

import 'package:firebase_messaging/firebase_messaging.dart';

Future<String> getFcmToken() async {
  final String token = await FirebaseMessaging.instance.getToken();
  print("FCM Token: $token");
  return token;
}

 

6. 푸시 알림 수신

FCM 토큰을 얻은 후에는 푸시 알림을 수신할 준비가 되었습니다. 다음 코드는 푸시 알림을 수신하고 처리하는 방법을 보여줍니다.

import 'package:firebase_messaging/firebase_messaging.dart';

void onMessage(Map<String, dynamic> message) {
  print("Push message received: $message");
  // 푸시 알림 처리 코드
}

void onMessageOpenedApp(RemoteMessage message) {
  print("Push message opened app: $message");
  // 앱이 열린 후 푸시 알림 처리 코드
}

Future<void> configureMessaging() async {
  await FirebaseMessaging.instance.setForegroundNotificationCallback(onMessage);
  await FirebaseMessaging.instance.setMessageOpenedAppCallback(onMessageOpenedApp);
}

 

 

7. 테스트: 단계별 가이드

 

FCM 구현을 완료했으니 이제 앱이 예상대로 작동하는지 테스트할 때입니다. 다음 단계를 따르십시오.

 

7.1. 빌드 및 실행

• 앱을 빌드하고 실제 기기 또는 시뮬레이터에서 실행합니다.

7.2. FCM 토큰 확인

• 앱이 실행되는 동안 위에서 소개한 getFcmToken 함수를 사용하여 FCM 토큰을 가져옵니다.
• 토큰이 올바르게 생성되었는지 확인합니다.

7.3. Firebase 콘솔에서 테스트 메시지 보내기

• Firebase 콘솔에 이동하여 Cloud Messaging 섹션으로 이동합니다.
• 테스트 전송 탭을 클릭합니다.
• 토큰 필드에 앱에서 가져온 FCM 토큰을 입력합니다.
• 메시지 필드에 보내려는 메시지의 내용을 입력합니다.
• 보내기 버튼을 클릭합니다.

7.4. 앱에서 메시지 수신 확인

• 앱에서 테스트 메시지를 수신했는지 확인합니다.
• 메시지 제목과 내용이 올바른지 확인합니다.
• (선택 사항) 메시지가 앱에서 올바르게 처리되었는지 확인합니다.

7.5. 백그라운드 알림 테스트

• 앱을 백그라운드로 실행합니다.
• Firebase 콘솔에서 테스트 메시지를 다시 보냅니다.
• 앱이 백그라운드에서 실행되는 동안 알림이 올바르게 표시되는지 확인합니다.

7.6. 알림 작업 테스트

• (선택 사항) 앱에서 알림 작업을 설정했다면 해당 작업이 테스트 메시지 수신 후 올바르게 실행되는지 확인합니다.

문제 해결

• 테스트 과정에서 문제가 발생하면 Firebase 콘솔의 로그 및 디버깅 도구를 사용하여 문제의 근본 원인을 파악하십시오.
• 자세한 내용은 [Firebase FCM 문제 해결 문서]을  참조하십시오.

 

8. 고급 기능

 

FCM은 기본적인 푸시 알림 기능 외에도 다양한 고급 기능을 제공합니다. 이 섹션에서는 몇 가지 유용한 고급 기능을 살펴보겠습니다.

 

8.1. 웹 푸시 알림

 

FCM을 사용하여 웹 푸시 알림을 보낼 수도 있습니다. 이를 통해 웹 애플리케이션 사용자에게 브라우저 알림을 전송할 수 있습니다.

웹 푸시 알림을 보내려면 다음 단계를 따르십시오.

1. Firebase 콘솔에서 Cloud Messaging 섹션으로 이동합니다.
2. 웹 푸시 탭을 클릭합니다.
3. 앱 추가 버튼을 클릭합니다.
4. 앱 이름과 FCM 프로젝트 ID를 입력합니다.
5. 추가 버튼을 클릭합니다.
6. Firebase Cloud Messaging 스크립트를 웹 애플리케이션에 추가합니다.
7. 서비스 작업자를 등록합니다.
8. 푸시 알림 구독을 처리합니다.

자세한 내용은 [Firebase 웹 푸시 알림 문서]([유효하지 않은 URL 삭제됨])를 참조하십시오.

 

8.2. 인앱 알림

 

FCM을 사용하여 앱 내에서 사용자에게 알림을 표시할 수도 있습니다. 이는 사용자의 주의를 특정 기능이나 콘텐츠로 유도하는 데 도움이 될 수 있습니다.

인앱 알림을 표시하려면 다음 코드를 사용합니다.

import 'package:flutter_local_notifications/flutter_local_notifications.dart';

const AndroidNotificationChannel channel = AndroidNotificationChannel(
  'channel_id',
  'Channel name',
  'Channel description',
  importance: Importance.HIGH,
  priority: Priority.HIGH,
);

await FirebaseMessaging.instance.createChannel(channel);

FlutterLocalNotificationsPlugin flutterLocalNotificationsPlugin =
    FlutterLocalNotificationsPlugin();

const AndroidNotificationDetails androidNotificationDetails =
    AndroidNotificationDetails(
  'channel_id',
  'Channel name',
  'Channel description',
  icon: '@mipmap/ic_launcher',
);

const IOSNotificationDetails iosNotificationDetails =
    IOSNotificationDetails(
  presentSound: true,
  presentAlert: true,
);

const NotificationDetails notificationDetails =
    NotificationDetails(android: androidNotificationDetails, iOS: iosNotificationDetails);

await flutterLocalNotificationsPlugin.show(
  0,
  'Notification Title',
  'Notification Body',
  notificationDetails,
);

 

8.3. 분석

 

FCM은 푸시 알림 캠페인의 성과를 분석하는 데 도움이 되는 분석 도구를 제공합니다. 이를 통해 전송된 알림 수, 개봉률, 클릭률 등을 추적할 수 있습니다.

FCM 분석을 사용하려면 다음 단계를 따르십시오.

1. Firebase 콘솔에서 Cloud Messaging 섹션으로 이동합니다.
2. 보고 탭을 클릭합니다.
3. 분석하려는 캠페인을 선택합니다.
4. 캠페인 성과에 대한 데이터를 확인합니다.

자세한 내용은 [Firebase FCM 분석 문서]를 참조하십시오.

 

8.4. A/B 테스트

 

FCM을 사용하여 다양한 푸시 알림 메시지의 성과를 A/B 테스트할 수 있습니다. 이를 통해 사용자 참여를 유도하는 데 가장 효과적인 메시지를 확인하는 데 도움이 될 수 있습니다.

FCM A/B 테스트를 사용하려면 다음 단계를 따르십시오.

1. Firebase 콘솔에서 Cloud Messaging 섹션으로 이동합니다.
2. A/B 테스트 탭을 클릭합니다.
3. 새 테스트를 만듭니다.
4. 테스트할 두 개의 메시지를 입력합니다.
5. 테스트를 시작합니다.
6. 테스트 결과를 확인합니다.

9. 문제 해결

 

FCM 구현 과정에서 문제가 발생할 수 있습니다. 다음은 몇 가지 일반적인 문제와 해결 방법입니다.

 

문제: FCM 토큰을 가져올 수 없습니다.

해결 방법

• Firebase 콘솔에서 앱이 등록되었는지 확인하십시오.
• AndroidManifest.xml 또는 Info.plist 파일에 올바른 메타데이터가 포함되어 있는지 확인하십시오.
• 인터넷 연결이 있는지 확인하십시오.

문제: 푸시 알림을 수신하지 못합니다.

해결 방법

• 앱이 백그라운드에서 실행될 수 있는지 확인하십시오.
• 기기의 알림 설정이 올바르게 설정되어 있는지 확인하십시오.
• 앱이 FCM 메시지를 올바르게 처리하는지 확인하십시오.

문제: 푸시 알림을 클릭하면 앱이 시작되지 않습니다.

해결 방법

• 앱이 올바르게 설치되어 있는지 확인하십시오.
• 앱이 업데이트되었는지 확인하십시오.
• 앱 매니페스트에 올바른 인텐트 필터가 포함되어 있는지 확인하십시오.

문제: 푸시 알림 분석 데이터를 볼 수 없습니다.

해결 방법

• Firebase 콘솔에서 앱이 보고에 포함되어 있는지 확인하십시오.
• 앱이 FCM 분석 SDK를 포함하고 있는지 확인하십시오.
• 데이터가 수집되기까지 몇 시간이 걸릴 수 있다는 점을 기억하십시오.

팁

• 문제 해결을 위해 Firebase 콘솔의 로그 및 디버깅 도구를 사용하십시오.
• 자세한 내용은 [Firebase FCM 문제 해결 문서]를 참조하십시오.

블로그 게시물이 도움이 되었기를 바랍니다! 궁금한 점이 있으면 언제든지 질문해주세요.

참고

• 이것은 FCM 문제 해결에 대한 일반적인 지침일 뿐입니다.
• 특정 문제에 대한 도움이 필요하면 Firebase 지원팀에 문의하십시오.

이 블로그 게시물을 통해 플러터 앱에서 FCM을 구현하는 방법에 대한 기본적인 이해를 얻었기를 바랍니다. 궁금한 점이 있으면 언제든지 질문해주세요!