회사에서 준비 중인 솔루션의 모바일 버전을 준비하기 위해 여러가지 이야기가 오고 가고 있었다. 그 이야기 중에서 가장 큰 관심은 어떤 방식으로 앱을 개발할 것 인가였는데, 기존의 네이티브 개발 방식에는 OS 및 디바이스 별 파편화로 인해 다들 회의감을 가진 상태였다. 그리고 우리 같이 솔루션이 전업이 아닌 SI회사에서 솔루션에 인원을 투자한다는 것은 그만큼 부담이 있었기 때문에, 개발 뿐만 아니라 추후 관리에 있어서 cost가 조금 덜 드는 개발 방향을 찾고자 했다.


Native App

전통적인 개발 방식. 네이티브니 당연히 해당 플랫폼에서 제공하는 모든 기능을 사용 할 수 있다.

  • 장점
    • (못 만들지 않는 이상 …) 성능은 확실하게 보장.
    • 개발 경험이 있기 때문에 러닝 커브가 낮음.
  • 단점
    • 크로스 플랫폼을 지원하기 위해선, 플랫폼 별 개발자가 각각 필요.
    • 작은 부분에 있어 변경이 발생하면 앱 업데이트가 불가피.
    • 지속적인 유지보수가 어려움. (우리 회사의 입장에선 …)
    • OS 및 기기 별 파편화.


Hybrid App

HTML/JS/CSS로 웹 페이지를 만들고, 이를 웹뷰로 감싼 형태.

  • 장점
    • 하나의 코드로 크로스 플랫폼 지원.
    • 개발 프레임워크에 따라서 네이티브 앱처럼 카메라, GPS 등의 플랫폼 기능을 사용 할 수도 있다.
    • 기존의 Front End 개발자라면 쉽게 접근 가능.
    • 게임을 제외한 일반 네이티브 앱에 준하는 성능.
    • 어느 정도 수준의 파편화 현상을 방지.
  • 단점
    • 장점에서 얘기한 네이티브 앱에 준하는 성능을 지원한다고 했지만, 절대적으로 동급은 아님.
    • 일반적인 플랫폼 기능 외의 특수한 기능들은(예를 들면 지문 인식 등) 사용하기 어려움.
      (직접 플러그인을 만들어야 할 지도…)
    • Native App 개발자 입장에서의 새로운 러닝 커브가 필요.
    • 플랫폼 별 파편화는 어느정도 방지 할 수 있으나, 웹뷰 버전이 다른 경우 새로운 파편화에 직면 할 수 있음.


선택

결론부터 얘기하자면, 우리 회사는 Hybrid App 개발 방식을 택했다. 개발 할 때는 2명 내지, 많으면 3명이 투입 되더라도 개발이 완료 된 시점에선 1명만으로도 유지 보수가 충분하기 때문이다. 물론 하이브리드 앱이 네이티브 앱에 비해 절대적으로 우위를 가진 것은 아니나, 상대적으로 볼 때 우리가 게임을 만드는 것도 아니고, 고성능을 필요로 하는 것도 아니었기 때문에 여러 면에서 하이브리드 앱이 나아 보였다.


프레임워크

하이브리드 앱을 개발하기로 했지만, 예전처럼 모바일 웹 사이트를 웹뷰로 감싸서 배포하는 방식은 지양하고자 했다. 사실 이 방식은 하이브리드 앱이라고 부르기 민망한 수준이고(개인적인 생각으로는…), 만들어진 모바일 웹 사이트도 없는 상태 :(
때문에 하이브리드 앱 프레임워크를 사용해 맨 바닥부터 앱을 개발하고자 했다.


Ionic Framework

하이브리드 앱 개발에 있어 쓸 수 있는 프레임워크는 여러 종류가 있으나(링크), 우리는 Ionic Framework를 사용하기로 했다. Ionic으로 직접 개발해 본 적은 없지만, 이미 사내에 Ionic으로 개발하던 다른 서비스도 있었고, 자문을 구해 본 결과 아직은 부족하지만 나름 쓸만하다는 의견이었다.


Ionic ?

역사로 따지자면 이제 2살밖에 되지 않은 갓 신생 프레임워크다. 정식 버전은 현재 1.3이고, 2.0 베타 버전을 준비 중인 상태이다. UI는 AngularJS 및 Ionic Directive로 이루어져 있고 Native Access API는 Cordova를 베이스로 하고 있어서 추가적으로 필요한 네이티브 기능은 개발자가 직접 플러그인 형태로 개발 가능하다.


Ionic의 특징을 정리하자면 다음과 같다.

  • Cordova 플러그인은 Ionic에서 모두 사용 가능하다.
    (때문에 카메라, GPS, 파일 입출력 기능들은 네이티브 앱과 동일하게 쓸 수 있다.)
  • UI 관련해서 많은 코딩을 하지 않더라도 네이티브 앱과 유사하게 디자인 할 수 있다.
    (헤더, 탭, 사이드 메뉴, 페이지 전환 애니메이션 등등)
  • 프레임워크의 개발 방향이 퍼포먼스 향상에 맞춰져 있다.
    (실제로 Ionic 앱을 설치해보면 네이티브 앱이 부럽진 않을 정도로 뛰어나다.)
  • CLI(Command Line-Interface)가 잘 지원되므로 개발하기 편하다.
  • Like native app을 위한 여러 가지 라이브러리를 지원한다.
    (Pull to refresh, Infinite Scroll 등등)
  • 개발 환경은 node.js를 기반으로 하기 때문에 gulp등 여러 node module 들을 사용 할 수 있다.
  • 기본 빌드 시스템은 gulp를 사용한다.
  • Front End 라이브러리 관리는 bower를 사용한다. (사용하지 않아도 상관 없다.)
  • 레퍼런스가 풍부하고 포럼이 활성화되어 있다.

Ionic은 Android의 경우 자체 웹뷰(Cross Walk)를 사용 할 수도 있지만, 기본적으론 OS의 기본 웹뷰를 사용하되, 플랫폼 별로 상이한 여러가지 이벤트들(키보드 Show/Hide 등)을 Ionic Framework에서 핸들링해준다. 덕분에 개발자는 각 플랫폼을 위한 하드코딩(?)을 덜 할 수 있게 되고, 비즈니스 로직 개발에만 집중 할 수 있게 된다.


Ionic 프로젝트 구조

프로젝트의 구조는 Cordova & Phongap과 유사하다.


개발 환경은 node.js를 기반으로 하기 때문에 package.json 파일이 있으며, Front End 라이브러리 관리를 위한 bower.json, 빌드를 위한 gulpfile.js, 각 플랫폼 설정을 위한 config.xml, 그리고 프로젝트 설정을 위한 ionic.project 파일 등이 있다. 배포를 하기위해 publish 빌드를 하게 되면, 각 플랫폼은 config.xml을 기반으로 메타 데이터를 설정하게 되고, iOS는 Xcode 프로젝트 파일을, Android는 서명이 안 된 APK 파일을 생성해준다.


Ionic 샘플



결론

아직 Ionic을 접한 지 한 달 채 되지 않았지만, 내가 느낀 바로는 익숙해지면 꽤 쓸만하다였다. 물론 Ionic이라고 단점이 없는 건 아니지만, Ionic의 단점이라기 보다는 Ionic을 구성하는 라이브러리들의 단점인 것 같다.

  • UI는 AngularJS를 기반으로 하기 때문에 (Ionic 1.x는 Angular 1을, 2.x는 Angular 2를 지원)
    AngularJS를 접해 본 적이 없다면 초반 러닝 커브는 상당히 높다.
  • 모바일 앱 개발을 위한 편의 기능은 많지만, 막상 들여다 보면 조금씩 부족하다. (나사가 모자르는 느낌)

이래저래 장점 및 단점들이 있지만, 앱을 개발한다면 한 번쯤 고려해 볼 만한 선택인 것 같다.

저작자 표시
신고

WRITTEN BY
Profile
음주코딩
:D

받은 트랙백이 없고 , 댓글이 없습니다.
secret