PHP로 구현된 웹사이트에서 FCM 구현 방법 따라하기 – 1부

관리자

파이어베이스(Firebase Cloud Messaging, FCM)을 이용하여 웹사이트에서 푸시 알림을 보내는 방법에 대한 기록입니다. 직접 구현하는 것보다 전송 성공률이 압도적으로 높고, 속도가 빠르며, 나중에 진짜 안드로이드/iOS 앱을 출시할 때도 그대로 연동할 수 있는 가장 완벽한 글로벌 표준입니다.

0단계: 파이어베이스 콘솔 세팅 (준비물 2가지)

파이어베이스 콘솔에 접속하여 새 프로젝트를 만듭니다.
메인 화면에서 앱추가 클릭 후 </> (웹) 아이콘을 눌러 앱을 추가하고, 발급되는 firebaseConfig 내용(apiKey, projectId 등)을 복사해 둡니다.
왼쪽 톱니바퀴(프로젝트 설정) -> [클라우드 메시징] 탭으로 이동합니다.
화면 아래쪽 ‘웹 구성(Web configuration)’에서 Generate key pair (키 쌍 생성)를 눌러 발급된 VAPID 키를 복사해 둡니다.

1단계: DB 테이블 생성 (FCM 전용)

파이어베이스는 복잡한 암호키 여러 개 대신, 유저 스마트폰마다 고유한 FCM 토큰(문자열) 하나만 발급합니다. phpMyAdmin에서 아래 쿼리를 실행해 아주 심플한 테이블을 만들어주세요.

CREATE TABLE IF NOT EXISTS eh_fcm_tokens (
    id INT AUTO_INCREMENT PRIMARY KEY,
    user_id INT NOT NULL COMMENT 'users 테이블의 id',
    fcm_token VARCHAR(255) NOT NULL COMMENT '파이어베이스 기기 고유 토큰',
    created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
    UNIQUE KEY unique_token (fcm_token)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='FCM 푸시 알림 토큰 목록';

2단계: `push_subscribe.php` 생성 (토큰 저장 API)

유저가 알림을 허용했을 때 발급받은 FCM 토큰을 DB에 저장하는 파일입니다. 최상위 폴더에 만들어주세요.

<?php
/*
    push_subscribe.php - 파이어베이스 FCM 토큰 DB 저장
*/
session_start();
include 'db_conn.php';

$data = json_decode(file_get_contents('php://input'), true);

if (!isset($_SESSION['user_id']) || !$data || !isset($data['token'])) {
    echo json_encode(['success' => false, 'msg' => '잘못된 접근입니다.']);
    exit;
}

$uid = (int)$_SESSION['user_id'];
$token = $data['token'];

// 토큰 저장 (이미 존재하는 토큰이면 user_id만 최신화)
$sql = "INSERT INTO eh_fcm_tokens (user_id, fcm_token) VALUES (?, ?) 
        ON DUPLICATE KEY UPDATE user_id = ?";
$stmt = $conn->prepare($sql);
$stmt->bind_param("isi", $uid, $token, $uid);

if ($stmt->execute()) {
    echo json_encode(['success' => true, 'msg' => '알림 설정이 완료되었습니다!']);
} else {
    echo json_encode(['success' => false, 'msg' => 'DB 저장 실패']);
}
$stmt->close();
?>

3단계: `firebase-messaging-sw.js` 생성 (절대 이름 변경 금지!)

파이어베이스는 백그라운드 알림 처리를 위해 반드시 이 이름의 파일을 최상위(루트) 폴더에서 찾습니다. 최상위 폴더에 파일을 만들고 아래 코드를 넣어주세요.

// firebase-messaging-sw.js
importScripts('https://www.gstatic.com/firebasejs/10.8.1/firebase-app-compat.js');
importScripts('https://www.gstatic.com/firebasejs/10.8.1/firebase-messaging-compat.js');

// 0단계에서 복사한 firebaseConfig 값을 똑같이 넣어주세요!
const firebaseConfig = {
  apiKey: "AIzaSy.......",
  authDomain: ".......firebaseapp.com",
  projectId: ".......",
  storageBucket: ".......appspot.com",
  messagingSenderId: ".......",
  appId: "......."
};

firebase.initializeApp(firebaseConfig);
const messaging = firebase.messaging();

// 앱이 백그라운드(꺼져있을 때) 알림 수신
messaging.onBackgroundMessage(function(payload) {
  console.log('백그라운드 메시지 수신:', payload);

  const notificationTitle = payload.notification.title;
  const notificationOptions = {
    body: payload.notification.body,
    icon: '/assets/img/icon-192x192.png',
    data: { url: payload.data ? payload.data.click_action : '/' }
  };

  return self.registration.showNotification(notificationTitle, notificationOptions);
});

// 알림 클릭 시 해당 URL로 이동
self.addEventListener('notificationclick', function(event) {
  event.notification.close();
  const urlToOpen = event.notification.data.url || '/';
  event.waitUntil(clients.openWindow(urlToOpen));
});

4단계: 프론트엔드 버튼 및 토큰 발급 로직 적용

이제 알림을 켜는 버튼을 profile.php나 원하시는 화면(footer.php 등)에 넣어주세요. 파이어베이스 라이브러리를 불러오고 토큰을 발급받는 가장 중요한 코드입니다.

<script src="https://www.gstatic.com/firebasejs/10.8.1/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/10.8.1/firebase-messaging-compat.js"></script>

<div class="text-center mt-4">
    <button id="fcmSubscribeBtn" class="btn btn-outline-primary rounded-pill fw-bold px-4">
        <i class="fas fa-bell me-2"></i>웹 푸시 알림 켜기 (FCM)
    </button>
</div>

<script>
// 0단계에서 복사한 firebaseConfig 값을 여기에 동일하게 넣어주세요!
const firebaseConfig = {
  apiKey: "AIzaSy.......",
  authDomain: ".......firebaseapp.com",
  projectId: ".......",
  storageBucket: ".......appspot.com",
  messagingSenderId: ".......",
  appId: "......."
};

// 파이어베이스 초기화
firebase.initializeApp(firebaseConfig);
const messaging = firebase.messaging();

document.getElementById('fcmSubscribeBtn').addEventListener('click', async () => {
    try {
        // 1. 브라우저 알림 권한 요청
        const permission = await Notification.requestPermission();
        if (permission !== 'granted') {
            Swal.fire('안내', '알림 권한이 차단되었습니다. 브라우저 설정에서 허용해주세요.', 'warning');
            return;
        }

        // 2. FCM 토큰 발급 요청
        // 0단계에서 발급받은 VAPID 키를 vapidKey 항목에 넣어주세요! (공개키 임으로 노출해도됨)
        const currentToken = await messaging.getToken({ 
            vapidKey: '여기에_VAPID_키를_넣어주세요' 
        });

        if (currentToken) {
            console.log('FCM 토큰 발급 성공:', currentToken);
            
            // 3. 발급받은 토큰을 우리 DB(PHP)로 전송하여 저장
            const response = await fetch('push_subscribe.php', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ token: currentToken })
            });
            
            const result = await response.json();
            if(result.success) {
                Swal.fire('완료!', '푸시 알림이 성공적으로 설정되었습니다!', 'success');
            } else {
                Swal.fire('오류', result.msg, 'error');
            }
        } else {
            Swal.fire('오류', '토큰 발급을 실패했습니다. 권한을 확인해주세요.', 'error');
        }
    } catch (err) {
        console.error('FCM 에러:', err);
        Swal.fire('오류', '알림 설정 중 문제가 발생했습니다.', 'error');
    }
});
</script>