Cordova에서 Firebase이용하여 Push Notification 구현

이번 글에서는 iOS Push Notification 환경 구성과 Cordova 앱에서 Firebase plugin을 사용하여 Push 알람 서비스를 구성하는 방법을 다룰 것이다. 여기서 다루는 APN Key 생성과 Firebase의 활용방법들은 Cordova 앱이 아니더라도 앱 개발 시 큰 도움이 되는 내용이 많으니 앱 개발에 관심이 있다면 꼭 한번 읽어보기를 권한다.

1. APN Key 생성

우리는 과거 방식의 Apple Push Notification service SSL 인증서를 쓰지 않고 Key 방식으로 구현할 것이다. Key 방식의 가장 큰 장점은 유효기간이 없기 때문에 매년 인증서를 갱신 하지 않아도 된다.

Apple Developer Program의 Certificates, Identifiers & Profiles 메뉴로 들어간다.

그럼 해당 페이지에서 또 아래와 같은 사이드바 메뉴들이 나올 것이다.

Key를 생성하는 과정은 단순하다. 아래와 같이 Name, Services를 정하고 다음 단계로 넘어간다.

Continue 하면 Confirm 화면으로 넘어간다.

여기서 방심하면 안 된다. 바로 아래 화면에서 p8 파일을 내려 받아야 한다. 여기가 아니면 다시 받을 수가 없어 또 만들어야 하니 바로 받아주자. 그리고 Key ID 또한 따로 메모해 둔다.

이제 키는 생성되었고, 인증키로 Push를 보내기 위해서는 내려받은 p8 파일, Key ID, Team ID가 필요하다. Team ID는 Apple Developer Program Membership에서 확인이 가능하다.

이제 Key 준비는 끝났다. Firebase를 만나볼 차례이다.

2. Firebase console

Firebase는 우리가 모바일과 웹 앱을 개발할 때 코드 한 줄 쓰지 않고도 손쉽게 서버와 DB를 구축해 주는 BaaS(Backend as a Service)이다.

위 그림은 Firebase 기능을 나타낸 그림이다. 보안, 인증, DB 설계, API 설계, 애널리틱스 등 쉽게 만들 수 있고 요즘 모바일 앱에 필수적인 Notifications 외에도 AdMob을 통해 광고로 수익 창출도 할 수 있다.

개인적으로 가장 큰 장점으로 꼽으라면 멋진 아이디어가 생각나서 빠르게 기획으로 옮기고 개발하여 간단한 프로토타입 모바일 앱을 만들고 싶을 때, 이 Firebase를 활용한다면 이른 시간 안에 결과물을 만들어 낼 수 있는 부분이라고 생각한다. 서비스 볼륨이 크지 않은 경우에는 대부분 무료로 기능을 사용할 수 있기 때문에 비용적인 측면에서도 큰 장점이다. 지금 이 글에서 구현하려고 하는 Push 서버도 Firebase를 활용하면 단시간에 서버를 구축하고 테스트까지 가능하다!!

그럼 본격적으로 Firebase에 들어가도록 하겠다. Firebase로 들어가서 Google 계정으로 로그인한다.

그런 다음 시작하기를 클릭하면 바로 Firebase console로 이동한다.

프로젝트 추가를 선택하고 프로젝트를 만들어 보자.

프로젝트 이름을 입력하고 국가와 약관을 확인한 후 프로젝트 만들기를 클릭 한다.

그러면 프로젝트가 생성되고 Project Overview 화면이 나타나게 된다.

이제 앱을 추가할 차례이다. 우리는 iOS 앱을 만들 것이므로 iOS 버튼을 클릭 한다.

번들ID를 입력하고 앱 등록을 한다.

여기서 CoogleService-Info.plist 파일은 프로젝트에 추가해야 하므로 미리 내려받는다. 이어지는 나머지 과정은 Cordova 앱에서는 해당 사항이 아니므로 쿨하게 건너뛰기를 한다.

앱을 등록하고 나면 위 그림처럼 iOS 앱이 표시된다. 이제 Push 관련 설정을 추가 할 차례이다.

프로젝트설정 -> 클라우드 메세징 탭에서 “iOS 앱 구성”을 살펴보면 APN 인증키 등록하는 메뉴가 있다. 업로드 버튼을 클릭한다.

그런 다음 이전에 준비했던 p8 파일을 선택해서 업로드 한다. 그리고 이전에 메모해두었던 키ID 와 팀 ID도 입력해준다.

인증 키가 잘 등록된 것을 볼 수 있다.

이제 APN 인증 키에 대한 구성은 모두 끝났다. Firebase plugin을 설치하고 앱에 Push기능을 적용할 차례이다.

3. Firebase plugin

우리가 Cordova 앱을 개발하면서 Firebase를 쓰게 된 가장 큰 이유 중 하나가 plugin을 활용하여 쉽게 개발하는 있는 부분이었다. 여기서는 Push만 쓰지만, 더 많은 기능을 확인하고 싶다면 API 문서를 참고하길 바란다.

이제 프로젝트로 이동하여 Plugin을 설치한다.

cordova plugin add cordova-plugin-firebase --save

그리고 아까 Firebase에서 내려받은 CoogleService-Info.plist 파일을 프로젝트의 루트 경로에 저장한다. config.xml 파일이 들어있는 경로이다.

API 문서를 참고하여 iOS Push에 대한 Grant permission을 추가하기 위해 다음과 같이 Javascript 코드를 추가하였다.

Grant permission은 iOS에서만 필요한 부분이기 때문에 Platform 체크를 해주는 것이 좋다. 그 외에 Notification에 필요한 부분들은 추가로 개발해주면 되고 준비는 모두 완료되었으니 간단한 테스트로 넘어간다.

Platform에 따라 처리하기 위해서는 Device Check를 위한 Plugin이 필요하다. 위 예제 코드는 cordova-plugin-device 를 설치해서 사용한 코드이다.

4. Cloud Messaging

다시 Firebase console로 돌아가서 Cloud Messaging 메뉴를 클릭한다.

알림작성에 필요한 항목들을 입력하고 타켓에서는 등록했던 iOS 앱을 선택해준다.

알림전송은 바로 전송할 수도 있고 위 그림과 같이 스케줄을 만들어서 전송할 수도 있다. 반복 알림도 설정이 가능하다. 이 모든 게 코드 한 줄 없이 개발할 수 있는 것이다.

나머지 추가옵션들은 서비스하고자 하는 기능에 맞게 설정해 주고 전송을 해보자.

전송하고 나면 위 그림처럼 등록한 알람의 상태를 볼 수 있다. 디바이스를 통해 전송받은 Push를 확인하고 나면 기본적인 구현 과정은 끝난 것이다.

마치며

이처럼 Firebase console은 이러한 과정만으로 모바일 앱 개발 플랫폼을 만들어낼 수 있는 강력한 도구이다. 물론 대규모 서비스를 개발할 때는 비용, 유지보수, 지원하는 서비스 면에서 비교해야 할 부분들이 많고 분명 허들도 존재할 것이다.

여기서 소개한 Cloud Messaging 외에도 Authentication, RealtimeDatabase, Hosting, Cloud Functions 등 iOS, Android 앱 개발에 필요한 모든 기능을 갖추고 있고 Google에서 의욕적으로 서비스를 하는 느낌이 들어 당분간 프로덕트 레벨에서도 충분히 활용할 수 있다고 생각한다. 앞에서도 언급했던 것처럼 전체 프로젝트에 적용하기는 부담스럽고 작은 단위로 진행하고 싶을 때 개발속도도 빠르고 위험부담도 훨씬 적다는 부분은 Firebase console의 가장 큰 매력이다.