사용자 지정 코드 설정

고급 구성 또는 프로그래밍 방식 제어가 필요한 경우에만 이 사용자 지정 코드 설정을 사용하세요. 대부분의 사용자에게는 다음을 권장합니다:

전제 조건

OneSignal 계정
HTTPS를 사용하는 웹사이트(웹 푸시 알림에 필요)
웹사이트의 HTML을 수정하고 서버에 파일을 업로드할 수 있는 액세스 권한
JavaScript에 대한 기본 이해(도움이 되지만 필수는 아님)

OneSignal 앱 생성

OneSignal에서 첫 번째 앱이 아닌 경우 새 앱/웹사이트를 클릭하세요. 그렇지 않으면 설정으로 직접 진행됩니다.

초기 앱 생성 화면을 보여주는 OneSignal 대시보드

앱 이름을 설명적으로 지정하고(웹사이트 이름과 일치시키는 것을 권장) 플랫폼 목록에서 웹을 선택하세요. 다음: 플랫폼 구성을 클릭하세요. 참고: 앱 설정에서 나중에 추가 플랫폼(iOS, Android 등)을 추가할 수 있습니다.

웹 옵션이 강조 표시된 플랫폼 선택 화면

1. 통합 선택

사용자 지정 코드를 선택하세요. 이렇게 하면 JavaScript SDK를 사용하여 프롬프트, 타이밍 및 기타 설정에 대한 완전한 프로그래밍 방식 제어가 가능합니다. 사용자 지정 코드를 선택해야 하는 경우:

알림 프롬프트를 사용자 지정해야 하는 경우
사용자에게 프롬프트가 표시되는 시기를 제어하려는 경우
고급 세분화 또는 타겟팅이 필요한 경우
단일 페이지 애플리케이션(SPA)을 구축하는 경우

사용자 지정 코드가 선택된 웹 구성 옵션

2. 사이트 설정

기본 사이트 정보를 구성하세요. 이러한 설정은 사용자에게 알림이 표시되는 방식에 영향을 미칩니다.

필수 필드가 강조 표시된 사이트 설정 양식

필드	설명	요구 사항
사이트 이름	푸시 알림에 표시되는 표시 이름	간결하고 인식 가능하게 유지
사이트 URL	완전한 웹사이트 URL	`https://`를 포함해야 하며 정확히 일치해야 함(사용하는 경우 `www` 포함)
자동 재구독	재방문 사용자를 자동으로 재구독	권장: 구독자 수 유지에 도움
기본 아이콘 URL	프롬프트 및 알림용 아이콘	정사각형 `256x256` 픽셀, `.png/.jpg/.gif` 형식, HTTPS URL 필요

일반적인 함정:

사이트 URL은 정확히 일치해야 함(www 포함 또는 제외)
아이콘은 HTTPS를 통해 제공되어야 함
로컬 테스트는 로컬 테스트 설정 참조

3. 고급 푸시 설정

Safari 웹 푸시 인증서(선택 사항)

OneSignal은 무료로 Safari 인증서를 자동으로 제공합니다. 사용해야 하는 기존 Safari 웹 푸시 인증서가 있는 경우에만 이를 활성화하세요.

기존 인증서용 Safari 인증서 업로드 옵션

활성화된 경우 Safari Web .p12 Push Certificate를 업로드하고 비밀번호를 입력하세요. 계속하려면 저장을 클릭하세요.

4. Service Worker 파일 업로드

OneSignal Service Worker는 푸시 알림이 작동하는 데 필요합니다. 두 가지 옵션이 있습니다:

옵션 1: 파일 수동 생성(권장)

생성 OneSignalSDKWorker.js라는 새 파일을 만드세요

추가 이 한 줄의 코드를 추가하세요:

importScripts("https://cdn.onesignal.com/sdks/web/v16/OneSignalSDK.sw.js");

업로드 웹사이트의 루트 디렉토리에 파일을 업로드하세요

옵션 2: 다운로드 및 업로드

다운로드 OneSignal SDK 파일을 다운로드하세요
압축 해제 다운로드한 파일의 압축을 푸세요
업로드 OneSignalSDKWorker.js를 서버에 업로드하세요

파일 호스팅 요구 사항

기본 위치: Service Worker는 https://yoursite.com/OneSignalSDKWorker.js에서 액세스할 수 있어야 합니다 사용자 지정 위치: 파일을 하위 폴더에 배치해야 하는 경우 자세한 지침은 OneSignal Service Worker 가이드를 참조하세요.

사용자 지정 위치가 필요하신가요? 하위 폴더 배치 또는 다른 푸시 공급자에서 마이그레이션하는 경우 OneSignal Service Worker 가이드를 따르세요.

Service Worker 파일 다운로드 인터페이스

레거시 설정 경고: 사이트가 2021년 11월 22일 이전에 설정되었고 현재 두 개의 Service Worker 파일(OneSignalSDKWorker.js 및 OneSignalSDKUpdaterWorker.js)을 사용하고 있는 경우 Service Worker 문제를 방지하기 위해 두 파일을 계속 호스팅하세요.새 설정에는 단일 OneSignalSDKWorker.js 파일만 필요합니다.

5. 웹사이트에 코드 추가

기본 구현

이 코드를 웹사이트의 <head> 섹션에 추가하세요. YOUR_ONESIGNAL_APP_ID를 OneSignal 대시보드의 실제 앱 ID로 바꾸세요.

<script src="https://cdn.onesignal.com/sdks/web/v16/OneSignalSDK.page.js" defer></script>
<script>
  window.OneSignalDeferred = window.OneSignalDeferred || [];
  OneSignalDeferred.push(function(OneSignal) {
    OneSignal.init({
      appId: "YOUR_ONESIGNAL_APP_ID",
      safari_web_id: "YOUR_SAFARI_WEB_ID", // 사용자 지정 Safari 인증서를 사용하는 경우에만 필요
      notifyButton: {
        enable: true, // OneSignal 벨 아이콘 표시
      },
    });
  });
</script>

프레임워크별 설정

JavaScript 프레임워크를 사용하는 경우 다음 특수 가이드를 따르세요:

코드 설치 후 다음 단계

SDK 초기화: 위의 코드는 기본 초기화를 처리합니다
프롬프트 구성: 사용자에게 프롬프트가 표시되는 시기와 방법 설정 - 권한 요청 참조
사용자 지정 로직 추가: 고급 기능은 웹 SDK 참조 사용

일반적인 통합 지점:

사용자 행동을 기반으로 한 사용자 지정 프롬프트 타이밍
세분화 및 사용자 태깅
이벤트 추적 및 분석
다양한 알림 전략의 A/B 테스트

설정 테스트

설치 확인

웹사이트 방문 - OneSignal 벨 아이콘이 표시되어야 합니다(활성화된 경우)
벨 클릭 - 브라우저의 기본 권한 프롬프트를 트리거합니다
구독 - 알림에 구독합니다
브라우저 콘솔 확인 - JavaScript 오류가 있는지 확인합니다

테스트 알림 보내기

테스트 구독 찾기: 테스트 구독 찾기 및 설정을 따르세요
테스트 푸시 보내기: 푸시 알림 보내기 가이드를 사용하세요
전달 확인 - 다양한 브라우저 및 기기에서 확인하세요

일반적인 문제 해결

Service Worker 문제:

OneSignalSDKWorker.js가 올바른 URL에서 액세스 가능한지 확인
파일에 올바른 import 문이 포함되어 있는지 확인
HTTPS가 올바르게 작동하는지 확인

벨 아이콘이 표시되지 않음:

JavaScript 코드가 <head> 섹션에 있는지 확인
브라우저 콘솔에서 오류 확인
앱 ID가 올바른지 확인

알림이 수신되지 않음:

시크릿/프라이빗 브라우저 창에서 테스트
브라우저 설정에서 알림이 활성화되어 있는지 확인
사이트가 HTTPS를 통해 제공되는지 확인

도움이 필요하신가요? 문제가 발생하면 웹 푸시 문제 해결 가이드를 확인하거나 support@onesignal.com에 문의하여 도움을 받으세요.

다음 단계

성공적으로 설정한 후 다음 고급 기능을 고려하세요:

타겟 메시징을 위한 대상 세분화
알림 전략의 A/B 테스트
성능 추적을 위한 분석 및 인사이트

개발자 문서

모바일 SDKs

웹 SDKs

실시간 활동

데스크탑 & 워치 설정

사용자 지정 코드 설정

전제 조건