티스토리블로그에서 웹푸시 사용방법!

안녕하세요.

오랫만에 블로그포스팅 하는거 같아요, 요즘 바빠서 블로그 관리도 못하고 있었습니다.

티스토리블로그를 많은 분들이 이용 하고 있는데요~ 

블로그스킨도 이쁜게 많지만, 여기에 뭔가 더 활용도 좋은 기능이 없을까 하시는 분들 있을겁니다.

바로, 웹푸시 라는건데요!

웹푸시가 뭐하는건가요 ? 라고 질문 하시는 분들 많으실 겁니다.

내가 블로그를 운영 하는데, 네이버 또는 구글 검색에서 유입이 되긴 하지만, 고객들에게 직접적으로 

홍보 할수 있는 수단 이라고 보시면 될거 같아요 !

많은 분들이 11번가 같은 쇼핑몰 앱을 이용하시죠?

만약 새로운 상품이 올라왔으면, 어플을 사용하는 사용자들에게 직접적으로 알람을 주고, 해당 어플로 접속 할수 있도록 합니다.

웹푸시도 마찬가지로, 내가 운영하고 있는 블로그에 새로운 글을 사용자들에게 직접적으로 알림을 줄수 있어요 

PC는 물론이고, 태블릿, 모바일(안드로이드) 에 알림을 줄수 있습니다.

다만, 이 알람을 악의적으로 이용되서는 안되겠죠? 사용자들도 스트래스 받을겁니다.

유익하고, 꼭 필요한 내용을 전달 하는데 쓰이면, 지금 운영하고 있는 블로그 유입도, 높아질 겁니다. 

그럼, 이 웹푸시를 티스토리에 어떻게 적용 하는지 알아보도록 합니다 ~! 

* 아이폰의 경우 아직, 웹푸시가 지원하지 않습니다. 애플에서 지원할 계획이 있다고 하는데, 이 부분은 좀더 지켜보기로 합시다!

먼저, 웹푸시를 할 사이트(블로그)가 있어야 겠죠 ? 

저는 wnskin5.tistory.com 이 블로그에 웹푸시를 적용해 보도록 하겠습니다.

여기서, 사용되어야 할 사이트는 

zapier.com 과, onesignal.com 사이트 입니다. 

먼저, zapier.com 에 접속 합니다.

사이트에 접속하면, 상단에 Log in 버튼을 클릭 합니다.

그럼 로그인 하라고 뜨는데, 저는 구글계정이 로그인 되어 있어서, 구글 계정으로 로그인 하겠습니다.

따로, 아이디를 만드시겠다 하시는 분들은 Sign Up 을 클릭 하셔서, 회원가입후 이용 하시면 됩니다. 

로그인 하면, 위 화면처럼 여러가지 플랫폼이 나옵니다. 

지메일도 있고, 트위터도 보이고, 페이스북도 보이고.. 엄청 많네요

하지만, 티스토리는 없을겁니다. 티스토리는 글로벌 브랜드가 아니기 때문에 찾기 힘들꺼에요.. 

검색 부분에 onesignal 이라고 검색 하면, 

위 화면 처럼 나옵니다!

아래로 조금 스크롤 해보면, RSS + Onesinal 이 있어요!

(빨간표시 한곳을 보시면 되요)

클릭해 봅시다.

그럼 위 화면처럼 페이지가 나오는데, 

Create this Zap 을 클릭해 줍시다.

아, 영어 잘 몰라, 하시는 분들은 크롬의 경우, 마우스 오른쪽 클릭 하신후 한글변환 하시면 됩니다.

별 내용은 아닙니다.

Continue 버튼을 클릭 해 봅시다~ 

자, 이제, 뭔가 입력 하라는 내용이 나옵니다.

이거는 별거 아니고, RSS 주소를 적어 주면 됩니다. 

티스토리의 새로운 글을 푸시 알람 할거기 때문에, 티스토리 RSS 주소를 넣어 주면 됩니다. 

저의 경우, wnskin5.tistory.com/rss 가 되겠네요 

RSS 주소를 입력하고, Continue 버튼을 클릭 합시다.

이것도 중요한 부분은 아니에요, RSS 정보가 잘 들어 왔다 그런 내용 일겁니다 (^^;)

Fetch & Continue 버튼을 클릭 합시다!

RSS 테스트가 잘 되었나 보네요?

이번에도 Continue 버튼을 클릭 합니다. 

이번에도 마찬가지~ Continue 클릭!

그럼 위 페이지 까지 진행이 되었으면, 

브라우저 새창 또는 탭을 열어서, onesignal.com 으로 접속 해 줍니다. 

지금까지 진행한, zapier.com 창은 꼭 닫지 마세요! 다시 돌아와서 작업을 진행 해야 합니다. 

위 화면처럼 원시그널 홈페이지에 접속 하시면, 로그인을 합시다

상단에, LOG IN 버튼을 클릭 합시다.

마찬가지로, 회원가입을 원하실 경우, 아래에 보시면, Sign up 링크가 있을꺼에요 

클릭 하셔서 회원가입후, 진행 하셔도 되고,

저는 귀찮으니깐, 페이스북 또는 구글계정으로 로그인 하겠습니다. 

그럼 위 화면처럼 나올건데, 

저 같은 경우는 웹푸시를 몇개 생성 해놓은 상태라 위 화면처럼 나왔어요.. 

처음 사용 하시는 사용자들은 하나의 메뉴만 나오실 겁니다.

위 화면에 표시된 Add a new app 버튼을 클릭 합니다. 

저는 wnskin5.tistory.com  이니까, wnskin5 라고 적었습니다. 이름은 마음내키는데로 정해주세요! 

저희는 웹푸시를 사용 할 거기 때문에, 

Web Push 를 클릭 하고 아래에 NEXT 버튼을 클릭 하고 다음으로 넘어 갑니다. 

사이트 이름과, 사이트 주소를 입력 합니다.

저는 wnskin5 / http://wnskin5.tistory.com 이라고 적었습니다.

조금 아래로 스크롤 해 봅시다, 

그럼 Permission Prompt Setup 부분이 나오는데, ADD A PROMPT 버튼을 클릭 해 줍시다. 

(위 설명 부분에 해당 되는 캡쳐본은 없네요?.. )

그럼, 위 이미지 처럼, 팝업창이 뜨는데, 

푸시알림 허용 을 어떤 디자인으로 할꺼냐 선택 하라는거 같아요 

저는 SLIDE PROMPT 를 클릭 해 줬구요,

오른쪽에 예제로 보이는 이미지 처럼, 사이트 상단에 저런 디자인으로 나오겠다는 거 같습니다.

사실, 이 부분을 상세 설정 해서, 문구를 수정 할 수 있어요!

예를 들면, 사이트에 들어 왔을때, 

" 이 사이트를 방문해 주셔서 감사합니다. 최신 새로운 글을 알림을 받고자 하실 경우, 아래 구독을 눌러 주세요 ! " 

라든지, 문구는 알아서~ 

설정 해주는 부분이,  Customize slide prompt text 를 활성화 해주면, 문구를 추가 하거나 수정 할 수 있어요.

저는 귀찮으니까 그냥 패스!

아래 SAVE 버튼 클릭해서 넘어 갈께요~ 

그럼 위 이미지 처럼 CLICK HERE TO CONFIGURE HTTP POP-UP 이라는 버튼이 나오는데요, 

클릭해 주세요.

이것도 마찬가지로, 문구를 수정 할수 있어요~

그치만 저는 귀찮은 관계로 패스, 그냥 SAVE 클릭해서 넘어갈께요~ 

다음으로, 처음 알림을 허용 했을때 환영 문구 같은거에요~!

저는 위 내용처럼 간단하게 적었습니다.

여러분들은 아이디어가 더 많으니까 더 좋은 문구를 넣을수 있겠죠 ?

자, 이제 거의 다 왔어요

SAVE 버튼 클릭 해서 넘어갑니다. 

그럼, 위 빨간색 표시 한 부분 처럼, 자바스크립트 소스가 나옵니다.

저는 혹시나 해서, 메모장을 열어 소스를 복사 해 뒀습니다. 

휴~ 이제 끝나는 건가요..

FINISH 버튼 클릭.

피니시 클릭 하니 위 처럼 나옵니다.

Apple Safari 는 맥북을 사용하는 맥북사용자들 에게 푸시 알림을 주기 위해 추가 합니다.

클릭 하면, 사이트 주소를 적으라고 나오네요

역시나, 블로그 주소를 적어 줍니다.

그럼 이제 All Browsers, Apple Safari 가 활성화 됬네요!

아직 끝나지 않았어요.. 

Keys & IDs 를 클릭 해 줍니다.

그럼 위 페이지 처럼 APP ID 와 API KEY 를 발급해 줍니다.

그리고 다시, 아까 완료 하지 않은 zapier.com 창으로 돌아 갑니다.

분명히 위에서 언급 했습니다.

zapier.com 열어둔 창은 꼭 닫지 마시라고 ^^;

위 상태로 남아 있던 페이지 에서 

Connect an Account 버튼을 클릭 합니다.

그럼 새창이 뜹니다. 

아까, onesignal 사이트에서 봤던, APP ID 와 API Key 를 이곳에 입력해 주세요!

그냥 복사 붙여넣기로 채워주면 됩니다. 

그럼, 위 이미지 처럼 자동으로 선택 됩니다.

그럼 Save + Continue 버튼을 클릭 합니다. 

셋업된게 테스트 되며, 위 이미지 처럼 보입니다. 

역시 Continue 버튼을 클릭! 

Send Text To OneSignal 버튼을 클릭 합니다. 

테스트가 잘 진행 된거 같습니다. 

Finish 버튼을 클릭 해서 완료 해 줍니다. 

이제 끝난거 같네요... 

실제 해보면, 금방 할 수 있는건데, 이렇게 포스팅 하려니 내용이 엄청 길어졌네요 .. 

자, 아직 끝나지 않았어요

이제 본 블로그에 아까 메모장에 복사 해둔, 자바스크립 소스를 넣어 줘야 끝나겠죠?!

관리자로 로그인 해줍니다. 

관리자페이지 에서 꾸미기 > 스킨편집 클릭후 HTML 편집 클릭 하시면

위 이미지 처럼 HTML / CSS 를 편집 할 수 있는 창이 나와요.

아까 메모장에 복사해둔, 소스를 복사 해서

HTML 편집 창에 넣어 줍니다. 

저는, </head> 뒤에 넣었습니다. 

위 이미지를 유심히 봐 주세요.

자, 이제 사이트(블로그)에 들어와 봅시다

위 이미지처럼 알림표시? 가 나오면 설치 완료 된겁니다. 

ALLOW 버튼 한번 클릭 해보겠습니다.

그럼, 새창이 나오고, 알림표시 허용을 해줍니다.

그럼 열렸던 새창은 자동으로 닫힐꺼에요 

자동으로 닫힐때 까지 기다려 줍시다.

윈도우 오른쪽 하단에 알림이 떴어요! 

아까 onesignal 에서 적었던 환영 문구가 뜨네요.

이제 알림 테스트를 위해 블로그에 새로운 글을 작성해 봅니다.

내용은 귀찮은 관계로 대충~ 

RSS에 새로운 글이 올라왔는지 확인후 알림을 보내기 때문에, 대기시간이 좀 길었어요

한, 5분정도 있다가 푸시가 뜨네요

알림을 클릭 하니, 크롬 브라우저에 해당 포스트에 접속 됩니다. 

모바일도 가능해요!

아이폰은 아직 지원을 하지 않아서, 안드로이드 기종에서는 푸시알람을 받으실 수 있습니다. 

모바일에서 사이트에 접속 합니다.

그럼, 위 이미지 처럼 PC에서 봤던 알림 선택 화면이 나옵니다. 

ALLOW 버튼을 클릭 해 줍니다. 

알림을 허용해 줍니다. 

위 화면이 나오면, 그냥 기다려 주세요,

자동으로 닫힙니다. 

이제, 모바일에서도 알림을 위 사진 처럼 받아 볼 수 있어요.

알림을 클릭 해 보면

블로그 사이트로 접속 됩니다. 

이제는, 푸시기능 때문에, 따로 하이브리드앱을 개발하지 않아도 되요.

아! 푸시기능은 새글을 등록 했을때만 가능하고, 댓글이나, 방명록은 푸시가 되지 않아요.

티스토리에서 댓글과 방명록에도 따로 RSS가 있다면, 가능 하겠지요? 

이렇게 웹푸시를 티스토리에 사용해 봤습니다.

유익한 정보를 제공하는 블로거들에게는 마케팅 적으로도 효과가 있지 않을까요?! 

예를 들어, 영어강의 를 하는 블로그나, 펜션정보, 게임정보 등등 을 제공하는 블로그에는 꽤나 효과적일거 같아요.

다음에는 웹푸시 알림에 아이콘 표시 하는 방법과, 내용을 수정 하는 방법으로 돌아올께요

이 정보가 유익 하셨다면, 공감과 댓글 해 주시면 감사하겠습니다.