Vue.js + Cordova + OnsenUI 로 하이브리드 어플리 케이션 개발하기

최근에, nuxt.js 를 이용하여 세팅하는 방법을 올린 적이 있는데 회사 내부적으로 최종적으로  Vue + Cordova + OnsenUI 를 이용하여 개발하기로 하였다.

 

실질적인 개발은 무리없이 진행되고 있었는데 Cordova Plugin 을 연동하는 부분에서 꽤나 애먹었다.

(핸드폰에 저장되어있는 모든 사진을 웹상에 띄워줬어야 하는데 이부분에서 시간을 잡아먹었다...)

 

이부분을 해결 하였으니, 하이브리드 어플리케이션을 개발하는 다른사람들에게 도움이 되고자 세팅하는 법 부터 차근차근 정리해 보기로 했다.

 

일단, Vue, Cordova, OnsenUI 가 무엇인지 부터 간단하게 알아보자.

 

1. Vue.js

https://vuejs.org/

Vue.js

Vue는 자바스크립트 프레임워크중 하나이다. 비슷한 얘들로는 Jquery, React 등이 있다.

이번에 Vue를 사용하기로 한 가장 결정적인 계기는 component를 관리하기 쉽다는 점.

실제로 꽤나 유용하게 쓰고 있다.

Jquery로 개발을 하게 되면, 개발 속도는 빠르겠지만 추후 유지보수에서 어려움을 겪을 가능성이 있고 성능적으로도 Vue가 우수하다고 판단 되었다.

 

2. Cordova

https://cordova.apache.org/

Apache Cordova

Apache에서 개발한 Cordova이다.

정적 웹페이지를, 어플리케이션으로 감싸주는 역할을 한다.

또한, 모바일 기기에서 가능한 작업들 (네이티브 어플리케이션 에서 가능한 작업들)을 쉽게 스크립트로 구현할 수 있도록 도와준다. (예를들면 카메라 등)

 

3. Onsen UI

https://onsen.io/

Onsen UI 2: Beautiful HTML5 Hybrid Mobile App Framework and Tools

Onsen UI는 모바일 기기에서 사용하는 UI 적인 화면들을 구현하기 쉽게 도와주는 오픈소스 UI 프레임 워크이다.

Vue 에서 UI 프레임워크중 유명한 Vuetify 가 있지만, Onsen을 사용한 이유는 초심자가 Vuetify 보다 쉽게 접근 할 수 있고, 실제로 이번 어플리케이션을 개발하는 데 있어서 다양한 UI 를 구현하지 않아도 되기 때문이다.

 

결정적으로는 Cordova와 Vue, OnsenUI를 연동하는 방법이 정말 다른 얘들에 비해서 너무 간단했다.

 

그럼, 세가지를 한 프로젝트에 얹는 마법 같은 방식으로 하이브리드 어플리케이션의 첫 발걸음을 떼 보도록 하자.

 

아래 사이트를 참조하였다.

https://onsen.io/vue/

Vue components & framework by Onsen UI for PWA & Hybrid with Cordova

우리는 Cordova로 감싼 하이브리드 어플리케이션을 구현하기 위해서 Vue, Onsen UI, Cordova를 한 프로젝트로 묶어줘야 하는 굉장한 어려운..문제가 있다.

 

실제로 Vue와 Cordova 를 얹어서 안정적으로 개발을 하기 위해서는 세팅단계부터 조금 복잡하다.

https://itnext.io/make-hybrid-platform-cordova-vue-webpack-2fb7031c4f9b

Hybrid Platform Setup: Cordova + Vue + WebPack

위 사이트 글을 보면 Cordova와 Vue를 연동하는 방법이 상세히 나와있다.

만약, OnsenUI를 사용하지 않는다면 위 사이트에서 소개하는 방식으로 세팅을 해주면 된다.

 

하지만 OnsenUI를 사용한다면 엄청 간단히.. 해결 된다.

일단, npm과 vue가 깔려 있다는 가정 하에

vue init OnsenUI/vue-cordova-webpack [project-name]

위 명령어를 실행 해 준 후,

cd [project-name]
npm install

이렇게 까지만 하면, 대부분의 세팅이 끝난다.

npm run dev

위 명령어를 치게 되면, 웹 브라우저에서 현재 개발중인 모습을 직접 확인 할 수 있다.

 

이제, 모바일에 어플리케이션을 넣기 위해서는 아래와 같은 작업을 수행한다.

 

cordova platform add android
cordova platform add ios
cordova platform add browser
cordova run android

일단 3가지 플랫폼을 코르도바에 추가 해 주고

cordova run을 이용하면 모바일에서 어플리케이션이 구현 되는 모습을 볼 수 있다.