Firebase Cloud Messaging에 앱을 연결해 Lovable 앱에서 기기와 토픽으로 푸시 알림을 보냅니다.
Firebase Cloud Messaging에 앱 연결하기
Firebase Cloud Messaging에 앱을 연결해 Lovable 앱에서 기기와 토픽으로 푸시 알림을 보내세요.
Firebase Cloud Messaging(FCM)은 Android, iOS, 웹 클라이언트에 푸시 알림(push notification)을 보내는 Google 서비스입니다. Firebase Cloud Messaging 커넥터를 사용하면 Lovable 앱이 자체 Firebase 프로젝트로 이러한 알림을 보낼 수 있습니다. 주문 업데이트, 공지, 리마인더처럼 브라우저 탭 밖에 있는 사용자에게 닿아야 하는 앱을 위해 설계되었습니다.
Firebase Cloud Messaging은 앱 + 채팅 커넥터로 제공됩니다. 하나의 공유 연결이 빌드 중 채팅과 게시된 앱 모두에서 작동합니다.
Firebase Cloud Messaging을 사용하면 앱에서 다음 작업을 할 수 있습니다.
- 등록 토큰(registration token)으로 기기 한 대에 알림 보내기
- 기기가 이미 구독한 토픽(topic)으로 브로드캐스트하기
- 각 메시지에 작은 데이터 페이로드 포함하기(문자열 값만 가능)
- 선택적으로 브라우저 푸시를 구성해 웹 앱 사용자가 알림 수신에 동의(opt in)하고 알림을 받도록 하기
주문 추적, 운영 알림, 그리고 앱이 이미 기기 토큰을 저장하고 있거나 FCM 토픽을 사용하는 모든 워크플로우에 적합합니다. 커넥터는 메시지를 보내는 역할만 합니다. 기기를 등록하거나 알림이 열렸는지 보고하지는 않습니다.
주요 활용 사례 및 예시 앱
다음 예시는 Firebase Cloud Messaging으로 무엇을 만들 수 있는지 보여줍니다. 각 예시에는 시작점으로 삼을 프롬프트가 함께 있습니다.
| 예시 앱 | 프롬프트 예시 | 설명 |
|---|---|---|
| 주문 발송 알림 | Firebase Cloud Messaging을 사용해 주문이 발송되면 푸시를 보내는 주문 추적기를 만들어줘. | 주문이 창고를 떠나는 즉시 고객의 휴대폰이나 브라우저로 알립니다. 앱이 사용자별 기기 토큰을 저장한 뒤 배송 상태가 바뀌면 대상 기기에 메시지를 보냅니다. |
| 토픽 공지 | Firebase Cloud Messaging을 사용해 news 토픽으로 공지를 브로드캐스트하는 관리자 페이지를 만들어줘. | 한 번의 전송으로 구독 중인 모든 기기에 닿습니다. 앱이 FCM 토픽으로 게시하므로 브로드캐스트할 때 개별 토큰을 조회할 필요가 없습니다. |
| 브라우저 주문 알림 동의 | Firebase Cloud Messaging을 사용해 로그인한 쇼핑객이 주문 업데이트용 브라우저 푸시에 동의하는 흐름을 만들어줘. | 웹 사용자가 버튼으로 알림을 켜면 서버에서 업데이트를 보냅니다. 앱이 브라우저를 등록하고 토큰을 저장한 뒤 이후 주문 이벤트를 커넥터로 보냅니다. |
| 예약 리마인더 | Firebase Cloud Messaging을 사용해 예약 전날 리마인더를 푸시하는 예약 앱을 만들어줘. | 예정된 시각에 알림을 보내 노쇼를 줄입니다. 앱이 해당 예약에 저장된 토큰을 조회해 예정된 시각에 리마인더를 보냅니다. |
| 인시던트 호출 | Firebase Cloud Messaging을 사용해 온콜 담당자에게 긴급 알림을 푸시하는 내부 도구를 만들어줘. | 운영자가 대시보드를 보고 있지 않을 때도 닿습니다. 인시던트가 생성되면 앱이 온콜 기기 토큰으로 높은 우선순위 알림을 보냅니다. |
| 무음 데이터 동기화 | Firebase Cloud Messaging을 사용해 클라이언트가 주문 화면을 새로 고칠 수 있도록 데이터 전용 메시지를 보내는 앱을 만들어줘. | 배너를 표시하지 않고 클라이언트를 깨웁니다. 앱이 데이터 페이로드를 보내면 클라이언트가 백그라운드에서 처리한 뒤 로컬 상태를 새로 고칩니다. |
Firebase Cloud Messaging 연결하기
Firebase Cloud Messaging 연결을 만들 수 있는 사용자는 플랜과 워크스페이스 설정에 따라 달라집니다. Free, Pro, Business 플랜에서는 앱 + 채팅 커넥터를 기본적으로 사용할 수 있습니다. Enterprise 플랜에서는 처음에 사실상 비활성화되어 있습니다. 관리자가 Connectors → Admin settings → App + chat connectors에서 변경하기 전까지 연결 및 클라이언트를 만들 수 있는 사용자가 No one으로 설정됩니다.
서로 다른 Firebase 프로젝트로 여러 Firebase Cloud Messaging 연결을 만들 수 있어 개발 환경과 프로덕션 환경을 분리할 때 유용합니다.
연결이 만들어지면 사용하려는 프로젝트에 연결을 링크할 수 있습니다. 프로젝트에서 빌드하는 사람은 누구나 채팅에서 Lovable에게 프로젝트를 이 연결에 링크해 달라고 요청할 수 있습니다.
사전 준비
Firebase Cloud Messaging을 연결하기 전에 다음을 준비하세요.
- Firebase 프로젝트
- 해당 프로젝트에서 Firebase Cloud Messaging API Admin 역할을 가진 Google Cloud 서비스 계정
- Lovable 워크스페이스에서 연결을 만들 수 있는 권한(연결 및 클라이언트를 만들 수 있는 사용자 참고)
- 브라우저 푸시를 사용하려는 경우 같은 프로젝트에 있는 Firebase web 앱과 Web Push 인증서(VAPID 키)
이 커넥터를 통한 전송은 자체 Firebase 및 Google Cloud 프로젝트를 사용합니다. 할당량과 Google Cloud 청구는 Lovable이 아닌 Google에서 처리합니다.
Step 1: Firebase 서비스 계정 키 가져오기
Lovable 앱은 이 JSON을 볼 수 없습니다. Lovable이 JSON을 연결에 저장해 두고 전송할 때 수명이 짧은 Google 토큰으로 교환합니다.
서비스 계정 키를 생성하려면 다음과 같이 진행하세요.
Firebase 프로젝트 열기
Firebase 콘솔에 로그인하고 Lovable이 알림을 보낼 프로젝트를 엽니다.
서비스 계정 열기
Project settings → Service accounts로 이동합니다. Generate service account key 페이지를 열고 Firebase가 물으면 프로젝트를 선택해도 됩니다.
비공개 키 생성하기
Generate new private key를 클릭하고 확인합니다. Firebase가 JSON 파일을 다운로드합니다. Firebase Cloud Messaging API Admin 역할이 있는 서비스 계정의 키를 사용하세요.
파일 안전하게 보관하기
JSON 파일을 비공개로 보관합니다. 다음 단계에서 이 파일을 업로드합니다. 채팅에 붙여넣거나 git에 커밋하거나 프런트엔드 코드에 넣지 마세요.
서비스 계정 JSON은 비밀번호처럼 작동합니다. 이 파일을 가진 사람은 누구나 Firebase 프로젝트 명의로 알림을 보낼 수 있습니다. 파일이 유출되면 Google Cloud에서 키를 교체하고 Lovable 연결을 업데이트하세요.
자세한 내용은 Google 문서 Firebase Cloud Messaging과 서비스 계정을 참고하세요.
Step 2: Firebase Cloud Messaging을 Lovable에 연결하기
서로 다른 Firebase 프로젝트를 사용해 여러 연결을 만들 수 있습니다.
Connectors에서 Firebase Cloud Messaging 열기
Connectors를 열고 Firebase Cloud Messaging을 선택합니다. 카탈로그를 여는 다른 위치는 커넥터를 찾을 수 있는 위치를 참고하세요.
연결 추가하기
Add connection을 클릭합니다.
연결 구성하기
연결 양식을 작성합니다.
- Display name: 연결 이름을 지정합니다(예:
FCM Prod). - Service Account JSON: Firebase에서 다운로드한 JSON 키를 업로드합니다.
- Client setup: Android와 iOS를 포함해 이미 보유한 토큰으로만 보낸다면 Server or native only(기본값)를 선택합니다. 앱이 알림을 위해 브라우저도 등록한다면 Include web push를 선택합니다.
Include web push를 선택했다면 웹 푸시 필드 추가하기
이 필드는 Client setup이 Include web push일 때만 표시됩니다. 이 모드에서는 세 필드 모두 필수입니다. Firebase 프로젝트 ID는 Lovable이 서비스 계정에서 알아서 가져오므로 직접 입력하지 않습니다.
- Firebase API key: Firebase 웹 앱 구성의
apiKey값입니다(AIza로 시작). Firebase에서 Project settings → General → Your apps를 열고 웹 앱을 선택한 뒤 SDK 스니펫에서 복사합니다. - Firebase App ID: 같은 스니펫의
appId값입니다(형식은1:<numbers>:web:<hex>). - Web Push VAPID key: 공개 Web Push 인증서입니다. Firebase에서 Project settings → Cloud Messaging → Web Push certificates를 열거나 View Web Push certificates 페이지를 사용합니다. 키 쌍의 공개 키를 복사합니다.
Server or native only를 선택했다면 이 단계를 건너뜁니다.
이 연결을 사용할 사용자 선택하기
Who can use this connection에서 워크스페이스 내 연결 사용자를 결정합니다. 처음에는 본인만 접근할 수 있습니다.
- Only you(기본값): 접근 목록을 그대로 두면 본인만 연결과 관련 데이터를 사용할 수 있습니다.
- Invite specific people: 이메일로 워크스페이스 멤버를 추가하면 본인과 추가한 사용자만 연결과 관련 데이터를 사용할 수 있습니다.
- Invite entire workspace: Invite entire workspace를 클릭하면 Lovable 워크스페이스의 모든 사용자가 연결을 사용할 수 있습니다.
자세한 내용은 연결 및 클라이언트를 사용할 수 있는 사용자를 참고하세요.
연결하기
Connect를 클릭합니다. Lovable이 연결을 저장하기 전에 Firebase Cloud Messaging으로 서비스 계정을 검증합니다.
연결되면 프로젝트에서 빌드하는 사람은 누구나 구성된 연결 수준 접근 권한에 따라 채팅에서 Lovable에게 프로젝트를 Firebase Cloud Messaging에 링크해 달라고 요청할 수 있습니다. 이후 Lovable 앱이 Firebase 프로젝트를 거쳐 알림을 보낼 수 있습니다.
앱에서 알림 보내기
서버 코드는 fcm.googleapis.com을 직접 호출하지 않고 Lovable의 커넥터 게이트웨이를 거쳐 전송합니다. 연결을 프로젝트에 링크한 뒤 채팅에서 Lovable에게 전송 로직을 연결해 달라고 요청하세요.
각 메시지는 다음 중 정확히 하나를 대상으로 합니다.
- 앱의 Firebase 클라이언트 SDK가 수집하고 직접 저장한 기기 토큰
- 기기가 이미 구독한 토픽 이름
- FCM 조건(condition) 표현식
UNREGISTERED(또는 일부 INVALID_ARGUMENT 오류)를 반환하는 토큰은 만료된 토큰입니다. 재시도하지 말고 데이터베이스에서 삭제하세요.
커넥터는 토큰을 수집하지 않습니다. Android, iOS, 웹 클라이언트가 Firebase SDK로 토큰을 얻고, 앱이 이후 전송을 위해 토큰을 저장합니다.
브라우저 푸시
로그인한 사용자가 브라우저에서 알림 수신에 동의하게 하려면 Include web push를 선택합니다. Lovable이 공개 웹 값을 링크된 프로젝트에 동기화하므로 생성된 클라이언트 코드가 Firebase Messaging을 초기화할 수 있습니다. 다만 브라우저가 권한 요청 창을 표시하려면 버튼 클릭 같은 사용자 동작이 여전히 필요합니다.
Lovable 프리뷰는 앱을 iframe 안에서 실행합니다. 브라우저는 iframe 안에서 알림 권한 요청 창을 차단합니다. 프리뷰를 별도 탭에서 열거나 게시된 앱에서 테스트하세요.
Server or native only로 연결했다가 나중에 브라우저 등록이 필요해지면 연결을 업데이트해 Client setup을 Include web push로 바꾸고 웹 필드를 채우세요.
제한 사항
Firebase Cloud Messaging 커넥터는 다음 작업을 할 수 없습니다.
- 기기 등록 또는 FCM 토큰 획득. 이 작업은 앱의 Firebase 클라이언트 SDK가 수행하고 토큰은 백엔드가 저장합니다.
- 전송 분석, 열람률, 사용자별 도달 범위 읽기. 이 데이터는 Firebase 콘솔(그리고 활성화한 경우 BigQuery 내보내기)에 있습니다.
- Firebase Authentication, Realtime Database, Cloud Storage, Analytics 연결. 이 커넥터는 Cloud Messaging 전용입니다.
- FCM 웹훅 또는 수신 이벤트 받기
- 최종 사용자별 Firebase 로그인. 각 연결은 연결된 모든 프로젝트에서 공유하는 하나의 Firebase 프로젝트를 나타냅니다.
Google Cloud에서 서비스 계정이 비활성화되거나 키가 취소되면 전송이 다시 성공하도록 새 키로 Lovable 연결을 업데이트해야 합니다.
문제 해결
연결이 실패하거나 브라우저 푸시 권한 요청 창이 표시되지 않을 때 다음 항목을 확인하세요.
Firebase Cloud Messaging 연결 관리
연결은 Connectors에서 관리합니다. **Firebase Cloud Messaging**을 선택한 다음 연결을 여세요.
- Unlink projects를 사용하면 다른 프로젝트에서 연결을 계속 사용할 수 있도록 유지하면서 특정 프로젝트의 Firebase Cloud Messaging 접근 권한만 제거할 수 있습니다. 단계별 절차는 연결에서 프로젝트 연결 해제를 참고하세요.
- Delete the connection을 사용하면 워크스페이스에서 연결을 완전히 제거할 수 있습니다. 삭제는 영구적이며 연결된 모든 프로젝트에서 자격 증명이 제거되고, Firebase Cloud Messaging을 사용하는 앱 기능은 새 연결을 추가할 때까지 작동하지 않습니다. 단계와 삭제 권한은 연결 삭제를 참고하세요.