https://www.clien.net/service/board/use/15475142CLIEN 지난 3탄
--------------------------------------------------------------
이어질 내용은 push서비스를 어떻게 구현할 것인지 도구를 선택하는 과정의 내용을 담고 있습니다. 실제 구현내용은 다시 글로 작성해야 할 만큼 방대하여 여기에 포함시키진 않았습니다.
--------------------------------------------------------------
지난 스토리에서 롤 api를 통해 제가 원하는 정보(친구가 현재 게임을 하고있는지 안하고있는지)를 얻을 수 있음을 확인하였습니다.
이제 내가 얻은 정보를 사용자에게 전달하는 일만 남았습니다.
해당 기술에 관해 그때 당시 주워들은 키워드가 push였습니다. 사실 push서비스라고 하면 이제 누구에게나 익숙한 모바일 환경을 떠올리지 않을 수 없는데요.
예를들어 스타벅스 어플리케이션을 쓴다고 생각해봅시다. 그러면 스타벅스가 나에게 쿠폰을 보내주기도 하구요, 사이렌오더를 이용하면 커피가 나왔다고 알림을 보내주죠. 그게 바로 push서비스였습니다.
사용자입장에서 push서비스를 경험해봤기 때문에 뭔지는 익숙한데 이걸 구현할라니 좀 막막했습니다. 그래서 또 검색을 본격적으로 하기 시작합니다.
push검색을 여러방면으로 하면서 그때당시 닥친 문제점을 발견했습니다.
문제점이 뭐였냐면 제가 배운건 아주 기초적인 html css javascript db(mysql) 정도인데.. push는 딱 봐도 모바일 프로그래밍을 배워야한다는 것이었습니다.
안드로이드라면 자바나 코틀린을 요구했고 ios는 objective-c 혹은 swift.... 전 어떻게든 웹 밖을 벗어나고 싶지 않았습니다.
내가 배운걸로 어떻게 할 수 있는 방법이 없을까하고 사방팔방 검색을 해보았습니다. 아마 이글을 작성하고 있는 지금도 그때와 큰 차이가 없을것이라 사료됩니다만.. 흔히들 제시하는 방법은 대략 이러했습니다.
"react라는 front-end 기술을 배운다음에 react-native를 배우면 안드로이드와 ios를 하이브리드로 개발할 수 있다."
front-end에서 react와 vue라는 이름은 공부하면서 접해본 용어였습니다. 그런데 저는 더이상 새로운것을 배울 힘이 없었습니다. 그냥 빨리 무작정 만들어보고 싶었습니다.
그래서 자체적으로 머리를 짜내서 카카오톡과 텔레그램을 떠올렸습니다.
사실 한국인중에 카톡을 안쓰는 사람은 거의 없고.. 카톡으로 push를 보내면 싫어할 사람은 딱히 없을 것 같았습니다.
텔레그램은 개발자가 bot이란 것을 만들어서 활용하면 이것저것 재밌는 것들을 만들 수 있다는 사실을 알고 있었기때문에 텔레그램을 후보에 올렸습니다.
또 여차저차 검색을 통해 카톡에 대해 알아본 바, push서비스를 카톡에서 대행해주는게 있었고... 이건 유료였습니다. 그리고 자체적으로 만들어서 카톡을 통해 push를 하려면 어쨌든 안드로이드 환경에서 개발 셋팅을 해야했습니다. 따라서 패스.
결국 남은게 텔레그램뿐이라.. 텔레그램 공식사이트를 통해 공부하여 직접 봇을 만들어 임의의 메세지를 보내는데까지 성공했었습니다. 이틀정도 걸렸던 것 같아요. 영어의 압박이 있긴한데 https://core.telegram.org/bots 여기를 통해서 접하고 여러 블로그들과 앞선 선배님들의 내용을 참고하였죠.
그리고 이걸 활용하면 "원하는 것을 만들 수 있겠다"라는 생각까지 도달했으나 다시금 머릿속에 물음표를 떠올려야 했습니다.
0)클량이니까 텔레그램을 알지...사실 텔레그램을 모르는 사람이 더 많다.
1)나의 서비스를 이용하려면 텔레그램을 깔아야한다. 사람들이 이걸 설치할까? 친구들도 안할 것 같다.
2)bot은 그냥 push를 해주는 것이 아니다. 알림을 받고 싶으면 사용자가 해당 채팅방으로 들어가서 초기 키워드를 입력함으로써 셋팅을 해야한다 -> 사용자 친화적이지 않다.
즉, 텔레그램을 알아야하고 -> 텔레그램을 설치하고 -> 봇을 검색해서 셋팅까지 해야 이용할 수 있는 서비스를 누가 쓰겠는가? -> 나도, 친구들도 안쓰겠다라는 결론에 도달했습니다.
여기까지 도달하니까 뭔가 삽질은 하긴했는데.. 속이 시원하지도 않고 이것저것 다양한 도구들이 머릿속에 가득하여 정리가 잘 되지 않았습니다. 그래서 내가 어떤 도구로 접근할 것인지에 관해 머릿속을 정리할겸 그때 당시 표로 만들었던것을 첨부합니다.
표를보시면 나와있는데.. 앞에서 일부러 한번도 언급하지 않았습니다만 결국 저는 PWA라는 것을 공부하기 시작합니다. (PWA위키 : https://ko.wikipedia.org/wiki/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%A0%88%EC%8B%9C%EB%B8%8C_%EC%9B%B9_%EC%95%A0%ED%94%8C%EB%A6%AC%EC%BC%80%EC%9D%B4%EC%85%98)
간단하게 설명드리면 PWA는 프로그레시브 웹 애플리케이션의 약자로 기본적인 웹의 표준을 준수하는 브라우저라면 어떠한 플랫폼에서도 작동하도록 만들어졌습니다.(크롬 파이어폭스 기타 등등마다 어떤건 되고 어떤건 안되는 것 없이 통일하겠다는건데... 나중에 구현하고 안 사실이지만 실상은 좀 그렇지 않습니다)
사용자 입장에서 바로 체감할 수 있는 특징이라고 한다면, 모바일같은 경우 어플을 설치하면 바탕화면에 바로가기가 설치가 되는데 PWA도 웹을 통해서 그렇게 1)바탕화면에 바로가기가 형성이 가능합니다.
또 가끔 PWA가 적용된 사이트들을 만나볼 수 있는데(주로 외국사이트에서 더 자주 보입니다) 들어가면 구독하시겠습니까? 하면서 팝업창을 띄워주는 사이트를 종종 만나 볼 수 있습니다. 그것도 PWA가 적용된 하나의 사례입니다. 2)구독을 누루면 그 사이트에서 새로운 정보나 알림을 푸쉬로 쏴주려고 만든 기능이죠.
뿐만아니라 인터넷이 연결되어 있지 않은 3)오프라인 상에서도 해당 사이트를 접속할 수 있게 합니다. 사실 이건 그냥 들으면 너무 황당한 이야기이긴 한데 해당 사이트를 이전에 한번 접속한 적이 있어야합니다. 결국 캐싱을 하는 것 같은데, 저도 데모를 돌려보니까 정말로 오프라인 상태에서도 접속이 가능해지더군요.
위 1)2)3) 기능 모두 '서비스워커' 라는 키워드로 검색을 하시면 상세한 내용을 찾아 보실 수 있습니다.(서비스워커 : https://developers.google.com/web/fundamentals/primers/service-workers?hl=ko)
(PWA 이해를 돕기 위한 글 : https://webactually.com/2017/09/%EC%9B%B9-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8%EB%8A%94-pwa%EC%9D%B4%EC%96%B4%EC%95%BC-%ED%95%9C%EB%8B%A41/)
정리하면 결국 저는 PWA의 '서비스워커'로 만들 수 있는 여러가지 기능 중 하나인 push를 학습하여 기능을 만들어야했습니다.
사실 PWA의 서비스워커를 공부하지 않고 바로 구현하고 싶어서 위에 언급한 것들을 빙빙돌아 찾아보며 공부했던 것인데요... 이유는 react와 마찬가지로 무언가를 더 공부할 맘이 그때 당시에 없었고 이제 막 기어다니기 시작하는 웹초보가 감당하기에 PWA는 높은 난이도라고 생각했기 때문입니다.
지금은 모르는것이 나와도 막 찾아보면서 구현할 용기(?)를 장착했지만 저때당시에는 구글보다 생활코딩영상에 의존이 심할때라 코드를 구글링하기보다는 그냥 생활코딩 영상을 다시 복습해서 적용할 때였거든요. 누군가 가르쳐주지 않고 내가 독학한다는 것에 대한 부담감이 클 때였습니다.
그럼에도 불구하고 제가 서비스워커를 정면돌파하기로 마음먹었던 이유는
1)javascript만 할 줄 알면 되었기 때문에 언어적 부담감이 없었고 (nodejs를 선택한 이유도 그런연유로 선택했었습니다)
2)다른 영역으로(ex 모바일 프로그래밍) 벗어나는 것이 아닌 웹에 국한된 영역이었으므로 중구난방으로 이것 저것 기술스택을 쌓는게 아니라 웹기술 스택을 쌓는다는 느낌이 좋았으며
3)PWA설명을 자꾸 읽다보니 앞으로 웹의 발전가능성이 크다고 생각이 들어서 미리 시간을 투자하는것이 손해가 아닐것이라고 판단했기 때문입니다.
실제로 이 글을 작성하고있는 현시점에서 보면, 요즘 주요 뉴스중 하나가 플랫폼제공자들이 돈을 걷어가려는 움직임을 보인다는 것 아닙니까? 그렇다면 대안으로 웹을 선택하는 방향으로 미래가 흘러 갈 수도 있지 않을까 생각해봅니다. 설마 브라우저를 크롬썼다고 구글에서 돈을 걷어가진 않기를...바라봅니다 -_-;;(이미 충분히 정보는 빼가고있잖아..)
그리하여 저는 서비스워커 공부를 시작하게 되었고 이후 push기능을 구현하는데 세달정도를 소요하게 됩니다. 실제 push기능을 구현하면서 참고한 자료들이나 어려웠던 점도 추후에 공유하도록 하겠습니다. 공부하고 구현했던 기간이 길었던 만큼 글로 잘 설명이 될지는 모르겠으나 잘 전달될 수 있도록 노력하겠습니다.
읽어주셔서 감사합니다.
어디선가 홀로 독학하며 고군분투하고 있을 그대들을 응원합니다.
------------
https://core.telegram.org/bots 텔레그램 api
https://ko.wikipedia.org/wiki/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%A0%88%EC%8B%9C%EB%B8%8C_%EC%9B%B9_%EC%95%A0%ED%94%8C%EB%A6%AC%EC%BC%80%EC%9D%B4%EC%85%98 PWA위키
https://developers.google.com/web/fundamentals/primers/service-workers?hl=ko 서비스워커
https://webactually.com/2017/09/%EC%9B%B9-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8%EB%8A%94-pwa%EC%9D%B4%EC%96%B4%EC%95%BC-%ED%95%9C%EB%8B%A41/ PWA 이해를 돕기 위한 글
나중에 리액트 배우시면 CRA 로 초기 셋팅/어느 정도의 환경설정까지 커버되서 작은 프로젝트들 시작하기 매우 좋습니다 (리액트의 러닝커브는 별개지만요 ㅠㅠ)
응원합니다~!
node.js + Google FCM(Firebase Cloud Message) 조합도 괜찮았을것 같네요
화이팅입니다~
예전에 봤을 때 애플은 PWA를 천천히 받아들인다고 하더라구요.
Gatsby js로 정적사이트 만들때 쉽게 만들 수 있어서 해봤는데, 오프라인에서 되는건 정말 신기하더라구요 ㅎㅎ
사파리에서 되면 최고일텐데요.
이 부분은 저에게 다소 히스토리가 있는데 제가 이거 구현한다고 했을때 친구들에게 갖은 협박을 당했습니다. 이유는 본인 여친들이 이 프로그램을 썼을 시 자신들의 게임시간 노출이 불가피했기 때문이지요. 오빠 잘게~ 하고 롤 했는데 여친한테 알림이 가면 파국이잖아요 ㅎㅎ
그래서 저도 받아쳤죠. 자꾸 여친한테 전화온다고 랭크돌리는 와중에 잠수타면 나도 이걸 여친들한테 뿌릴수밖에 없다~~ 골드가야하는데 겜할때는 여친 전화좀 무시해라~~
뭐 그러다가 나중에 구현끝나고 뒤늕게 ios에서는 안된다는걸 확인하고는 "니네 불쌍해서 여친들이 못쓰게 아이폰에서는 안되게 개발했어~" 라고 선심쓰듯이 했습니다 크
아... 그게 핵심이군요 ㅎㅎ
안드로이드 경우 리치푸시 (html로 직접 푸시 레이어를 디자인) 제공 하긴 합니다만,
자체 푸시 서버를 구축해야합니다.
gcm사용하시면 , ios, android 둘다 지원하니깐 gcm쓰면 될텐데요..