[웹 알림 서비스] Firebase Cloud Messaging(FCM) 기초 정리

728x90

웹 브라우저 환경에서 사용자에게 알림을 제공하는 방법 중 하나인 FCM(Firebase Cloud Messaging)에 대해 정리해보고자 한다.

(실제 적용 과정은 추후 포스팅 예정)

1. FCM이란?

FCM은 Google Firebase에서 제공하는 무료 푸시 메시징 서비스이다.
이를 통해 Android, iOS, Web 애플리케이션에 메시지를 전달할 수 있으며, 사용자가 백그라운드(앱 실행 중이 아닌 상태)에서도 알림을 받을 수 있다.

즉, FCM은 서버에서 클라이언트로 메시지를 안전하고 빠르게 전달하는 통로 역할을 한다.

2. 왜 웹에서 FCM을 사용할까?

웹 환경에서 FCM을 활용하면 다음과 같은 상황에서 유용하다.

새로운 글/댓글/이벤트 발생 시 사용자에게 알림 전송
실시간 업데이트 알림 (예: 채팅, 예약 현황 변경)
특정 그룹이나 주제(Topic)를 구독한 사용자들에게 알림 발송

특히 SPA 기반 서비스에서는 사용자가 항상 사이트에 접속해 있지 않아도 알림을 받을 수 있다는 점에서 매력적이다.

3. FCM의 장단점

장점

무료: 메시지 전송량에 제한 없음
멀티 플랫폼 지원: iOS, Android, Web 모두 지원
빠른 구축: Firebase SDK 제공으로 손쉽게 통합 가능
토픽 기반 발송: 특정 그룹을 대상으로 메시지 발송 가능

단점

구글 서비스 의존성: Firebase 프로젝트에 종속적
Safari 미지원: iOS Safari 브라우저에서 기본적으로 동작하지 않음
제한된 알림 UI: 복잡한 UI는 별도 구현 필요

4. 동작 원리

FCM의 기본 동작 흐름

클라이언트(웹 브라우저)
- 사용자가 알림 권한을 허용하면 브라우저는 FCM Registration Token을 발급받는다.
- 이 토큰은 해당 클라이언트를 고유하게 식별할 수 있는 키이다.
- 토큰은 백엔드 서버로 전달되어 저장된다.
백엔드 서버
- Firebase에서 제공하는 서버 키(Server Key)를 사용하여 메시지를 전송한다.
- 특정 사용자(토큰) 혹은 그룹(토픽)에게 메시지를 발송할 수 있다.
FCM 서버
- 백엔드 서버로부터 메시지를 받아 대상 클라이언트로 푸시한다.
클라이언트 수신
- 포그라운드 상태: 앱 실행 중일 때 SDK를 통해 직접 메시지 처리
- 백그라운드 상태: Service Worker가 실행되어 알림(Notification API)을 통해 표시

5. 프론트엔드 개발자가 알아야 할 개념

1) 알림 권한 요청

웹에서 알림을 표시하려면 먼저 사용자의 동의가 필요하다.
Notification.requestPermission()을 호출해 권한 상태(granted, denied, default)를 확인한다.

Notification.requestPermission().then(permission => {
  if(permission === 'granted') {
    console.log('사용자가 알림 허용');
  } else {
    console.log('사용자가 알림 거부 또는 선택 안함');
  }
});

2) FCM 토큰 발급

Firebase SDK의 getToken()을 사용하면 클라이언트 전용 토큰을 발급받을 수 있다.
이 토큰은 백엔드로 전달되어야 하며, 메시지 전송의 대상이다.

3) Service Worker

브라우저가 백그라운드 상태에서도 메시지를 수신하기 위해 Service Worker 파일이 필요하다.
예: firebase-messaging-sw.js 파일에 메시지 처리 로직을 작성.

4) 메시지 수신 방식

포그라운드 수신: 사용자가 사이트를 열고 있을 때 SDK를 통해 직접 수신
백그라운드 수신: Service Worker가 실행되어 알림을 표시

6. 역할별 할 일

프론트엔드
- 알림 권한 요청 및 처리
- FCM 토큰 발급 및 서버 전송
- 알림 수신 UI 구현 (포그라운드/백그라운드)
백엔드
- 토큰/사용자 관리
- Firebase Admin SDK 또는 HTTP API를 통해 메시지 발송
- 보안 키(Server Key) 관리

참고
- Firebase 공식 문서 - Cloud Messaging
- Firebase 공식 문서 - 웹 클라이언트 설정
- MDN - Notification API
- MDN - Service Worker API