메인 콘텐츠로 건너뛰기
웹 푸시 알림은 사용자가 웹사이트를 적극적으로 탐색하지 않을 때에도 시의적절한 콘텐츠로 사용자를 재참여시키는 방법입니다. 텍스트, 이미지, 작업 버튼, 사운드를 포함한 풍부한 콘텐츠를 지원합니다.
Web push notification examples across different browsers and devices
웹 푸시가 작동하려면:
  • HTTPS 웹사이트: 웹 푸시는 유효한 SSL 인증서가 있는 보안 사이트에서만 작동합니다
  • 서비스 워커: 웹사이트에 OneSignal 서비스 워커를 추가할 수 있어야 합니다
  • 단일 도메인 원본: 동일 원본 정책을 따라야 합니다
  • 사용자 권한: 사용자가 알림을 받기 위해 명시적으로 권한을 부여해야 합니다
  • 지원되는 브라우저: 대부분의 최신 브라우저에서 작동합니다(Chrome, Firefox, Safari, Edge)
사용자는 시크릿 또는 프라이빗 브라우징 모드에서 구독할 수 없습니다. iOS 기기에는 추가 설정이 필요합니다(iOS 웹 푸시 참조). 일부 브라우저에는 알림 제한이 있거나 사용자 상호작용이 필요할 수 있습니다. 웹 푸시 FAQ 참조.
이 가이드는 SDK 설정부터 개인화된 푸시 메시지 전송까지 모든 단계를 안내하여 OneSignal 푸시 알림을 성공적으로 구현할 수 있도록 도와줍니다.

웹 푸시 개발자 가이드

웹 푸시 알림을 보내기 전에 개발자가 다음 단계를 완료해야 합니다.
개발자가 아니신가요? 팀 구성원 관리를 참조하여 OneSignal 프로젝트에 대한 개발자 액세스 권한이 있는 팀원을 초대하세요.

구성 옵션

OneSignal 대시보드의 설정 > 푸시 및 인앱 > 웹에서 웹 푸시를 위해 웹사이트를 설정하세요.
OneSignal dashboard showing web push platform activation in settings
사이트와 일치하는 통합 유형을 선택하세요:
OneSignal dashboard showing integration type options: Typical Site, WordPress, and Custom Code
사이트 세부 정보:
  • 사이트 이름: 기본 알림 제목에 사용됩니다
  • 사이트 URL: 도메인 원본과 정확히 일치해야 합니다(경로 또는 www 불일치 없음)
  • 자동 재구독: 권장 - 브라우저 데이터를 지운 재방문 사용자를 자동으로 재구독합니다
  • 기본 아이콘 URL: 알림에 표시되는 256x256px 이미지입니다(설정하지 않으면 기본 벨 아이콘이 사용됩니다)

자동 재구독

사용자가 브라우저 데이터를 지우면 푸시 알림 수신이 중지됩니다. 사용자가 사이트로 돌아올 때 자동으로 재구독하려면 이 옵션을 활성화하세요. 자세한 내용은 구독을 참조하세요.
OneSignal dashboard web push configuration settings showing site details and auto resubscribe option

웹 권한 프롬프트

알림 권한에 대해 사용자에게 프롬프트를 표시하는 것은 옵트인에 중요합니다. 설정에 따라 권한 요청의 동작과 모양을 사용자 지정할 수 있습니다.
혜택을 설명하는 명확한 메시지를 사용하고, 적절한 시기에 사용자에게 프롬프트를 표시하고(예: 참여 후), 기본 브라우저 대화 상자를 트리거하기 전에 사전 프롬프트를 사용하세요.

환영 알림

사용자가 구독한 직후 전송되는 선택적 확인 푸시를 활성화할 수 있습니다. 일반 및 WordPress 통합은 대시보드에서 이를 설정할 수 있습니다.
OneSignal dashboard showing welcome notification configuration with title, message, and URL fields
사용자 지정 코드 통합은 OneSignal.init 함수에서 welcomeNotification 객체를 사용합니다. 자세한 내용은 웹 SDK 참조를 참조하세요. 환영 알림을 보내는 이유는 무엇인가요?
  • 사용자에게 성공적으로 구독했음을 알림
  • 향후 알림이 어떻게 보일지 보여줌
  • 온보딩 콘텐츠 또는 다음 단계 제공

사용자 및 구독

사용자가 푸시에 구독하면 OneSignal은 브라우저/기기에 연결된 고유한 구독을 자동으로 생성합니다. 웹 푸시 구독은 다음과 같은 경우 생성됩니다:
  • 특정 브라우저 및 기기를 사용하여 웹사이트에서 푸시 알림 권한을 부여하는 경우
  • 브라우저 데이터를 지운 후 사이트로 돌아오는 경우(자동 재구독이 활성화된 경우)
  • 새 브라우저 또는 기기에서 구독하는 경우
각 브라우저/기기 조합은 별도의 구독을 생성합니다. 시크릿/프라이빗 브라우징 모드는 구독을 생성할 수 없습니다. 웹 푸시 구독은 External ID를 할당할 때까지 익명으로 유지됩니다.
OneSignal dashboard Users page showing a list of Users with Subscription details

iOS 지원

Apple은 iOS 16.4+를 실행하는 iPhone 및 iPad에 대한 웹 푸시 지원을 추가했지만 더 엄격한 요구 사항이 있습니다:
  • 사용자가 사이트를 홈 화면에 추가해야 합니다
  • 권한 프롬프트는 해당 단계 이후에만 표시됩니다
  • 알림은 활성화되면 기본 앱 알림처럼 작동합니다

웹 푸시 알림 디자인

효과적인 푸시 알림을 만드는 것은 텍스트를 작성하는 것 이상입니다. 사용자 지정할 수 있는 요소와 효과적으로 사용하는 방법을 알아보세요.
Annotated diagram showing the anatomy of a web push notification with customizable and browser-controlled elements
  1. 제목: 주의를 끄는 헤드라인(권장: 50자 미만)
  2. 메시지: 주요 알림 콘텐츠(권장: 120자 미만)
  3. 아이콘: 브랜드 아이콘 또는 알림 전용 이미지(권장: 256x256px PNG 또는 JPG)
  4. 대형 이미지: 눈길을 끄는 시각적 콘텐츠
  5. 작업 버튼: 행동 유도 버튼
  6. 브라우저: 푸시를 표시하는 브라우저/앱
  7. 도메인: 브라우저에서 자동으로 설정하는 사이트 원본
  8. 타임스탬프 및 닫기: 브라우저가 이러한 컨트롤을 추가합니다
  9. 추가 옵션: 브라우저별 추가 컨트롤

메시지 개인화 및 현지화

각 사용자의 선호도와 언어에 맞게 푸시 메시지를 사용자 지정할 수 있습니다.

웹 푸시 동작 구성

푸시 메시지를 보낸 후 메시지가 어떻게 작동하는지 제어하세요. 언제 나타나는지, 얼마나 오래 저장되는지, 사용자가 어떻게 상호작용하는지 제어합니다.

전달, 표시 및 해제 설정

클릭 동작

사용자가 알림을 클릭할 때 발생하는 작업을 제어합니다. 기본값: 클릭하면 홈페이지가 열립니다. 사용자 지정:
  • 사용자를 특정 URL로 직접 연결
  • UTM 추적 사용
  • ?_osp=do_not_open으로 기본 동작 억제

설정 테스트

출시하기 전에 기기와 브라우저 전반에 걸쳐 웹 푸시 구현을 철저히 테스트하세요.

출시 전 체크리스트

  • SDK가 오류 없이 올바르게 로드됨
  • 권한 프롬프트가 나타나고 작동함
  • 테스트 알림이 전송되고 수신됨
  • 아이콘과 이미지가 올바르게 렌더링됨
  • Service Worker가 등록되고 최신 상태임
  • HTTPS 인증서가 유효함

푸시 분석 및 문제 해결

알림 성능을 측정하고 일반적인 전달 문제를 해결하세요:

다음 단계


자주 묻는 질문

iOS 사용자가 웹 푸시를 구독할 수 있나요?

네, iOS 16.4+부터 가능합니다. 사용자는 먼저 웹사이트를 홈 화면에 추가한 다음 알림 권한을 부여해야 합니다. 전체 설정 단계는 iOS 웹 푸시를 참조하세요.

사용자가 웹 푸시 알림 수신을 중단한 이유는 무엇인가요?

가장 일반적인 원인은 사용자가 브라우저 데이터를 지워 푸시 구독이 제거된 것입니다. 웹 푸시 설정에서 자동 재구독을 활성화하면 재방문 사용자를 자동으로 재구독할 수 있습니다. 자세한 내용은 구독을 참조하세요.

웹 푸시 알림은 시크릿 또는 프라이빗 브라우징 모드에서 작동하나요?

아니요. 사용자는 시크릿 또는 프라이빗 브라우징 모드에서 웹 푸시를 구독할 수 없습니다. 일반 세션에서 생성된 구독은 프라이빗 모드에서 접근할 수 없습니다.

어떤 브라우저가 웹 푸시 알림을 지원하나요?

Chrome, Firefox, Safari(macOS 및 iOS 16.4+), Edge 모두 웹 푸시를 지원합니다. 각 브라우저마다 프롬프트 동작과 알림 표시가 다를 수 있습니다. 브라우저별 세부 정보는 웹 푸시 FAQ를 참조하세요.

웹 푸시에 서브도메인을 사용할 수 있나요?

각 서브도메인(예: app.example.comshop.example.com)은 별도의 출처입니다. 브라우저는 웹 푸시에 동일 출처 정책을 적용하므로 각 서브도메인에는 고유한 OneSignal 앱이 필요합니다. 서비스 워커도 구독 페이지와 동일한 출처에 호스팅되어야 합니다 — CDN 및 기타 서브도메인은 허용되지 않습니다. 설정 옵션은 다중 사이트 및 서브도메인을 참조하세요.

웹 푸시에 두 개 이상의 도메인을 등록하려면 어떻게 해야 하나요?

각 도메인 또는 서브도메인에는 별도의 OneSignal 앱이 필요합니다. 단일 OneSignal 앱은 하나의 출처만 지원할 수 있습니다. 여러 도메인을 관리하려면 사용자를 구독을 위한 단일 출처로 리디렉션하거나 출처별로 개별 OneSignal 앱을 만드세요. 자세한 전략은 다중 사이트 및 서브도메인을 참조하세요.

웹 푸시 프롬프트가 표시되지 않는 이유는 무엇인가요?

일반적인 원인으로는 사이트가 HTTPS를 통해 제공되지 않거나, 서비스 워커가 올바르게 등록되지 않거나, 사용자가 이미 권한을 허용하거나 거부했거나, 사용자가 시크릿 모드인 경우가 있습니다. 브라우저 콘솔에서 오류를 확인하고 전체 체크리스트는 알림이 표시되지 않음을 참조하세요.