서론

오늘은 어떻게보면 갑작스런 컨퍼런스 참석이 아니였나 생각이든다. 평소에 연구소 팀장님이 먼저 컨퍼런스 이야기를 잘 안하시는데, 이번 컨퍼런스는 NFC와 Cloud 내용이 포함되어 있어서 먼저 참석해보자고 말씀하셨다. 제목도 “Big Issue Of Mobile” 이라는 주제로 정말 모바일의 중요한 세가지 이슈를 들을 수 있는 좋은 기회라고 생각하면서 컨퍼런스 며칠전에 등록신청을하고 상경하게 되었다.

Big Data, HTML5, Cloud, NFC 주제어를 키워드를 가지고 있어서 정말 요즘 대두되고 있는 키워드들의 집합이 아닌가하는 마음가짐으로 컨퍼런스에 참석하게 되었다. 하지만, 너무 기대가 컸던 것일까… 내가 원하던 기술적 내용을 듣지 못해서일까? 오늘은 컨퍼런스 마치고 내려오는 서울에 자꾸만 미련이 남았던 것 같다. 하지만 참석자 모두 나와 같은 생각은 아니였을것이라고 생각이든다. 기술적 내용은 없었지만, 이슈와 트랜드에 대해서는 리뷰와 오버뷰 형식으로 발표하는 강연이였기 때문에 이제 모바일 사업으로 출발하려는 스타트업 기업이나, 전반적인 서비스의 트랜드를 듣기 원했던 참석자에게는 부담없이 듣고 갈 수 있는 자리였을 것이라 생각된다.

서론

앱을 만들다보면 가장 많이 사용하는 UI가 바로 아이폰에서는 UITableView 이고 안드로이드폰에서는 ListView가 아닌가 생각된다. 리스트는 데이터를 출력시키는 UI로 모든 앱에서 반드시 필요하고 가장 많이 사용하는 UI이다. Sencha에서는 ListView를 Store-bound components 범주에 포함시키기고 있다. 이유는 Store라는 것을 사용하는 Ext.Component 들 중에 하나이기 때문이다. Sotre는 나중에 Sencha의 Model에가서 좀더 자세히 설명할 것이다. 여기선 뷰에 데이터를 출력시키는 데이터 저장 공간으로 생각하기로 하자.

서론

Sencha Touch를 사용하면 웹 프로그래밍으로 네이티브 UI와 동일하게 만들 수 있다는 것을 장점으로 말할 수 있겠다. 사용자에게 익숙한 UI를 개발자가 직접 만들지 않고 이렇게 템플릿으로 제공해주기 때문에 UI 개발 시간을 많이 줄일 수 있기 때문이다. 이번 포스팅에는 그런 네이티브의 UI를 어떻게 Sencha에서 사용할 수 있는지 차례대로 살펴보기로 하자. 뷰를 구성하기 위해서는 Ext.Component를 사용하는데 컴포넌트를 생성하고 추가하는 방법에 대해서는 Sencah Touch2를 이용한 하이브리드 앱 개발 - 2.View 생성 글을 참조하기 바란다. 이 포스팅에서는 센차에서 컴포넌트를 생성하는 것을 모두 이해했다는 과정에서 진행하겠다.

Sencha Touch의 뷰 구성은 Ext.Component 를 상속받은 여러 컴포넌트를 가지고 뷰를 구성할 수 있다. 이번 포스팅에서는 Ext.Component 를 상속받은 컴포넌트 그룹중에서도 Navigation Components에 대해서 알아보기로 한다.

서론

Sencha Touch 는 네이티브 앱과 가장 유사한 인터페이스를 생성해주는 것으로 유명하다. 하이브리드 앱을 만들때 사용자의 UX를 무시하지 않는 것이 좋은 접근 방법이다. 하이브리드 앱에서는 기존에는 네이티브 앱에서는 복잡해서 하기 힘들었던 스타일 프로그래밍이 HTML5 + CSS(CSS3)의 조합으로 보다 편리하게 UI의 스타일을 변화 시킬 수 있게 되었다. 이러한 자유로움이 사용자가 지금까지 숙지해온 경험을 혼란으로 만들수도 있다. 가령 back 모양을 변경한다던지, 위치를 상단에서 하단으로 변경한다던지하면 아이폰 사용자는 메뉴를 찾기위해서 혼란스러워 할 수 있다는 의미이다. 이러한 관점에서 네이티브에 가장 가까운 UI를 미리 스타일로 만들어서저 컴포넌트 형식으로 제공해주는 Sencha의 특징을 장점으로 말할 수 있다. 이번 포스팅에서는 그러한 컴포넌트들의 UI를 만들고 뷰를 구성하는 방법에 대해서 설명한다.

서론

Appspresso (앱스프레소)는 하이브리드 앱을 개발할 수 있는 개발 프레임워크이다. 이 말을 잘못 이해해서 앱스프레소가 마치 Xcode나 Adobe Dreamweaver 와 같이 Drag & Drop 으로 UI를 만들고 코드 snippet이 제공된다고 오해하면 안된다. Appspresso는 멀티 디바이스 (현재는 iOS, Android 만 제공한다) 하이브리드 앱 개발을 할 수 있는 SDK 와 WAC, 써드파티 Plugins 들이 포함된 웹 프로그래밍과 네이티브 프로그래밍을 조화롭게 개발할 수 있는 IDE를 제공하는 하이브리드 개발 프레임워크이다.

Appspresso (앱스프레소)는 UI 템플릿을 제공한다. 이 프레임워크에는 Sencha Touch, JQuery Touch, JO 등의 템플릿을 제공하고 있다. 즉, 이렇게 자바스크립트나 HTML5 기반의 라이브러리를 이용해서 UI를 만들 수 있다는 것이다. 그럼 왜 자바스크립트 라이브러리를 사용해야하느냐 의문이 생길 수도 있는데 하이브리드 앱을 정의할 때는 크게 두가지 관점에서 정의를 할 수 있다. 네이티브 앱에 웹 앱이 포함되는 경우와 웹 앱에 네이티브 앱이 포함되는 경우를 말한다. 전자는 흔히 Xcode나 elcipse등 네이티브 코드를 작성하다가 필요한 순간 UIWebView나 android.widget.WebView를 프로그램에 포함시켜(embeded)서 네이티브 코드와 서로 데이터를 주고 받으며 처리한다. 후자는 Appspresso (앱스프레소)와 같은 하이브리드 앱 개발 프레임워크를 이용해서 웹에서 네이티브코드를 호출해서 사용하는 것이다. 전, 후자 모두 각각 장단점이 있다. 전자와 같은 경우는 네이티브코드가 운영되고 있기 때문에 후자보다 자원사용이 효과적이다. 쉽게 말해서 더 빠르다는 것이다. 반면에 디바이스에 각각 독릭접인 UI를 핸들링하기 때문에 실제 공통으로 사용할 수 있는 코드는 embeded되는 웹 속의 적은 코드만 재활용할 수 있게 된다. 즉 개발 비용을 감축시키는데 효과적이지 못하다는 것이다. 반면 후자는 전자보다 공동으로 사용할 수 있는 코드가 상대적으로 많아지게 된다. 동일한 UI를 제공하면(꼭 동일한게 좋은 것은 아니지만, 대부분의 하이브리드 개발자는 혼자힘으로 멀티 디바이스를 감당하기 힘들기 때문에 단일 UI를 개발할거라 생각한다.) 웹으로 작성한 코드는 그대로 사용할 수 있기 때문이다. 다만, 브라우저 자원의 한계 때문에 네이티브 코드보다 성는이 낮다는 약점이 있다. 하이브리드 앱 개발자는 이 두가지의 trade off를 잘 이해하고 접목해야할 것이다. 후자와 같이 개발하면서 네이티브와 비슷한 액션 게임을 만들려고하는 개발자가 있을 수 있을까? 물론 그런 시도도 여러군데서 많이 하고 있지만 아직까지 디바이스의 물리적 제한때문에 별로 추천하고 싶지 않는 방법이다. 상황에 맞게 가장 적합한 개발 모델을 도입하는게 개발비용대 효과를 얻을 수 있을 것이라 생각된다.