티스토리 블로그에 원시그널(Onesignal)을 직접 연동해서 웹 푸쉬 수동 메시지를 보내자

티스토리 블로그에서 웹 푸쉬 알람(모바일 등에서 카톡 메시지처럼 뜨는)기능을 원시그널(Onesignal)을 통해 아주 간단하게 구현할 수 있다. 그래서 구글에 연동 방법을 검색하면 'Zapier'라는 온라인 자동 업무 연동 시스템을 통해 Tisotry-Zapier-Onesignal 을 거치는 무려 3단 연동을 통해 자동으로 웹 푸쉬를 구현하는 방법이 나온다.

블로그에 글을 쓰고 반드시 자동으로 웹 푸쉬가 가는 것에 목숨을 건 경우라면 모르겠지만, 그렇지 않다면 굳이 이렇게 복잡한 과정을 거칠 필요는 없다. 또한 'Zapier'사가 운영 방침을 바꾸거나 사라지는 등 위험 요소도 많기 때문에, 아주 간단하게 티스토리와 원시그널을 기본적인 세팅만으로 연결해놓고, 포스팅을 발행할 때마다 수동으로 알람을 보내는 것이 더 안정적이고 심플하다. 그리고 어차피 구독자에게 특정 메시지를 보내거나 이벤트를 알리는 등, 원시그널을 제대로 활용하려면 어차피 수동 메시지 기능을 사용할 줄 알아야 한다.

때문에 티스토리 원시그널 연동을 가장 간단하게 진행하고, 가장 쉬운 방법으로 메시지를 보내는 튜토리얼을 진행한다.

원시그널(Onesignal) 가입 및 세팅

1. 우선 원시그널(Onesignal) 회원가입 페이지로 이동해서 회원가입을 진행한다. 이메일주소, 깃헙(GitHub), 구글, 페이스북 아이디 등으로 만들 수 있다. 직접 가입 시 이메일 주소(Email Address), 비밀번호(Password), 회사 또는 조직 이름(Company or Organization Name)을 기입하고, 조직 이름은 적당히 적으면 된다. 'Create Account'버튼을 눌러 가입을 완료하면 이메일로 확인 메일이 오고, 메일 안에 링크를 클릭하면 회원가입이 완료된다.
2. 회원가입 후 로그인이 완료되면, 'All Applications' 페이지에서 좌측 상단의 'ADD APP' 버튼을 누른다.
3. 그럼 'Add a New App' 창이 뜨는데 앱 이름(APP NAME)을 적고 'ADD APP'을 눌러 생성한다. 여기서 정한 이름으로 푸시가 오는 게 아니라 그냥 원시그널(OneSignal)에서 구분하기 위한 이름이니까 적당히 지으면 된다.
4. 'Select one platform to configure' 메뉴에서 플랫폼을 선택해야 하는데 크롬 아이콘이 그려져 있는 'Web Push'를 선택하고 Next로 진행한다.
5. 'Configure Web Push' 메뉴로 넘어가는데, 'Choose Integration'의 하위 메뉴 중 'Typical Site(일반 사이트)'를 선택한다.
6. 이제 'Site Setup'에서 티스토리 블로그 사이트 정보를 입력해야 한다. 마지막 'HTTPS' 부분은 정말 중요하다.
7. 'SITE NAME' - 블로그 이름
8. 'SITE URL' - 'https://'를 포함한 사이트 주소
9. 'AUTO RESUBSCRIBE(HTTPS ONLY)' - 자동 재구독 기능인데, 티스토리에서는 사용할 수 없다.
10. 'DEFAULT ICON URL' - 원시그널 메시지를 보냈을 때 사용자에게 보여지는 프로필 이미지다. 본인의 블로그 프로필 링크를 사용하거나, 우측의 'UPLOAD'버튼을 통해 직접 이미지를 업로드 한다.
11. 'My site is nor fully HTTPS' - 정말 중요한 부분인데, 자신의 사이트가 완벽한 'HTTPS'가 아닐 때 사용하는 기능인데, 티스토리는 비록 'HTTPS'를 지원하고는 있어도 불완전하기 때문에 반드시 클릭해서 켜 줘야 한다(켜지 않으면 원시그널이 작동하지 않는다). 기능을 켜 주고 'CHOOSE A LABEL' 부분에 적절한 라벨을 적으면 되는데, 유저가 헷갈리지 않도록 웬만하면 사이트 주소를 적어주자(ex gkkmon.OS.TC). 이 기능을 켜게 되면 푸쉬 알림이 'gkkmon.com'이 아니라 'gkkmon.os.tc' 처럼 도메인 주소가 바뀌어서 오고, 구독 시 한 번 더 알림 페이지가 뜨는 불편함이 생기긴 하지만, 현재 티스토리에선 어쩔 수 없이 무조건 이렇게 사용해야 한다.

알림 세부 설정 - Permission Prompt Setup

1. 이제 'Permission Prompt Setup' 메뉴에서 세부 설정들을 만들어줘야 한다. 우리는 'Subscription Bell(사이트에 떠 있는 빨간색 구독 버튼)'과 'Slide Prompt(팝업으로 뜨는 구독 알림 메시지 창)'을 만들 것이다.
2. 하단의 'ADD A PROMPT'버튼을 눌러서 에디터를 켠다.
3. 좌측 상단의 'PROMPT TYPE'중 'SUBSCRIPTION BELL'을 선택한다.
4. 'SIZE'는 버튼의 크기, 'LOCATION'은 구독벨이 사이트 좌측 하단, 우측 하단 중 어디에 올지, 'COLOR'는 당연히 색상을 정한다.
5. 'VISIBLITY'의 'Hide bell if user is subscribed' 기능을 켜면, 유저가 구독 시 구독벨이 사라진다. 실수로 두 번 클릭해서 구독을 취소하는 경우를 방지하는 장점이 있지만, 구독을 취소 등 추후에 컨트롤하기 불편하다는 단점이 있다.
6. 그 외에 'Customize bell text' 등의 설정은 원시그널(Onesignal) 플러그인 세부 설정에 나온것과 같다.
7. 우측 하단의 'SAVE'버튼을 누르면 구독벨이 만들어진다.
8. 다시 'ADD A PROMPT'버튼을 눌러 에디터를 켜고 이번엔 메뉴 중 'SLIDE PROMPT'를 선택한다.
9. 그대로 사용해도 되긴 하지만 전부 영어이고 메시지가 딱딱하므로 커스텀 하도록 한다.
10. 하단의 'Customize slide prompt text' 기능을 켜고, 'ACTION MESSAGE'에 알림창에 적을 텍스트를 입력한다.
11. 'BUTTONS'에는 '예', '아니오' 처럼 버튼의 글자를 입력할 수 있다.
12. 마찬가지로 'SAVE'버튼을 눌러 저장하면 팝업 슬라이드 메시지가 만들어진다.

기타 설정

1. 'Welcome Notification'은 구독 시 가입 환영 메시지다.
2. 'TITLE'에 메시지 제목, 'MESSAGE'에 메시지 내용을 적으면 된다. 나중에 수동으로 메시지를 보낼 때에도 이것과 비슷한 방식으로 보내게 되고, 오른쪽에 미리보기 형태로 유저가 받게 될 메시지를 미리 확인할 수 있다.
3. 'Open link when clicking welcome notification' 기능을 켜면 메시지 클릭시 사이트로 이동한다.
4. 다음 'Advanced' 메뉴는 사실 그냥 냅둬도 멀쩡하게 작동한다. 필요한 기능을 짧게 설명하자면
5. 'CLICK BEHAVIOR'는 새 탭에서 열릴지 현재 창에서 열릴지 등의 세부사항을 설정한다.
6. 'PERSISTENCE' 는 알림이 자동으로 없어질지, 클릭할 때까지 있을지 결정한다.
7. 기타 설정까지 모두 완료했으면 하단의 'SAVE' 버튼을 눌러 세팅을 완료한다.

티스토리(Tistory)와 원시그널(Onesignal)연동

1. 설정을 완료하면 'Add Code to Site'에 10줄 정도의 스크립트 코드가 완성된다. 'COPY CODE' 버튼을 눌러 이 코드를 복사해서 티스토리의 'HTML'중 'head'와 '/head'사이에 집어넣으면 된다. 혹시 모르니 창을 끄지 말고, 코드는 메모장 등에 복사해 놓자.
2. 티스토리 블로그 관리자 페이지 → 스킨 편집 → HTML 편집 메뉴로 진입한다.
3. 'Ctrl + F'키를 눌러 '/head'를 검색한 뒤, 바로 그 윗줄에 복사한 코드를 집어넣고, 우측 상단의 주황색 '적용'버튼을 눌러 완료한다.

이제 모든 설정과 티스토리 연동이 완료되었다. 블로그에 접속해보면 구독벨과 함께 구독 슬라이드 메시지가 뜨는 것을 확인할 수 있다. 원시그널(Onesignal) 앱 페이지에서 확인 및 모니터링을 할 수 있고, 앱네임을 선택해 들어가서 더욱 자세한 대쉬보드, 수동메시지, 예약기능, 설정 등을 자유롭고 세세하게 설정할 수 있다. 참고로 이 메뉴 중 'Settings'에서 'Apple Safari' 버튼을 누르고 사이트 이름과 주소를 적고 확인하면 맥, 사파리에서도 알람이 가능하다(아이폰용 사파리 아님).

수동 메시지 등과 같은 세부사항은 기회가 된다면 새로운 글로 찾아오도록 하겠다. 그럼 모두 한 번의 세팅만으로 간단하고 안정적으로 티스토리(Tistory)에서 원시그널(Onesignal)을 통해 푸쉬 알람을 사용하길!