HTML5를 활용한 하이브리드 앱개발하기

HTML5를 활용한 하이브리드 앱 개발하기

발표자 : 황정현

2011년 7월 7일 목요일

HYBRID?

Convert WebApp to Native App

원래 이질적인 요소가 서로 섞인 것으로 이종(異種), 혼합, 혼성, 혼혈이라는 의미를 지닌다. 보다 넓은 의미로는 이종을 결합, 부가가치를 높인 새로운 무엇인가(시장이나 영역 등)를 창조하는 통합 코드로 인식되고 있다. 휴대폰에 전화통화 기능과는 전혀 관련성이없어 보이는 카메라, MP3 기능 등을 섞어 휴대폰 가치를 올리는 것과 같은 이치다. 또한 다양성과 다원성으로 해석되기도 한다. 다양성과 다원성이라는 기초 위에서 반대 의견을 포함한 사회의 다양한 목소리를 포용, 통합하는 하이브리드적 접근방식이 정치·사회적 통합 코드로 최근 관심을 모으고 있다.


Native Apps

뛰어난 성능 / 게임훌륭한 UX디바이스의 모든 기능 활용앱스토어 등록으로 인한 판매/광고

개발비용이 많이 든다.개발이 어렵다크로스 플랫폼/디바이스 문제


다양한 플랫폼 동시 지원 - iPhone/iPad/Android/BlackBerry서버 기반 앱으로 빠른 업데이트 가능웹 개발자에게 친숙한 환경 - HTML5, CSS, Javascript 등 수많은 오픈소스 라이브러리HTML5 기술을 이용한 강력한 기능 구현

디바이스 접근 제한속도의 문제크로스 도메인 문제

Web Apps


Native + Web 장점 포함웹 개발자에게 친숙한 환경크로스 플랫폼/디바이스서버기반 개발가능디바이스 기능 활용앱스토어 등록으로 인한 판매/광고 수익

Hybrid Apps

Device OS

Hybrid Framework

Web Browser

Web Applicationcss/js/html


Native App Hybrid App Web App

모바일 디바이스 전용 앱Objective-C, Java, C#XCode, Eclipse, Visual StudioiPhone개발을 위해선 Mac필요앱등록을 위해 연간 99$디바이스의 모든 기능을 활용앱스토어를 통한 판매앱스토어의 경우 업그레이드시 마다 검수실행속도가 빠름

모바일 디바이스에 최적화된 웹사이트HTML, CSS, Javascript기존에 사용하던 웹 개발환경웹표준 컨트롤, JQueryMobile, SenchaTouch디바이스의 거의 모든 기능을 사용가능앱스토어를 통한 판매실행속도가 빠름

모바일 디바이스에 최적화된 웹사이트HTML, CSS, Javascript기존에 사용하던 웹 개발환경웹표준 컨트롤, jQueryMobile, jQTouch...꼭 Mac이 필요하지 않음앱 개발자 등록 필요없음제한적인 디바이스서버에서 즉각 업데이트 가능

Native App vs Hybrid App vs Web App


하이브리드 개발 프레임워크


PhoneGap

Cross Platform Mobile Application Framework

Web App을 Native App으로 패키징

기존 WebApp에서 불가능했던 Device기능들을 javascript를 통해서 접근하도록 가능하게 함

오픈소스 공짜!

http://www.phonegap.com




PhoneGap

PhoneGap framework(Container App)

iOS or Android App Fileresources, CocoaTouch & App Fw

Webkit(UIWebView)

Phonegap.js

applicationcss/js/html

PhoneGap 이 제공하는 부분

개발자가 작성한Web Application


PhoneGap


PhoneGap


PhoneGap


Titanium

http://www.appcelerator.com

Web App을 Native App으로 변환

디바이스 기능을 자체적으로 제공

그네들만의 자바스크립트를 사용


http://www.appcelerator.com/

http://www.appcelerator.com/

Titanium framework

iOS or Android

Bridge - Javascript - java / Javascript - Objective-C

UI API

applicationcss/js/html

Titanium 이 제공하는 부분

개발자가 작성한Web Application

Titanium

Phone API

Optional Modules


Appspresso

http://www.appspresso.com

PhoneGap과 동일하게 Web App을 Native App으로 패키징통합 개발환경 지원, Eclipse IDEKTH에서 만든 유일한 국산 하이브리드 프레임워크원 클릭으로 iOS & Android 앱 빌드


http://www.appspresso.com/

http://www.appspresso.com/

Appspresso

모바일 UI FrameWorkTemplate 제공

Eclips Appspresso Project 생성


Appspresso


모바일 UI Fraemwork


http://jquerymobile.com/

jQuery의 모바일 프레임워크

얼마전 알파딱지를 뗀 현재 Beta버전임

컴포넌트, 레이아웃, 테마 등으로 모바일 웹어플리케이션의 제작과정을 쉽게 도와준다.

거의 모든 모바일 브라우저에서 가동이 된다.

마크업 중심으로 쉽게 개발 가능하다.

모바일 웹을 만들기에 적합하다.





<div data-role="page" id="/main.html"> <div data-role="header" data-position="fixed"> <h1>Main Header</h1> </div> <div data-role="content"> <ul data-role="listview" data-inset="true"> <li><a href="/listContent.html">Acura</a></li> <li><a href="/listContent.html">Audi</a></li> </ul> </div> <div data-role="footer" data-position="fixed"> <div data-role="navbar"> <ul data-inset="true"> <li><a id="main_btn" href="/main.html" data-role="button" data-icon="star" data-iconpos="top">Main</a></li> <li><a id="plus_btn" href="/plus.html" data-role="button" data-icon="plus" data-iconpos="top">Plus</a></li> <li><a id="arrow_btn" href="/arrow.html" data-role="button" data-icon="arrow-d" data-iconpos="top">Arrow</a></li> <li><a id="gear_btn" href="/gear.html" data-role="button" data-icon="gear" data-iconpos="top">Setting</a></li> <li><a id="info_btn" href="/info.html" data-role="button" data-icon="info" data-iconpos="top">Info</a></li> </ul> </div> </div> </div>


Sencha TouchMobile JavaScript Framework

jQueryMobile 보다 강력한 기능을 제공하며 더 앱스러운 기능을 구현 가능하다.

컴포넌트, 레이아웃, 테마 등으로 모바일 웹어플리케이션의 제작과정을 쉽게 도와준다.

특정 모바일 브라우저는 지원되지 않는다.

자바스크립트 기반으로 페이지 구성되며 Ext.js 선행 학습이 필요하며 어렵다.

모바일 웹앱을 만들기에 적합하다.




<script type="text/javascript" src="./js/data.js"></script><script type="text/javascript" src="./js/about.js"></script><script type="text/javascript" src="./js/favorite.js"></script><script type="text/javascript" src="./js/download.js"></script><script type="text/javascript" src="./js/user.js"></script><script type="text/javascript" src="./js/setting.js"></script><script type="text/javascript" src="./js/main.js"></script>

Ext.setup({ tabletStartupScreen: 'tablet_startup.png', phoneStartupScreen: 'phone_startup.png', icon: 'icon.png', glossOnIcon: false, onReady: function() { var panel = new Ext.TabPanel({ tabBar: { dock: 'bottom', ui: 'light', layout: { pack: 'center' } }, fullscreen: true, cardSwitchAnimation: 'slide',//'fade', 'slide', 'flip', 'cube', 'pop', 'wipe' items: [itemlist, favorite, download, setting, user ] }); }});



http://touchsolitaire.mobi/app/


jQueryMobile 표현하기 힘든 UI가능

좌측은 멜론닷컴의 아이패드 버전이며SenchaTouch를 이용하여 구현




DemoMobile Web + PhoneGap

Mobile Web + Appspresso


DemoAppspresso + jQueryMobile


DemoAppspresso + Sencha Touch


DemoAppspresso Device Api


참고자료http://www.phonegap.comhttp://www.appcelerator.comhttp://www.appspresso.comhttp://www.jquerymobile.comhttp://www.sencha.comhttp://www.ibare.kr/talk/358마이크로소프트웨어 잡지








http://www.jquerymobile.com

http://www.jquerymobile.com

http://www.sencha.com

http://www.sencha.com

http://www.ibare.kr/talk/358




Q&A

Technology

HTML5를 활용한 하이브리드 앱개발하기