개요
웹 푸시 알림은 사용자가 웹사이트를 적극적으로 탐색하지 않을 때 사용자를 재참여시키고 중요한 정보를 전달하는 강력한 방법입니다. 텍스트, 이미지, 작업 버튼을 포함한 풍부한 콘텐츠를 지원하며 사용자 유지 및 참여를 높이는 데 도움이 될 수 있습니다.
웹 푸시 알림은 사용자가 사이트에 없을 때에도 도달할 수 있도록 도와줍니다
- HTTPS 웹사이트: 웹 푸시는 유효한 SSL 인증서가 있는 보안 사이트에서만 작동합니다
- 단일 도메인 원본: 동일 원본 정책을 따라야 합니다
- 사용자 권한: 사용자가 알림을 받기 위해 명시적으로 권한을 부여해야 합니다
- 지원되는 브라우저: 대부분의 최신 브라우저에서 작동합니다(Chrome, Firefox, Safari, Edge)
- 사용자는 시크릿 또는 프라이빗 브라우징 모드에서 구독할 수 없습니다
- iOS 기기에는 추가 설정이 필요합니다(iOS 웹 푸시 참조)
- 일부 브라우저에는 알림 제한이 있거나 사용자 상호작용이 필요할 수 있습니다. 웹 푸시 FAQ 참조
웹 푸시 개발자 가이드
웹 푸시 알림을 보내기 전에 개발자가 다음 단계를 완료해야 합니다.개발자가 아니신가요? 팀 구성원 관리를 참조하여 OneSignal 프로젝트에 대한 개발자 액세스 권한이 있는 팀원을 초대하세요.
웹 SDK 설정
localhost 테스트 및 권한 프롬프트를 포함하여 OneSignal 웹 SDK를 설치하고 구성하는 완벽한 가이드입니다.
WordPress 플러그인
공식 플러그인을 사용하여 WordPress에서 푸시 알림을 빠르게 통합하세요. 코딩이 필요하지 않습니다.
iOS 웹 푸시 설정
iOS 16.4+를 실행하는 iPhone 및 iPad에서 웹 푸시를 활성화하기 위한 Apple 전용 단계를 따르세요.
다른 공급자에서 마이그레이션
다른 웹 푸시 공급자에서 전환하고 구독자를 유지하는 방법을 알아보세요.
구성 옵션
OneSignal 대시보드의 설정 > 푸시 및 인앱 > 웹에서 웹 푸시를 위해 웹사이트를 설정하세요.
OneSignal 설정에서 웹 플랫폼 활성화
웹사이트 설정에 따라 통합 유형 선택
일반 사이트
권장 - 대시보드에서 직접 프롬프트, 환영 알림 및 Service Worker 설정을 구성하세요. 백엔드 코딩이 필요하지 않습니다.
WordPress
공식 OneSignal 플러그인을 사용하여 전체 UI 기반 구성으로 WordPress 사이트에서 푸시를 쉽게 설정하세요.
사용자 지정 코드
코드를 통해 모든 것을 사용자 지정하려는 개발자를 위한 완전한 제어 설정입니다.
- 사이트 이름: 기본 알림 제목에 사용됩니다
- 사이트 URL: 도메인 원본과 정확히 일치해야 합니다(경로 또는
www불일치 없음) - 자동 재구독: 권장 - 브라우저 데이터를 지운 재방문 사용자를 자동으로 재구독합니다
- 기본 아이콘 URL: 알림에 표시되는
256x256px이미지입니다(설정하지 않으면 기본 벨 아이콘이 사용됩니다)
자동 재구독
웹 푸시의 중요한 개념은 사용자가 브라우저 데이터를 지우면 푸시 알림 수신이 중지된다는 것입니다. 사용자가 사이트로 돌아올 때 자동으로 재구독하려면 이 옵션을 활성화하세요. 자세한 내용은 구독을 참조하세요.
OneSignal 대시보드의 웹 설정
웹 권한 프롬프트
알림 권한에 대해 사용자에게 프롬프트를 표시하는 것은 옵트인에 중요합니다. 설정에 따라 권한 요청의 동작과 모양을 사용자 지정할 수 있습니다. 모범 사례:- 혜택을 설명하는 명확한 메시지 사용
- 적절한 시기에 사용자에게 프롬프트 표시(예: 참여 후)
- 기본 브라우저 대화 상자를 트리거하기 전에 사전 프롬프트 사용
웹 권한 프롬프트
다양한 프롬프트 유형(슬라이드다운, 카테고리 기반, 기본, 구독 벨 등)을 비교하고 각각을 언제 사용해야 하는지 알아보세요.
웹 SDK 참조
SDK를 사용하여 프롬프트가 표시되는 시기와 방법을 프로그래밍 방식으로 제어하는 방법을 알아보세요.
환영 알림
사용자가 구독한 직후 전송되는 선택적 확인 푸시를 활성화할 수 있습니다. 일반 및 Wordpress 통합은 대시보드에서 이를 설정할 수 있습니다.
환영 알림은 성공적인 구독을 확인하고 가치를 보여줍니다
OneSignal.init 함수에서 welcomeNotification 객체를 사용합니다. 자세한 내용은 웹 SDK 참조를 참조하세요.
환영 알림을 보내는 이유는 무엇인가요?
- 사용자에게 성공적으로 구독했음을 알림
- 향후 알림이 어떻게 보일지 보여줌
- 온보딩 콘텐츠 또는 다음 단계 제공
사용자 및 구독 이해
사용자가 푸시에 구독하면 OneSignal은 브라우저/기기에 연결된 고유한 구독을 자동으로 생성합니다. 웹 푸시 구독은 다음과 같은 경우 생성됩니다:- 특정 브라우저 및 기기를 사용하여 웹사이트에서 푸시 알림 권한을 부여하는 경우
- 브라우저 데이터를 지운 후 사이트로 돌아오는 경우(자동 재구독이 활성화된 경우)
- 새 브라우저 또는 기기에서 구독하는 경우
- 각 브라우저/기기 조합은 별도의 구독을 생성합니다
- 시크릿/프라이빗 브라우징 모드는 구독을 생성할 수 없습니다
- 웹 푸시 구독은 외부 ID를 할당할 때까지 익명으로 유지됩니다
OneSignal 대시보드: 대상 > 사용자
사용자
사용자를 관리하고, 외부 ID를 할당하고, 활동을 추적하는 방법을 알아보세요.
구독
브라우저 및 기기 전반에 걸쳐 구독이 작동하는 방식을 이해하세요.
세그먼트
사용자를 세그먼트로 그룹화하여 행동, 기기 등을 기반으로 타겟팅하세요.
iOS 지원
Apple은 iOS 16.4+를 실행하는 iPhone 및 iPad에 대한 웹 푸시 지원을 추가했지만 더 엄격한 요구 사항이 있습니다:- 사용자가 사이트를 홈 화면에 추가해야 합니다
- 권한 프롬프트는 해당 단계 이후에만 표시됩니다
- 알림은 활성화되면 기본 앱 알림처럼 작동합니다
iOS 웹 푸시
Service Worker 및 Manifest 설정을 포함하여 iOS 지원을 활성화하는 단계별 지침입니다.
대상이 홈 화면에 추가하도록 유도
사용자가 iOS 웹 푸시를 받을 수 있도록 사이트를 설치하도록 권장하는 팁입니다.
웹 푸시 알림 디자인
좋은 푸시 알림을 만드는 것은 텍스트를 작성하는 것 이상입니다. 디자인이 중요합니다. 사용자 지정할 수 있는 요소와 효과적으로 사용하는 방법을 알아보세요.
웹 푸시 알림 구조 - 요소 1-6을 사용자 지정하고, 7-9는 브라우저에서 제어합니다
- 제목: 주의를 끄는 헤드라인(권장:
50자 미만) - 메시지: 주요 알림 콘텐츠(권장:
120자 미만) - 아이콘: 브랜드 아이콘 또는 알림 전용 이미지(권장:
256x256pxPNG 또는 JPG) - 대형 이미지: 눈길을 끄는 시각적 콘텐츠
- 작업 버튼: 행동 유도 버튼
- 브라우저: 푸시를 표시하는 브라우저/앱
- 도메인: 브라우저에서 자동으로 설정하는 사이트 원본
- 타임스탬프 및 닫기: 브라우저가 이러한 컨트롤을 추가합니다
- 추가 옵션: 브라우저별 추가 컨트롤
메시지 개인화 및 현지화
각 사용자의 선호도와 언어에 맞게 푸시 메시지를 사용자 지정할 수 있습니다.웹 푸시 동작 구성
푸시 메시지를 보낸 후 메시지가 어떻게 작동하는지 제어하세요. 언제 나타나는지, 얼마나 오래 저장되는지, 사용자가 어떻게 상호작용하는지 제어합니다.전달, 표시 및 해제 설정
조절
알림 전달 속도를 제어하세요.
빈도 제한
동일한 사용자에게 알림을 과도하게 보내는 것을 방지하기 위해 제한을 설정하세요.
수명(TTL)
기기가 오프라인일 때 푸시 서비스가 메시지를 유지하는 기간을 정의하세요.
웹 푸시 주제
주제를 사용하여 중복 알림을 그룹화, 교체 또는 억제하세요.
클릭 동작
사용자가 알림을 클릭할 때 발생하는 작업을 제어합니다. 기본값: 클릭하면 홈페이지가 열립니다. 사용자 지정:- 사용자를 특정 URL로 직접 연결
- UTM 추적 사용
?_osp=do_not_open으로 기본 동작 억제
URL, 링크 및 딥링크
딥링크 및 추적을 사용하여 사용자를 관련 콘텐츠 또는 페이지로 라우팅하세요.
작업 버튼
사용자가 알림에서 즉각적인 작업을 수행할 수 있도록 하세요.
SDK 푸시 알림 이벤트 리스너
클릭 이벤트를 수신하고 사용자 지정 코드로 인앱 동작을 트리거하세요.
설정 테스트
출시하기 전에 기기와 브라우저 전반에 걸쳐 웹 푸시 구현을 철저히 테스트하세요.출시 전 체크리스트
- SDK가 오류 없이 올바르게 로드됨
- 권한 프롬프트가 나타나고 작동함
- 테스트 알림이 전송되고 수신됨
- 아이콘과 이미지가 올바르게 렌더링됨
- Service Worker가 업데이트됨
- HTTPS 인증서가 유효함
푸시 분석 및 문제 해결
알림 성능을 측정하고 개선하세요:푸시 메시지 보고서
각 메시지의 전달, 오픈율 및 클릭률 지표를 확인하세요.
분석 개요
채널 전반에 걸쳐 참여 및 사용자 행동 지표를 탐색하세요.
알림이 표시되지 않거나 지연됨
메시지가 나타나지 않는 경우 문제 해결 체크리스트입니다.
알림 이미지가 표시되지 않음
다양한 브라우저에서 이미지 렌더링 문제를 해결하세요.