Firebase로 푸시 알림 추가 — 속보 알림으로 더 빠른 뉴스 경험

속보는 뉴스 앱의 존재 이유 중 하나다.
중요한 뉴스가 떴을 때, 사용자가 앱을 켜지 않아도 알려주는 기능 — 푸시 알림은 뉴스 앱에 있어 핵심 기능이다.

이번 글에서는 Firebase Cloud Messaging (FCM)을 활용해 Flutter 앱에 푸시 알림을 추가하고,
뉴스 속보 알림을 수신하는 구조를 정리해본다.

---

📦 필요한 패키지 설치

// pubspec.yaml
dependencies:
  firebase_core: ^2.24.2
  firebase_messaging: ^14.7.4

iOS의 경우 GoogleService-Info.plist 추가,
Android는 google-services.json 추가가 필요하다.

---

🚀 FCM 초기화 및 권한 요청

void setupFirebaseMessaging() async {
  await FirebaseMessaging.instance.requestPermission();
  
  FirebaseMessaging.onMessage.listen((RemoteMessage message) {
    print('📩 포그라운드 알림 수신: ${message.notification?.title}');
    // TODO: 로컬 알림 또는 Snackbar로 표시 가능
  });

  FirebaseMessaging.onMessageOpenedApp.listen((RemoteMessage message) {
    print('🔗 알림 클릭 → 앱 열기');
    // TODO: 특정 뉴스 상세 화면으로 이동
  });
}

앱 시작 시 setupFirebaseMessaging() 호출이 필요하다.

---

🔑 토큰 발급 및 백엔드 연동

String? token = await FirebaseMessaging.instance.getToken();
print('📲 내 기기 FCM 토큰: $token');

이 토큰을 서버로 보내면, 특정 사용자에게 푸시 메시지를 보낼 수 있다.
서버에서는 Firebase Admin SDK 또는 푸시 서비스 플랫폼(FCM REST API)을 통해 발송한다.

---

📥 수신된 알림 UX 개선

• 포그라운드 수신 시 → Snackbar로 보여주기
• 백그라운드 수신 후 앱 열기 → 뉴스 상세로 이동
• 알림 클릭 시 payload 파싱 → 뉴스 ID 전달

// 알림 클릭 시 이동 예시
FirebaseMessaging.onMessageOpenedApp.listen((message) {
  final newsId = message.data['news_id'];
  Navigator.push(
    context,
    MaterialPageRoute(builder: (_) => NewsDetailScreen(newsId: newsId)),
  );
});

---

🔔 로컬 알림 연동 (옵션)

포그라운드에서 알림을 사용자에게 직접 보여주고 싶다면, flutter_local_notifications 패키지를 함께 사용한다.

// pubspec.yaml
flutter_local_notifications: ^16.2.0

// 알림 수신 시 로컬 알림 표시
void showLocalNotification(RemoteMessage message) {
  flutterLocalNotificationsPlugin.show(
    0,
    message.notification?.title,
    message.notification?.body,
    NotificationDetails(...),
  );
}

---

📌 실전 활용 팁

• 주요 카테고리(정치/경제 등)만 구독 설정 → subscribeToTopic()
• 야간 알림 비활성화 기능도 고려
• 클릭 → 해당 뉴스 상세 페이지로 이동 로직 연동

// 주제 구독 예시
FirebaseMessaging.instance.subscribeToTopic('politics');

---

🧘 마무리하며

Flutter 뉴스 앱의 마지막 퍼즐은 바로 속보 알림이다.
사용자는 직접 앱을 열지 않아도, 중요한 뉴스는 놓치지 않는다.

앱은 꺼져 있어도, 뉴스는 계속 움직인다. 그 흐름을 이어주는 다리가 바로 푸시 알림이다.

✍️ 이 글은 터미널 밖으로 나온 개발자의 Flutter 뉴스 앱 만들기 여정입니다.