토이 프로젝트를 진행하다가 갑자기 교수님께서 FCM를 원하셨다...

배경

분명 내가 생각한 토이 프로젝트는 이러한 종류의 알림이 아니였다. 브라우저를 켜놓은 상태라면 브라우저가 떠있든지 아래에 내려가 있던지간에 JS의 내장된 Notification기능을 사용해서 알림을 주는 방식이었는데 교수님의 생각은 아니엿나보다....

쨋든 그래서 FCM이 뭔지 찾아봤는데 구글에서 운영하는 Firebase에 속한 서비스로 'Firebase Cloud Message'의 약자였다. 본래 모바일 어플리케이션, 즉 안드로이드와 아이폰 앱을 대상으로 진행하던 서비스였는데 최근(한 3-4년?)에 JS를 사용한 웹 어플리케이션에서도 사용할 수 있게 되었다.

하지만 지원한지 얼마 안 되서 그런건지, 아니면 내가 못 찾는건지 읽고 따라 할 만한 내용이 부실했고, 공식문서도 자꾸 중간중간 궁금한 내용을 생락해서 화가 나서 내가 열심히 공부해서 직접 다른 사람들이 볼 수 있게끔 글을 써보려고 한다.

내가 목표하는 것은 '웹 어플리케이션에 FCM을 추가하고 싶은 사람들'이 해당 글을 읽고 나처럼 다른 곳에 삽질하는 시간을 아끼는 것이다.

이번 포스팅은 FCM의 소개와 전체적인 흐름, 동작원리를 기재해놓았다.

✨ FCM

먼저 FCM은 Firebase공식문서에 따르면 무료로 메세지를 안정적으로 전송할 수 있는 교차 플랫폼 메세징 솔루션이다.

사실 실생활에서 쓰이는 예를 들면 가장 이해가 빠르다. 본인이 N사의 S웹툰을 구독하고 있다고 가정을 해보자. 만약 S웹툰의 작가가 1년간 휴재에 들어갔는데 오늘이 그 휴재가 끝나는 날이고, 새 이야기가 업데이트됐다고 하면 우리의 휴대폰에는 다음과 같은 알림이 올 것이다. S웹툰의 작가가 돌아왔습니다! 지금 바로 접속해서 새로운 이야기를 읽어보세요! 그럼 우리는 해당 알림을 통해서 다시 N사의 어플리케이션에 접속하게 되고 웹툰을 읽을 것이다.

여기서 우리의 휴대폰에 온 알림이 바로 서버에서 보낸 알림이다. 우리의 어플리케이션에서도 이러한 알림을 사용자에게 보내고 싶다면 무엇이 필요한지, 어떻게 해야 하는지 알아보자.

✨ 우리가 구현해야 하는 큰 두가지

FCM을 사용하기 위해서는 크게 다음 두 가지 요소가 필요하다.

1. Firebase용 Cloud Functions 또는 앱서버와 같이 메세지를 작성, 타케팅, 전송할 수 있는 신뢰할 수 있는 환경
2. 해당 플랫폼별 전송 서비스를 통해 메세지를 수신하는 iOS, Android또는 웹(JS) 클라이언트 앱

당연히 위는 공식문서에 기재된 사항이고... 이제 다시 쉽게 생각해보자.

• 1번은 일단 서버가 필요하다는 것이다. 메세지를 보내고 싶다는 요청을 할 수 있는 서버말이다. 왜인지는 밑에 설명하겠다.
• 2번은 당연하게도 알림을 받아야 되니까 알림을 받을 앱을 말하는 것이다. 사실 우리는 웹을 개발하고 있기 때문에 JS로 개발된 웹 앱 어플리케이션을 말하는 것이다.

✨ FCM 아키텍쳐 개요

아... 이제 누구나 들어봤지만 정확하게 정의하라면 하지 못하는 용어들이 나온다. '아키텍쳐'... 사실 나도 야 아키텍처가 뭐야?라고 물어보면 당당하게 말하지 못한다. 다만 내가 이해하는 것은 어떠한 프로세스나 서비스, 동작을 구성하는 뭉텅이라는 것이다. 여기서도 너무 어렵게 생각하지 말고 FCM을 서비스를 구성하는 요소라고 생각하면 될 것 같다.

1. 메세지 요청을 작성하거나 구현하는 도구 : 위에서 말한 서버가 되겠다.

2. FCM 백엔드 : 1로부터 메세지 요청을 수락하고, 메세지 메타 데이터를 생성하는 역할

3. 전송 레이어 : 사용자의 기기로 타케팅된 메세지를 라우팅하고, 메세지 전송 처리, 필요한 경우 플랫폼별 구성을 적용하는 레이어 (여기서 플랫폼별은 ATL, APN, 웹 앱용 웹 푸시 프로토콜이 있다.)

4. 메세지가 처리되는 사용자 기기의 FCM SDK

위 4가지로 FCM서비스가 동작한다고 생각하면 되고, 그럼 FCM의 동작 원리를 살펴보자. 사실 동작 원리보다는 Life Cycle에 가깝다.

✨ 동작원리

동작원리보단 Life Cycle에 가까지만 이를 설명하기 전에 '메세지를 수신할 수 있도록 기기를 등록'하는 과정이 선행된다는 사실을 인지하고 아래 글을 읽도록 하자. 이때 기기를 등록하면 사용자 각각의 기기를 식별하는 고유한 토큰이 발급된다.

1. 앱 서버에서 클라이언트 앱에 메세지 전송한다. (공식문서에서 왜 이렇게 적어놓은지 모르겠다.)
2. 메세지 전송 요청은 FCM 백엔드로 전달된다.
3. FCM 백엔드는 메세지 요청을 수신, 메세지 ID와 기타 메타 데이터를 생성해서 플랫폼별 종선 레이어로 전달
4. 플랫폼별 전송 레이어는 메세지를 기기에 전송
5. 기기의 클라이언트 앱에서 메세지 수신

위의 순서로 통해 메세지가 사용자에게 전달되는 것이다. 그러니까 엄밀히 말해서 서버 -> 클라이언트가 아니라 서버 -> FCM 서비스 -> 클라이언트가 되는 것이다.

✨ 메세지 유형

이제 FCM이 뭔지도 알았고 아직까지 완벽하게 이해하진 못했지만 어떤 식으로 동작이 이루어지는 것까지 알게 되었을 거라 생각한다. 그럼 우리가 보낼 수 있는 메세지에는 뭐가 있을까?

1. 알림 메세지
   • FCM SDK(FCM 아키텍쳐 개요의 4번)에서 자동으로 처리하며, 클라이언트 앱을 대신하서 최종적으로 사용자 기기에 알림을 표시한다. 그러니까 동작원리에서 4번에서 사실상 Life Cycle이 끝나는 경우라고 볼 수 잇다.
   • 기본적으로 'notification'에 속한 미리 정의된 키에 대한 값을 보낼 수 있으며, 선택적으로 데이터 페이로드(사용자 지정 키-값)를 추가할 수 있다.
   • 항상 축소형이다.
2. 데이터 메세지
   • 클라이언트 앱이 메세지를 처리한다.
   • 알림 메세지와 같은 예약 키가 없고 커스텀 키-값 상의 데이터(데이터 페이로드)만 존재한다.

사실 처음 둘을 보면 각각이 무슨 메세지인지 감이 잘 안 온다. 내가 그랬다. 그러니까 다시 예시를 들어서 설명해보자.

• 알림 메세지는 별다른 추가 동작이 필요하지 않은 알림들 3시입니다. 오늘은 날씨가 좋아요.같은 알림들이다.
• 데이터 메세지는 실제로 해당 앱을 열어서 온 알림에 대한 처리를 해야 되는 알림들 XXX에게 깨톡이 왔습니다. 지금 접속하면 복귀 선물 증정!같은 알림들을 가리킨다고 생각하면 되겠다.

메세지 유형에 대한 문서는 사실 이보다 더 방대하다. 하지만 지금은 이정도만 알아도 필요한 내용을 구현하는데는 문제가 없기 때문에 넘어가고 나중에 추가 포스팅을 통해 더 자세하게 알아보자.

✨ 전체적인 구현 절차

자! 이제 FCM구현을 위해서 구글링을 통해 들어온 개발자들이 가장 궁금해할 부분이다. 그래서 FCM구현 어떻게 하는건데?!

1. FCM SDK 설정 :

   • 맞는 설정 안내에 따라 앱에서 Firebase 및 FCM 설정

2. Client앱 개발 :

   • 클라이언트 앱에 메세지 처리, 주제 구독 로직 또는 기타 선택사항 기능을 추가

3. 앱 Server 개발 :

   • 인증, 보내기 요청 작성, 응답처리 등을 수행하는 전송로직을 만들 때 Firebase Admin SDK를 사용할지 아니면 서버 프로토콜 중 하나를 사용할 지 결정
   • 그 다음, 신뢰할 수 있는 환경에 로직을 구축

위의 1, 2, 3단계에 맞춰 개발을 진행하면 FCM이 적용된 웹 앱 어플리케이션을 만들 수 있다. 지금 보기에는 각 단계의 설명이 무슨 소린지 모를 수도 있고 읽고 짜증날 수도 있다. 이제 부터 같이 하나씩 구현해 나가도록 해보자!