Sencha Touch ( 센차터치 ) 의 주요 컴포넌트 예제들을 소개합니다...

개발 이야기/Sencha 정보 2013. 5. 1. 23:44
Sencha Touch ( 센차터치 ) 의 주요 컴포넌트 예제들을 소개합니다...

Sencha ExtJS는 센차에서 개발한 Framework 로서, 웹사이트를 쉽고, 이뿌게 꾸밀 수 있게 개발할 수 있습니다. 이것은 PC환경의 브라우저에 최적화되어 있기 때문에 모바일환경에서 모두 지원할 수 없으며, 최적화되지 않았죠. 아이폰이 나오고 스마트폰 열풍이 불면서 기능이 단순화되고, 작은 패널에 최적화될 수 있는 프레임워크가 필요하게 되었고, Sencha Touch 라는 Web App Framework 를 개발하게 되었죠. Sencha Touch 는 PC환경과 크게 다른 것이 있다면 Touch 이벤트가 있다는 것입니다. 스마트폰이기 때문에 당연한 것이겠죠? 그러면 Sencha Touch 에서 개발할 수 있는 컴포넌트에 대해서 살펴보도록 하겠습니다.


■ Audio Component



Audio Component 는 어려운 객체는 아닙니다. 그냥 음악 파일을 재생할 수 있게 도와주는 것입니다. HTML5만으로도 간단하게 만들 수 있을 정도로 간단하게 구현이 되죠. 3가지 타입이 있으며, 각자 입맛에 맛게 선택하시면 됩니다.


■ Carousel Component



Carousel의 뜻은 수하물 컨베이어 벨트 라는 뜻을 가지고 있는데요. 꼭 사진이 아니라 화면 단위로도 개발이 가능한데요. Card Layout 처럼 터치 슬라이드를 통해 계속해서 다른 이미지, 화면을 보여주는 것이 특징입니다. 화면에 보이는 이미지 이외는 화면 밖에 표현이 되어 있다가 터치 슬라이드 이벤트를 통해서 화면에 계속적으로 보여지게 됩니다. 보통 웹에서는 많은 이미지를 한번에 보여줄 수 있는 공간이 있지만, 모바일은 그렇지 못하기 때문에 이러한 컴포넌트를 이용해서 여러 이미지, 화면을 보여줄 수 있습니다. 발상의 전환으로 보여주는 방식을 달리 한 것이죠.


■ Forms Component



Forms Component는 보여지는 것과 같이 Form을 작성하는 것입니다. 단순하지만, 이뿌게 만들어진 UI 로 모바일에 최적화되어 있습니다. 콤보박스, 텍스트박스, 버튼 등 여러가지 객체들을 폼에 모아서 사용하는 것이죠.


■ Icons Component



Sencha Touch의 경우 여러가지 Icon들을 제공하고 있는데요. PNG 이미지로 되어 있으며, 투명처리 되어 배경색과 조화를 이루면서 깨끗하게 표현할 수 있는 것이 장점입니다. 이러한 이미지는 Sencha Touch Framework 에 포함되어 있어서 표시하는 방법은 img 태그를 쓰는 것과는 차별성이 있습니다. 더 쉽게 표현할 수 있죠. ^^


■ List Component



List Component의 경우는 보는 것과 같이 리스트 형식으로 표시하는 방식인데요. 간단한 속성을 지정함으로써 마지막에 화살표 표시도 표시할 수 있으며, ABCD... 인덱싱 기능도 사용할 수 있습니다. List Component도 객체이기 때문에 각 Row 별로 Touch 이벤트를 통해서 또 다른 Component 를 불러내거나 화면을 표시할 수 있습니다.



■ Maps Component



Maps Component 는 이미지에서 보는 것과 같이 지도를 표시해주는 기능인데요. 구글 지도와 기본적으로 연동되게 됩니다. 간단하게 객체를 생성함으로써 지도를 표시할 수 있는 것이 장점이죠.


■ Navigation View Component



Navigation View Component는 Card Layout 방식으로 구현이 되며, Carousel이 터치 슬라이드 이벤트를 통해서 여러 이미지를 보여줬다면, Navigation View Component는 Touch(=Click) 이벤트를 통해서 연관된 화면을 호출 할 수 있는 것이 특징입니다. Back 버튼을 터치하게 되면, 이 화면을 호출하기 전의 화면으로 다시 돌아가는데요. 이래서 아마 네비게이션 뷰라고 이름을 짓지 않았나 생각됩니다.


■ Nested List Component



Nested List Component는 리스트 컴포넌트에서 조금 특이하게 발전된 형태인데요. A → B → C → D 로 이어지는 리스트가 계속 나타나게 되죠. 리스트와 비슷한 개념이라고 생각하시면 됩니다. 어떻게 구성하느냐에 따라서 자유스럽게 선택하시면 됩니다.


■ Overlays Component



Overlays Component는 버튼을 눌렀을 때 나오는 팝업과 비슷한 개념이라고 생각하면 되겠는데요. 텍스트나 이미지, 객체를 보여주긴 하지만, Overlays Component 이외의 영역을 클릭하면 사라지는 특징이 있습니다.


■ Picker Component



Picker Component는 특히 아이폰에서 자주 봤던 기능이죠. 콤보박스로 입력하는 웹사이트와 달리 터치로 구동되는 스마트폰의 특징을 반영해서 위로 올려서 값을 선택하게 하는 기능입니다. 아주 편리하죠... ^^


■ Search List Component



Search List Component 는 리스트 컴포넌트를 확장시킨 것으로 리스트와 검색 기능이 합해졌다고 간단하게 생각하시면 되겠네요.


■ Tabbar Component



Tabbar Component 는 여러개의 Tab 을 선택할 수 있으며, 각각의 Tab 에 화면을 생성하여 보여주는 것이 특징이죠. 단점은 하나의 탭에 하나의 화면을 꼭 1:1 매칭을 해야 한다는 점인데요. 개발하다 보면 조금 불편한 점이 있긴 하지만, 꼭 화면을 늘일 필요가 없을 때는 편리한 컴포넌트이죠.


■ Toolbar Component



Toolbar Component는 파란색 Toolbar 한줄로 표현되며, 이 파란색 공간에 여러가지 버튼, 타이틀 객체를 올려둠으로서 간단하게 UI적으로 이뿌면서도 편리한 기능으로 구현할 수 있습니다.


■ Video Component



Video Component는 동영상을 재생할 수 있는 컴포넌트입니다. 오디오 컴포넌트와 비슷한 기능으로서 음악이 아닌 동영상을 재생할 수 있는 기능이 있습니다. HTML5 로도 쉽게 구현되는 기능으로 그리 복잡하지는 않습니다.


■ Pull to Refresh Plugins



Pull to Refresh Plugins 의 경우 Sencha Touch 2.0부터 적용된 플로그인으로서 facebook 에서 많이 사용하는 기능이죠. 젤 상단에서 또 한번 아래로 터치 슬라이드를 할 경우 정보를 새로고침 하는 기능인데요. 이것을 HTML5, Javascript 로 구현하려고 한다면 간단하게 구현되지는 않을 것 같네요...


■ 소개를 마치며...

지금까지 Sencha Touch 의 주요 Component 들을 살펴보았는데요. 여러가지 Sencha Touch 에서 제공하는 Component를 이용해서 간단하게 모바일 Web App 을 생성할 수 있습니다. Sencha Touch 의 장점이라면 HTML5, CSS3, Javascript 로 만든 Framework 이기 때문에 웹으로 구현되므로 여러 OS, 장비에 구속되지 않고 비슷하게 표현되어 진다는 것이죠. 그리고 App으로도 생성할 수 있기 때문에 너무나 좋은 Web App Framework 입니다. 하지만, 작성하는 방식이 JSON 방식으로 개발하기 때문에 어느 정도 익숙해지려면 시간이 좀 필요하다는 것이 단점입니다. 


이상, 센차마루였습니다.



설정

트랙백

댓글

Sencha 2.2 버전이 발표되다... 속도적인 개선이 이루어진 기능개선...

개발 이야기/Sencha 정보 2013. 4. 30. 23:33
Sencha 2.2 버전이 발표되다... 속도적인 개선이 이루어진 기능개선...

 

 

Sencha 는 HTML5 Web App Framework 을 만든 회사로 Web 환경으로 개발이 가능하지만, 보이는 모습은 App 처럼 보이게 하는 기술을 가지고 있습니다. 그 대표적인 Framework 가 Sencha Touch 라는 것인데요. 모바일 전용으로 작성된 Framework 로서 Javascript 의 객체 개념을 잘 정리해서 모바일에 최적화되게 개발할 수 있는 언어입니니다.

 

■ Sencha Touch 1.1

Sencha Touch 1.1 의 경우 많은 이슈를 가지고 회사의 경우 유료로 배포했던 버전인데요. 2년전만 해도 획기적인 스타일로 주목을 받았던 기술이었죠. jQuery Mobile 기술도 함께 발전하고 있었지만, HTML 코드와 별개로 개발할 수 있고, MVC 스타일로 개발할 수 있는 것으로 많은 관심을 받았었지만, 초기 개발비용이 많이 든다는 단점이 있었습니다.

 

■ Sencha Touch 2.0

Sencha Touch 1.1 버전의 문제점을 최대한 반영해서 더 확실한 MVC 패턴을 적용했으며, 무조건 Framework 모든 소스를 로딩하는 단점을 개선하여, 동적으로 필요한 부분만 로딩하는 시스템으로 발전하였습니다. 그리고 Web 환경으로서 속도에 민감하지 않을 수가 없는데, 속도적인 측면에서 많은 발전이 이루어진 부분입니다. 하지만, 안드로이드 웹앱 기술력이 많이 발전하지 않은 탓으로 속도적인 이슈는 어느 정도 많이 있었습니다.

 

■ 현재 Sencah Touch 2.2

솔직히 2.2는 사용해보지 않았지만, 1.x → 2.x 로 넘어가는 단계는 개발 패턴이 획기적으로 바뀔 때 버전 업을 하는데요. 2.x 로 버전이 올라가는 경우는 많은 기능상의 개선이 이루어졌을 때 이루어지죠. 속도적인 부분이 많이 개선되었다고 하는데, 아마도 안드로이드 기술력과 하드웨어 스펙 등이 개선되어 더욱 더 확실한 개선이 이루어진 모습입니다.

 

이상, 센차마루였습니다.

 

 

설정

트랙백

댓글