HTML5 on

Mobilehttp://xguru.net

권정혁Monday, July 5, 2010

소개• 권정혁

➡ 블로그 - http://xguru.net

➡ 트위터 - @xguru

➡ 이메일 - guru @ xguru.net

Monday, July 5, 2010

Mobile vs. Desktop Internet User

http://www.slideshare.net/fred.zimny/morgan-staneley-internet-trends-ri041210Monday, July 5, 2010

전세계 모바일 OS 점유율

Other1%

webOS1%

WM2%

Blackberry6%

iPhone (iOS)40%

Android26%

Symbian24%

Source : AdMob 2010 May Mobile Metrics Highlights* 실제판매량이 아닌 모바일 페이지 접속 요청수에 의한 분류

Monday, July 5, 2010

왜 HTML5가 모바일에 중요한가 ?

Monday, July 5, 2010

많은 회사들이 각 모바일 플랫폼용 네이티브 앱을 모두 만들기는 어렵다.

왜 HTML5가 모바일에 중요한가 ?

Monday, July 5, 2010

많은 회사들이 각 모바일 플랫폼용 네이티브 앱을 모두 만들기는 어렵다.

Even Google was not rich enough to support all of the different mobile platforms from Apple’s AppStore to those of the BlackBerry, Windows Mobile, Android and the many variations of the Nokia platform

- Vic Gundotra, Google Engineering VP

왜 HTML5가 모바일에 중요한가 ?

Monday, July 5, 2010

행정안전부 고시 제2010-40호2010년 6월 24일http://j.mp/mopasweb

Monday, July 5, 2010

행정안전부 고시 제2010-40호○ 국민들이 다양한 모바일 기기를 사용할 수 있도록 ‘모바일 앱(App)’ 방식보다 ‘모바일 웹(Web)‘ 방식을 표준으로 권고 - 단, ‘모바일 웹’ 방식이 기술적으로 어렵거나, 속도 및 비용이 현저하게 차이나는 경우는 ‘모바일 앱’ 방식도 허용

○ 모바일 웹 방식 서비스 개발을 위한 기술 표준지침 마련

- 최소 3종 이상의 웹 브라우저에서 동등한 서비스 제공 - 국제표준화기구에서 제공하는 표준 사용 의무화 - 단말정보저장소(DDR), 미디어쿼리(Media Queries) 및 기타기술을 활용하여, 다양한 사용자 단말에 적합하도록 콘텐츠 제공 노력

2010년 6월 24일http://j.mp/mopasweb

Monday, July 5, 2010

Mobile 에서의 HTML5 지원현황Browser (OS) Version Score ( ? / 160 )

IE ( Win ) 6.0 11

IE ( Win ) 8.0.7600 19

Opera Mini 1.0 33

iPhone ( Mobile Safari ) 2.0 37

Android 1.6 39

iPhone ( Mobile Safari ) 2.1 - 2.2 45

Maemo microB 5 PR-1.1.1 55

Firefox Mobile 1.0 101

Firefox ( Win ) 3.6.3 101

Palm WebOS 1.4 107

iPhone ( Mobile Safari ) 3.0 110

Safari ( Mac ) 4.0.5 113

iPad ( Mobile Safari ) 3.2 115

Android 2.0 - 2.1 118

Android 2.2 122

iPhone ( Mobile Safari ) 4.0 Beta 4 133

Safari ( Mac ) 5.0 138

Chrome ( Win , Mac ) 6.0.422.0 142

Tested with http://html5test.comMobile test result from http://www.callingallgeeks.org

Monday, July 5, 2010

HTML5 Key Elementsfor Mobile

• Offline Support : Web database, LocalStorage, App Cache

• Canvas

• Video

• GeoLocation

• Advanced Forms

• Camera & Device (html-device) W3C DAP , JIL , OMTP BONDI , PhoneGap

Monday, July 5, 2010

Web Apps

Monday, July 5, 2010

Mobile Web App 의 장점

Monday, July 5, 2010

Mobile Web App 의 장점• 다양한 플랫폼 동시 지원

★ iPhone/iPad/Android/BlackBerry..

★ 최신 웹브라우저가 있는 모든 디바이스

Monday, July 5, 2010

Mobile Web App 의 장점• 다양한 플랫폼 동시 지원

★ iPhone/iPad/Android/BlackBerry..

★ 최신 웹브라우저가 있는 모든 디바이스

• 서버 기반 앱 : 빠른 업그레이드

Monday, July 5, 2010

Mobile Web App 의 장점• 다양한 플랫폼 동시 지원

★ iPhone/iPad/Android/BlackBerry..

★ 최신 웹브라우저가 있는 모든 디바이스

• 서버 기반 앱 : 빠른 업그레이드

• Web 개발자에게 친숙한 환경★ HTML5 , CSS , Javascript , 수많은 오픈소스 라이브러리

Monday, July 5, 2010

Mobile Web App 의 장점• 다양한 플랫폼 동시 지원

★ iPhone/iPad/Android/BlackBerry..

★ 최신 웹브라우저가 있는 모든 디바이스

• 서버 기반 앱 : 빠른 업그레이드

• Web 개발자에게 친숙한 환경★ HTML5 , CSS , Javascript , 수많은 오픈소스 라이브러리

• Web 서비스들과의 손쉬운 Mashup

Monday, July 5, 2010

Mobile Web App Types

Monday, July 5, 2010

Monday, July 5, 2010

Monday, July 5, 2010

Online Web Application

✓ 기존 모바일 웹페이지 포함한 웹 앱✓ HTML5,CSS3 등을 통한 UI 향상✓ GeoLocation 이용✓ 주로 컨텐츠 리딩을 위한 앱

Mobile Device

Web App UI

Server

Web Server

DatabaseResources

Monday, July 5, 2010

Online Web Application

✓ 기존 모바일 웹페이지 포함한 웹 앱✓ HTML5,CSS3 등을 통한 UI 향상✓ GeoLocation 이용✓ 주로 컨텐츠 리딩을 위한 앱

Mobile Device

Web App UI

Server

Web Server

DatabaseResources

Offline Enabled Web App

✓ 오프라인에서도 사용이 가능한 웹 앱✓ 처음 접속시 주요데이타를 캐쉬✓ 재접속시에 서버의 데이타와 싱크✓ 컨텐츠 리딩 & 작성 앱

Server

Web Server

DatabaseResources

Mobile Device

Web App UI Local

Data

Monday, July 5, 2010

Online Web Application

✓ 기존 모바일 웹페이지 포함한 웹 앱✓ HTML5,CSS3 등을 통한 UI 향상✓ GeoLocation 이용✓ 주로 컨텐츠 리딩을 위한 앱

Mobile Device

Web App UI

Server

Web Server

DatabaseResources

Offline Enabled Web App

✓ 오프라인에서도 사용이 가능한 웹 앱✓ 처음 접속시 주요데이타를 캐쉬✓ 재접속시에 서버의 데이타와 싱크✓ 컨텐츠 리딩 & 작성 앱

Server

Web Server

DatabaseResources

Mobile Device

Web App UI Local

Data

Offline Web App

✓ 계속 오프라인으로 사용가능한 앱✓ 서버와의 동기화를 필요로 하지 않음✓ 게임, 유틸리티, 개인정보 앱, EBook

Server

Web Server

Mobile Device

Web App UI Local

Data

Monday, July 5, 2010

Online Web Application

✓ 기존 모바일 웹페이지 포함한 웹 앱✓ HTML5,CSS3 등을 통한 UI 향상✓ GeoLocation 이용✓ 주로 컨텐츠 리딩을 위한 앱

Mobile Device

Web App UI

Server

Web Server

DatabaseResources

Offline Enabled Web App

✓ 오프라인에서도 사용이 가능한 웹 앱✓ 처음 접속시 주요데이타를 캐쉬✓ 재접속시에 서버의 데이타와 싱크✓ 컨텐츠 리딩 & 작성 앱

Server

Web Server

DatabaseResources

Mobile Device

Web App UI Local

Data

Offline Web App

✓ 계속 오프라인으로 사용가능한 앱✓ 서버와의 동기화를 필요로 하지 않음✓ 게임, 유틸리티, 개인정보 앱, EBook

Server

Web Server

Mobile Device

Web App UI Local

Data

Hybrid Web App

✓ Native + Web 형태의 앱✓ 앱스토어를 통한 다운로드 가능✓ Native 수준의 다양한 앱 작성 가능

Server

Web Server

DatabaseResources

Mobile Device

Web App UI Local

Data

AppStore

Monday, July 5, 2010

Online Web Application

✓ 기존 모바일 웹페이지 포함한 웹 앱✓ HTML5,CSS3 등을 통한 UI 향상✓ 주로 컨텐츠 리딩을 위한 앱

Mobile Device

Web App UI

Server

Web Server

DatabaseResources

Monday, July 5, 2010

Online Web Application

✓ 광고를 위한 간단한 게임도 가능✓ HTML5 , CSS3 , Javascript 로 Flash 수준의 효과 가능

Mobile Device

Web App UI

Server

Web Server

DatabaseResources

http://j.mp/hogapp http://j.mp/spinapp

Monday, July 5, 2010

Online Web Application

✓ GeoLocation 을 이용한 실시간 검색✓ 네이버 / 다음 Open API 와 연동

Mobile Device

Web App UI

Server

Web Server

DatabaseResources

http://j.mp/myasik http://j.mp/opimap

Monday, July 5, 2010

Offline Enabled Web App

✓ 오프라인에서도 사용이 가능한 웹 앱✓ 처음 접속시 주요데이타를 캐쉬✓ 재접속시에 서버의 데이타와 싱크✓ 컨텐츠 리딩 & 작성 앱

Server

Web Server

DatabaseResources

Mobile Device

Web App UI Local

Data

<html manifest="https://mail.google.com/mail/mu/manifest">

• Web SQL Database , App Cache : Offline 에서도 사용가능• Offline 시에 작성한 메일은 Online 되면 바로 전송• 한개의 HTML ( CSS , Javascript , 이미지파일까지 전부 내장 )

Mobile Gmail - http://gmail.com

Monday, July 5, 2010

Offline Enabled Web App

✓ 꼭 오프라인에서도 사용이 가능한것에 중점을 둘 필요는 없음✓ Local Cache 를 이용한 트래픽 효율화✓ GeoLocation 연동

Server

Web Server

DatabaseResources

Mobile Device

Web App UI Local

Data

• Local Storage 로 Prefetch 다음 페이지 미리 로딩 기존 데이타 재사용 • App Cache 로 속도향상

재 접속시 초기로딩 빠름

• GeoLocation API

nextstop - http://nextstop.com

Monday, July 5, 2010

Offline Web App

✓ 계속 오프라인으로 사용가능한 앱✓ 서버와의 동기화를 필요로 하지 않음✓ 게임, 유틸리티, 개인정보 앱, EBook

Server

Web Server

Mobile Device

Web App UI Local

Data

Checklist - http://j.mp/checkapp • App Cache 에 리소스 저장

• Web SQL Database 전체 아이템은 내부 DB에 저장

• 한번 접속후 부터는 Offline 으로 사용가능

Monday, July 5, 2010

Offline Web App

✓ HTML5 형태의 이북 ✓ EPUB의 제한을 넘어 다양한 HTML 리소스 활용가능 ✓ http://j.mp/monocle_ebook

Server

Web Server

Mobile Device

Web App UI Local

Data

Monocle - eBook for Web Browser

Monday, July 5, 2010

Hybrid Web App

✓ Native + Web 형태의 앱✓ 앱스토어를 통한 다운로드 가능✓ Cross Platform Mobile App Framework PhoneGap , Titanium Mobile ..

Server

Web Server

DatabaseResources

Mobile Device

Web App UI Local

Data

AppStore

Harmonious - HTML5 Canvas + jQTouch + PhoneGap

Monday, July 5, 2010

Web App vs. Native AppWeb App Native App

• 모바일 디바이스에 최적화된 웹사이트• HTML , CSS , Javascript

• 기존에 사용하던 웹 개발환경

• 웹 표준 컨트롤 , iUI , JQTouch ..

• 꼭 Mac 이 필요하지는 않음

• App 개발자 등록 필요없음 1)

• 제한적인 디바이스 사용 - 카메라/마이크.. 2)

• 자체 결제시스템 구축필요 또는 광고

• 서버에서 바로바로 업데이트가능

• Android / Blackberry 등으로도 바로 변환가능

• 모바일 디바이스 전용 앱• Objective-C ( iPhone ) , Java ( Android )

• XCode ( iPhone ) , Eclipse ( Android )

• Cocoa Touch ( iPhone ) , UI Framework (Android)

• Mac 이 필요 ( iPhone ) , Android 는 멀티플랫폼

• App 등록을 위해 년 $99 or $35

• 디바이스의 모든 기능을 활용

• App Store/Market를 통한 판매/수익 & 광고

• 업그레이드 할때마다 검수 ( iPhone )

• 실행속도가 빠르다

1) Phonegap 을 이용한 앱 개발하여 등록할때는 필요함 2) Phonegap , QuickConnect 를 통하여 카메라/연락처 정보등 사용가능<= Hybrid App

Monday, July 5, 2010

Mobile Web App Helpers

Monday, July 5, 2010

Monday, July 5, 2010

UI Library for Touch Devices #1• iPhone style UI library

★ JQTouch - http://jqtouch.com/

★ iUI - http://code.google.com/p/iui/

★ WebApp.Net - http://webapp-net.com/

Monday, July 5, 2010

UI Library for Touch Devices #2• Sencha Touch : jQTouch + Ext JS + Raphaël

http://sencha.com★ HTML5 + CSS + Javascript Mobile App Framework

★ Support for iOS , Android

★ Touch 기반의 다양한 UI 컨트롤 지원

★ 한개의 소스로 iPad / iPhone / Android 화면 동시 지원

• 예제 : http://j.mp/senchak

Monday, July 5, 2010

UI Library for Touch Devices #3• iAd JS : Appleʼs Javascript Web UI Library

★ HTML5 + CSS + Javascript UI Framework★ CocoaTouch 에서 사용하던 거의 모든 컨트롤을 Web 으로 변환하여 제공

★ Controls : Button, Checkbox, Radio Button, Slider, Switch, Page Control ,,

★ 추가 UI Control 제공★ Menu : Hide/Reveal , Horizontal Slider , Orbit , Pinwheel

★ Galleries : 360-Degree Object Rotation & Panorama, Horizontal/Vertical Slide, Coverflow

★ Audio / Video : Using HTML5 audio/video element

Monday, July 5, 2010

• PhoneGap ★ http://www.phonegap.com/

★ iPhone, Android, Blackberry, Symbian, Palm, Windows Mobile

• Titanium Mobile ★ http://www.appcelerator.com/

★ iPhone, Android

• QuickConnect ★ http://quickconnectfamily.org/

★ iPhone, Android, Blackberry

• NimbleKit★ http://www.nimblekit.com/

★ iPhone

Web App to Native App Framework

Monday, July 5, 2010

PhoneGap #1• Cross Platform Mobile Application Framework

• HTML+Javascript 로 된 Web App 를 담는 Container

• Web App 를 담은 Native App 으로 만들어 주는 툴

• 기존 Web App 에서 불가능했던 Device 기능들을 Javascript 를 통해 접근하도록 가능하게 함

iPhone Android Blackberry Symbian Palm

Geolocation ✓ ✓ ✓ ✓ ✓

Accelerometer ✓ ✓ ✓ ✓ ✓

Camera ✓ ✓ ✓ ✓ ★

Vibration ✓ ✓ ✓ ✓ ✓

Contacts ✓ ✓ ✓ ✓

Sound ✓ ✓ ✓ ✓ ✓

SMS ★ ✓ ✓ ✓

Telephone ★ ★ ✓ ✓ ★개발 진행중✓사용가능

Monday, July 5, 2010

PhoneGap #2

iOS ( iPhone OS )PhoneGap framework

( Container App )

iOS App Filesplist,icon,png file resources

CocoaTouch FW integration

Webkit (UIWebView)

phonegap.js

application css/js/html

AndroidPhoneGap framework

( Container App )

Android App FilesManifest.xml and resourcesApplication FW integration

Webkit ( WebView )

phonegap.js

application css/js/html

Phonegap 이 제공하는 부분

개발자가 작성한Web Application

Monday, July 5, 2010

PhoneGap #3

Monday, July 5, 2010

Mobile Web App 개발• HTML5 & APIs

★ Web SQL, Local Storage, App Cache, Canvas, Video, Forms, GeoLocation

★ CSS UI Effects , 점점 다양해지는 스펙들 ( html-device )

• UI & Application Framework

★ iUI , jQTouch , WebApp.Net , Sencha

★ 각종 Javascript 기반 UI 라이브러리 , CSS3 를 이용한 다양한 효과들

• App Packaging & Device Integration

★ Framework : PhoneGap , NimbleKit , Titanium Mobile ..

★ Specification : W3C DAP , JIL , OMTP BONDI

Monday, July 5, 2010

고맙습니다!email : guru @ xguru.net twitter : @xguru

Monday, July 5, 2010

References• http://code.google.com/p/html5-slides/

• http://rakaz.nl/2009/09/iphone-webapps-101-detecting-essential-information-about-your-iphone.html

• http://developer.apple.com/safari/library/documentation/appleapplications/Reference/SafariWebContent/

• http://building-iphone-apps.labs.oreilly.com/

• http://www.phonegap.com/

• http://sencha.com

• http://jqtouch.com

• http://quickconnectfamily.org/

• http://www.appcelerator.com/products/titanium-mobile-application-development/

• http://www.slideshare.net/akosma/webtuesday-mobile-web-applications-framework-overview

Monday, July 5, 2010