워드프레스에 모바일&데스크톱 푸시 알림 구독 OneSignal 설치하기

이메일 구독 및 푸시 알림 구독 기능은, 안정적이고 훌륭한 워드프레스 사이트 운영을 위해서 필수적이다. 유튜브의 구독알림이나, SNS의 팔로우와 흡사한 기능을 해 줘서, 한 번 방문하고 말았을 사용자들의 재방문을 유도하기 때문이다. 이는 트래픽 면에서도, 검색엔진 의존도를 줄이는 측면에서도 훌륭한 방법이다.

그 중에서도 푸쉬 알림 구독은 이메일 구독보다 훨씬 효율적인데, 이메일 주소를 적지 않아도 되고 클릭 한번으로 이루어지기 때문에, 훨씬 높은 구독 전환률과 지속률을 가진다. 또한 이메일을 확인하는 습관이 없는 사용자에게도, 모바일에서 카톡같은 메세지가 온 것처럼 클라우드 메세지가 남기 때문에, 접근성이 높아져서 실질적인 재방문률도 더욱 높아진다.

다만 이메일 구독과는 다르게 푸시알림은 현재 개인이 자체적으로 제작하고 운영하기엔 거의 불가능할 정도의 난이도와 유지 보수 비용이 들어가기 때문에 필연적으로 푸시알림 서비스를 이용해야만 한다. 개꿀몬 사이트를 만들게 된 이유, 블로그를 정할 때 가장 중요한 것은? 편에서도 말했다시피, 사이트에 이런 의존적인 기능을 사용한다는 것은 그리 유쾌한 일은 아니지만, 현재로서는 대안이 없기 때문에 그나마 가장 안정적으로 보이는 이 분야의 1위 서비스 OneSignal을 사용하기로 한다. 개꿀몬처럼 의존성이 생기는걸 굉장히 싫어하지만 않는다면, 지속적인 업데이트와 유지보수, 그리고 관리 툴과 기능 면에서 오히려 서비스를 이용하는 것이 더욱 효과적일수도 있다.

OneSignal을 워드프레스 사이트에 추가하는 방법OneSignal 앱 생성

    1. 우선 OneSignal을 사용하기 위해선 회원가입을 해야한다. https://onesignal.com/ 에서 가입하고, 이메일 주소로 직접 만들거나 GitHub, Google, Facebook 아이디 등을 연동할수도 있다. 직접 가입 시 이메일 주소(Email Address), 비밀번호(Password), 회사 또는 조직 이름(Company or Organization Name)을 기입하고, 조직 이름은 적당히 적으면 된다. ‘Create Account’버튼을 눌러 가입을 완료하면 이메일로 확인 메일이 오고, 메일 안에 링크를 클릭하면 회원가입이 완료된다.
    2. 그렇게 회원가입이 완료되면 로그인 페이지인 OneSignal 어플리케이션 확인 페이지로 이동되는데, 가입 알림을 끄고 왼쪽 상단의 ‘ADD APP’ 버튼을 누른 뒤, ‘Add a New App’ 창에서 앱 이름(APP NAME)을 적고 ‘ADD APP’을 눌러 생성하자. 여기서 정한 이름으로 푸시가 오는게 아니라 OneSignal에서 구분하기 위한 이름이다.
    3. 그 다음 뜨는 ‘Edit app’ 창에서 우리가 사용할 기능인 크롬 아이콘 모양의 ‘Web Push’를 선택하고 ‘NEXT’로 진행한다.
    4. 첫 번째 ‘Choose Integration’ 메뉴에서 두 번째에 있는 ‘WordPress Plugin or Website Builder’를 선택한다.
    5. 그럼 ‘Select your website builder / cms’ 메뉴가 생기는데, 첫 번째에 있는 워드프레스를 선택한다.
    6. 생성되는 ‘WordPress Site Setup’창에 정보를 입력한다. ‘SITE NAME’에 사이트 이름을, ‘SITE URL’에 사이트 주소를(주소 마지막에 https://gkkmon.com/ 처럼 슬래시가 있으면 안된다, https://gkkmon.com 이런 식으로 적어야 함) 적으면 필수 입력 사항은 완료된다. ‘AUTO RESUBSCRIBE’는 자동 재구독 기능인데, HTTPS 사이트에서만 사용할 수 있는 기능이다. ‘DEFAULT ICON URL’에 아이콘을 업로드한다. 푸쉬메세지에 뜨는 아이콘이며, 192×192 픽셀의 사이즈가 최적화 크기라고 말하고 있다. 직접 업로드 할수도 있고, URL이나 다른 사이트에서 가져올수도 있다. 마지막의 ‘My site is not fully HTTPS’는, 내 사이트가 완전한 HTTPS가 아닐때 켜야하는 메뉴인데, SSL 보안문제가 남아있다던지, ‘HTTP’ 접속시 ‘HTTPS’로 자동 리다이렉트 되지 않는다던지 하는 불완전한 사이트라면 체크한다. 모두 완료되었으면 하단의 ‘SAVE’버튼을 눌러 완료한다.
    7. ‘Configure WordPress Plugin’창과 함께 앱 생성이 완료된다. 이제 워드프레스에 OneSignal 플러그인을 설치하고, 화면에 보이는 ‘APP ID’와 ‘API KEY’를 입력하면 된다. 창을 띄워두거나 복사해두고 다음 단계로 진행하자.
    8. 스킵해도 되는 부분인데, 맥에서 사용되는 ‘Apple Safari’ 브라우저에서도 기능을 사용하려면 하단의 ‘SAVE’ 버튼을 눌러 설정을 완료한 뒤, ‘Settings’ 창의 ‘Web Push Platforms’ 메뉴에서 꺼져있는 ‘Apple Safari’를 클릭한다.
    9. ‘Configure Platform’창에서 ‘Site Name’에 사이트 이름, ‘Site URL’에 사이트 주소를 입력한다. 하단의 체크리스트는 ‘HTTPS’ 사이트라면 스킵해도 된다. ‘SAVE’를 눌러 완료한다.
    10. 그럼 ‘Apple Safari’ 메뉴가 불이 켜지고 ‘ACTIVE’ 된걸 확인할 수 있는데, 다시 한 번 클릭한다.
    11. 아까와는 다르게 ‘Web ID’가 생성되어 있는데, 마찬가지로 이 코드도 복사해둔다. 이 코드가 ‘Safari Web ID’이다.

WordPress에 OneSignal 플러그인 설치 및 코드 입력

  1. 워드프레스 관리자 페이지로 이동해 ‘플러그인 → 새로 추가 → OneSignal 검색 → 설치 → 활성화’ 로 플러그인을 설치하고 활성화한다.
  2. 설치가 완료되면 좌측 탭에 ‘OneSignal Push’ 탭이 추가된다. 선택해 들어간다. 빨간색의 ‘OneSignal Push: Your setup is not complete. Please follow the Setup guide to set up web push notifications. Both the App ID and REST API Key fields are required.’라는 경고창이 뜨는데, 코드가 입력되지 않았다는 메세지니까 무시하면 된다.
  3. ‘Setup’탭에서 설치 방법과 설명 등을 알려주는데, 볼 사람은 보고 ‘Configuration’ 탭으로 이동한다.
  4. ‘Account Settings’에 아까 복사해뒀던 ‘APP ID’를 ‘App ID’ 란에, ‘APP API’를 ‘REST API Key’란에 입력한다. 앞서 ‘Safari Web ID’를 생성했다면, 사파리 웹 아이디까지 마저 입력하면 기본세팅은 모두 완료된 것이다. 하단의 ‘SAVE’ 버튼을 누르면 사이트에 OneSignal 푸시알림이 뜨게 된다.

설치를 축하한다! 이대로 사용해도 되지만, 세세한 설정들을 커스터마이징 할 수록 더욱 효과가 높아지고 사용자 경험이 향상되기 때문에 꼭 진행해야 한다. 세세한 설정인 만큼 내용이 길기 때문에 다음 편에서 진행하도록 한다.