알림 기능

어떻게 알림을 실시간으로 수신할 수 있을까? 가장 먼저 떠오른건 웹 소켓을 이용한 방식이었다. 그러다 문득, 이전에 읽었던 “대규모 시스템 설계 기초”에서 제 3자 알림 서비스를 이용한 설계가 떠올랐다. 그렇게 검색한 결과 FCM을 이용한 방식을 찾을 수 있었다.

FCM 이란?

구글에서 제공하는 클라우드 메시징 서비스로 모바일 또는 웹 푸시 알림을 보낼 수 있도록 도와주는 플랫폼이다. FCM을 사용하면 간단한 설정을 통해 웹 푸시 알림을 보낼 수 있다. FCM의 구조를 간략하게 표현하면 다음과 같다.

• FCM Server Key : 서비스 서버에서 FCM에 알림을 요청하기 위해 필요한 FCM 서버 키.
• FCM Token : FCM 서버에서 디바이스를 식별하는 고유한 토큰. FCM 서버에서 토큰을 발급받는다.

대략적은 서비스 흐름은,

1. 클라이언트는 FCM 서버에 토큰을 요청하여 발급받는다.
2. 발급 받은 토큰은 어플리케이션 서버측에 보내 관리한다. (사용자 - 토큰 쌍으로 저장)
3. 다시 클라이언트 측에서 어플리케이션 서버에 알림 요청을 보낸다.
4. 어플리케이션 서버에서 수신자 FCM 토큰을 쿼리하여 FCM 서버에 토큰과 알림내용을 담아 웹 푸시 알림 요청을 보낸다.
5. FCM 서버는 FCM 토큰을 통해 특정 디바이스에 웹 푸시 알림을 보낸다.

웹 푸시알림을 보내는 데에는 성공했다. 그렇다면, 클라이언트는 어떻게 알림을 처리할 수 있을까? 여기에는 두 가지 상황을 고려해야한다.

먼저, 포어그라운드 상태일 때를 살펴보자. 사용자는 어차피 웹 페이지에 포커스 되어있는 상태이므로 굳이 푸시알림으로 표현할 필요는 없다. 이 경우 토스트 메시지로 구현하여 우측 하단에 알림 메시지가 나타나도록 구현하였다.

두 번째는 백그라운드 상태일 때이다. Service Worker를 사용하면 백그라운드에서도 알림을 수신하여 푸시알림을 보여줄 수 있다. Service Worker에 대한 정보는 이 링크를 참고하자.