Your browser does not support JavaScript!

Supabase와 FCM 연동 푸시 알림 비결

일일 보고서 2024년 10월 09일
goover

목차

  1. 요약
  2. Supabase의 주요 기능과 활용 가능성
  3. 푸시 알림 서비스 구현을 위한 기초 이해
  4. 푸시 알림 서비스와의 통합
  5. 푸시 알림 서비스의 실제 적용 사례
  6. 결론

1. 요약

  • 이 리포트는 Supabase와 Firebase Cloud Messaging(FCM)을 활용하여 웹 및 모바일 애플리케이션에 푸시 알림 기능을 통합하는 방법을 제시합니다. Supabase는 실시간 데이터베이스 업데이트, 데이터 관리, 그리고 사용자 인증 서비스 등 다양한 기능을 제공하는 오픈 소스 백엔드 플랫폼입니다. FCM은 푸시 알림을 무제한으로 전송할 수 있는 Google의 서비스로, Supabase와의 통합을 통해 데이터 변경 즉시 알림을 발송할 수 있는 시스템을 구축할 수 있습니다. 푸시 알림을 구현하기 위해 필요한 클라이언트 푸시 구독 및 서비스워커 설정 방법을 설명하고, Android, iOS, 웹 환경에서의 실제 적용 사례를 통해 이러한 기술들이 어떻게 실현될 수 있는지 보여줍니다. 본 리포트는 개발자들이 푸시 알림 시스템을 효율적으로 구축할 수 있도록 하는 방법론을 제공하는 데 중점을 두고 있습니다.

2. Supabase의 주요 기능과 활용 가능성

  • 2-1. 데이터베이스 관리

  • Supabase는 오픈소스 PostgreSQL 데이터베이스를 기반으로 하여 데이터베이스 관리 기능을 제공합니다. 개발자들은 SQL 쿼리를 통해 데이터베이스에 손쉽게 접근하고 조작할 수 있으며, 실시간 데이터 업데이트가 가능하여 사용자에게 신속한 정보를 제공합니다.

  • 2-2. 실시간 데이터 업데이트

  • Supabase는 실시간 데이터베이스 기능을 지원합니다. 이는 데이터가 변경될 때마다 클라이언트에게 즉시 업데이트를 알릴 수 있는 기능으로, 푸시 알림 시스템과의 통합에 있어 중요한 역할을 합니다.

  • 2-3. 사용자 인증

  • Supabase는 JWT(JSON Web Tokens)를 통해 사용자 인증 기능을 제공합니다. 이를 통해 안전하고 효율적인 사용자 관리가 가능하며, 사용자는 자신만의 계정으로 시스템에 접근할 수 있습니다.

  • 2-4. 스토리지 서비스

  • Supabase는 파일 저장을 위한 스토리지 서비스를 제공합니다. 사용자는 다양한 파일 포맷을 저장하고 관리할 수 있으며, 이 스토리지를 통해 푸시 알림 콘텐츠와 관련된 미디어 파일을 쉽게 저장하고 활용할 수 있습니다.

3. 푸시 알림 서비스 구현을 위한 기초 이해

  • 3-1. 푸시 알림의 구조

  • 푸시 알림은 기본적으로 서버에서 클라이언트 애플리케이션으로 메시지를 보내는 방식으로 작동합니다. 서버는 푸시 서비스를 통해 클라이언트의 서비스 워커에 푸시 메시지를 전달하며, 서비스 워커는 해당 메시지를 수신한 후 브라우저에 알림을 표시하게 됩니다. 클라이언트가 푸시 알림을 받기 위해서는 먼저 푸시 구독을 해야 하며, 구독이 완료되면 서버는 클라이언트에 푸시 메시지를 발송할 수 있게 됩니다. 또한, 메시지를 시각적으로 표현하기 위해 `Notification` API와 `showNotification()` 메서드를 활용합니다.

  • 3-2. 클라이언트 푸시 구독

  • 클라이언트에서는 푸시 구독을 통해 푸시 알림을 받을 준비를 해야 합니다. 이를 위해 `pushSubscription`을 생성하고, 이를 서버에 전달하여 푸시 토큰으로 등록합니다. 이 과정에서 `pushManager`의 `subscribe` 메서드를 사용하며, 사용자가 확인한 알림 권한과 함께 기기 정보를 등록하여 푸시 토큰을 획득합니다. 푸시 토큰은 특정 기기에 대한 고유 идентификатор로, 서버는 이 토큰을 사용하여 해당 기기에 알림을 전송합니다.

4. 푸시 알림 서비스와의 통합

  • 4-1. 외부 서비스 통합

  • 푸시 알림 서비스 통합은 외부 서비스와의 연계를 통해 이루어집니다. 예를 들어, Firebase Cloud Messaging(FCM)은 Android 및 iOS 앱에 메시지를 전송하기 위한 외부 서비스로 활용됩니다. FCM은 앱의 포그라운드 또는 백그라운드 상태에 따라 알림 메시지 및 데이터 메시지의 수신 방식을 다르게 처리하게 됩니다. 이를 위해 FirebaseMessagingService를 확장하는 서비스를 생성하여 onMessageReceived 및 onDeletedMessages 콜백 메서드를 재정의해야 합니다.

  • 4-2. API 연동 및 서비스 설정

  • 푸시 알림 서비스를 설정하기 위해서는 먼저 앱 매니페스트 파일에 FirebaseMessagingService에 대한 정의를 추가해야 합니다. 예를 들어, 커스텀 기본 아이콘과 색상을 지정할 수 있는 코드가 application 태그 내에 포함되어야 하며, 이렇게 설정된 값들은 알림이 발생할 경우 항상 적용됩니다.

  • 4-3. 푸시 알림 전송 및 모니터링

  • 푸시 알림의 전송 및 모니터링은 서비스의 핵심 요소입니다. Android 앱에서는 수신된 메시지를 20초 이내에 처리해야 하며(Android Marshmallow의 경우 10초), 이 시간 이내에는 앱의 상태에 따라 다양한 방식으로 알림을 사용자에게 전달할 수 있습니다. 백그라운드에서 수신된 경우 알림은 기기의 작업 표시줄로 전송되며, 사용자가 이를 클릭할 경우 앱이 실행됩니다. 더불어, App Store 서버 알림과 같은 기능을 활용하여 구독 상태 변경이나 앱 내 구입 환불 등의 정보를 서버에서 수신할 수 있는 설정도 필요합니다.

5. 푸시 알림 서비스의 실제 적용 사례

  • 5-1. 안드로이드 및 iOS 환경에서의 푸시 알림

  • 안드로이드 및 iOS 환경에서 푸시 알림은 사용자에게 실시간으로 정보를 전달하는 중요한 방법입니다. 이러한 플랫폼에서는 FCM(Firebase Cloud Messaging)과 같은 외부 서비스를 통하여 푸시 알림을 설정하고 관리할 수 있습니다. 예를 들어, Unity SDK를 이용하면 게임 앱 또는 기타 모바일 애플리케이션에서 사용자 맞춤형 푸시 알림을 구현할 수 있습니다. 관련 코드 예시는 GamePot.setPushStatus 등의 함수 호출로, 사용자에게 알림 허용 여부를 확인하고 상태를 변경하는 방법을 포함하고 있습니다.

  • 5-2. Web Push 서비스 개발 사례

  • 웹 푸시 알림 서비스 개발에 관한 사례로 몇 가지 사항을 들 수 있습니다. '클리앙' 블로그의 글에 따르면, 웹 푸시 알림 서비스인 '샌디'라는 SaaS가 개발되었으나 여러 어려움으로 인해 서비스를 종료하게 되었습니다. 웹 푸시 알림을 통해 사용자는 웹사이트에서 알림을 쉽게 연동하고 전송받을 수 있었으나, 비즈니스 장벽과 같은 리스크로 인해 사업이 지속되지 않았습니다. 서비스 개발 초기에는 PWA(Progressive Web App)의 발전 가능성에 대한 기대가 있었지만, 실질적인 도입에는 여전히 어려움이 많았음을 보여줍니다. 특히, PWA 기술이 보편화되지 않은 상황에서 알림 서비스의 가능성을 실현하는 데 한계가 있었던 것으로 나타났습니다.

6. 결론

  • Supabase는 실시간 데이터 업데이트와 효율적인 데이터베이스 관리 기능을 갖추고 있어, 푸시 알림 시스템의 기초 구조를 지원하는 데 매우 적합합니다. 그러나 자체적인 푸시 알림 기능이 없기 때문에 이를 FCM과 같은 외부 서비스와 통합하여 푸시 알림을 구현해야 합니다. Supabase의 실시간 데이터베이스 기능과 FCM의 푸시 알림 전송 능력을 결합함으로써, 다양한 플랫폼(Android, iOS, 웹)의 사용자는 실시간으로 알림을 받을 수 있습니다. 서비스워커는 웹 환경에서 브라우저에 알림을 표시하는 핵심 요소로 작동합니다. 이러한 통합 전략은 개발자들이 효율적으로 시스템을 개선하고 확장해 나가는 데 필요한 기본적인 방안을 제공할 것입니다. 지난 사례를 통해 알 수 있듯이, 웹 푸시 알림 서비스의 발전에는 여전히 해결해야 할 과제가 많지만, 기술이 계속 발전함에 따라 더욱 강력한 애플리케이션이 가능할 것입니다. 미래에는 더 나은 사용자 경험을 제공하기 위해 이러한 기술들의 실질적인 적용이 중요해질 것입니다.

7. 용어집

  • 7-1. Supabase [기술 플랫폼]

  • Supabase는 오픈 소스 백엔드 서비스로, PostgreSQL을 기반으로 하여 웹과 모바일 애플리케이션 개발을 지원합니다. 실시간 데이터베이스, 인증, 스토리지 등의 기능을 제공하여 빠른 개발 환경을 조성하는 것이 주된 특징입니다.

  • 7-2. Firebase Cloud Messaging (FCM) [서비스]

  • FCM은 Google이 제공하는 푸시 알림 서비스로, 다수의 플랫폼에 무제한 푸시 알림 전송 기능을 제공합니다. Supabase와 통합하여 실시간 데이터베이스 변화에 대한 알림 전송이 가능하도록 설정할 수 있습니다.

  • 7-3. 서비스워커(Service Worker) [기술]

  • 웹 애플리케이션의 푸시 알림 기능을 구현하는 백그라운드 스크립트입니다. 푸시 이벤트를 감지하여 브라우저에 메시지를 표시하는 역할을 수행합니다.

8. 출처 문서