안드로이드, IOS 지식 없이 SENS로 알림(PUSH) 서비스 개발하기

최근에 스마트폰을 통한 알림 서비스를 개발하고 싶어서 리서치를 진행하던 도중에 네이버클라우드 플랫폼에서 제공하는 SENS(Simple & Easy Notification Service)라는 서비스를 발견하게 되었습니다.

 

SENS는 웹, ios, 안드로이드에 다양한 유형의 알림 기능을 쉽고 빠르게 적용할 수 있는 서비스입니다. 여기서 다양한 유형의 알림이란 대표적으로 SMS, MMS 등의 문자 메시지 서비스와 스마트폰 PUSH 알림 서비스, 카카오톡 알림톡 등이 있습니다.

 

SENS의 사용방법에 대해서는 네이버클라우드 공식블로그에 안드로이드를 활용한 PUSH 앱 구현 가이드 글이 있어서 이 글을 참고하시면 손 쉽게 구현하실 수 있습니다. 하지만 저는 안드로이드, IOS 등 앱 기반 대신 웹 기술로도 알림(PUSH) 서비스를 구현할 수 있도록 구현해보고 싶어서 도전해보았고 이 또한 어렵지 않게 구현 가능하다는 것을 알아냈습니다. 따라서 이번 글에서는 PWA라는 웹 기술과 네이버클라우드의 SENS를 이용해 손 쉽게 알람 서비스를 구현하는 방법에 대해 설명을 드리도록 하겠습니다.

 

---

 

🚀 웹 앱 알림(PUSH) 서비스 동작과정 이해하기

PUSH 기능을 사용하기 위해서는 네이버클라우드의 SENS 서비스뿐만 아니라 각 종 다양한 서버와 기능에 대해서도 알고 있어야 합니다. 네이버클라우드에서 제공하는 SENS 서비스로 웹 앱에 알림을 보내는 프로세스 및 동작과정은 다음과 같습니다.

 

Ncloud SENS의 PUSH 서비스 구성도

 

위의 서비스 구성도에서도 볼 수 있듯이 개발자는 앱 푸시를 구현하기 위해서는 다음과 같이 3가지를 준비해야 합니다.

 

• Firebase 앱 등록 (PUSH 기능을 사용할 수 있도록)
• 네이버클라우드 SENS에 Firebase에서 받은 인증서를 등록(PUSH API를 사용할 수 있도록)
• 사용자 앱 구현 (PUSH를 전달 받을 수 있는 앱 구현)

 

PUSH 기능을 구현하기 위해서는 이러한 설계방식과 동작방식을 반드시 이해하고 넘어가야 각 과정에 대한 가이드를 쉽고 빠르게 이해하실 수 있으니 PUSH 기능을 처음 접해본다면 꼭 한 번씩 확인해 보고 넘어가시길 추천드립니다. 그러면 바로 Firebase에 앱을 등록해서 빠르게 인증서를 받는 방법부터 확인해 보도록 하겠습니다😊

 

---

 

🔥 Firebase에 앱 등록하기

 Firebase는 구글이 소유하고 있는 모바일 애플리케이션 개발 플랫폼으로써 별도의 백엔드 서버를 구축할 필요 없이 Firebase로 만든 프로젝트를 통해 인증, 데이터베이스, 알림(PUSH) 메시지 등을 사용할 수 있게 됩니다.

 

Firebase를 사용하는 이유와 장점으로는 자바스크립트로 클라이언트 쪽 웹 앱만 만들어놓으면 Firebase 모듈을  호출하여 빠르고 손쉽게 구현이 가능합니다. 먼저 Firebase 홈페이지에 접속하셔서 [프로젝트 만들기] 버튼을 클릭합니다.

 

Firebase 프로젝트 만들기

 

그리고 다음과 같이 프로젝트 만들기 3단계를 진행해주시면 됩니다. 프로젝트 이름을 등록하고 약관 등을 체크해주시고 나면 프로젝트를 생성할 수 있습니다.

 

Firebase 프로젝트 만들기 3단계 진행

 

여기까지 완료하시면 1~2분 정도 대기 후 프로젝트가 생성되신것을 확인하실 수 있게 됩니다. 프로젝트를 생성하면 다음과 같은 화면이 나타나는데 여기서 [웹 아이콘]을 클릭해서 웹 앱을 Firebase에 등록해보도록 하겠습니다.

 

Firebase 웹 앱 등록하기

 

웹 앱 아이콘을 클릭하고 나면 다음과 같이 앱을 설정하는 단계가 나타나는데 여기서도 마찬가지로 순차적으로 진행해 주시면 됩니다. 앱 닉네임을 지정해 주시고 호스팅에 체크한 다음 앱 등록 버튼을 클릭해 줍니다.

 

Firebase 앱 정보 입력하기

 

앱 등록 버튼을 클릭하면 생성되는데 조금 시간이 걸리고 나서 다음과 같은 화면이 나타납니다. 이때부터는 계속해서 다음 버튼을 클릭하시면 됩니다.

 

Firebase 앱 등록하기 

 

프로젝트를 생성하고 나면 콘솔로 이동되는데 콘솔에서 왼쪽 메뉴바의 [톱니마퀴 아이콘] > [프로젝트 설정]을 클릭하여 설정 페이지로 이동합니다.

 

Firebase 프로젝트 설정 이동하기

 

설정 페이지로 접속하시면 바로 [클라우드 메시징] 탭으로 이동합니다. 그러면 다음과 같은 화면을 확인하실 수 있는데 여기서 표시되는 발신자 ID가 바로 네이버클라우드 SENS 인증서 등록에 필요한 Sender Id입니다.

 

하지만 저희가 필요한 건 Sender Id 말고도 네이버클라우드의 SENS 서비스는 PUSH 인증서에 등록할 정보로 Server Key 또한 필요로 하고 있는데요. 따라서 저희는 Firebase Cloud Messaging API(V1) 대신 아래의 사용 중지된 구 버전인 Cloud Messaging API(기존)를 사용해야 합니다.

 

Firebase 프로젝트 설정하기 (Ncloud SENS의 PUSH 기능을 사용하려면 기존(레거시) API를 사용해야한다)

 

사용 중지된 기존 API를 사용하려면 오른쪽의 [더 보기 아이콘]을 클릭하여 나타나는 [Google Cloud Console에서 API 관리] 링크를 클릭합니다.

 

Firebase 기존 Cloud Messaging API 사용하기

 

그러면 다음과 같이 Cloud Messaging 제품 페이지로 이동되는데 이곳에서 [사용] 버튼을 클릭합니다. 그러면 30초가량의 로딩이 진행된 뒤에 해당 제품이 사용 중으로 변경이 되는데 그 뒤에 다시 Firebase 프로젝트 설정 화면으로 돌아오면 다음과 같이 서버 키가 생성되어 있는 것을 확인하실 수 있습니다.

 

Ncloud SENS에 등록할 Server key와 Sender Id가 생성됨.

 

다음은 이 서버 키와 발신자 ID를 복사해서 네이버클라우드의 SENS 서비스에 인증서를 등록해 보도록 하겠습니다.

 

---

 

🌱 SENS 프로젝트 생성하기

SENS 서비스를 이용하려면 다음과 같이 네이버클라우드 플랫폼 콘솔에 접속하여 왼쪽의 내비게이션바에서 [Services] 메뉴를 클릭하여 [Simple & Easy Notification Service]를 선택합니다.

 

Ncloud의 SENS(Simple & Easy Notification Service) 서비스

 

Simple & Easy Notification Service를 찾아서 들어오셨다면 화면 상단에 [+프로젝트 생성하기] 버튼이 있는 것을 확인하실 수 있습니다. 해당 버튼을 클릭하여 프로젝트 생성에 필요한 설정들을 입력합니다. 저희는 PUSH 기능을 사용할 것이기 때문에 서비스 Type을 PUSH로 체크해 주시고 프로젝트 이름을 적어주신 다음 [생성하기] 버튼을 클릭해 주시기 바랍니다.

 

SENS 프로젝트 생성하기

 

SENS(Simple & Easy Notification Service)의 장점 중 하나는 프로젝트 목록 위로 어떤 순서로 진행해야 되는지에 대한 가이드가 친절히 나와있어서 그대로 따라 하시면 됩니다. 가이드를 읽어보시면 3번까지 진행되었음을 확인하실 수 있습니다. 그대로 4번 순서를 진행하기 위해 [PUSH] 버튼을 클릭합니다.

 

SENS 프로젝트 페이지(가이드가 상단에 표시되어있어서 편리하다)

 

Push 메뉴로 이동하고 나서도 마찬가지로 상단에 진행 순서에 대한 가이드가 표시되어 있어서 편리합니다. 마찬가지로 순서대로 진행해 주시면 됩니다. 여기서는 인증서를 등록하기 위해 [Certificate] 메뉴로 이동하라고 가이드되어있으므로 왼쪽 내비게이션바를 통해 [Certificate] 메뉴로 이동하도록 하겠습니다.

 

SENS의 Push 서비스 중 Message 페이지

 

Certificate 메뉴에서는 PUSH를 사용하기 위해 네이버클라우드 자체 서버에 인증서를 등록합니다. 저희는 아까 Firebase에서 웹 앱으로 등록하였기 때문에 FCM(GCM)을 선택해 줍니다. 여기서 FCM과 GCM, APNS의 차이점은 다음과 같습니다.

 

• FCM(Firebase Cloud Messaging) : Android & IOS & Mobile Web 등의 다양한 플랫폼 지원(GCM의 새로운 버전)
• GCM(Google Cloud Messaging) : Android & IOS를 지원
• APNS(Apple Push Notification service) : 애플이 개발한 플랫폼 알림 서비스로 iOS 기기에 Push 메시지 발송

 

추가적으로 설명을 덧붙이자면 구글에서 GCM 서비스를 2019년 4월 11일부로 종료하겠다고 공식 발표하였으니 별도의 고민 없이 FCM을 선택해서 사용하시면 됩니다.

 

FCM을 선택해서 Firebase에서 발급받은 발신자 ID와 서버키로 인증서를 등록하자.

 

FCM을 이용하려면 Sender Id와 Server Key를 등록하여야 하는데 이 정보들은 이전에 Firebase에서 발급받은 발신자 ID와 서버키를 넣어주시면 됩니다. 복사할 때 공백이나 개행을 주의해 주시고 복사를 마쳤다면 [저장] 버튼을 클릭해 주시면 네이버클라우드 플랫폼에서의 설정은 전부 마치게 됩니다.

 

---

 

🔔  PUSH를 알림 받기 위한 간단한 Web App 프로토타입 만들기

저희는 안드로이드나 IOS 같은 네이티브 앱을 개발하는 것이 아니라 웹 앱을 개발하는 것이기 때문에 안드로이드 스튜디오나 엑스코드 같은 개발도구를 사용하지 않습니다. 대신 PWA라는 개념을 알아야 하는데요. PWA란 Progressive Web App의 약자로 모바일 기기에서 네이티브 앱(Native App)과 같은 사용자 경험을 제공하는 웹 앱을 의미합니다. PWA를 이용하면 푸시 알림, 자이로센서 등의 기능을 사용할 수가 있게 됩니다.

 

PWA 구현방법에는 다양한 방법이 있는데요. 저는 대부분의 사람들이 자주 사용하는 React로 PWA를 구축하는 방법에 대해 가이드해 드리도록 하겠습니다. 터미널에서 다음과 같이 명령어를 입력해서 프로젝트를 설치합니다. 저는 today-i-learned-alarm 라는 이름으로 프로젝트를 생성해보겠습니다.

 

npx create-react-app today-i-learned-alarm --template cra-template-pwa

 

이 명령어는 자동으로 PWA 세팅을 도와주는 React 전용 보일러 플레이트 설치 명령어 입니다. 명령어를 실행하고 나면 프로젝트를 다운로드하는데 약 5분 정도의 시간이 소요됩니다. 저희는 이 보일러 플레이트를 사용해서 간단하고 빠르게 웹 앱을 구축해 보도록 하겠습니다.

 

먼저 프로젝트를 전부 다운로드하시면 다음과 같은 프로젝트를 확인하실 수 있습니다. 이때 src 폴더 밑에 index.js 파일에서 추후에 백그라운드 환경에서도 서비스가 돌아갈 수 있도록 서비스 워커 등록을 해주기 위해 serviceWorkerRegistration.unregister()를 serviceWorkerRegistration.register()로 변경합니다.

 

React 보일러 플레이트로 만든 PWA 앱 설정하기

 

그 이후에는 Firebase 모듈을 사용하기 위해 Firebase 모듈을 설치합니다. 터미널에서 프로젝트가 생성된 경로로 이동하여 다음과 같이 명령어로 설치를 진행할 수 있습니다.

 

$ npx install firebase

 

설치가 완료되면 firebase 모듈을 사용할 수 있도록 firebase에서 설정정보들을 가져와 소스코드에 추가해 주도록 하겠습니다. src 폴더 아래에 setupAlarm.js라는 파일을 만들어 준 뒤 다음과 같이 코드를 작성합니다.

 

import { getMessaging, getToken } from "firebase/messaging";
import { initializeApp } from "firebase/app";
import { registerDeviceToken } from "./api/ncloud-api";

const firebaseConfig = {
    apiKey: process.env.REACT_APP_API_KEY,
    authDomain: "til-alarm.firebaseapp.com",
    projectId: "til-alarm",
    storageBucket: "til-alarm.appspot.com",
    messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID,
    appId: process.env.REACT_APP_APP_ID,
    measurementId: process.env.REACT_APP_MEASUREMENT_ID,
};
  
const app = initializeApp(firebaseConfig);
const messaging = getMessaging(app);

export default async function setupAlarm() {
    const permission = await Notification.requestPermission();
    if (permission === "denied") {
      console.log("알림 권한 허용 안됨");
      return;
    }

    const token = await getToken(messaging, {
      vapidKey: process.env.REACT_APP_VAPID_KEY,
    });
  
    registerDeviceToken(process.env.REACT_APP_USER_ID, token); // 네이버클라우드 SENS API 호출
};

 

위 코드는 Firebase에서 프로젝트 등록할 때 제공된 SDK를 이용해서 만든 코드입니다. (위에서 Firebase 프로젝트 만들기 3단계 진행 이미지 참고) 따라서 Firebase 프로젝트 설정페이지에 접속하여도 SDK 코드를 확인할 수 있는데 참고하시면 좋을 것 같습니다.

 

중요한 것은 firebaseConfig에 들어가는 앱 정보들이 노출되지 않도록 github 같은 공개된 저장소에 업로드할 때 주의하시기 바랍니다. 저는 .env파일을 만들어서 중요한 정보들을 관리할 수 있도록 코드를 작성하였습니다. 이 setupAlarm.js는 원하는곳에서 import하여 setupAlarm()함수를 자유롭게 호출해서 사용해주시면 됩니다. 가급적 루트 경로에서 호출해주는 것이 좋습니다.

 

추가로 토큰을 구할 때 필요한 vapidKey의 경우에는 다음과 같이 Firebase에서 인증키를 받아서 등록하시면 됩니다. Firebase 프로젝트 설정 페이지에서 [Generate key pair] 버튼을 클릭 후 생성되는 키 쌍을 복사해서 사용하시면 됩니다.

 

프로젝트 설정 페이지에서 vapid Key 생성하기

 

firebase 앱 정보를 읽을 수 있는 코드까지 완성했다면 firebase 이벤트 리스너를 등록해서 알람을 받을 수 있게 되는데 다음과 같이 public 폴더 아래에 firebase-messaging-sw.js 파일을 하나 만들고 다음과 같이 코드를 입력합니다. 참고로 이 파일은 반드시 이 네이밍으로 지어주셔야 합니다.

 

self.addEventListener("install", function (e) {
  console.log("fcm sw install..");
  self.skipWaiting();
});
  
self.addEventListener("activate", function (e) {
  console.log("fcm sw activate..");
});
  
self.addEventListener("push", function (e) {
  if (!e.data.json()) return;
  const result = e.data.json();
  const notificationTitle = result.data.content;
  console.log(notificationTitle)
  self.registration.showNotification(notificationTitle); // 알림에 나타날 제목
});

self.addEventListener("notificationclick", function (event) {
  console.log("notification click");
  const url = "/";
  event.notification.close();
  event.waitUntil(clients.openWindow(url));
});

 

위의 코드가 바로 FIrebase에서 전달받은 알림을 확인하고 저희가 사용 중인 디바이스에 알림을 전달하는 역할을 하게 됩니다. 다음은 네이버클라우드 SENS API를 활용해서 디바이스 토큰을 등록하고 PUSH 이벤트를 전달해 보도록 하겠습니다.

 

---

 

🍭 디바이스 토큰 등록 및 PUSH API 사용하기

위에서 만든 setupAlarm.js파일을 다시 한번 보시면 registerDeviceToken(process.env.REACT_APP_USER_ID, token); 로 작성된 코드를 확인하실 수 있는데 이 함수는 제가 네이버클라우드 SENS API 스펙 요구사항에 맞춰서 디바이스 토큰을 등록할 수 있도록 API 호출하는 함수를 직접 구현한 것입니다. SENS API 스펙 요구사항은 아래에서 확인하실 수 있습니다. 

 

디바이스 토큰 등록 API

PUSH API

 

메시지 발송 API

PUSH API

 

만약 네이버클라우드의 API호출이 처음이라면 헤더에 필요한 정보들이 조금 헷갈릴 수도 있는데요. SENS의 PUSH API를 사용하려면 다음과 같은 헤더 정보들이 필요합니다.

 

• x-ncp-apigw-timestamp
• x-ncp-iam-access-key
• x-ncp-apigw-signature-v2

 

x-ncp-apigw-timestamp와 x-ncp-apigw-signature-v2의 경우에는 가이드 문서를 확인해 보시면 Java, Javascript, Python 등 다양한 코드로 구하는 방법에 대한 설명이 있기 때문에 편하신 걸 사용하시면 됩니다. 해당 정보들은 아래 가이드를 통해 쉽게 얻으실 수 있습니다.

 

Ncloud API

 

x-ncp-iam-access-key값은 네이버클라우드의 마이페이지로 이동해서 인증키를 얻으실 수 있습니다.

 

Ncloud 마이페이지에서 API 인증키를 얻을 수 있다.

 

헤더까지 완성하셨다면 이제 SENS API를 사용해서 API를 호출할 수 있게 됩니다. 디바이스 토큰을 등록 후 PUSH API를 이용하여 RequestBody를 다음과 같이 전송해 보시면 알림이 잘 뜨는 것을 확인하실 수 있게 됩니다.

 

{
  "target": {
    "type": "ALL"
  },
  "message": {
    "default": {
      "content": "안녕하세요 외계공룡 입니다."
    }
  }
}

 

오른쪽 하단에 PUSH 알림이 잘 뜬것을 확인할 수 있다.

 

만약 스케줄 발송을 하고 싶으시다면 아래와 같이 스케줄 코드를 추가하여 발송하실 수도 있습니다.

 

{
  "target": {
    "type": "ALL"
  },
  "message": {
        "default": {
            "content": "복습할 내용이 도착하였습니다. 오늘도 파이팅 하세요~!😊"
        }
    },
    "scheduleCode": "working_time"
}

 

이렇게 발송을 하는 경우 PUSH 알람이 바로 오지 않고 스케줄 등록이 되어 네이버클라우드 콘솔에서 설정한 시간에 맞춰 발송이 됩니다. 네이버클라우드 콘솔에서 스케줄 등록하는 방법은 다음과 같습니다.

 

SENS Push 스케줄 등록하기

 

---

 

🌠 마무리하며

SENS 서비스 구조가 간단하면서도 복잡하기 때문에 주의할 점은 어떤 부분에서 어떤 오류가 나올지 모른다는 점입니다. 특히 저는 API를 호출할 때 처음에는 익숙지 않아서 많이 헤맸었는데 만약 400, 401 에러가 발생한다면 크롬에 알람이 허용되었는지도 체크해 보고 PUSH API 호출 시 RequestBody에 사용한 PUSH 타입도 한번 체크해 보시면 좋을 것 같습니다.

 

만약 200 에러 코드로 Expired timestamp 또는 Invalid authentication information 에러가 발생한다면 timestamp값이 최신인지 그리고 시그니처를 만들 때 사용되는 API URL과 GET, POST 등의 method 등이 정확하게 입력됐는지 확인해 보시면 좋을 것 같습니다. 저는 특히 시그니처를 생성할 때 다른 API 사용할 때 사용했던 코드를 재활용해서 사용했더니 삽질을 많이 했었습니다.😂 그리고 혹시나 웹 푸시 인증서를 재발급받았다면 디바이스 토큰 역시 재등록 해주어야 합니다.

 

지금까지 안드로이드, IOS 지식 없이 SENS로 알림(PUSH) 서비스를 받을 수 있는 간단한 프로토타입을 구현해 보았는데요. 조금 복잡할 수도 있지만 위에서부터 차근차근 진행해보시면 생각보다 어렵지 않게 구현 가능하다는 것을 확인하실 수 있습니다. 위에서 구현한 소스코드는 아래 링크를 통해 남겨놓도록 하겠습니다.😊

 

GitHub - chucoding/today-i-learned-alarm