서론

Sencha는 다양한 컴포넌트를 미리 제공하기 때문에 모바일 앱을 웹으로 만들어도 어색하지 않다는 것을 우리는 이전 포스팅의 예제를 직접 테스트하면서 알게되었다. 뷰를 구성하는 Ext.Container를 상속받은 컴포넌트들을 조합하면 UI를 효율적으로 개발할 수 있다는 것도 알게 되었다. 이 포스팅은 Sencha Touch 2의 뷰를 구성하는 포스팅의 마지막으로 General Components에 대해서 살펴볼 것이다.

우리는 Sencha Touch의 중요한 component를 대부분 실습해보았는데, 몇가지 정말 중요한 컴포넌트를 살펴보지 않았다. 그 중에서 하나가 바로 탭 기능을 하는 것이다. iOS에서는 TabBarController이고 Android에서는 TabHost라고 불려지는 것은 여러개의 ViewController나 Activity를 탭을 누를 때마다 변환하면서 선택한 것을 보여주는 기능을 하는 것인데, Sencha에서는 이러한 기능을 Ext.tab.Panel을 이용해서 구현할 수 있다.

서론

iOS 앱을 만들때 개발자에게 즐거움을 주는 이유는 이미 로직, 뷰, 컨트롤러 모두 모듈화하여 두었고, 복잡한 에니메이션과 같은 기능을 구현해 두었기 때문이다. 안드로이드 개발자역시 안드로이드의 widget이 이미 기본적으로 구현되어 있기 때문에 하드코딩을 하지 않고 새로운 인텐트를 추가하고 다른 엑티비티로 이동하거나 돌아올 수 있기 때문에 간단하게 네비게이션을 구현할 수 있다. 그런데 만약 이러한 에니메이션, 로직, 컨트롤러가 없다면 개발자들은 개발하는데 많이 힘들었을 것 같다.

Appspresso (앱스프레소)에서는 기본적으로 UI 프레임워크를 지원하고 있지 않다. 이젠 앱스프레소가 하이브리드 개발 프레임워크라는 것을 모두 인지하고 있을 것이라 생각한다. 앱스프레소에서는 자체 UI 프레임워크를 지원하고 있지 않지만 HTML, CSS, Javascript(또는 HTML5) 기반의 UI 프레임워크를 가져와서 UI 프레임워크로 사용하면 된다는 것을 Appspresso를 사용하여 하이브리드앱 개발하기 - 10.Sencha 뷰 추가하기 글에서 우리는 알아보았다. 현재 존재하는 많은 자바스크립트 UI 프레임워크에서 우리는 Sencha Touch 2를 가지고 UI를 구성하고 있다. 물론 다른 자바스크립트 UI도 훌륭하지만 Sencha의 네이티브 앱과 동일한 UI 지원과 MVC 개발패턴을 사용할 수 있다는 강점을 이용하기 위해서 도입하기로 했다. 우리는 이제 Sencha로 네이티브 앱에서 동작하는 뷰 컨트롤러와 뷰 컨트롤러의 이동을 구현하는 방법에 대해서 알아 보기로 할 것이다. 네이티브 앱에서는 ViewController를 이동하거나 Intent를 만들어서 Activity를 이동한다거나 하는 명칭을 사용하지만 제목에 Sencha는 View 이동이라고 하였다. 이유는 Sencha 의 구성이 ViewController에 view 와 controller가 포함되는 것이 아니라, View의 구성과 Conroller의 구성이 나누어져 있기 때문이다.

Sencha의 컴포넌트로 View를 구성하는 방법은 Sencha Touch 2 (센차터치)를 이용한 웹앱 개발 - 3. 뷰(View) 구성 - 컴포넌트 생성,구성, Sencha Touch 2 (센차터치)를 이용한 웹앱 개발 - 4. 뷰(View) 구성 - Navigation Components 글과 Sencha Touch 2 (센차터치)를 이용한 웹앱 개발 - 5. 뷰(View) 구성 - Store-bound components (리스트 뷰) 를 먼저 살펴보고 이해하길 바란다.

서론

하이브리드 앱의 큰 강점은 바로 HTML 의 속성을 사용할 수 있다는 것이다. 이말은 다시 말해서 네이티브 코드로 만들기 어려운 HTML에서 제공하는 UI 또는 CSS 스타일을 사용할 수 있다는 것이다. 실제 네티티브 라이브러리보다 웹 오픈 소스 UI가 더 많다는 장점을 바로 사용할 수 있다. Sencha는 이러한 HTML의 form을 사용할 수 있는데 이것을 이용해서 뷰를 구성하는데 편리함을 제공하고 있다. 이번 포스팅에는 Sencha Touch의 Form components를 살펴보자.

서론

Appspresso를 사용해서 하는 하이브리드 앱 개발은 대부분 디바이스 없이 진행 될거라고 예상이 된다. Xcode의 console이나 Android의 logcat 등으로 디버깅을 할 수 없기 때문에 유일하게 디버깅할 수 있는 것이 Appspresso의 on the fly이다. 다행이 Appsrpess 1.1 부터는 크롬 브라우저의 확장으로 ADE(Appspresso Debugging Extension)을 사용할 수 있지만 이것 역시 web inspector로 웹의 자원만 디버깅 할 수 있다. UI Framework 테스트를 하기 위해서 Sencha 2 touch를 시뮬레이터에서 테스트를 하고 실제 단말기로 로드했는데 시뮬레이터에서는 이상 없었던 버턴 이미지가 최초 로드가 늦게 되어서 찌그러지는 것을 확인할 수 있었다. 이렇게 단말기는 시뮬레이터와 메모리도 다리그 프로세서도 차이가 많이 나기 때문에 반드시 디바이스에 설치해서 동작하는 것을 확인 해야만 한다. 아쉽게 Appspresso에서 네이티브 레벨의 디바이스 디버깅은 될 수 없는 것 같다.

그럼 Xcode를 사용하지 않는데 어떻게 앱을 디바이스로 설치할 수 있을까? Appspresso는 eclipse 기반으로 만들어져있기 때문에 android 앱을 android 디바이스로 설치하는데 큰 어려움이 없지만 iOS 디바이스는 상황이 좀 다른다. iOS는 Xcode를 가지고 개발할 수 있기 때문에 Xcode 없이 iOS 디바이스로 앱을 빌드하여 런칭시키는 것이 어렵기 때문이다. Appspresso에 내부적으로 command line tool을 이용해서 .ipa (DRM이 되어 있는 iPhone App) 파일을 빌드하여 iTunes에 추가하여 iPhone과 자동 동기화를 실행하여 iPhone으로 설치하는 과정으로 처리한다.

Appspresso Studio

Appspresso Studio(앱스프레소 스튜디오)는 이큽립스 기반의 하이브리드 앱 개발에 필요한 SDK를 포함한 IDE 이다. 이클립스 기반이라는 말은 JRE를 이용하고 Java VM 위에서 동작하는 IDE라는 말이다.