[Next.js]기상관련 PWA 웹앱 회고 - FCM을 중점으로

프로젝트 개요

1. 프로젝트 개요
   • 기상청 API를 활용하여 기상 데이터를 수집 및 가공한 후, 특정 산업 사용자에게 미세 기상 정보를 제공하는 웹앱 개발 프로젝트.
   • 급격한 기상 변동 시, 웹앱이 활성화되어 있지 않은 상황에서도 사용자에게 Push 알림을 통해 실시간 정보를 제공하는 기능 구현.
2. 기술 스택
   • 프론트엔드: Next.js v13, TailwindCSS
   • 백엔드: Spring, JPA
   • 데이터베이스: PostgreSQL
3. 프로젝트 기간
   • 5주
4. 참여 분야
   • 프론트엔드 공통 모듈 개발
   • Next.js 환경 설정 및 구성
   • Redux 환경 구현 및 상태 관리 로직 개발
   • FCM
5. 회고
   • Next.js 적응: 기본적인 리액트 지식만을 가지고 시작한 프로젝트였기 때문에 Next.js 프레임워크의 모듈 구조와 기능에 적응하는 데 시간이 필요했다.
   • 서버사이드 랜더링(SSR)과 클라이언트사이드 랜더링(CSR) 구분: Next.js가 SSR에 특화된 프레임워크임에도 불구하고, Redux를 활용한 상태 관리 및 일부 공통 모듈의 특성상 클라이언트 사이드 랜더링(CSR)을 병행할 필요가 있었다. 이로 인해 SSR과 CSR을 적절히 구분하여 사용해야 했으며, 두 랜더링 방식을 혼합한 구조를 설계하는 부분에서 어려움을 겪었다.
   • 설계의 중요성 인식: 초기 기획 단계에서 SSR과 CSR의 사용 범위 및 컴포넌트 렌더링 방식을 명확히 정의하지 못한 점이 프로젝트 중반에 문제가 되었다. 프로젝트 진행 중 요구사항이 일부 변경되면서 통합적인 설계가 부족했던 부분을 인지하게 되었고, 향후 유사 프로젝트에서는 기획 단계에서 철저한 조사를 통해 설계를 체계적으로 구성하는 것의 중요성을 깨달았다.

회고 - PWA Push 구현 및 FCM 사용

• PWA 및 Push 알림 구현: 해당 프로젝트에서는 사용자들이 웹앱을 사용하고 있지 않은 상황에서도 급격한 기상 변동에 대해 실시간으로 알림을 받을 수 있도록 PWA(Progressive Web App) 기능을 구현했다. 이를 통해 사용자가 웹앱을 설치하지 않고 브라우저에서 접속하더라도 알림을 받을 수 있는 환경을 구축하였다.
• FCM(Firebase Cloud Messaging) 도입 배경: Push 알림 기능 구현을 위해 Firebase Cloud Messaging(이하 FCM)을 사용했다. FCM은 다양한 플랫폼에서의 푸시 메시지 전송을 지원하고 있으며, 특히 브라우저 기반의 알림 전송이 용이하기 때문에 이를 채택하였다. 초기에는 서버에서 직접 알림을 전송하기 위해 다른 오픈소스를 검토했지만, 설정의 복잡성과 안정성 이슈로 인해 FCM이 적합하다고 판단했다.
• FCM 연동 과정: FCM 연동 시 고려해야 할 점은 웹 앱의 인증 절차 및 사용자 토큰 관리였다. 사용자가 웹앱에 접속할 때마다 FCM 토큰을 생성하고, 이를 서버에 저장하여 기상 변동 발생 시 알림을 전송할 수 있도록 설계했다. 이 과정에서 주의해야 할 점은 토큰이 주기적으로 갱신되기 때문에, 토큰 갱신 시 기존 토큰을 무효화하고 새로운 토큰으로 교체하는 로직을 구현하는 것이었다. 이를 Redux를 통해 상태를 관리하고, 서버에서는 Spring을 활용해 REST API로 클라이언트에서 전송된 토큰을 저장 및 관리했다.
• 알림 전송 및 처리: 기상청 API에서 기상 변동 정보를 주기적으로 받아 분석한 후, 특정 임계값을 초과할 때 FCM을 통해 실시간으로 사용자의 기기로 알림을 전송했다. 이 때 알림 내용은 사용자가 설정한 지역 및 관심 기상 요소(예: 강풍, 폭우 등)에 따라 달라지도록 설계했다.
• 구현 시 어려웠던 점 및 해결:
  • 초기 FCM 설정 시, 서비스워커(Service Worker)와의 연동에서 예상치 못한 에러가 발생했다. 이는 HTTPS 환경에서만 FCM이 정상 작동하기 때문이었는데, 로컬 개발 환경에서는 HTTPS 설정이 어려운 상황이었다. 이를 해결하기 위해 ngrok을 활용해 로컬 서버를 HTTPS 환경으로 배포하여 테스트를 진행했다. ngrok 무료 플랜의 제한 사항(짧은 세션 유지 시간)으로 인해 서비스 워커가 지속적으로 재연결되는 문제가 발생했으나, 유료 플랜을 결제하여 해결했다. 이로써 로컬 환경에서도 안정적인 HTTPS 연결을 통한 FCM 테스트가 가능했다.
  • 또한, 알림이 전송된 후 사용자가 이를 클릭했을 때 웹앱이 적절한 라우트로 이동하도록 처리하는 부분도 어려움이 있었다. 알림 클릭 이벤트를 통해 사용자의 관심 지역 페이지로 이동하도록 로직을 추가하여 사용자 경험을 개선하였다.
• 결과 및 개선점:
  • FCM을 활용한 Push 알림 기능은 웹앱의 실시간성을 크게 높여주었으며, 사용자들이 기상 변동 정보를 빠르게 확인할 수 있도록 하였다. 다만, FCM 의존성으로 인해 네트워크 상태가 좋지 않거나, 토큰 갱신이 원활하지 않은 경우 일부 알림이 누락되는 문제가 있었다. 이러한 부분은 추후 자체 푸시 서버를 구축하거나, FCM 외부의 대안을 모색하는 방향으로 개선할 필요가 있다.
  • 알림 중복 발송 문제: 실제 운영 서버에 배포하기 전까지 Push 알림이 무조건 2번 발송되는 문제가 있었다. 이 문제의 원인은 아직 명확히 파악하지 못했지만, 비슷한 문제가 다른 프로젝트에서도 자주 발생하는 것을 확인하였다. 이는 FCM 메시지 처리 시 중복 이벤트 발생 혹은 서비스워커 등록 및 이벤트 리스너의 중복 등록 문제일 가능성이 높다고 판단된다. 향후 이러한 중복 발송의 원인을 정확히 파악하고 이를 개선하는 것이 필요하다.
• 추가적으로 고려할 사항:
  • 사용자 관심 지역의 기상 정보를 사전에 캐싱하여 알림 전송 시 응답 속도를 높일 수 있는 방안을 연구할 필요가 있다.
  • 다수의 사용자가 한꺼번에 알림을 수신할 때 서버의 부하를 줄이기 위한 큐잉(Queueing) 시스템 도입도 고려해볼만 하다.