이 페이지는 Cloud Translation API를 통해 번역되었습니다.

푸시 알림 개요

푸시 알림의 정의, 사용 이유, 작동 방식에 관한 개요입니다.

Kayce Basques

Matt Gaunt

푸시 알림이란 무엇인가요?

푸시 메시지를 사용하면 사용자가 웹사이트를 사용하지 않을 때도 사용자의 주의를 끌 수 있습니다. 사용자가 활성 상태가 아니더라도 사용자에게 정보를 '푸시'할 수 있으므로 푸시 메시지라고 합니다. 이 개념을 더 잘 이해하려면 푸시 기술과 풀 기술을 비교해 보세요.

알림은 사용자에게 소량의 정보를 표시합니다. 웹사이트는 알림을 사용하여 사용자에게 시간에 민감한 중요한 이벤트나 사용자가 취해야 할 조치를 알릴 수 있습니다. 알림의 모양과 느낌은 플랫폼마다 다릅니다.

푸시 메시지와 알림은 별개이지만 상호 보완적인 기술입니다. 푸시는 사용자가 웹사이트를 적극적으로 사용하지 않을 때도 서버에서 사용자에게 메시지를 전송하는 기술입니다. 알림은 푸시된 정보를 사용자 기기에 표시하는 기술입니다. 푸시 메시지 없이 알림을 사용할 수 있습니다. 언젠가는 사용자 대상 알림 없이 푸시 메시지를 사용할 수도 있지만 (무음 푸시) 현재 브라우저에서는 이를 허용하지 않습니다. 실제로는 일반적으로 함께 사용됩니다. 기술에 익숙하지 않은 사용자는 푸시 메시지와 알림의 차이를 이해하지 못할 수 있습니다. 이 컬렉션에서 푸시 알림은 메시지를 푸시한 후 알림으로 표시하는 조합을 의미합니다. 푸시 메시지는 푸시 기술 자체를 의미합니다. 알림은 알림 기술 자체를 의미합니다.

푸시 알림을 사용해야 하는 이유

사용자에게 푸시 알림은 시의적절하고 관련성 있으며 정확한 정보를 받을 수 있는 방법입니다.
웹사이트 소유자에게 푸시 알림은 사용자 참여도를 높이는 방법입니다.

푸시 알림은 어떻게 작동하나요?

푸시 알림을 구현하는 주요 단계는 다음과 같습니다.

사용자에게 푸시 알림을 보내는 권한을 요청하는 클라이언트 로직을 추가한 다음, 데이터베이스에 저장하기 위해 클라이언트 식별자 정보를 서버로 전송합니다.
클라이언트 기기에 메시지를 푸시하는 서버 로직을 추가합니다.
기기에 푸시된 메시지를 수신하고 알림으로 표시하는 클라이언트 로직을 추가합니다.

이 페이지의 나머지 부분에서는 이러한 단계를 자세히 설명합니다.

푸시 알림을 보내는 권한 얻기

먼저 웹사이트에서 푸시 알림을 보내기 위해 사용자의 권한을 받아야 합니다. 이는 Do you want to receive push notifications? 메시지 옆에 있는 예 버튼을 클릭하는 등의 사용자 동작에 의해 트리거되어야 합니다. 확인 후 Notification.requestPermission()를 호출합니다. 사용자 기기의 운영체제 또는 브라우저는 사용자가 푸시 알림을 선택하려는 것인지 공식적으로 확인하는 일종의 UI를 표시할 수 있습니다. 이 UI는 플랫폼마다 다릅니다.

클라이언트를 푸시 알림에 구독

권한을 얻은 후 웹사이트에서 사용자의 푸시 알림 구독 프로세스를 시작해야 합니다. 이는 Push API를 사용하여 JavaScript를 통해 이루어집니다. 구독 프로세스 중에 공개 인증 키를 제공해야 합니다. 이 키에 대해서는 나중에 자세히 알아봅니다. 구독 프로세스를 시작한 후 브라우저는 푸시 서비스라는 웹 서비스에 네트워크 요청을 보냅니다. 푸시 서비스에 대해서는 나중에 자세히 알아봅니다.

구독에 성공했다고 가정하면 브라우저는 PushSubscription 객체를 반환합니다. 이 데이터는 장기적으로 저장해야 합니다. 일반적으로 이는 개발자가 제어하는 서버로 정보를 전송한 후 서버에서 데이터베이스에 저장하도록 합니다.

푸시 메시지 전송 권한을 받습니다. PushSubscription을 가져옵니다. 서버에 PushSubscription을 전송합니다.

푸시 메시지 보내기

서버는 실제로 푸시 메시지를 클라이언트로 직접 전송하지 않습니다. 푸시 서비스가 이를 실행합니다. 푸시 서비스는 사용자의 브라우저 공급업체에서 제어하는 웹 서비스입니다. 클라이언트에 푸시 알림을 보내려면 푸시 서비스에 웹 서비스 요청을 해야 합니다. 푸시 서비스로 전송하는 웹 서비스 요청을 웹 푸시 프로토콜 요청이라고 합니다. 웹 푸시 프로토콜 요청에는 다음이 포함되어야 합니다.

메시지에 포함할 데이터
메시지를 보낼 클라이언트입니다.
푸시 서비스가 메시지를 전송하는 방법에 관한 안내입니다. 예를 들어 푸시 서비스가 10분 후에 메시지 전송 시도를 중지하도록 지정할 수 있습니다.

일반적으로 제어하는 서버를 통해 웹 푸시 프로토콜 요청을 실행합니다. 물론 서버가 원시 웹 서비스 요청을 직접 구성할 필요는 없습니다. web-push-libs와 같이 이를 대신 처리할 수 있는 라이브러리가 있습니다. 하지만 기본 메커니즘은 HTTP를 통한 웹 서비스 요청입니다.

서버가 푸시 서비스에 웹 푸시 프로토콜 요청을 전송하고 푸시 서비스는 메시지를 사용자 기기로 전송합니다.

푸시 서비스는 요청을 수신하고 인증한 후 푸시 메시지를 적절한 클라이언트로 라우팅합니다. 클라이언트의 브라우저가 오프라인 상태인 경우 푸시 서비스는 브라우저가 온라인 상태가 될 때까지 푸시 메시지를 대기열에 추가합니다.

각 브라우저는 원하는 푸시 서비스를 사용합니다. 웹사이트 개발자는 이를 제어할 수 없습니다. 웹 푸시 프로토콜 요청이 표준화되어 있으므로 이는 문제가 되지 않습니다. 즉, 브라우저 공급업체가 사용하는 푸시 서비스를 신경 쓰지 않아도 됩니다. 웹 푸시 프로토콜 요청이 사양을 준수하는지 확인하기만 하면 됩니다. 사양에 따르면 요청에 특정 헤더가 포함되어야 하고 데이터는 바이트 스트림으로 전송되어야 합니다.

하지만 웹 푸시 프로토콜 요청을 올바른 푸시 서비스로 전송해야 합니다. 구독 프로세스 중에 브라우저가 개발자에게 반환한 PushSubscription 데이터는 이 정보를 제공합니다. PushSubscription 객체는 다음과 같이 표시됩니다.

{
  "endpoint": "https://fcm.googleapis.com/fcm/send/c1KrmpTuRm…",
  "expirationTime": null,
  "keys": {
    "p256dh": "BGyyVt9FFV…",
    "auth": "R9sidzkcdf…"
  }
}

endpoint의 도메인은 기본적으로 푸시 서비스입니다. endpoint의 경로는 푸시 서비스가 메시지를 푸시할 클라이언트를 정확하게 결정하는 데 도움이 되는 클라이언트 식별자 정보입니다.

keys는 암호화에 사용되며 이는 다음에 설명합니다.

푸시 메시지 암호화

푸시 서비스로 전송하는 데이터는 암호화되어야 합니다. 이렇게 하면 푸시 서비스에서 클라이언트로 전송하는 데이터를 볼 수 없습니다. 브라우저 공급업체에서 사용할 푸시 서비스를 결정하며 푸시 서비스는 이론적으로 안전하지 않거나 안전하지 않을 수 있습니다. 서버는 PushSubscription에 제공된 keys를 사용하여 웹 푸시 프로토콜 요청을 암호화해야 합니다.

웹 푸시 프로토콜 요청 서명

푸시 서비스는 다른 사용자가 사용자에게 메시지를 보내지 못하도록 하는 방법을 제공합니다. 기술적으로는 이 작업을 수행하지 않아도 되지만 Chrome에서 가장 쉽게 구현하려면 이 작업이 필요합니다. Firefox에서는 선택사항입니다. 향후 다른 브라우저에서도 필요할 수 있습니다.

이 워크플로에는 애플리케이션에 고유한 비공개 키와 공개 키가 포함됩니다. 인증 프로세스는 대략 다음과 같이 작동합니다.

비공개 키와 공개 키를 일회성 작업으로 생성합니다. 비공개 키와 공개 키의 조합을 애플리케이션 서버 키라고 합니다. VAPID 키라고도 합니다. VAPID는 이 인증 프로세스를 정의하는 사양입니다.
JavaScript 코드에서 푸시 알림을 수신하도록 클라이언트를 구독할 때 공개 키를 제공합니다. 푸시 서비스가 기기의 endpoint를 생성하면 제공된 공개 키를 endpoint와 연결합니다.
웹 푸시 프로토콜 요청을 전송할 때 비공개 키로 일부 JSON 정보에 서명합니다.
푸시 서비스는 웹 푸시 프로토콜 요청을 수신하면 저장된 공개 키를 사용하여 서명된 정보를 인증합니다. 서명이 유효하면 푸시 서비스는 요청이 일치하는 비공개 키가 있는 서버에서 전송되었다는 것을 알 수 있습니다.

푸시 메시지 전송 맞춤설정

웹 푸시 프로토콜 요청 사양은 푸시 서비스가 푸시 메시지를 클라이언트로 전송하려고 시도하는 방식을 맞춤설정할 수 있는 매개변수도 정의합니다. 예를 들어 다음을 맞춤설정할 수 있습니다.

푸시 서비스가 메시지 전송을 시도해야 하는 시간을 정의하는 메시지의 TTL (수명)입니다.
메시지의 긴급도입니다. 푸시 서비스가 우선순위가 높은 메시지만 전송하여 클라이언트의 배터리 수명을 보존하는 경우에 유용합니다.
메시지의 주제입니다. 이 주제는 동일한 주제의 대기 중인 메시지를 최신 메시지로 대체합니다.

푸시된 메시지를 수신하여 알림으로 표시

웹 푸시 프로토콜 요청을 푸시 서비스로 전송하면 푸시 서비스는 다음 이벤트 중 하나가 발생할 때까지 요청을 대기열에 유지합니다.

클라이언트가 온라인 상태가 되고 푸시 서비스가 푸시 메시지를 전송합니다.
메시지가 만료됩니다.

클라이언트 브라우저가 푸시된 메시지를 수신하면 푸시 메시지 데이터를 복호화하고 서비스 워커에 push 이벤트를 전달합니다. 서비스 워커는 기본적으로 웹사이트가 열려 있지 않거나 브라우저가 닫혀 있는 경우에도 백그라운드에서 실행할 수 있는 JavaScript 코드입니다. 서비스 워커의 push 이벤트 핸들러에서 ServiceWorkerRegistration.showNotification()를 호출하여 정보를 알림으로 표시합니다.

메시지가 기기에 도착합니다. 브라우저가 서비스 워커를 깨웁니다. 푸시 이벤트가 전달됩니다.