웹앱의 대표적인 라이브러리 - 김진흥

웹 앱이란 무엇인가?

웹앱은 웹상에서 모바일 앱을 구현하는 것으로서 플랫폼에 종속되지 않고 웹 브라우저를 통해 앱을 실행시컬수 있어 과거의 모바일 시장이 앱 중심이었다면 앞으로의 모바일 시장은 웹앱의 시대가 될 것으로 보기 때문에 웹앱에 대해 알아보도록 하겠다. 

웹앱개발을 위해서 필요한 자바스크립트 라이브러리에 대표적인 두 제품 Sencha Touch와 jQuery Mobile를 비교하여 라이브러리 선택에 도움이 되고자 한다.

개발방식의 차이

둘은 똑같이 Mobile JavaScript Library라는 공통점을 지니고 있지만, 개발에 사용되는 언어의 차이가 크다. jQuery Mobile은 기존 HTML 개발하듯이 마크업 중심의 구성을 갖고 있으며, Sencha Touch는 JavaScript로 개발을 하는데 특히 ExtJS 라이브러리 중심으로 구성되어 있다. 한마디로 어렵다. 실력있는 개발자를 써야 하기 때문에 개발비 추가된다. 그에 반해 jQuery Mobile은 우리에게 익숙한 HTML 중심의 마크업 언어라서 잠깐의 교육만으로도 바로 개발이 가능하다.

그림 : jQuery Mobile은 Markup Language로 기존 HTML 개발과 비슷하다

그림 : Sencha Touch는 ExtJS 기반의 JavaScript로 구성되어 있다

  

기능을 살펴보자

확실히 Sencha Touch 는 막강한 기능을 자랑하고 있다. Sencha Touch의 Core 부분은 ExtJS 라이브러리로 구성되어 있으며 상당한 역사와 전통을 갖고 있다고 말할 수 있을 정도로 많은 기능의 가지고 있다. 또한 JavaScript 기반이다보니 아무래도 마크업언어 기반 보다는 세밀한 컨트롤을 지원하기에 마련이다. 그리드나 챠트도 간단히 붙일 수 있으며 심지어 Ext Designer를 이용하면 마우스로 컴포넌트를 Drag&Drop하는 것만으로도 어느정도 개발을 할 수 있다.

지원 브라우저

Sencha Touch는 iOS계열과 Android계열 및 최근 업그레이드된 블랙베리 OS 6.0 부터 지원한다.

그림 : Sencha Touch는 Android와 iOS계열 및 블랙베리 6.0 지원한다.

jQuery Mobile은 이밖에도 블랙베리와 Palm WebOS/Opera Mobile/Firefox Mobile 지원한다. 뿐만 아니라 베타 버전에서는 Window Phone7까지도 지원하겠다고 한다.(삼성의 bada또한 테스트계획이 있단다) 그야말로 모든 기기를 지원한다는 점에서 큰 장점을 지니고 있다.(심지어 대부분의 PC의 모든 브라우저도 타겟이다.)

 

그림 : jQuery Mobile은 대부분의 Device 를 지원한다.

그런데, 이러한 차이는 역으로 단점이 될 수도 있는데 모든 기기를 대상으로 만들고 테스트 하는 작업이 상당히 부담이 된다는 것이다. 우리가 jQuery Mobile 팀이 얼마나 고생하는지 걱정할 필요는 없는 일이지만, 그만큼 시장 변화에 따른 Patch나 개발속도(버전업 속도)에 지장이 될 수 있는 부분이다. 아직 알파 버전만 나온 상태라 평가하기는 어렵지만, 벌써부터 이러한 걱정이 들 정도로 약간은 느리게 진행 되고 있는 것이 사실이다.(이제 곧 3월이 되지만 당초 예상과는 다르게 아직 알파 버전에 머물러 있다.)

하이브리드 앱

두가지 라이브러리 모두 PhoneGap 등을 이용하여 앱(App.)으로 만들 수 있다. 하지만 이부분에서 Sencha Touch의 앱 스러움이 실력을 발휘 한다. 일단 언어가 비슷하고 (Sencha Touch와 PhoneGap 모두 자바스크립트 기반) 마크업언어와 다르게 콤포넌트 기반이어서 화면 구성이 앱과 비슷한 점이 많다. 그리고 앱스러운 기능을 jQuery Mobile 보다 월등하게 많이 가지고 있다.

그림 : jQuery Mobile에서는 그림의 빨간색 처럼 Top/Bottom 영역에 고정 바(Bar)를 둘 수 없다. 고정바는 앱에서 자주 볼 수 있는 구성이다.

 

그림 : jQuery Mobile 에서는 그림과 같이 앱(App.) 스러운 화면구성이 어렵다.

jQuery Mobile vs. Sencha Touch

글의 제목이 jQuery Mobile vs. Sencha Touch 이다보니 어떤 라이브러리의 활용이 프로젝트에 최적의 결과를 가져올지 고려가 필요한 시점이다. 언제나 기본이 중요한 점이다. ‘Back to the Basic’ 본 라이브러리 들이 기본적으로 추구하는 가치가 무엇인지를 살펴볼 필요가 있어 다시 jquerymobile.com 과 sencha.com 을 참고해 본다..

그림 : jQuery Mobile 첫페이지의 타이틀 문구

 

그림 : Sencha Touch 첫페이지의 타이틀 문구

내집처럼 드나들던 사이트이지만, 이 문구는 왜 이제야 보이는지 모르겠다. 그렇다 하나는 Web Framework 이고 다른 하나는 Web App Framework 이다. 좀 더 설명을 붙이자면, "터치에 최적화된 웹 프래임워크" 와 "네이티브처럼 보이는 웹앱 프래임워크" 인 것이다. 앱과 웹앱의 차이인 것이다.

또한, 두 라이브러리의 성격을 나타내주는 기능이 있는데 바로 “브라우저 Back” 버튼이다. Sencha Touch는 브라우저의 “Back”버튼을 지원하지 않고 jQuery Mobile은 훌륭히 지원한다. 하나는 앱을 지향하고 하나는 웹을 지향하기에 나타난 자연스런 모습이다.

그림 : Sencha Touch에서는 브라우저의 Back버튼을 지원하지 않는다.

마무리

jQuery Mobile vs. Sencha Touch의 결과는 어느정도 나왔다고 볼 수 있다. 여러분이 스마트폰과 타블렛을 위한 웹을 만든다면 jQuery Mobile 을 사용하면 될 것이고, iOS와 안드로이드 계열에서 돌아갈 웹앱을 만드려면 Sencha Touch 가 답일 것이다.