안녕하세요 makeviibe 입니다.
모바일 서비스를 개발할 때, 푸시 알림은 거의 필수적인 기능 중 하나입니다.
저희는 다양한 프로젝트에서 일관되게 Firebase Cloud Messaging(FCM)을 활용해 푸시 시스템을 설계하고 있습니다.
"특정 행동이 일어나면 사용자에게 알림을 보내주세요"라는 요구는 간단하지만, 실제로는 클라이언트와 서버가 유기적으로 연결되어 있어야 정확하게 동작합니다.
🔔 푸시 알림, 이런 구조로 만듭니다
푸시 알림은 크게 아래처럼 동작합니다.
- 앱이 실행되면 FCM 서버에 등록되고,
- 기기 고유의 FCM 토큰을 발급받습니다.
- 이 토큰을 서버에 저장해두면,
- 서버는 언제든 특정 유저에게 푸시 메시지를 보낼 수 있게 됩니다.
→ 알림은 앱에서 직접 보내는 게 아니라, 서버 → FCM → 클라이언트 순으로 전달됩니다.
⚙️ 클라이언트 설정 흐름 (React Native 기준)
1. Firebase 콘솔에서 프로젝트 생성
2. 앱(Android/iOS)을 등록하고, 필요한 설정 파일을 받아 적용
3. Firebase SDK 설치
4. 앱 실행 시 토큰 요청 및 서버 전달
5. 알림 수신 처리
※ iOS는 권한 요청과 APNs 인증서 등록이 필수입니다.
🖥️ 서버 설정 흐름 (NestJS 기준)
FCM은 firebase-admin SDK를 사용하여 연동합니다.
1. firebase-admin 설치
2. 서비스 계정 키 등록
Firebase 콘솔에서 발급받은 JSON 파일을 서버에 등록
3. 푸시 메시지 발송 코드
💡 우리가 항상 고려하는 포인트
- 기기마다 FCM 토큰이 바뀔 수 있어, 앱 실행 시마다 서버에 갱신합니다.
- 서버에서 사용자별로 최신 토큰을 관리해야 정확한 발송이 가능합니다.
- 발송 실패나 무응답 토큰 정리 로직도 백엔드에 포함합니다.
- 메시지 타입은 상황에 따라 data 메시지, notification 메시지로 구분해 사용합니다.
✨ makeviibe 팀의 푸시 설계 특징
- FCM 기반의 검증된 안정성 활용
- React Native + NestJS 조합에 최적화된 구성
- 토큰 갱신, 발송 실패 대응, 클릭 시 이동 처리까지 전체 흐름 구현
- 푸시 시스템은 알림뿐 아니라 사용자 리텐션에도 핵심이라 항상 서비스 초기에 설계합니다.
'개발일지' 카테고리의 다른 글
| 📲 앱 실행 시 꼭 필요한 한 번의 호출 – check-in API 설계 이야기 (0) | 2025.07.15 |
|---|---|
| 📱 웹앱 + 웹뷰 기반 앱 개발, 괜찮은 선택일까? (2) | 2025.07.15 |
| NestJS로 백엔드를 구성한 이유와 폴더 구조 설계기 (0) | 2025.07.15 |
| Socket.IO vs WebSocket – 같은 듯 다른 두 실시간 통신 기술 (1) | 2025.07.15 |
| “방에 입장했는데 아무도 안 보여요” – 실시간 공간에서 사용자 정보를 받아오는 방식 (2) | 2025.07.15 |