푸시기능과 GCM / APNS

작성자: -
안녕하세요 남산돈가스입니다.

이번 포스팅은 iFriendsPet v.1.11에 업데이트 될 기능인 푸시기능에 대해서 정리하는 시간을 가져보려고 합니다.

이 주제는 총 3개의 포스팅으로 나누어 다음과 같은 순서로 게시될 예정입니다.
#1 푸시기능과 GCM / APNS
#2 Node.js를 이용하여 iOS 푸시기능 구현
#3 Node.js를 이용하여 Android 푸시기능 구현

그 첫번 째 포스팅으로 푸시기능의 개념과 GCM / APNS에 대해서 알아보도록 하겠습니다.

일단 저도 푸시기능을 처음 개발해보는 사람으로서 푸시기술이라는게 정확히 어떤 의미인지부터 궁금했습니다.
위키피디아에서 검색한 푸시란, 인터넷 상에서 어떤 전송 요청이 중앙 서버에서 시작되는 정보 전달 방식이라고 설명하는데요. 덧붙여, 이 푸시는 전송 요청이 클라이언트에서 시작되는 풀 기법과 대비되는 것이라고도 표현합니다.

위의 설명을 살펴보면 풀 방식과 푸시방식이 존재하는데, 이 두 방식은 서로 상반 된 기능을 하고 있다고 짐작해볼 수 있습니다.
간단하게 정리해보자면, 푸시 기법은 사용자(클라이언트)가 어떠한 이벤트를 실행 함에 따라 서버 사이드에서 그 이벤트에 대한 정보 등을 자동으로 제공해주는 서비스라고 할 수 있고, 풀 기법은 이와 반대로 사용자가 직접 필요한 정보를 서버쪽에 요청하여 해당하는 정보 등을 제공받는 형식이라고 말할 수 있습니다.

모바일 서비스가 주를 이루기 전의 푸시서비스는 흔히 뉴스, 메일링 서비스 등을 생각해 볼 수 있습니다. 웹 상에서 뉴스를 구독하거나 메일 수신에 동의하는 절차를 통해 자동으로 서버에서 클라이언트에게 주기적인 정보를 제공해왔었습니다.
이런 푸시 서비스는 스마트폰의 급격한 성장을 통해 모바일 서비스들의 기본적이고 중요한 기능으로 자리 잡았습니다.
이러한 이유들을 통해 우리 iFriendsPet 모바일 서비스에서도 사용자와의 지속적인 커뮤니케이션과 사용성 증가를 위해 푸시 기능을 도입하고자 생각했습니다.
그렇다면 지금부터 푸시기능을 어떻게 개발할 것인지 알아보도록 합시다.

우선, iFriendsPet의 푸시서비스 기능은 아래와 같이 동작 될 것입니다.

먼저, 사용자들은 푸시 알림을 수신할 것인지 여부를 체크합니다. 푸시알림에 동의한 사용자들은 iFriendsPet 서비스 내에서 발생한 다양한 이벤트에 대한 정보를 푸시로 제공받을 수 있게 됩니다. 여기서 말하는 이벤트는 앱에서 자신이 게시한 글에 댓글이나 감정표현이 등록되었을 때, 혹은 자신이 즐겨찾기 한 사용자가 새로운 콘텐츠를 등록하였을 때에 해당합니다.
사용자들이 이러한 이벤트를 발생시켰을 때, 서버에서 해당하는 이벤트들을 감지하여 iOS같은 경우는 APNS, Google같은 경우는 GCM에 푸시 알림을 요청하게 되고, 이 각각의 푸시서버들이 푸시 알림을 받을 클라이언트에 푸시알림을 전송하게 됩니다.
KakaoTalk_20170904_011931804


위에서 iOS는 APNS , Google은 GCM 를 이용한다고 했는데요. 이 GCM과 APNS가 무엇인지에 대해서 알아보겠습니다.

GCM이란?
Google Cloud Messaging의 약자로 개발자에게 서버에서 안드로이드 디바이스의 Application으로 데이터를 전송하는 것을 도와주는 서비스라고 할 수 있습니다. 기존에는 C2DM이었으나 서비스를 종료하고 GCM으로 바뀌었습니다.

GCM 구조

  • app은 message를 받기위해 GCM으로부터 device를 register함. 이 register를 3rd-party에 등록.
  • 3rd-party server는 app에 message를 보내기 위해 등록된 rgister와 함께 GCM으로 message전송.
  • GCM connection server는 register로 확인된 단말에 해당 message를 전송.
3
  • 1. 단말에서 GCM으로 register 요청
  • 2. GCM에서 register 성공 후 registration id 전송
  • 3. third-party server로 registration id 전송
  • a. Registration id 값과 message를 GCM으로 전송
  • b. 해당 Registration에 맞는 단말에 message 전송
출처: http://humble.tistory.com/30 [개발스토리]
GCM의 구조에 대해서 설명하기 위해 자료를 찾다가 정리가 잘 되어있는 내용이 있어 참고하였습니다.

APNS란?
Apple Push Notification Service의 약자로 애플의 푸시 알림 서비스를 뜻하고, GCM과 비슷한 맥락으로 개발자가 제작한 응용프로그램이 새 데이터가 도착하면 데이터를 모니터링하면서 영구적 보안 채널을 통해 APNS와 공급자를 연결하여 대상 장치에 알림을 보내는 서비스라고 할 수 있습니다.

APNS를 이용하기 위하여 반드시 필요한 준비물들이 있는데요. APNS 인증서와 key파일 등이 있습니다. APNS 셋팅을 위한 내용은 세번째 시간에 구체적으로 다루기로합시다.

APNS 구조
image
GCM의 동작 방식과 비슷하게 프로바이더에서 APNS로 알림에 대한 요청을 하게 되면 APNS의 등록 된 토큰을 통해 해당 애플기기에 푸시 알림메세지를 전달하는 방식으로 동작하게 됩니다.


여기까지 푸시 서비스의 개념에 대해서 알아보았고, 모바일 시장의 주를 이루는 iOS와 Android에서 제공하는 푸시 서비스인 GCM과 APNS의 동작방식에 대해서도 알아보았습니다. 다음 시간부터는 이 GCM와 APNS를 활용해 Node.js에서 푸시 서버를 구축해보는 시간을 갖도록 하겠습니다.

댓글

  1. Unknown2019년 10월 3일 오후 8:30

    푸쉬서버 구축해보려고 이곳저곳에서 푸쉬서버에 개념을 찾다가
    선생님 블로그에서 글보고 개념이 많이 잡혔어요.
    푸쉬서버에 대한 개념이 한눈에 들어오네요.
    감사합니다.^^

    답글삭제

댓글 쓰기

주간 인기글

[정보] 인스타그램은 당신의 소리를 '듣고' 있을 수도 있습니다

작성자: -
이미지
[그림출처]  https://medium.com/@damln/instagram-is-listening-to-you-97e8f2c53023 인스타그램은 당신의 소리를 '듣고' 있을 수도 있습니다. 문자 그대로. SNS는 사용자들이 자발적으로 공유하는 글, 사진 등의 정보를 모아서 그 데이터를 기반으로 어떤 사용자가 무엇에 관심이 있는지 파악하여 사용자들에게 가장 관심 있을 만한 광고를 보여주곤 합니다. 몇 년 전부터 페이스북은 앱의 마이크 접근 권한 을 사용하여 핸드폰 주위의 모든 대화 등의 소리를 수집.파악하여 폰 사용자가 무엇에 관심 있는지 데이터를 얻고, 타겟 맞춤 광고에 이 정보를 활용한다고 하는 의혹을 받아왔습니다. 페이스북에 인수된 인스타그램도 마찬가지로요. 저도 가끔 의아했습니다. 어떻게 내가 검색창에서 검색한 적도 없고, 사진도 찍은 적 없고, 글로 쓴 적도 없는 어떤 것에 대해서 인스타그램이 나에게, 그것에 관해 얘기한 지 10분 만에 정확히 그와 관련된 상품을 광고로 보여줄 수가 있지? 그런데 동일한 의문을 품은 유저들이 여러 명 있었던 것 같습니다. (관련글  https://www.imore.com/how-stop-facebook-accessing-your-microphone https://medium.com/@damln/instagram-is-listening-to-you-97e8f2c53023  ) 물론  페이스북이나 인스타그램은 공식적으로 '절대로 그렇지 않다' 고 발표하지만, 그렇다고 하더라도 혹시 있을 수 있는 사생활 침해에서 앱의 마이크 접근 권한을 차단하는 것은 나쁘지 않은 것 같습니다. 만약을 위해 사생활을 보호하려면, 페이스북이나 인스타그램 앱 설정 부분에서 페이스북 앱, 인스타그램 앱의 마이크 접근 권한을 비활성화 하시면 됩니다. 1. 아이폰 또는 설정에서 아래로 스크롤해서, 인스타그램 앱을 선택한 다음, 해당 앱의 마이크 권한 비활성화를 해도...
자세한 내용 보기

남산 케이블카 이야기

작성자: -
이미지
남산하면 떠오르는 것이 무엇이 있을까요. N서울타워(구 남산타워), 남산돈까스, 케이블카, 도서관, 팔각정등 많은 것이 떠오를 것 입니다. 그래도 남산 관광이라고 한다면 N서울타워와 케이블카를 뽑을수 있지 않나 생각 합니다. 남산은  버스, 도보, 자전거업힐(?) 처럼 꼭 케이블카가 아니더라도 올라갈수 있는 방법은 많습니다. 그래도 한번쯤은 케이블카를 타고 올라가 보는 것이 관광객에게는 로망이 아닐까 싶습니다. 남산케이블카의 시작                                                        <개통 당시 남산 케이블카 모습 / 출처 : 국가기록원>   준공 : 1962년 5월 12일 운행 시작 : 1962년 5월 14일 길이 :  605m 낙차(저점과 고점의 높이차이) : 138m 편도 운행시간 : 초기 약4분 -> 현재 약3분 운행 요금(당시 어른 버스요금 5원) : 왕복400환(어른 40원) 남산 케이블카는 국내 최초의 여객용 케이블카로 '은하수' 와 '무지개' 두대로 운영을 시작 하였 습니다. 처음에는 케이블카란 이름이 아닌 삭도차란 이름으로 불려 다고 합니다. 삭도란 공중에 로프를 가설하고 여기에 운반기구(차량)를 걸어 동력 또는 운반 기구의 자체 무게를 이용하여 운전하는 것입니다. 최초운행정원은 20명(현재 48명) ...
자세한 내용 보기

[Angular] 모델, 값이 바뀌었는데 화면 template 이 업데이트 되지 않을 때 조치 팁

작성자: -
안녕하세요. 명동섞어찌개입니다. Angular 로 화면을 만들다 보면 종종 서버에서 값을 읽어와서 비동기로 화면이 업데이트 되는 상황에서, 화면에 바뀐 값이 반영되지 않는 경우가 생깁니다. 분명 ts (typescript) 의 값은 바뀌었고, 서버에도 문제가 없는데 html template 화면만 값이 제대로 표시되지 않는 경우가 있습니다. 이럴 때 사용할 수 있는 간단한 방법을 공유하려고 합니다. 1. ngIf = "flag == true" 를 씁니다. data.html 1 2 3 4 5 < div * ngIf = "data.length > 1" > < span * ngFor = "let item of data; let idx=index" > < span >{{ item }}</ span > </ span > </ div > data.ts 1 2 3 4 5 6 7 8 9 10 11 12 13 14 data = null ; . . . getData () { this . dataService . getDatas (). subscribe ( data => { this . data = data . result ; }, ( { error } ) => { } ) } 비동기로 서버에서 값을 읽어올 때, 값이 들어온 시점에 (data.length > 1) 정확히 데이터를 들고 화면을 그려주기 위해 template 쪽에 ngIf 문을 이용해서 그려줍니다. 저런식으로 화면 일부가 데이터가 계속 바뀜에 따라 지속적으로 업데이트 되어야 하는데, 값은 잘 들어오지만 template 은 새로 그려지지 않을...
자세한 내용 보기

안드로이드에서 당겨서 새로고침(SwipeRefreshLayout) 쉽게 구현하기

작성자: -
앱을 개발 하다보면 필수 기능중에 하나가 보고 있는 리스트나 상세 페이지등을 새로고침 하는 것 입니다. 몇년 전 까지만 하더라도 새로 고침 기능이라고 하면 아이폰 처럼 뷰를 당기면 공간이 벌어지면서 새로고침 하는 방식을 많이 사용 했습니다.(여전히 이 방법을 사용하는 앱은 많습니다.) 해당 새로고침을 기능을 제공 하려면 개발가 하나하나 구현 해야해서 쉽지 않은 기능 중 하나였습니다. 하지만 지금은 android 레이아웃중 SwipeRefreshLayout을 제공하여 레이아웃만 추가한다면 별다른 구현 없이도 위에서 아래로 내려오는 새로고침 기능을 사용 할수 있게 되었습니다. SwipeRefreshLayout을 간단하게 구현하는 샘플 코드를 작성해 보겠습니다. 1단계 : 레이아웃 새로고침이 될 뷰를 SwipeRefreshLayout으로 자식뷰로 만듭니다.       <android.support.v4.widget.SwipeRefreshLayout android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/swipe_refresh"> <WebView android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/webView"></WebView> </android.support.v4.widget.SwipeRefreshLayout> 2단계 : 새로고침 이벤트 해당 뷰 영역을 위에서 아래로 당기면...
자세한 내용 보기

Java8 Stream 가이드

작성자: -
Java8 Stream 가이드 1. 개요 Java 8의 새로운 기능 Stream에 대해 설명합니다. 2. Stream API Java 8의 주요 새로운 기능 중 하나는 여러가지 요소(element) 처리를 위한 매우 강력한 스트림 기능인 java.util.stream 입니다 . 클래스는 Stream 이며, T 타입 기반의 Stream을 다양한 방법으로 생성할 수 있습니다. 2.1. Stream 생성 stream () 및 of () 메소드를 사용하여 콜렉션 또는 배열과 같은 다른 요소 소스에서 스트림을 작성 String [ ] arr = new String [ ] { "a" , "b" , "c" } ; Stream < String > stream = Arrays . stream ( arr ) ; stream = Stream . of ( "a" , "b" , "c" ) ; stream 을 생성하는 쉬운 방법은 컬렉션 인터페이스를 통해 생성할 수 있습니다. Stream < String > stream = list . stream ( ) ; 2.2. 멀티쓰레딩 Streams stream API는 또한 스트림 요소에서 병렬 모드로 작업을 실행 하는 parallelStream() 메서드를 제공하여 멀티 스레딩을 단순화 합니다. 아래 코드 는 스트림의 모든 요소에 대해 doWork () 메소드 를 병렬 로 실행할 수 있도록 합니다 list . parallelStream ( ) . forEach ( element - > doWork ( element ) ) ; 3. Stream 사용법 스트림에서 제공하는 함수는 크게 중간 작업 (return Stream, self-return )과 연산작업 (특정 타입으로 return ) 으로 나뉩니다. long count = list . ...
자세한 내용 보기