코르도바(Apache Cordova) 사용기

들어가며

그래도 개발자가 됐는데, 어플이라도 만들어보자! 만든 김에 수익이라도 내보자!

해서 올해 안에 치킨 값이라도 벌어보자는 목표로 어플을 만들게 되었다.

본업과 메인은 백엔드이기 때문에 그나마 만들기 쉬운 코르도바로 어플을 만들어봤다.

(코르도바의 ㅋ도 몰랐던 자바 개발자의 안드로이드 어플 출시 대장정입니다.)

 

본론

코르도바 프로젝트 생성

---

기존 자바 프로젝트는 new하고 프로젝트 생성하면 땡이었는데,

코르도바는 어떻게 만들어야할지 시작부터 깜깜했다.

플러그인 깔면 알아서 되려나 했는데 npm을 사용하면 생각보다 간단하게 설치되었다.

(IntelliJ에서 Plugin 설치로도 충분히 가능합니다. 참고 : https://googry.tistory.com/12)

Mac OS 기준으로 터미널에서 간단한 명령어 몇 번으로 코르도바 설치가 끝난다.

(Cordova 개발 환경 및 설치 방법 : https://niceman.tistory.com/69)

그리고 기존에 설치해 둔 안드로이드 스튜디오로 연동해 작업을 진행했다.

(안드로이드 스튜디오 import : https://niceman.tistory.com/70?category=940969)

 

Contacts (연락처 가져오기, 지우기 등등)

---

설치와 실행까진 무난하게 진행하고 나서 화면을 보니 html과 js 등 익숙한 웹 개발 환경이 펼쳐진다.

(설치한 직후 사진, 여기여기여기에 주로 작업을 할거다 표시)

연락처의 절반을 랜덤으로 날려버리는 타노스 어플을 만들거였기에 우선, 연락처를 받아와야 했다.

Cordova Docs에 연락처 관련 플러그인 설명을 보면 정말 아무것도 몰라도 스마트폰의 연락처를 가져올 수 있다.

(9.x가 최신 버전이라고 되어있는데, 여기선 연락처 플러그인 검색해도 나오질 않는다... 그래서 8.x 버전으로 진행했다.)

한글화가 되어있긴한데 '힘세고 강한 아침!' 느낌이라 차라리 영어를 보는게 더 읽기가 쉽다.

cordova plugin add cordova-plugin-contacts

해당 명령어로 Contacts 플러그인을 코르도바 프로젝트 안에 설치하고

navigator.contacts 메소드를 사용하면 연락처에 관한 모든 것을 씹고 뜯고 맛보고 즐기고 할 수 있다.

 

LocalStorage

---

다음 화면에서 연락처 지운걸 다시 보여주고 싶었는데, 이러려면 세션이나 쿠키 같은 기능이 필요했다.

코르도바에선 LocalStorage 기능을 지원해주고 있어서 같은 효과를 볼 수 있었다.

(JS에도 LocalStorage가 있지만 JS에선 사용을 안해봐서 모르겠다.)

하지만 Docs에는 스토리지에 배열로 저장하는게 따로 안 나와있어서 구글링을 좀 했다.

아래 사이트에 배열로 스토리지에 넣었다가 가져오는 방법이 자세하게 설명되어 있다.

http://inflagrantedelicto.memoryspiral.com/2013/05/phonegap-saving-arrays-in-local-storage/

 

국가별 언어 적용 (다국어 적용)

---

안드로이드에서 언어를 수정하는건 매우 간단하다.

글로벌 어플을 향한 첫 걸음.jpg

하지만 코르도바로 하려니 애를 먹었다.

언어만 따로 lang.js로 만들고 import, export 시키려 했으나 그것은 ES6부터...

코르도바에선 ES6 문법을 지원하지 않아서 그것도 안된다.

그래서 그냥 단순 무식하게 스크립트로 넣어버렸다...

글로벌 어플을 향한 첫 뒷걸음.jpg

 

무료 폰트, 무료 이미지, 아이콘 (상업용 저작권 확인)

---

폰트, 이미지, 아이콘은 무료로 사용 가능한 사이트를 찾아봤다.

상업용, 저작권 등 나름 많은 확인을 했다. (타노스가 마블꺼라... 마블은 디즈니꺼라...)

폰트 : https://hellchosun.net/52

이미지 : https://pixabay.com/ko/

아이콘 : 

https://www.flaticon.com/

https://www.freepik.com

https://www.pngrepo.com/

 

Admob

---

어플로 수익을 창출하려면 가장 쉽고 편리한게 광고가 아닌가 싶다.

그래서 가장 많이들 사용하는 구글 Admob으로 수익을 노려봤다.

(정말 노려만 보고 끝났다는게 학계의 정설...)

구글답게 Admob 설명서가 친절하게 나와있다.

하지만 코르도바는 이걸 따라할 수 없다. (처음의 과정은 필요합니다!)

대신 코르도바 애드몹 플러그인을 이용하면 아주 간단하게 복붙 몇 번으로 광고를 삽입할 수 있게 된다.

admob.js에 해당 플러그인 코드와 배너 광고, 전면 광고 function을 넣고 스크립트로 넣어줬다.

그리고 애드를 시작시키고 원하는 광고의 function을 불러오면 모든 준비는 끝이난다!

(애드몹에 가입하고 광고를 생성하면 각 광고에 대한 코드가 발급되는데,

광고 테스트를 할 때는 애드몹에서 제공하는 테스트 코드를 사용하세요!

괜히 잘못놀렸다간 애드몹 써보지도 못하고 정지당하는 불상사가 생길 수도...)

 

플레이스토어 등록

---

플레이스토어에 등록하는건 구글링하면 정말 많이 나온다.

친절하게 설명이 잘 되어있는 사이트 하나 잡고 따라해도 충분히 올릴 수 있다.

근데 뭐 하나하나씩 눌러가면서 하다보면 어찌어찌 결과물은 나온다.

다만, 연락처를 활용하다보니 개인정보처리방침 URL이 없으면 어플을 등록조차 못하게 해놔서 필수로 등록해야했다.

개인정보처리방침은 https://layers7.tistory.com/39 이 곳을 참고하면 금방 만들 수 있다.

HTML 파일이 만들어지면 복사 후 블로그 같은 곳에 올려두고 해당 URL을 적어두면 된다.

(어플이 개인 블로그에 연결되는게 싫다면 Free 도메인에 올려두고 해당 URL 복붙하면 될거 같습니다.)

 

대망의 어플

---

중간에 전면광고가 나오는건데 로드가 오래걸리는건지 화면이 허옇게 나오다가 꺼진다...

아무튼 전화번호의 균형을 맞추며 히키코모리 엔딩

 

마치며

JS만 잘 할 수 있다면 어렵지 않게 어플 하나는 만들 수 있을거라 생각했다.

제이쿼리 모바일도 적용하면 더 수월하게 할 수 있을거 같았지만,

그래도 바닐라 JS로 모든걸 해보고 싶은 욕심에 별다른 프레임워크를 사용하지 않았다.

덕분에 JS 공부에는 많은 도움이 되었으나 일반 웹에 적용하듯이 JS로 구현하니깐 안되는 것들이 몇몇 있었다.

그래서 막히는 부분이 있으면 JS 문법 찾아보고 적용하고 실패하고

다시 해당 문법의 코르도바 기준으로 한번 더 찾아서 적용하고...

이런 과정을 거치다보니 시간이 은근 걸렸다.

거기에 기능은 최대한 단순하게 해서 빠른 개발을 목표로 했지만,

디자인에서도 은근 시간이 걸려서 생각했던 기간보다 좀 더 걸렸다.

다음에는 코르도바를 사용하지 말고 네이티브로 개발을 해봐야겠다.

같은 자바 문법이니깐 금방 익숙해지지 않을까? (하는 개꿈과 함께 끝!)

 

뒷 이야기...

일주일 정도 플레이스토어에 올라가 있다가 내림 당했다.

'타노스'로 검색했을 때 어플이 있는걸로 봐서 저작권 문제는 아닌 것 같고 아마도 유해한 (연락처 삭제로 인한 아싸..)

콘텐츠라서 그런 것으로 생각한다.

사실 내가 봐도 좀 그렇긴해서 따로 메일을 보내거나 재검토 요청은 하지 않았다.

하나의 실험체로 막을 내린 내 어플이여 안녕 주륵