모바일 프로그램 개발 (4)하이브리드 앱

Feat. Apache Cordova

 오늘은 하이브리드앱 모바일 개발의 튜토리얼 마지막 시간으로 실제 Native 기능을 추가한 앱 개발을 실습 할 것이다. 실습 시 사용되는 소스코드는 클릭 하여 다운로드 가능하다. (참고로 해당 링크는 "모바일 웹 + 웹 앱 + 하이브리드 앱 입문 - 저자 : 박성진 " 도서의 샘플 소스 코드이며, 개인적으로 Front-End(겉모습)부분에서 약간의 Conversion 과정을 거쳤지만 내부 로직은 대부분 변화가 없으므로 설명에는 큰 차이가 없을 것이다.)
또한 지금까지의 실습을 문제 없이 진행 해 왔다면 오늘 실습은 무리가 없을 것이다.

 지난 시간에 실행했던 Cordova식 Hello World의 경우 하이브리드앱 이라기 보다는 웹앱에 가깝다. 이유는  "Native 기능을 사용하지 않았기 때문"이다. 

 위의 네모 박스의 내용은 매우 중요한 개념이다. 이러한 하이브리드 앱과 웹 앱의 차이에 대한 개념이 중요한 이유는 추후 모바일 관련 개발을 함에 있어 어떠한 개발 언어를 선택 할 지에 대해 밀접한 관련이 있기 때문이다. 만약 모바일을 활용한 단순 웹 페이지를 개발하고자 하는 경우 굳이 Cordova와 같은 하이브리드 앱 개발언어를 사용할 필요가 없다. 하지만 모바일 고유의 기능 (주소록, 카메라, 진동, GPS)에 접근하고자 하는 경우는 이야기가 다르다. 하이브리드 앱을 선택하는 가장 중요한 이유가 이러한 모바일 고유의 기능을 사용하고자 하는 요구에 있다.
 
 < 실습 과정 >
 
 1. Cordova 개발 환경 구축 (이전 브런치 글 참고)
 
 2. 패키지 생성을 위해 cmd 이동 후 cordova create nativeSample com.example.nativesample nativeSample 명령어 입력
    - 설명 : cordova create [폴더명] [package경로] [config에 들어가는 이름]

< nativeSample 이라는 Cordova 패키지 생성 >

 3. Android 개발을 위해 cordova platform add android 명령 입력

< cordova platform add android 명령어 입력 >

 4. Native 기능 사용을 위한 플러그인 설치

   - 해당 플러그인 설치는 Cordova 언어를 사용하여 Native 기능을 사용하기 위해 매우 중요한 과정이다. Android SDK를 통해서 모바일 Native 기능을 개발하게 되는데 이는 원래 안드로이드 스튜디오 기반의 Java 언어를 사용한다. 하지만 아래 플러그인 설치를 통하여 자바스크립트 언어로도 개발이 가능하게 해주는 역할을 하게 된다. 실제 해당 플러그인 설치 시 이와 관련된 모듈들이 같이 설치 됨을 확인 할 수 있다. 만약 내가 카메라 기능을 이용한 앱을 구현하고 싶으면 카메라 관련된 플러그인을 받으면 되고 주소록을 사용하여 개발을 하고 싶다면 주소록 관련 된 플러그인만 받으면 된다. 
 
 아파치 Cordova가 제공하는 기본 플러그인 API 목록은 다음과 같다. 
 플러그인들을 추가로 더 알고 싶다면 Cordova 플러그인 사이트(https://cordova.apache.org/plugins)를 방문 해 보도록 하자.

< Cordova 플러그인 사이트 >

 

이번 실습에 설치 할 플러그인은 위 노란색 8개의 플러그인이다. 설명은 위 표를 참고하도록 하고, 명령어는 다음과 같이 입력하면 된다.
 >> cordova plugin add [플러그인 이름]
 예를 들어 정상적으로 설치가 되면 아래와 같은 화면이 나오며, 같은 방식으로 8개 모두 설치 하면 된다.
    
 
 모두 설치가 완료 되었으면 해당 폴더에서 code . 명령어를 입력하여 visual studio 편집기를 열어 탐색기에서 config.xml 내에 위 플러그 인들이 올바르게 설치 되었는지 확인한다.
    
      
 
 5. www 폴더 내 소스코드 변경
    - 처음 실습 때 다운로드 링크를 통하여 받은 파일을 보면 www 폴더(이미 작업 내용을 미리 코딩 해 놓은 폴더)의 압축 파일이 있을 것이다. 해당 파일의 압축을 푼 후 이번 실습을 위해 생성한 프로젝트 폴더 내 www 폴더와 바꾸어 준다. 
 
 
 
 6. 실행
    - cordova run android 명령어 입력
 
 
 7. 결과 확인
    - 실행하면 모바일 자체 정보 접근 및 다양한 Native 기능을 사용할 수 있는 앱이 생성 된다. 
 

 8. 마치며
    - 지금까지 아파치 코르도바를 사용한 하이브리드 앱 개발 Hands-on 과정을 진행 해 보았다. 네이티브 모바일 앱을 개발해 보았던 사람들에게 하이브리드 앱 개발 방식은 상당히 매력적인 개발 방식 임에 틀림이 없다. 하나의 코드로 iOS와 Android를 동시에 생산 해 낼 수 있다는 것이 얼마나 행복한 일인가. 하지만 이렇게 좋은 점만 있다면 모두들 하이브리드 앱 개발 방식만을 선택 하겠지만 이 역시 단점이 몇 가지 있다.
 
 첫째, 플러그인만을 의존해야 함. Cordova에서 네이티브 모바일 기능을 접근하기 위해서는 반드시 해당 기능 관련 플러그인을 설치해야 한다. 그런데 만약 해당 플러그인이 존재하지 않거나 개발 범위가 플러그인 능력 밖의 기능을 요구 한다면 Cordova 같은 방식의 하이브리드 앱으로는 개발이 불가능 하다. 플러그 인을 통하지 않고는 네이티브 기능에 접근 할 수 있는 방법이 없기 때문이다. 물론 대부분의 하이브리드 개발 언어가 왠만한 네이티브 기능을 모두 제공 해 주기는 하지만 모두 제공하는 것이 아닌 이상 단 한 가지 기능의 부재 만으로도 언어 선택의 포기 사유로는 충분하다고 생각한다.
 
 둘째, iOS와 Android의 태생적인 차이. 아무리 Cordova가 두 운영체제를 하나의 언어로 개발 해 준다 하여도, 똑같이 만들기는 생각보다 쉽지 않다. 이는 Android와 iOS가 똑 같은 구조로 이루어진 프로그램이 아니기 때문이다. 또한 안드로이드와 아이폰의 제약 사항의 차이에 의하여도 이러한 문제가 종종 발생한다. 실제 프로그램을 작성하여 컴파일을 해보면 Android에서는 잘 실행 되었던 것이 iOS에서는 실행되지 않는 경우가 종종 발생한다. (반대로 iOS에서 잘 실행되는 것은 대부분 Android에서도 잘 작동한다. ) 따라서 하나의 언어로 두 개의 운영체제에 동일한 앱을 생성해준다. 보다는 하나의 언어로 두 개의 운영체제를 개발할 수 있다. 가 아직 까지는 정확한 표현이 아닐까 싶다.
 
 셋째, 그래픽과 속도의 차이. 가장 많이 나오는 단점 중 하나이며 실제 네이티브 앱과 비교하였을 때 웹앱, 하이브리드앱의 경우 네이티브의 디자인과 속도를 따라가기란 아직은 숙제로 남아 있다. 하지만 이 문제가 과거에는큰 문제 였다면 지금은 기술의 발전 속도에 따라 차이를 많이 좁혔으며 결국은 따라 잡을 수 있는 문제로 생각되기에 중요도 측면에서는 개발을 제한하는 요소 까지는 아니라고 생각된다.
 
 따라서 위에 나열한 세가지 단점으로 볼 때, 하이브리드 앱을 모바일 개발의 만능으로 보고 택하는 것 또한 지양 할 필요가 있다. 
 그렇다면 모바일 개발을 할 때 어떤 언어를 선택해야 하는가. 개인적으로 정답은 그때 그때마다 다르다고 생각한다. 모바일 개발 시 프로젝트 범위 및 필요한 기능을 먼저 파악하여 이에 따른 최적의 언어를 취사 선택하는 것이 가장 이상적이다. 간단한 예로 단순 정보성 페이지를 제공하고자 할 때에는 웹 뷰 방식, 네이티브 기능이 필요하며 이것이 하이브리드 언어에서 모두 지원이 가능하다면 하이브리드 앱 방식, 네이티브 기능의 정교한 부분을 다룰 필요가 있으며 고 성능, 고 디자인의 요구 사항이 있는 앱은 iOS, Android 등의 네이티브 앱 방식으로 개발 할 수 있을 것이다.