Skip to main content
이 포괄적인 가이드는 OneSignal WordPress 플러그인 버전 2.x.x를 사용하여 웹 푸시 알림을 설정하고 사용자 지정하는 방법을 안내합니다. 버전 3 이상을 사용하는 경우 WordPress v3+ 가이드를 참조하세요.
이 가이드는 OneSignal WordPress 플러그인 버전 2.x.x 전용입니다. 버전 3+의 경우 업데이트된 WordPress 문서를 참조하세요.

전제 조건

  • 관리자 액세스 권한이 있는 WordPress 웹사이트
  • HTTPS 활성화(웹 푸시 알림에 필요)
  • OneSignal 계정(onesignal.com에서 무료)

1단계: 통합 선택

onesignal.com에서 OneSignal 계정을 만드세요. 첫 번째 앱이 아닌 경우 New App/Website를 선택하고 앱 이름을 지정하고 Web을 선택한 다음 “Next”를 클릭합니다.

Web 옵션을 표시하는 플랫폼 선택 인터페이스

계속하려면 WordPress Plugin or Website Builder를 선택하세요:

WordPress 플러그인이 강조 표시된 웹 푸시 통합 옵션

2단계: 사이트 설정

이러한 설정은 모든 알림에 영향을 미치므로 사이트 정보를 신중하게 구성하세요:

필수 필드가 있는 사이트 설정 구성 양식

필드설명요구 사항
Site Name푸시 알림에 표시되는 기본 이름더 나은 표시를 위해 간결하게 유지
Site URL웹사이트의 완전한 URLhttp:// 또는 https://를 포함해야 하며 실제 URL 형식과 일치해야 함
Auto Resubscribe돌아오는 사용자를 자동으로 재구독(HTTPS만 해당)권장 - 브라우저 데이터를 지운 사용자의 마찰 감소
Default Icon URL프롬프트 및 알림의 아이콘HTTPS여야 하며 정사각형 256x256픽셀, PNG/JPG/GIF 형식
URL 형식 중요: 사이트 URL이 사용자가 사이트에 액세스하는 방식과 정확히 일치하는지 확인하세요. 일치하지 않는 URL(www 대 비www, http 대 https)은 구독 문제를 일으킬 수 있습니다.

3단계: 고급 푸시 설정 (선택 사항)

OneSignal은 Safari 웹 푸시 인증서를 무료로 제공합니다. 특정 요구 사항이 있는 경우에만 사용자 지정 인증서를 업로드하세요.

Safari 인증서 업로드 옵션을 표시하는 고급 푸시 설정

사용자 지정 인증서를 사용하는 경우:
  • 기존 Safari 인증서가 있는 경우
  • 조직에서 특정 인증서 관리가 필요한 경우
  • 사용자 지정 인증서 브랜딩이 필요한 경우

4단계: WordPress 플러그인 구성

플러그인 설치

WordPress 관리자에서 OneSignal WordPress 플러그인을 추가하거나 플러그인 디렉토리에서 “OneSignal”을 검색하세요.

API 키 구성

OneSignal 대시보드에서 앱 ID 및 API 키를 복사합니다:

앱 ID 및 API 키 위치를 표시하는 OneSignal 대시보드

WordPress 관리자 → OneSignal PushConfigure 탭으로 이동하여 키를 붙여넣습니다:

API 키 입력 필드를 표시하는 WordPress 플러그인 구성

푸시 프롬프트 활성화

방문자로부터 권한을 요청하려면 Slide Prompt 및 Subscription Bell을 활성화합니다:

Slide Prompt 및 Subscription Bell 옵션을 표시하는 프롬프트 설정

구성을 저장하세요 - 플러그인이 제대로 작동하려면 이것이 중요합니다.

구성 페이지 하단의 저장 버튼 위치

5단계: 설정 테스트

설치 확인

  1. 웹사이트를 방문합니다(캐시 플러그인을 지워야 할 수도 있음)
  2. OneSignal Slide Prompt 및 Subscription Bell을 찾습니다
  3. 흐름을 테스트하려면 구독합니다
  4. OneSignal 대시보드 → Audience → Users를 확인하여 구독을 확인합니다

테스트 알림 전송

OneSignal 대시보드 → 메시지 → New Push로 이동하여 첫 번째 알림을 전송하고 모든 것이 작동하는지 확인합니다.
문제 해결: 프롬프트가 나타나지 않으면 장치 설정에서 푸시 알림이 활성화되어 있는지 확인하고 브라우저 캐시를 지워보세요.

6단계: 알림 프롬프트 구성

Configure 섹션에서 사용자가 구독 프롬프트를 보는 방법과 시기를 설정합니다:

Subscription Bell

사용자가 언제든지 클릭하여 구독 상태를 관리할 수 있는 지속적인 아이콘(보통 모서리에 있음)입니다.

Slide Prompt

권한을 요청하기 위해 타이밍 설정에 따라 나타나는 모달 대화 상자입니다. 다음 단계: 사용자는 일반적으로 프롬프트 타이밍 및 모양을 사용자 지정하려고 합니다. 아래 고급 사용자 지정 섹션을 참조하세요.

7단계: 자동 게시물 알림

기본 설정

게시물을 만들 때 OneSignal 섹션이 표시됩니다. 구독자에게 알리려면 Send notification on post publish를 선택합니다:

OneSignal 알림 확인란을 표시하는 게시물 편집기

알림 자동 활성화

모든 새 게시물에 대해 이 확인란을 자동으로 선택하려면:
  1. OneSignal PushAutomatic Notification Settings로 이동합니다
  2. Automatically send a push notification when I create a post를 활성화합니다
  3. 설정을 저장합니다

자동 전송 옵션을 표시하는 자동 알림 설정

환영 알림

사용자가 구독한 직후 전송되는 선택적 환영 메시지를 구성합니다. 플러그인의 Configure 섹션에서 이러한 메시지를 편집하거나 비활성화합니다.
속도 제한: 동일한 게시물에 대한 여러 알림은 스팸을 방지하기 위해 분당 하나로 제한됩니다.

고급 사용자 지정

OneSignal WordPress 플러그인은 구성된 옵션으로 웹 푸시 SDK를 로드합니다. 모든 웹 푸시 SDK JavaScript API를 사용하여 경험을 추가로 사용자 지정할 수 있습니다.
개발자 참고: 이 섹션에는 JavaScript 및 PHP 지식이 필요합니다. 사이트에 코드를 추가하는 데 도움이 필요한 경우 Insert Headers and Footers 또는 Custom CSS & JS와 같은 플러그인을 사용하는 것을 고려하세요.

구독 프롬프트 사용자 지정

고급 프롬프트 설정

지연, 카테고리 및 이메일 수집을 포함한 정교한 프롬프트 사용자 지정의 경우:
1단계: 기본 프롬프트 비활성화
OneSignal WordPress 플러그인 → Prompt Settings에서 Slide 및 Native Prompt를 OFF로 전환합니다(Bell은 활성화 상태로 유지할 수 있음).

비활성화된 Slide 및 Native 프롬프트를 표시하는 프롬프트 설정

2단계: 수동 초기화 활성화
Advanced Settings로 스크롤하고 “Disable OneSignal initialization”을 ON으로 전환한 다음 Save합니다.

수동 초기화 토글을 표시하는 고급 설정

3단계: 사용자 지정 JavaScript 추가
이 코드를 사이트에 추가합니다(예제에 표시된 3초 지연 후):
// Basic Delayed Prompt
setTimeout(function(){
  window._oneSignalInitOptions.promptOptions = {
    slidedown: {
      prompts: [
        {
          type: "push",
          autoPrompt: true,
          text: {
            actionMessage: "Get notified of new posts and updates!",
            acceptButton: "Yes",
            cancelButton: "No thanks",
          },
          delay: {
            timeDelay: 10, // Wait 10 seconds
            pageViews: 2,  // Show after 2 page views
          }
        }
      ]
    }
  }
  window.OneSignal = window.OneSignal || [];
  window.OneSignal.push(function() {
    window.OneSignal.init(window._oneSignalInitOptions);
  });
}, 3000);
// Category-Based Prompt
setTimeout(function(){
  window._oneSignalInitOptions.promptOptions = {
    slidedown: {
      prompts: [
        {
          type: "category",
          autoPrompt: true,
          text: {
            actionMessage: "Choose what notifications you'd like to receive:",
            acceptButtonText: "Subscribe",
            cancelButtonText: "Not now",
            positiveUpdateButton: "Save Preferences",
            negativeUpdateButton: "Cancel",
            updateMessage: "Update your notification preferences.",
          },
          categories: [
            {
              tag: "news",
              label: "Breaking News",
            },
            {
              tag: "sports",
              label: "Sports Updates",
            },
            {
              tag: "tech",
              label: "Technology News",
            }
          ]
        }
      ]
    }
  }
  window.OneSignal = window.OneSignal || [];
  window.OneSignal.push(function() {
    window.OneSignal.init(window._oneSignalInitOptions);
  });
}, 3000);

페이지별 프롬프트

서버 측 PHP 방법
onesignal_initialize_sdk 필터를 사용하여 페이지 속성에 따라 초기화를 제어합니다.
클라이언트 측 JavaScript 방법
“Disable OneSignal initialization”을 활성화하고 조건부 JavaScript를 추가하여 특정 페이지에서만 OneSignal을 초기화합니다.

다국어 프롬프트

단일 언어 사이트의 경우 프롬프트 구성에서 텍스트를 번역하기만 하면 됩니다. 다국어 사이트의 경우 위의 수동 초기화 방법을 사용하고 페이지 언어를 감지하여 적절한 텍스트를 표시합니다.

사용자 세분화 및 타겟팅

사용자 태그 지정

데이터 태그로 사용자를 분류하여 타겟 알림을 전송합니다:
// Tag users based on their interests
OneSignal.push(function() {
  OneSignal.sendTag("interest", "technology");
  OneSignal.sendTag("location", "california");
});

세그먼트 타겟팅

OneSignal 대시보드에서 User Tag 필터를 사용하여 세그먼트를 만든 다음 onesignal_send_notification 필터로 타겟팅합니다:
<?php
add_filter('onesignal_send_notification', 'target_tech_users', 10, 4);

function target_tech_users($fields, $new_status, $old_status, $post) {
  // Only send to users interested in technology
  $fields['included_segments'] = array('Technology Enthusiasts');
  return $fields;
}

알림의 특집 이미지

특집 이미지 지원 활성화

테마가 특집 이미지를 지원하는지 확인합니다. 테마의 functions.php를 확인하세요:
add_theme_support('post-thumbnails');

이미지 설정 구성

OneSignal Push → Sent Notification Settings에서 원하는 특집 이미지 옵션을 켭니다:

아이콘 및 큰 이미지 옵션을 표시하는 특집 이미지 설정

타사 플러그인 통합

표준 게시물 유형

표준 게시물 유형에 대해 Automatically send a push notification when I publish a post from 3rd party plugins를 활성화합니다.

타사 플러그인 통합 설정

사용자 지정 게시물 유형

Additional Custom Post Types 필드에 사용자 지정 게시물 유형(쉼표로 구분)을 추가합니다:

사용자 지정 게시물 유형 구성 필드

사용자 지정 게시물 유형 찾기: 사용자 지정 게시물 유형을 만들 때 브라우저의 URL을 확인하세요: https://yoursite.com/wp-admin/post-new.php?post_type=your_custom_type post_type 매개변수는 추가할 이름을 보여줍니다.

모바일 앱 통합

방법 1: 간단한 웹 브라우저 열기

WordPress 플러그인 설정에서 Send notifications additionally to iOS & Android platforms를 활성화합니다.

모바일 플랫폼 통합 토글

방법 2: 딥 링킹

사용자 지정 모바일 앱 동작의 경우 위 설정을 비활성화하고 이 PHP 코드를 사용합니다:
<?php
add_filter('onesignal_send_notification', 'send_to_mobile_apps', 10, 4);

function send_to_mobile_apps($fields, $new_status, $old_status, $post) {
  $fields['isAndroid'] = true;
  $fields['isIos'] = true;
  $fields['isAnyWeb'] = true;
  $fields['data'] = array("customkey" => $fields['url']);
  $fields['web_url'] = $fields['url'];
  unset($fields['url']); // Prevents browser opening on mobile

  return $fields;
}

WordPress 플러그인 훅 및 필터

코드 배치

업데이트로 인해 덮어쓰지 않도록 사용자 지정 PHP 코드를 wp-content/mu-plugins/에 배치합니다.
사용자 지정 코드로 wp-content/mu-plugins/onesignal-custom.php를 만듭니다.

onesignal_send_notification

전송하기 전에 알림 매개변수를 수정합니다:
<?php
add_filter('onesignal_send_notification', 'customize_notification', 10, 4);

function customize_notification($fields, $new_status, $old_status, $post) {
  // Customize title and message
  $fields['headings'] = array("en" => "Breaking News!");
  $fields['contents'] = array("en" => "Check out our latest post");

  // Schedule for later
  $fields['send_after'] = "2024-12-25 09:00:00 GMT-0800";

  // Add action buttons
  $fields['web_buttons'] = array(
    array(
      "id" => "read-more",
      "text" => "Read More",
      "url" => get_permalink($post->ID)
    )
  );

  return $fields;
}

onesignal_initialize_sdk

OneSignal이 초기화되는 시기를 제어합니다:
<?php
add_filter('onesignal_initialize_sdk', 'control_initialization', 10, 1);

function control_initialization($settings) {
  // Only initialize on blog posts
  if (is_single() && get_post_type() == 'post') {
    return true;
  }
  return false;
}

onesignal_include_post

특정 게시물 유형에 대한 알림을 강제합니다:
<?php
add_filter('onesignal_include_post', 'include_pages', 10, 3);

function include_pages($new_status, $old_status, $post) {
  // Send notifications when pages are published
  if ($post->post_type == "page" && $new_status == "publish") {
    return true;
  }
  return false;
}

onesignal_meta_box_send_notification_checkbox_state

알림 확인란의 기본 상태를 제어합니다:
<?php
add_filter('onesignal_meta_box_send_notification_checkbox_state', 'auto_check_checkbox', 10, 2);

function auto_check_checkbox($post, $settings) {
  // Always check the box for news category posts
  if (has_category('news', $post)) {
    return true;
  }
  return false;
}

혼합 WordPress/비WordPress 사이트

WordPress 및 비WordPress 페이지가 모두 있는 사이트의 경우:
  1. OneSignal 대시보드에서 사용자 지정 코드 설정을 사용합니다
  2. 이 코드를 비WordPress 페이지에 추가합니다:
<script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" async=""></script>
<script>
var OneSignal = window.OneSignal || [];
var initConfig = {
  appId: "YOUR_APP_ID_FROM_WORDPRESS_PLUGIN",
  notifyButton: {
    enable: true
  },
};
OneSignal.push(function () {
  OneSignal.SERVICE_WORKER_PARAM = {
    scope: '/wp-content/plugins/onesignal-free-web-push-notifications/sdk_files/'
  };
  OneSignal.SERVICE_WORKER_PATH = 'wp-content/plugins/onesignal-free-web-push-notifications/sdk_files/OneSignalSDKWorker.js'
  OneSignal.SERVICE_WORKER_UPDATER_PATH = 'wp-content/plugins/onesignal-free-web-push-notifications/sdk_files/OneSignalSDKWorker.js'
  OneSignal.init(initConfig);
});
</script>

문제 해결

일반적인 문제

”No Recipients” 오류

  • 원인: 동일한 게시물에 대해 여러 알림을 너무 빨리 전송하려고 시도
  • 해결 방법: 동일한 게시물에 대한 알림 사이에 최소 1분을 기다립니다

프롬프트가 나타나지 않음

  • 원인: 캐시 플러그인, 브라우저 설정 또는 초기화 문제
  • 해결 방법:
    • 모든 캐시 플러그인을 지웁니다
    • 브라우저 알림 권한을 확인합니다
    • HTTPS가 활성화되어 있는지 확인합니다
    • 플러그인 구성이 저장되었는지 확인합니다

”Couldn’t load wp.data” 경고

  • Gutenberg가 있는 WordPress 5+: 설정 문제를 나타낼 수 있음 - 지원팀에 문의하세요
  • WordPress 4.x: 무시해도 안전함 - 이 경고는 기능에 영향을 미치지 않습니다

사용자 지정 게시물 유형이 작동하지 않음

  • 원인: 필수 메타 데이터 누락
  • 해결 방법: onesignal_include_post 필터를 사용하여 게시물 유형을 명시적으로 포함합니다

알림이 예약되지 않음

  • 원인: WordPress cron 또는 테마 충돌
  • 해결 방법:
    1. 예약을 위해 OneSignal 대시보드 또는 API를 사용합니다
    2. onesignal_send_notification 필터로 사용자 지정 예약을 구현합니다
    3. 자동화를 위해 Zapier 통합을 사용합니다

데이터베이스 항목

OneSignal은 wp_postmeta 테이블에 다음 항목을 만듭니다:
항목설명
onesignal_meta_box_present게시물이 게시될 때 OneSignal이 활성화되었는지 확인
onesignal_send_notification알림 전송 추적
status알림의 HTTP 상태(200 = 성공)
response_body알림 ID 및 수신자 수가 있는 API 응답
recipients알림을 받은 사용자 수

도움말


다음 단계

이 설정을 완료한 후:
  1. 성능 모니터링: OneSignal 대시보드를 정기적으로 확인하여 구독자 증가 및 참여 지표를 확인합니다
  2. 프롬프트 최적화: 다양한 프롬프트 타이밍 및 메시징을 실험합니다
  3. 사용자 세분화: 태그 지정을 구현하여 더 타겟팅된 알림을 전송합니다
  4. 철저하게 테스트: 다양한 장치 및 브라우저에 테스트 알림을 전송합니다
  5. 콘텐츠 전략 계획: 사용자를 압도하지 않으면서 가치를 추가하는 알림 전략을 개발합니다
A/B 테스트, 고급 세분화 및 상세한 분석과 같은 고급 기능의 경우 유료 OneSignal 플랜으로 업그레이드하는 것을 고려하세요.