센차터치 2.0에서 새로워진 점

한국센차유저그룹 번역팀

번역 : 정건우 [Gunwooj@me.com]

교정 : 윤가희 [a5312559@facebook.com]

원문 : http://docs.sencha.com/touch/2-0/#!/guide/whats_new

다음은 이전 버전과 달라진 센차터치 2.0의 새로운 기능과 목록이다.

참고: 이 가이드는 작성 진행 중이며 새로운 센차터치2 기능이 완전히 적용되지 않았다. 업데이트를 자주 확인해야 한다. 센차터치 2는 현재 개발자 프리뷰 버전이다. 버그나 누락된 기능 및 불완전한 문서가 있을 수 있다.

센차터치 2에 온 것을 환영한다.

센차터치는 최초의 HTML5 모바일 프레임 워크이며 2.0에 가장 중요한 업데이트가 포함 되었다. 이번 버전은 성능에 가장 초첨을 두었다. 애플리케이션을 보다 많은 장비에서 빠르게 실행할 수 있다. 애플리케이션 시작이 빨라졌으며, 보다 신속하게 초기 렌더링과 레이아웃을 제공하고, 장치가 회전하면 즉시 화면을 전환하여 배치한다. 다음은 그 외 개선된 중요한 사항 이다:

  1. 각 플랫폼에 최적화된 새로운 스크롤러 - 안드로이드 장치에서 특히 빨라졌으며, 렌더링 프로세스가 최적화 되었고 기존의 컴포넌트를 재 사용하기 위해 인스턴스를 유지할 수 있는 혁신적인 기술을 사용.
  2. EXT JS 4의 혁신적인 새로운 고급 클래스 시스템, 컴포넌트 재사용과 향상된 기능의 응용 프로그램 아키텍처를 많이 포함.
  3. 강력한 플랫폼 - 장치들의 종류가 광범위하게 늘어났지만 WebKit이 강하고 가벼워지면서 더 많은 장치들을 지원.

센차터치2.0와 함께 소개된 기타 향상된 기능에 대해 자세히 살펴볼 것이다.

작고 빠른 레이아웃 엔진

센차터치는 장치 형태와 크기의 다양한 애플리케이션을 쉽게 배치하기 위해 만들어져 매우 유연한 레이아웃 시스템을 제공한다. 버전 2는 브라우저의 최적화된 CSS 엔진과 같이 더 많은 요소를 실행할 수 있는 레이아웃 엔진을 제공한다. 그 결과 다음과 같이 몇 가지 주요 분야에서 성능이 매우 향상 되었다:

  1. 애플리케이션 렌더링 및 시작 시 빠른 화면 배치
  2. 센차터치 1.x보다 애플리케이션에서 장치를 회전 하면 화면을 훨씬 빠른 업데이트
  3. 작아진 레이아웃 엔진과 빠른 다운로드

센차터치 1의 모든 레이아웃 구성 옵션은 코드 라인을 변경하지 않아도 새 레이아웃 엔진과 일을 계속할 수 있다.

그 결과 보드가 교차할 때의 성능이 크게 향상 되었다. 앱을 항상 빠르게 탐색 하는 중에도 팝업 창이 매우 빠르게 뜨며, 유연한 경험을 더욱 많이 제공해준다. 다음은 Kitchen Sink의 버튼 예제이며 1.x은 2.x보다 매 순간마다 실행 속도가 둔화됨을 볼 수 있다. 새 레이아웃 엔진이 빠르므로 고속 카메라 도구를 사용하여 측정 하였다:

강하고 똑똑한 Core

이젠 EXT JS 4에서 다음과 같이 새로운 혁신적 요소를 센차터치 빌드로 가져왔다. 다음은 EXT JS와 센차터치 개발 환경을 공유할 때의 장점이다:

  1. 동적 로딩과 상속을 지원하는 업그레이드 된 클래스 시스템
  2. Core 구조와 같은 클래스 구성 지원 - getters와 setters을 제공하는 자유롭지만 깔끔한 일관된 API

빨라진 시작 시간

1.x에선 응용 프로그램의 시작 시간이 만족스럽지 못하였으나, 가능한 데까지 모두 최적화 하여 지금은 싱크대 예제를 테스트할 때 기기의 시작 시간 범위를 25% 10% 사이로 개선한 것으로 보고 있다. 아래 애플리케이션에서 매우 큰 프레임 워크의 컴포넌트를 대부분 테스트 해보았다. 많은 장치에서 거의 두 배 빠르게 2.x가 로드 됨을 확인 할 수 있다:

앱과 클래스 시스템

센차터치2는 EXT JS 4의 새롭고 강력한 클래스 시스템을 사용한다. 동적 로딩을 포함한 클래스, mixins, 구성, 그리고 기타 여러 기능을 포함한 고급 빌드로써 새로운 엔진에 여러 이점을 제공한다. 자세한 내용을 파악하려면 센차터치 2 클래스 이용 방법 가이드를 참조한다.

또한 EXT JS 4 애플리케이션의 아키텍처를 가져 왔으며, ComponentQuery와 빌드 제작을 지원한다. 개발자 베타 릴리즈는 아직 끝나지 않았으며 모델 뷰 컨트롤러 패키지(MVC)와 함께 deep linking / 프리뷰의 히스토리 지원과 같이 예정된 베타 기능을 추가될 것이다.

환경설정 기반 컴포넌트

새 클래스 시스템의 장점 중 하나는 'configs'을 설정하는 기능이다 - 자동 getter 및 setter 기능과 디폴트 값 등을 부여하는 속성이다.

센차터치2의 프레임 워크에 전체에서 config 시스템을 사용한다. 알다시피 config가 보일 때마다 언제든지 클래스에 reconfigure(내용 변경 - 렌더링 이후에도 가능)할 수 있다. config's Setter 와 같은 패턴처럼 더 좋은 이름의 함수 호출 방식을 항상 준수한다.

다음은, label을 나중에 쉽게 변경해 줄 수 있도록 Text Field를 초기화 하는 예제이다:


var text = Ext.create('Ext.form.Text', {
label: 'My Field'
});

//setter 함수를 가지고 언제나 환경설정을 할 수 있다.
//이름은 항상 setConfigName 패턴을 따른다.
text.setLabel('Another Field');

Configs를 쓰는 주된 이유는 클래스에게 매우 깔끔한 API를 제공하기 때문이다. API 문서에서 클래스에 대한 'Config options’'을 보면 True 설정은 표준화 된 Getter 와 Setter 기능을 갖추고 있다.

새로운 기능의 모든 개요는 클래스 시스템 가이드를 참조.

향상된 MVC 기능

센차터치 1은 MVC (모델 뷰 컨트롤러) 구조를 따라 응용프로그램을 간단히 구성하는 방법을 써왔다. 센차터치2는 히스토리 지원, 새로운 방법의 컴포넌트 제어, 서로 다른 화면 크기에서 응용프로그램을 사용자에게 맞추는 등의 강력한 방법을 통합하고 향상 시켰다.

데이터 패키지는 성능을 개선하였고 훨씬 더 유연한 제작을 지원한다, form에 새 클래스 시스템을 장착 할 수 있다. 센차터치2 개선된 MVC 대한 전체 개요는 다음 가이드를 참조:

  1. 애플리케이션 개론
  2. 프로필
  3. 컨트롤러
  4. 기록 지원

향상된 안드로이드 지원

특히 안드로이드에서 센차터치2 스크롤 애니메이션의 성능이 크게 향상 되었다. 안드로이드 장치에서 센차터치 1.x의 큰 목록은 스크롤이 눈에 띄게 느려진다. 애니메이션이 자주 끊어질 수 있으며 이상한 결과물이 보일 수 있다.

터치 2는 안드로이드에게 부드러운 스크롤과 유동적인 고속 애니메이션을 모두 지원하기 위해 자체적으로 최적화된 메커니즘을 제공한다. 이번 SenchaCon 이후로도 나중에 기술적으로 더 진척될 것 이지만, 안드로이드 장치에서 2.x이 얼마나 빨라 졌는지, 모토로라 Atrix로 바로 확인해보자:

네이티브 패키징

센차터치 애플리케이션을 개발하는 개발자들의 가장 흔한 고민이, "나의 앱을 고객들에게 어떻게 노출되게 할 수 있을까?" 이다. 다양한 방법들이 있지만, 고객들과 개발자들의 요구 사항에 따라 웹으로 앱이 빌드 되고 배포될 지가 결정된다. 그 외에 가장 빠르게 고객에게 접근하는 길은 앱 장터 에서 앱을 내려받는 방식이다.

센차터치2는 안드로이드 마켓과 iOS 앱스토어 모두에 애플리케이션을 빌드하고 배포하기가 매우 쉽다. 이제는 센차터치2 프리뷰와 함께, SDK 도구 2.0 개발자 프리뷰를 출시하고. 새로운 SDK 도구는 새로운 센차 패키지에 포함하여 센차터치 애플리케이션을 가지고 iOS이나 안드로이드의 APK를 위한 앱으로 포장 할 수 있도록 명령할 수 있다. 특정 마켓에 종속되지 않게 배포를 준비하는 것은 쉬운 일이 아니다.

packager에선 애플의 SDK를 다운로드하지 않고도 iOS로 앱을 포장 해주기 때문에 네이티브 SDK를 요구하지 않아, 개발자의 활동이 더 편해지게 된다. SDK 도구를 다운로드하면 빌드할 준비가 된 것이다. 안드로이드로 배포하는 경우 구글에서 안드로이드 SDK를 다운로드해야 한다. 개발자들을 위한 네이티브 SDKs가 있으며, 앱을 iOS와 안드로이드의 에뮬레이터에 바로 넣어 앱이 장치에서 어떻게 실행되는지 볼 수 있는 sdk 도구를 지원한다.

SDK Tools 개발자 프리뷰는 이제 맥 OS X에서 사용할 수 있으며, Windows 및 Linux 지원은 곧 추가된다. 또한 카메라나 타인 연결 기능처럼 네이티브 기술을 쉽게 사용할 수 있는 장치 API가 추가된다. 새로운 패키징 기능 사용 방법에 대한 모든 세부 사항은 Mac에서 iOS를 위한 네이티브 패키징네이티브 안드로이드 패키징 문서에서 볼 수 있다. 이젠 네이티브 배포를 목적으로 하여 웹 앱을 빌드하여 포장하는 것이 매우 간단해 졌다.

철저한 문서도구

API 레퍼런스에 들어있는 뛰어난 기능의 센차터치2 문서 정의는 모든 클래스를 광범위하게 사용 하였다. 브라우저에서 바로 실행되는 라이브 예제 수십 가지가 클래스 문서 마다 있고 예제 코드를 바로 볼 수 있다(수정도 가능하다). 또한 API 문서에 각 컴포넌트에 대한 SASS 변수를 모두 가져 왔으며, 훨씬 쉽게 진행할 수 있도록 정의 되었다.

11가지의 새로운 가이드 박스를 추가하였다. 레이아웃, 컴포넌트 및 클래스, 다른 것을 감출 수 있는 탭 패널과 같은 컴포넌트 사용 방법, forms, 및 carousels, 그리고 시작 가이드를 통해 첫 번째 앱을 구축 할 수 있도록 하였다.