모바일 프레임워크

모바일 2011. 7. 5. 16:37


SENCHA TOUCH - 네이티브처럼 보이는 웹앱 프래임워크
http://www.sencha.com/products/touch/
http://dev.sencha.com/deploy/touch/examples/kitchensink/ (크롬, 사파리)
장점 : 다양한 UI와 훌륭한 성능과 기능을 보입니다. 하단 탭바 형태를 기본으로 지원합니다.

특정영역 스크롤 기능을 내장합니다(iscroll과 같이). zoom, pinch 기능을 제공합니다.
단점 : 아이폰에서 돌린다해도 기본 로딩시간이 깁니다. 모두 JS를 돌아가기 때문에 브라우저의 back 버튼을 지원하지 않습니다.

안드로이드에서 화면전환 번쩍거림이 있습니다. ExtJS 라이브러리 중심으로 구성되어 EXTJS를 능통자가 아니면 매우 어렵다고 합니다.

라이센는 소스를 공개할 경우 상업적으로 이용가능하다고 합니다.


Android/iOS계열/블랙베리 지원

 

Sencha Touch - ExtJS를 기반으로 jQTouch, Raphael이 결합된 프레임워크
- ExtJS는 대화명 웹 어플리케이션 제작을 위한 자바스크립트 라이브러리로 AJAX, DHTML, DOM 등을 사용한다.
- jQTouch는 오픈 소스 jQuery 플러그인의 하나로 HTML, CSS, Javascript 등을 사용하여 Touch UI를 강화하는 기능을 한다.
- Raphael은 SVG(Scalable Vector Graphic, 2D 벡터 그래픽 지원을 위한 XML 기반의 파일 형식)를 지원한다.
- 자료를 주고 받는 방식으로는 key와 Value 구조를 가진 JSON(JavaScript Object Notation)을 사용한다.


 

 

JQUERY MOBILE - 터치에 최적화된 웹 프래임워크
http://jquerymobile.com/
http://jquerymobile.com/demos/1.0b1pre/ (익스, 크롬, 사파리, 오페라, 파폭)
장점 : HTML 중심의 마크업 언어라서 기존에 개발하던대로 바로 개발할 수 있습니다. 그럭저럭 괜찮은 기능들을 제공합니다(아이폰만).
단점 : 하단 탭바를 지원하지 않습니다. 특정영역 스크롤 기능이 없습니다. 아직까진 알파버전이라 버그가 많고 정식 공개되지 않았습니다. (베타 출시예정) 안드로이드에서 깜빡임 현상이 있습니다.

게시판용이나 화면뷰만을 위한것으로는 추천하고 가장 많이 쓰인다고 합니다.

 

Android/iOS계열/블랙베리/심비안/Palm WebOS/Windows Mobile/Opera Mobile/Firefox Mobile 지원
(베타 버전에서는 Window Phone7까지도 지원하겠다고 하고, 삼성의 bada또한 테스트계획이 있다고 합니다.)

http://brooky.cc/2011/04/23/jquery-mobile-cheat-sheet/ - jQuery mobile cheat sheet

 


JQUERY MOBILE과 SENCHA 둘다 아이폰은 어떤 프레임웍을 사용해도 모두 잘 돌아가는데 안드로이드에서는 문제가 많다고합니다..
대체로 아이폰을 위한것이고 안드로이드를 위한 하이브리드 프레임웍은 제대로 나온 것이 없다고합니다.
프레임워크 없이 그냥 html5, css3로만 사용해도 안드로이드에서는 문제가 많이 발생하고 폰마다 차이가 심합니다.

 

 

jqtouch - SENCHA에 인수되서 개발중단되었습니다.
http://www.jqtouch.com/
http://www.jqtouch.com/preview/demos/main/ (크롭, 사파리, 오페라, 파폭)
장점 : jQuery의 모바일용 플러그인으로 SENCHA와 JQM 보다는 가볍습니다. 참고자료가 가장 다양합니다.
단점 : 개발중단. 가볍다고는 해도 역시 안드로이드에선 버그가 많다고..

 

 


jquery, 제이슨 등의 자바스크립트 라이브러리는 무겁고 지원하는 라이브러리가 폰의 브라우저 마다 상이하기 때문에 사용을 지양합니다.
필요한js는 가급적 그때그때 코딩하는 편이 사용자 측면에서 유리하고 불필요한 UI 용 js 는 지양해야 합니다. DOM 객체를 이용한 표준 스크립트 사용을 권장합니다.
table 코딩시 마크업페이지 용량이 증가하며, 비표준이므로 지양합니다. 가급적 맞는 태그 사용을 하셔야 렌더링 속도가 빨라지며 용량 감소 및 유지관리가 편해 집니다.

 

 

==참고 페이지========================================================================================
http://openweb.or.kr/?p=1703                                               웹앱 추천게시글 _ 09년 12월 게시
http://lifehack.kr/90097555023                                               디자인 포인트 7 _ 10년 10월 게시
http://www.imaso.co.kr/?doc=bbs/gnuboard.php&bo_table=article&wr_id=36538 마소 센차터치 소개칼럼 _ 10년 12월 게시
http://w3labs.kr/?p=326                                                        jQuery Mobile 과 Sencha Touch 비교 게시글 _ 11년 3월 게시
http://www.w3c.or.kr/Translation/mwbp_flip_cards/               모바일화를 위한 10가지 가이드
http://www.slideshare.net/guruguru/html5-on-mobile              HTML5 on Mobile _ 10년 7월 게시
http://www.slideshare.net/guruguru/2011-web-technologies   웹&모바일 기술전망 2011 _ 11년 2월 게시

 

== 정의 ============================================================================================
모바일 웹
브라우저에서만 실행이 되고 가장 일반적인 웹

 

네이티브앱
응용프로그램을 폰으로 다운받아서 설치하여 사용하는 어플

 

웹앱
웹앱은 만드는것은 모바일 웹과 같다고 보시면 됩니다. 여기에서 웹을 실행하는 방법이 다르다고 생각하시면 될듯합니다.

예를 들어 아이폰 같은 경우 브라우저에서 웹을 보시면서 홈으로 가기 버튼을 만들수 있습니다.

거기서 홈으로 가기 버튼을 누르고 바로가기 버튼을 만들게 되면, 실제로 만들어진 것은 웹이지만 실행하는 것은 앱과 같은 방식이 되게 됩니다.
여기서 일반 앱(네이티브 앱)과 다른 점이 연락처, 메일, 문자보내기등 Device의 기능을 사용하지 못하는 것이 가장 큰 차이점입니다.

 

하이브리드 앱 (적용 사이트 m.gsshop.com)
웹표준을 준수한 모바일 웹을 만든 이후에 앱에 연동하는 형태로,
어플을 다운받거나 도메인을 입력해 접속해도 동일한 형태의 모바일 페이지를 볼 수 있습니다.

Javascript, CSS, Html로 개발을 하지만 웹앱의 단점인 Device의 기능을 Appspresso의 프레임 워크를 이용하여 사용합니다.
꼭 앱내에 폰갭이나 에스프레스를 이용하여 html, css, js를 심으실 필요는 없고 앱에 웹뷰를 설치하고 디폴트 주소설정을 원하는 url로 해도된다고 합니다.
1. 앱내에 심을 경우
- 이미지, HTML, CSS등이 자체내에 심어져 있어 로딩속도가 빠릅니다.
- 수정변경 사항이 발생시 앱 업데이트를 통해 진행해야 하므로 즉시성이 떨어진다.
- 확장성이 약하다.(앱내 삽입이므로)
2. 서버호출의 경우
- 3G망이 점점더 과부하 상태가 지속되는 상황에서 로딩속도가 느리다.
- 수정변경 사항 발생시 앱 업데이트 없이 자체 html등 수정으로 즉시 처리가 가능하다.
- 앱과 별도로 서버에서 수정이 가능하므로 확장성이 강하다.



출처: http://blog.naver.com/rasany/40130027896

: