앱(iOS Android) 둘 다 만들기 - 하이브리드 vs 네이티브 앱 선택

앱을 시작해야되는 상황이 왔습니다.

웹이지만 뷰티파이면 모바일에서도 룩앤필이 훌륭한데 왜 앱을 만들어야할까요?

우선 개발자와 일반사용자의 차이가 있는데요..

일반 사용자는 웹앱에 대한 인식이 대부분 별로 없습니다.

일반사용자는 뷰 노드 php 루비 이런 거 관심 없습니다.

모바일 페이지를 따로 만들던 반응형으로 하던 그냥 화면만 나오면 됩니다.

일반사용자, 즉 고객이 원하는 것은 주로 알림 서비스입니다.

sms서비스는 건당 10원의 이용료가 나오지만 앱은 무료라는 것이 결정타인 것입니다.

앱을 만드는 방법들

네이티브 앱 방식

간단한 것은 안드로이드는 안드로이드스튜디오로 iOS는 Xcode로 만들면 됩니다.

안드로이드는 자바 혹은 코틀린을 배워야하고 iOS는 오브젝트씨 혹은 스위프트를 배워야합니다.

종류	Android	iOS
언어	자바, 코틀린	오브젝트씨, 스위프트
개발툴	안드로이드스튜디오	Xcode

이렇게 만들어 지는 것이 네이티브앱입니다.

네이티브 앱 웹뷰 방식

앱 안에 웹뷰같은 브라우저를 넣어 놓고 앱에서만 사용할 수 있는 푸시나 gps등만 이용하는 방법도 있습니다.

이럴 경우 빌드하고 배포할 수 있는 기술만 익히면 되지만..

애플과 구글이 싫어합니다. 권장하지 않습니다.

하이브리드 앱 방식

둘 중에 하나만 해서 답안나오는 최근 트렌드는 익히 아실 것입니다.

하나 배우기도 까다로운데 두가지 플랫폼을 익혀야한다니… 너무 괴롭습니다.

그래서 만들어진 플랫폼이 하이브리드앱입니다.

자바스크립트로 안드로이드와 iOS 앱을 둘다 만들 수 있습니다.

가장 점유율이 높은 것은 react-native 인데 리액트까지 배우기는 부담이되기 때문에…

하이브리드 플랫폼중 뷰(vue.js)를 활용할 수 있는 cordova와 native-script를 선정해봤습니다.

하이브리드 앱

자바스크립트로 코딩을하고 프로젝트 코드생성(제네레이트)을 하는 방식입니다.

build ios 로 하면 해당 폴더에 ios 프로젝트 파일이 생성되는 방식입니다.

생성된 프로젝트 파일을 더블클릭해서 Xcode로 다시 빌드 해야되는 것이죠.

최고의 장점은 원코드인 것인데..

예를 들어 자바스크립트로 gps를 얻어오는 api를 사용하면 각 플랫폼 api로 변경되서 제네레이트 되는 것입니다..

종류	react-native	cordova	native-script
언어	react	javascript 아무거나	angular, vue
자료	많음	딱딱함	신선하지만 빈약함

cordova

https://cordova.apache.org

그 유명한 아파치재단에서 만들었답니다.

코도바는 놀랍게도 vue-cli3로 플러그인 설치가 가능합니다.

일렉트론 처럼 쉽게 설치가 됩니다.

$ vue add cordova
$ vue add vuetify

뷰티파이 까지 같이 설치하면 기존 뷰 지식으로 매우 편리하게 코딩이 가능합니다.

코딩 후 cordova run android 할 경우 에뮬레이터로 바로 떠서 멋집니다.

문제는 빌드를 해서 얻은 프로젝트 파일을 더블 클릭하면..

워닝지옥을 발견할 수 있습니다.

이런 저런 라이브러리 호환도 안되는 듯하고 맞출 것이 한두가지가 아닌듯 합니다.

빌드된 결과물은 오브젝트씨로 만들어져있습니다.

뷰티파이 룩앤필과 완전 같은 것이 아마도 웹뷰로 구성되어 있는 것 같습니다.

도큐먼트가 한글인데 로봇이 번역했는지 아파치 특유에 재미 없고 딱딱한 문서입니다.

native-script

https://www.nativescript.org

https://nativescript-vue.org

네이티브스크립트가 떠오르는 신예라 원래 앵글러로만 되던 것이 뷰도 지원하기 시작했습니다.

플러그인 설치 방식이 아닌 예전 init방식으로 설치해야합니다.

설치는 공식홈대로 진행했는데 뭘 그렇게 깔아대는지 30분은 걸려서 프로젝트가 만들어진 것 같습니다.

iOS의 경우 스위프트3로 결과물이 나옵니다.

그래서 스위프트4로 익스포트 시켜야 정상적으로 빌드됩니다.

코도바처럼 웹뷰로 만들어지는 것이 아니고 버튼이나 체크박스를 코딩하면 해당 플랫폼에서 기본 사용되는 것으로 만들어집니다.

역시 워닝지옥으로 프로젝트가 생성됩니다.

도큐먼트는 한글로 잘 나와있긴한데 핵심 코어부분과 뷰(vue.js) UI 부분을 따로 살펴봐야합니다.

결론

저는 quick start 챕터에서 권장하는 설치로 헬로월드의 느낌을 받고 선정하는 편인데..

코도바나 네이티브스크립트 둘 다 아직 준비가 많이 안된 느낌을 받았습니다.

워닝은 그렇다 쳐도 빌드는 깔끔하게 되어야하는데 뭔가 찝찝한 결과물 같습니다.

아마도 쉽게 편하게 만들다가 문제가 생기면 전혀 대처가 안 될 것 같은 느낌입니다.

그래서 … 귀찮긴 하지만 네이티브로 각각 따로 만들어보기로 결정했습니다.

기왕 하는 김에 새로운 언어를 즐겨보기 위해..

안드로이드는 코틀린으로 iOS는 스위프트로 만들어봅니다.