IRFCM
수천 대 법인폰에 FCM 요청을 보내는 사내 원격 관리 도구
회사기획 · 개발 단독 (아이알링크 재직 중 개인 제작 후 사내 배포)2023.03 — 2024.03
Next.jsTypeScriptFirebaseMaterial-UI
프로젝트 소개
아이알링크는 고객사(주로 보험사)에 수천 대 단위의 법인폰을 공급하고 관리한다. 문제가 생겨 원격 조치가 필요할 때마다 관리자가 Firebase Realtime Database 에서 해당 법인폰의 FCM 토큰을 직접 조회하고, Postman 으로 raw JSON 을 만들어 FCM 요청을 보내는 식으로 대응했다. 여기에 Legacy FCM 방식이 폐지되고 HTTP v1 + OAuth 2.0 인증이 도입되면서, 요청 한 번을 보내려면 매번 액세스 토큰을 손으로 새로 발급해야 하는 상황이 됐다.
IRFCM 은 이 번거로운 과정을 없애기 위해 개인적으로 만들어 사내에 배포한 도구다. GCP 에 미리 등록해둔 관리자 계정으로 OAuth 2.0 인증을 한 번만 마치면 액세스 토큰이 localStorage 에 유지되고, 이후로는 관리자가 법인폰 번호만 입력하면 Realtime Database 에서 토큰을 조회해 FCM 요청을 대신 처리해준다.
주요 기능
Firebase 연동 및 FCM 요청
- 고객사별 Firebase 프로젝트에 맞는
FirebaseConfig(API 키, 인증 도메인, DB URL, 프로젝트 ID, 저장소 버킷, 메시지 센더 ID, 앱 ID, 측정 ID)를 기반으로 앱을 초기화. 이미 초기화된 앱이 있으면 삭제 후 재초기화해 고객사를 전환할 때 충돌이 나지 않게 했다. requestFcm함수로 FCM 요청 전송 — JSON 바디 구성과 인증 헤더 첨부까지 하나로 캡슐화.
OAuth 2.0 인증
getNewOAuthCode로 인증 코드를 발급받고, 클라이언트 ID·리다이렉트 URI 로 인증을 완료해 액세스 토큰을 로컬에 유지한다. 매 요청마다 재인증할 필요가 없어졌다.
로그·녹취 업로드 (원격 조작)
- 특정 법인폰의 로그 요청 → Firebase Storage 에 업로드된 파일을 IRFCM 화면에서 바로 확인.
- 특정 법인폰에 남아있는 녹취 파일 업로드 요청 → 마찬가지로 Storage 경유로 확인.
업무 자동화 배치 유틸리티 (6종 API)
- Batch Rename
/api/rename— 로컬 디렉토리 내 AMR 파일명 일괄 변경 - Compress
/api/compress— 로컬 디렉토리를 ZIP 으로 압축(파일 서버 전송용) - Search
/api/search— TXT 파일을 순회하며 키워드가 포함된 라인을 찾아 출력 파일로 저장 - Batch Download
/api/download— Firebase Storage 파일 일괄 다운로드 - Batch API Request & Validation
/api/message,/api/message/validation— 메시지 이력 생성 API 일괄 호출(누락 이력 복구용) + 결과 검증 - Batch Upload
/api/upload— 로컬 디렉토리 내 AMR 파일 일괄 업로드
기술적 도전과 배운 점
- Next.js v13 App Router 전환기를 실전에서 통과 — v12 까지의
pages구조에서app구조로, 서버/클라이언트 컴포넌트 구분과'use client'선언,next/router→next/navigation이관,useSearchParams같은 신규 훅까지 한 프로젝트 안에서 전부 부딪혔다. - React Hook Form 으로 폼 데이터 관리.
- Firebase Realtime Database · Storage · FCM 을 한 서비스 안에서 함께 다뤘다.
- GCP OAuth 2.0 인증 플로우를 직접 구현.
- Next.js API Route 구성 +
fetch기반 호출, Axios 로 사내 운영계/개발계 서버 API 호출. - 반복되는 수작업(파일 rename, 압축, 검색 등)을 배치 API 로 대체해 업무 자동화.
- 소스 파일별로 로그 TAG 를 지정하는 로깅 전략 — 디버깅 속도와 콘솔 가독성이 눈에 띄게 좋아졌다.
- TypeScript, Prettier, Material-UI DataGrid 를 실무 규모 프로젝트에 적용.
트러블슈팅
Next.js v13 환경변수가 컴포넌트에서 항상 undefined
Firebase 초기화에 필요한 OAuth 인증 정보와 Firebase Config 를 보안상 .env.local 에 분리해뒀는데, 컴포넌트에서 직접 참조하면 항상 undefined 가 나왔다. 원인은 Next.js v13 부터 도입된 서버/클라이언트 컴포넌트 구분 — 클라이언트 컴포넌트는 보안상 환경변수를 직접 읽을 수 없었다. SSR 로 렌더링되는 페이지 안에 클라이언트 컴포넌트를 자식으로 두고, 필요한 값을 props 로 내려주는 방식으로 우회해 해결했다.
처브CDM 서버 다운으로 메시지 이력 누락 → IRFCM 으로 일괄 복구 법인폰은 메시지를 주고받을 때마다 서버에 API 를 호출해 이력을 남기는데, 처브CDM 보험사의 운영계 서버가 다운되면서 모든 호출이 timeout 으로 실패해 이력이 통째로 누락됐다. 다행히 법인폰 앱 자체 로그에는 송수신 기록이 남아있었다. IRFCM 으로 고객사의 모든 법인폰 클라이언트에 일괄 FCM 요청을 보내 로그를 추출하고, 추출된 TXT 로그를 순회하며 메시지 API 호출 시도가 있었던 부분만 골라낸 뒤, 검증 로직으로 로그가 올바르게 추출됐는지 확인했다. 검증을 마친 이력은 다시 IRFCM 을 통해 서버로 일괄 재전송해 누락된 메시지 이력을 복구했다.