플러터에서 FCM 구현하기

플러터에서 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 문제 해결 문서]([유효하지 않은 URL 삭제됨])를 참조하십시오.

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

참고:

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

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