소개

지난 2년간 나는 모바일 앱, 특히 AngularJS를 사용한 하이브리드 앱을 제작했다. AngularJS와 함께 사용하기 위해 여러 UI 프레임워크를 살펴 보았다.

• IonicFramework
• Famo.us
• Framework7
• OnsenUI
• 구글의 Material Design

이 글은 위에 소개한 프레임워크의 사용법이나 앱을 만드는 과정을 설명하지는 않는다. 그렇지만 이 글을 읽고나면 하이브리드 앱을 만드는 과정이 단순하다는 사실을 알게 되고, 각자에게 가장 적합한 프레임워크를 고를 수 있다.

하이브리드 애플리케이션은 무엇인가?

하이브리드 앱 성장 추세

하 이브리드 애플리케이션(이하 하이브리드 앱)은 HTML5, CSS, JavaScript와 같은 웹 기술로 웹 애플리케이션을 만들고, 이를 네이티브 컨테이너로 감싼 네이티브 애플리케이션을 말한다. 네이티브 애플리케이션은 WebView라는 내장 브라우저로 HTML을 표시한다. Cordova나 PhoneGap같은 도구를 이용하면 HTML을 네이티브 코드로 간단하게 감쌀 수 있고, 이 애플리케이션을 앱스토어에 올릴 수 있다.

잠깐, 이게 무슨 소리냐고?

그렇다. HTML5 애플리케이션을 만들어서 네이티브 앱처럼 작동시킬 수 있는 것이다. Corodva/PhoneGap처럼 네이티브와 연결해주는 도구를 이용하면 카메라, 가속도계, 위치정보, 연락처 같은 네이티브 기능에 접근할 수 있다는 것이다.

왜 하이브리드 앱인가?

하 이브리드 앱의 장점은 이렇다. 대부분의 경우 하이브리드 앱은 크로스 플랫폼을 지원한다. 이는 곧 개발에 필요한 비용과 시간을 줄여준다. 시간이 줄어들면 비용이 더 줄어드는 것은 말할 필요가 없을 것이다. 또한 아이디어가 생기는 즉시 빠르게 개발할 수 있다.
하이브리드 앱의 가장 큰 장점은 어떤 웹 개발자든 역량과 상관 없이 간단한 학습을 통해 앱 개발자가 될 수 있다는 점이다. 하이브리드 앱이 이런 장점을 가진 덕분에 저렴한 비용으로 도입할 수 있고, 네이티브 언어보다 학습 곡선도 낮다.

성능은 어떨까?

아쉽게도 여기서 설명할 프레임워크는 완벽한 네이티브 앱처럼 성능을 발휘하는 것은 없다. 그렇지만 점점 발전하고 있다는 사실을 기억해 두자.

주요 UI 프레임워크

과거 모바일 개발을 할 때는 HTML과 CSS를 직접 구성하고, jQuery로 애니메이션을 처리했다. 웹사이트를 만드는데는 이 방법이 적합한 편이지만, 모바일 개발을 할 때는 매우 답답한 방법이다.
이 렇게 하면 반응형, 크로스 플랫폼 지원, 네이티브 같은 느낌을 주기 위한 과정을 추가해야 한다. 만약 사용자가 앱을 쓰면서 느리고, 버그가 많고, 멈추는 경우가 잦다면 UX를 중시하는 요즘 같은 때에 좋은 소식이라고 할 수 없을 것이다.

최 근들어 하이브리드 앱과 모바일 개발에 빠른 발전이 있었고, 많은 회사들이 하이브리드 앱을 주목하고 있다. 지난 해에만 세개의 UI 프레임워크가 이름을 알렸고, 더 다양하고 효과적이며 뛰어난 하이브리드 경험을 제공할 프레임워크가 계속해서 등장하고 있다.

Ionic Framework

Ionic FrameWork은 발표한지 1년 정도가 되었다. 발표 이후 줄곧 하이브리드와 모바일 개발 커뮤니티가 엄청난 지지를 보내고 있다. Github의 저장소는 거의 매일 갱신되며, 10,000개 이상의 별을 받았다. Ionic 포럼도 매우 활발하기 때문에 StackOverflow에 질문하는 것보다 포럼을 이용하는 것이 답을 얻기가 쉽다.

Ionic FrameWork 1.0은 베타이기 때문에, 버그도 있다. 그렇지만 이런 문제들은 점차 해결하고 있다. Ionic 팀은 Ionic Framework를 보다 효과적이고, 성능면에서도 부족한 점이 없는 네이티브 앱처럼 만들기 위해 노력하고 있다.

Ionic FrameWork가 AngularJS 프레임워크를 감싸고 있는 것이 큰 장점이다. 둘이 조화를 이뤄 작동하는 것이다.

Ionic Box를 이용하면 윈도우 사용자가 개발환경 구축을 위해 투입해야하는 시간을 줄여준다. 물론 윈도우 대신 리눅스를 사용하는 방법도 있기는 하다. 정말 중요한 사실은 Ionic으로 앱 개발을 시작하는데 5분도 걸리지 않는다는 점이다.

역주: 여기서 말하는 5분은 Cordova/Phonegap 개발 환경을 갖춘 상태에서 시작했을 때를 말한다.

Ionic은 다양한 유틸리티를 지원하고, iOS나 안드로이드 등 OS에 따라 개별적인 수정을 가할 수도 있다.

최근 Ionic은 Ionic Creator 개발에도 많은 노력을 쏟고 있다. Ionic Creator는 IDE/GUI 도구라고 볼 수 있는데, Ionic 앱을 제작하는 드래그앤드롭 방식의 기본 템플릿을 제공한다. 베타를 진행 중이니 확인해보자.

그러면 Ionic을 이용한 프로젝트를 시작해보자. 우선 Ionic과 Cordova를 설치한다.

새로운 Ionic 프로젝트를 생성한다.

optional-template를 이용하면 사이드메뉴가 있는 형태(sidemenu), 하단 탭이 있는 형태(tabs), 빈 프로젝트(blank)를 설정할 수 있다.

실행예

Ionic의 CodePen에서 보다 다양한 예제를 확인할 수 있다.

이렇게 Ionic을 이용해서 웹 앱을 만드는 방법을 확인했다. 위의 예제는 Ionic을 이용해서 3 페이지의 샘플 앱을 만들었다. 각자 이것을 수정해서 원하는 앱을 만들 수 있을 것이다.

파일과 디렉토리 구조를 보면 이렇다.

간단하고 이해하기 쉬운 구조로 되어 있다. Cordova/PhoneGap를 다뤄봤다면, 플랫폼 설정과 활용이 어렵지 않을 것이다. 예를 들어 iOS라면 이렇게 할 수 있다.

ionic의 첫인상은 놀라움이었다. 앱을 만드는데 3분도 걸리지 않았다. Ionic은 앱의 기본구조를 구성하는 시간을 줄여준다. 구조를 변경할 때는 CSS (SASS) 파일을 수정하면 된다.

Ionic은 개발 기간을 줄여주는 다양한 기능을 제공한다. 당겨서 새로고침(Pull-To-Refresh)이나 무한 스크롤(Infinite Scroll)같은 기능을 이용할 수 있다.

앞에서도 언급했지만 Ionic의 커뮤니티는 빠르게 성장하고 있다. 포럼을 활발하게 운영하고 있고, StackOverflow에도 많은 질문이 쏟아지고 있다. StackOverflow 보다는 포럼에 직접 질문하는 것을 권한다.

Ionic 장단점

장점

• 코어에 AngularJS 사용
• UI 컴포넌트 제공 (당겨서 새로고침, 무한 스크롭, 탭 등)
• 활발한 커뮤니티, 넓은 사용자층

단점

• 베타 단계(버그 존재)
• 트랜지션과 애니메이션 속도가 느림

항목별 점수

• 문서화 8.0
• 프로젝트 시작 속도 10.0
• 성능 5.0
• 커뮤니티 7.0
• 학습곡선 7.0

Famo.us + AngularJS

Famo.us는 시장에 나온지 이제 막 4, 5개월이 지난 갓난 아기 같은 프레임워크이다. 현재 Famo.us는 성능을 목표로 집중하고 있다. 60 fps 애니메이션을 이용해서 폼나는 하이브리드 앱을 만드려고 한다면 Famo.us를 이용하자. 여기서는 순정 Famo.us가 아닌 ThomasStreet가 제작한 Famo.us & Angular를 살펴보겠다.

Famo.us 는 CSS3 3D 트랜스포메이션의 GPU 가속을 이용한 자체 JavaScript 엔진으로 60 fps처럼 부드러운 애니메이션을 만들어낸다. DOM 요소를 렌더링 할 때, DOM을 전혀 사용하지 않고 자체 DOM 렌더링 트리를 이용하기 때문에 다른 프레임워크와 큰 차이가 있다. 이것은 성능면에서 훌륭한 결과물을 보여준다.

Famo.us의 CodePen에서 예제를 볼 수 있다. 아래 이미지를 눌러보자.

아래 영상을 통해 AngularJS & Famo.us의 사례를 확인할 수 있다. 이 조합을 어떻게 사용해야 할지 잘 설명하고 있다.

Famo.us 는 현재로서는 Ionic과 경쟁한다고 보기 어렵고, 서로 다른 목적을 기반으로 진행하고 있다. 그렇지만 Famo.us가 AngularJS 지원을 추가했기 때문에, 조만간 Ionic의 경쟁자가 될 수도 있다. 이렇게 된다면 Ionic 입장에서는 성능향상과 매끄러운 애니메이션을 제공하는 것이 중요한 이슈가 될 것이다.

일전에 Ionic은 포럼을 통해서 장래에 Famo.us와의 통합을 고려할 수 있다고 밝히기는 했지만, Famo.us의 UI는 Ionic과는 전혀 다른 철학이 반영되어 있기 때문에 통합은 쉽지 않을 것이다.

Famo.us 는 간단한 기본 템플릿을 제공하는데, 덕분에 준비는 금방 할 수 있지만 전반적으로 부족한 점이 많다. 기본적으로 파일과 폴더 구조이고, AngularJS & Famo.us를 이용한 예제도 담겨있다. 이것만 봐서는 AngulrJS & Famo.us에서 순정 Famo.us가 어떻게 작동하는지 이해하기가 간단하지 않다.

Famo.us와 AngularJS를 조합한 프로젝트를 시작하려면, 기본 템플릿을 git에서 받거나 Bower를 이용한다.

우선 Famo.us가 의존하는 Node.js 플러그인을 먼저 설치하자.

프로젝트 시작은 이렇게 한다.

이렇게 해서 9000번 포트(http://localhost:9000)에 NodeJS 서버를 가동한다. 그리고 바로 Famo.us를 작성할 수 있다. 브라우저를 열면 AngularJs & Famo.us의 예제를 확인할 수 있다.

Famo.us의 주요 DOM 컴포넌트는 두가지로 Modifier와 Surface가 있다.

Surface는 기본적으로 HTML 요소같은 컨텐츠이다. Modifier는 애니메이션, 이동 등 조작하고자 하는 요소이다. Modifier가 Surface를 감싸는 방식이다.

Famo.us 장단점

장점

• 60 fps의 애니메이션을 이용한 생동감 있는 UX
• AngularJS와 조합 가능
• 간단한 기본 템플릿 제공

단점

• 다양한 기본 템플릿의 부재
• 사용자가 많지 않음
• 실질적인 예제나 사용 사례를 찾기 어려움
• 부족한 문서화 수준

항목별 점수

• 문서화 6.0
• 프로젝트 시작 속도 4.0
• 성능 10.0
• 커뮤니티 4.0
• 학습 곡선 4.0

결론

Famo.us 의 장점은 쉽게 눈에 띄지 않지만, 결과물은 놀라움 그 자체다. Famo.us는 뛰어난 성능과 유연함을 가지고 있지만, 아직 문서가 충분하지 않다. 부족한 문서 탓에 프레임워크를 모두 파악하지 못한 상태로 개발을 시작했고, 자세한 사용법은 예제를 보고 이해했다. Trigger.io도 함께 살펴보자. UI 컴포넌트가 충분하지 않은 Famo.us를 보완해서 사용할 수 있다.

Famo.us는 복잡한 인터렉션을 만들 때 유용하다. 빠르게 발전하고 있으니 관심을 가지고 지켜보자.

FrameWork 7

내가 1년쯤 전에 스타트업을 시작할 무렵에 컴포넌트가 잘 갖춰진 UI 프레임워크를 찾아본 적이 있다. 당시는 Ionic이 공개되기 전이라서 Framework 7에 관심을 갖게 되었다.

F7은 그들의 설명에 따르면 “iOS 앱 개발을 위한 완전한 HTML 프레임워크”인데, 설명처럼 크로스플랫폼을 지원하지 않는다는 단점이 있다.

그렇지만 iOS 하이브리드 앱 개발에는 훌륭한 프레임워크이다. F7은 네이티브 iOS앱을 만들 때 필요한 모든 UI 컴포넌트를 제공한다.

Ionic이나 Famo.us & AngularJS와의 차이점은 F7 MVC 프레임워크를 이용해야 한다는 점이다.

프로젝트 시작은 이렇게 한다.

이렇게 하면 bower_components 디렉토리와 함께 F7의 소스코드를 생성한다.

앱 개발을 위해서는 기본 HTML 파일을 구성해야하는데 여기에서 복사해서 붙여넣을 수 있다. Ionic이나 OnsenUI가 기본 템플릿을 제공하는 것과는 차이가 있다.

아래 이미지를 누르면 CodePen에서 확인할 수 있다.

Framework7 장단점

장점

• 거의 완벽한 iOS UX 제공
• 다양한 유틸리티
• 간편한 시작과정

단점

• 크로스플랫폼 미지원
• 자체 MVC 프레임워크를 사용
• 사용자가 많지 않음
• 기본 템플릿이 없음

항목별 점수

• 문서화 9.0
• 프로젝트 시작 속도 7.0
• 성능 6.0
• 커뮤니티 4.0
• 학습 곡선 9.0

참고: F7으로 개발할 때는 웹 서버의 디렉토리에 파일을 넣고 서버(localhost)에서 작업해야 한다. Ajax 호출을 이용해 페이지 이동을 하기 때문이다. Cordova/PhoneGap으로 배포할 때는 이 과정이 필요없다.

OnsenUI

OnsenUI는 Ionic의 경쟁자이다. AngularJS를 지원하고 Ionic과 유사한 도구를 제공한다. OnsenUI는 UI 개발에 어려움을 겪은 Cordova/PhoneGap 개발자들을 위해 탄생했다.

OnsenUI 의 “시작하기(getting started)” 가이드 문서는 그다지 명확하지 않다. 제공하는 템플릿도 저장소를 이용하지 않기 때문에, 사용하려면 다운로드 하는 방법 밖에 없다. 따라서 버그나 문제를 발견하더라도 이런 부분을 다른 개발자와 공유하하는 것이 불가능하다. 템플릿이 업그레이드 되는 경우에도, 개별 프로젝트에 업데이트 하는 것이 간단하지 않다.

OnsenUI는 색상과 기본 컴포넌트의 스타일을 온라인으로 선택할 수 있는 기능을 제공한다. CSS를 직접 수정하는 대신 원하는 형태를 선택해서 다운로드 받으면 원하는 구성으로 프로젝트를 시작할 수 있다. Monaca IDE를 이용하면 파일 다운로드를 받지 않고 커스텀 템플릿을 이용할 수도 있다.

프로젝트 시작 과정을 자세히 살펴보자.

우선 시작하기(getting started) 가이드 문서를 보면서 원하는 템플릿을 고른다. 여기서는 tab-bar를 골랐다.

다운로드 받은 파일의 압축을 해제해 보면 표준적인 Cordova/PhoneGap의 디렉토리 구조를 확인할 수 있다. 관심있게 봐야할 부분은 www 디렉토리이다.

웹사이트로 돌아가서 다른 색상 구성을 골라보자. 여기서는 Dark 테마를 선택했다. 파일을 내려받아보면 이렇다.

테마를 수정하려면 OnsenUI 디렉토리의 www/lib/onsen/css에 있는 CSS 파일을 교체하면 된다. 내려받은 stylus 디렉토리를 www/lib/onsen/stylus로 교체하면 테마가 바뀐 것을 확인할 수 있다.

Ionic과 마찬가지로 OnsenUI도 여러가지 구성의 HTML 요소를 제공해서 비즈니스 로직에 집중할 수 있게 해준다.

Ionic과 비교해볼 때 눈에 띄는 차이는 두가지다. 우선은 Ionic의 커뮤니티가 훨씬 더 활발하다는 점이다. 이것은 또한 다수의 컨트리뷰터들이 더 나은 프레임워크를 만드는데 일조하고 있기도 한다.

프 레임워크 자체에서도 차이를 발견할 수 있다. 둘 다 다양한 요소를 제공하기는 하지만, Ionic 쪽이 좀 더 낫다. Ionic은 AngularJS 쪽으로 추가할 수도 있고, 요소를 조작하게 해주기도 한다. 둘의 성능을 비교해보지는 않았지만, Ionic이 최근에 성능향상에 노력하고 있는 점을 잊지 말자.

OnsenUI 장단점

장점

• 크로스 플랫폼, Cordova/PhoneGap에 친화적인 구성
• 다양한 유틸리티
• AngularJs 호환성
• 테마 수정의 간편함

단점

• 자체 MVC 프레임워크 사용
• 사용층이 넓지 않음

항목별 점수

• 문서화 7.0
• 프로젝트 시작 속도 9.0
• 성능 5.0
• 커뮤니티 3.0
• 학습 곡선 9.0

Material Design

Material design은 안드로이드 롤리팝 이후 네이티브 앱의 UI 컨셉이다. 구글은 Ionic과 함께 AngularJS 프로젝트를 시작했다. 이들의 목표는 Material design 시스템을 구현할 수 있는 AngularJS 기반의 네이티브 UI 요소를 제공하는 것이다. 기대해볼만 하기는 하지만 여기서 예제를 보여주거나 본격적으로 다뤄보기에는 이른 감이 있다. 현재 진행 상태와 예제를 [http://material.angularjs.org/]에서 확인해볼 수 있다. Material Design도 계속해서 관심을 가져보자.

결론

나는 여러 프레임워크 중에서도 Famo.us와 Ionic을 두고 가장 고민했다. 하이브리드 앱을 만들 수 있는 네이티브와 유사한 UI 프레임워크를 제공하는 점에서 둘은 공통점을 가지고 있다. 그렇지만 개발 목표는 서로 다르다.

Ionic은 UI를 중심으로 시작했다. 따라서 미리 갖춰진 UI를 이용해 바로 앱 개발을 할 수 있다. UI 컴포넌트와 기능을 이용해서 기본적인 구조를 바로 갖출 수 있다. 또한 지금은 성능 향상을 진행하고 있다.

반면에 Famo.us는 성능과 효율성, 애니메이션과 물리엔진을 중심으로 시작하여, 다양한 UI 구성요소를 추가하기 시작했다.

어떤 기술이건 프레임워크를 선택할 때는 프론트엔드와 백엔드에 상관없이 그것을 통해 무엇을 달성하려고 하는지가 중요하다. 프레임워크의 선택을 위해 이런 질문을 던져볼 수 있다.

• iOS만을 위한 앱을 만드는가?
• 크로스 플랫폼을 지원하는가?
• 매끄러운 애니메이션과 트랜지션을 이용한 UX가 필요한가?
• 빠른 개발이 필요한 프로젝트인가?
• 개발할 앱의 사용자가 가지고 있는 기기의 성능은 어떤가?

이런 질문을 통해 각자에게 적합한 프레임워크를 선택해보자. 나는 아래와 같은 이유로 Ionic을 선택했다.

• MVP를 빠르게 배치해야 했다.
• AngularJS 기반이다.
• 개발기간을 줄여주는 다양한 기능이 있다.
• 커뮤니티의 도움을 얻을 수 있다.
• 비즈니스 로직에 집중할 수 있다.

Ionic의 장점은 이렇게 다양하다. 그렇지만 Famo.us도 머지 않아 대단한 프레임워크로 발전할 것이고, 계속해서 관심을 가질 필요가 있다.