Sencha Touch Charts

몇 시간전 Sencha Touch 홈페이지에 Charts 항목이 추가 되었다.

Sencha Touch 는 순수 HTML5 기반의 Mobile Framework 이다. 그런데 이 Sencha Touch를 통해 Mobile Device 에서 Chart를 자유롭게 사용 가능해 진 것이다. Sencha 홈페이지에 기제된 내용을 중심으로 정리하도록 한다.

  • URL : http://www.sencha.com/products/touch/charts
  • URL : http://www.sencha.com/blog/introducing-sencha-touch-charts/

Sencha Touch Charts 가 추가 되었다. 단순한 차트 기능이 추가된 정도가 아니다. 그래픽 하드웨어 가속을 받고, Zoom In/Out 등 그동안 Sencha Touch 에서 지원하지 않던 이벤트도 지원하고 있다.(이부분에서 사실 좀 놀라지 않을 수 없다.)
먼저 간단히 실행되는 모습을 보도록 하자.


예제들을 보면 상당히 퀄리티가 높고, Zoom In/Out 이나 애니메이션 효과가 자연스러운 것을 볼 수 있다.

사실 이러한 기능은 ExtJS 4 에 있는 기능들이다. Sencha 에서는 ExtJS 의 강력한 기능들을 Sencha Touch 에서도 이용 할 수 있게 하려고 열심히 노력중이다.(이러한 노력들의 결실로 올해 여름 Sencha Touch 2.0 Preview 가 나올 예정이다)

그런데 문제가 생겼다. ExtJS 에 내장된 Chart 엔진이 SVG/VML 기반이기 때문이다. 데스크탑 환경에서는 잘 실행되는 기술이지만, 특이하게도 모바일 안드로이드 2.x 버전에서 SVG/VML 어느것도 지원하지 않는다.(안드로이드 3.x 에서만 SVG 지원)
그래서 Sencha 에서는 SVG/VML 엔진 기반을 Canvas 기반으로 바꾸어 Sencha Touch Charts 에 적용 하였다.

HTMl5 Canvas 테그를 사용하였다

 

그리고 많은 부분에서 그래픽 하드웨어 가속도 받느다. Chart 의 애니메이션이 부드럽게 보이는 이유이다.

다양한 애니메이션 기능도 포함되었는데 간단히 차트의 종류를 변경하거나 파이차트를 돌리거나 드래그 할 수 있다.

Sench Touch Charts 터치 방식

현재 Beta 버전은 무료로 사용 할 수 있으며, 베타버전 이후에도 GPLv3 라이센스를 통해 무료 이용이 가능하다. 상업적 이용 역시 99$ 로 저렴하다.
올 여름에 Sencha Touch 2.0 Preview 버전이 나온다고 한다. 이번의 Chart 기능과 같이 ExtJS 4 의 강력한 기능들이 대거 Sencha Touch 로 포함 될 것으로 보인다. 기존의 Active-X 기반을 환경을 모바일 오피스 환경 환경으로 옮길 때 챠트 기능이 아쉬운 부분이었는데 이제는 해결 되었다.

곧 선보일 Sencha Touch 2.0 에서는 어떤 기능들을 보여줄지 기대된다.

 

– 미래웹기술연구소 책임연구원 김종광
– Twitter : @jongkwang
– E-Mail : jongkwang@w3labs.kr