Mobile Web Trend &

Mobile Web Development

Technology

Sam Hwang
PMO
2011.03.25
Table

„ Mobile Web Trend

„ Mobile Web Development Technology

„ Reference
Mobile Web Trend
1. Mobile Device Market
2. Mobile Internet Growth
3. Increasing Mobile Web
4. Mobile APP and Web App?
5. Web App Characters
6. Web App Types

3
Mobile Device Market

The Future of Mobile (MOCOM 2020)

http://www.youtube.com/watch?v=GDiuSOCDCxo&NR=1
Mobile Internet Growth

Mobile Internet report 2010, Morgan-Stanley

Increasing Mobile Web
Mobile (Native) App and Web App?
Definitions
Mobile App vs. Mobile Web

- 모바일웹 UI 패턴 및 UI개발플랫폼 개발 사례 : LG CNS

Mobile Web =! Mobile App
Backgrounds of Mobile Web App

„ 웹 서비스에서 고착화되어 있는 대형 포탈의

지배력
„ 수많은 단말, 다양한 OS, 심각한 단편화 문제
„ 웹 기반 표준화 발전
„ Device API, HTML 5, Web based cross
platforms
„ Web App Store
http://mobizen.pe.kr/
„ OpenAppMkt
http://www.openappmkt.com
„ Chrome Web Store
http://chrome.google.com/webstore
„ GetJar HTML 5 Web App Store
http://www.getjar.com
„ 모바일 OK Web Store
http://www.mokstore.com/
Advantages of Mobile Web App

„ 다양한 플랫폼 동시 지원
„ iPhone/iPad/Android/BlackBerry..
„ 최신 웹브라우저가 있는 모든 디바이스에서 가능
„ 서버 기반 앱
„ 빠른 업그레이드
„ 유지보수 비용 절감
„ Web 개발자에게 친숙한 개발 환경
„ HTML5, CSS, Javascript,
„ Open Source Libraries
„ 다양한 웹서비스들과 손쉽게 Mash-up 개발
Mobile Web App Types

HTML5 on Mobile, http://xguru.net

On-line Web App

HTML5 on Mobile, http://xguru.net

Off-line Enabled Web App

HTML5 on Mobile, http://xguru.net

Off-line Web App

HTML5 on Mobile, http://xguru.net

Hybrid Web App

HTML5 on Mobile, http://xguru.net

Scope of Hybrid App

HTML5 on Mobile, http://xguru.net

Mobile Web Development Technology
1. HTML5
2. UI Framework
3. App Packaging & Device Integration
4. Mobile Web Development Guide &
Direction

18
Mobile Web App Development Technology

1. HTML5
„ Web SQL, Local Storage, App Cache, Canvas, Video, Forms,
Geolocation
„ CSS UI effects

2. UI Framework
„ iUI, JQTouch, WebApp.Net, Sencha
„ Javascrpit based UI Libraries, CSS 3 effects

3. App packaging & Device Integration

„ Framework: PhoneGap, NimbleKit, Titanium Mobile,..
„ Specification: W3C OMTP BONDI, JIL,..
Why HTML5!

„ Web에서 Desktop 수준의 App 사용자 경험 (UX) 제공 가능

„ 모든 모바일 플랫폼용 네이티브 앱을 만드는 것은 매우 어려움

„ iOS, Android, WP7, BlackBerry, Symbian, Bada…

“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 platform.” – Google Engineering VP, Vic
Gundotra http://www.youtube.com/watch?v=mlnxG0SO0Uw&feature=player_embedded
http://www.youtube.com/watch?v=mlnxG0SO0Uw&feature=player_embedded

- 2010년 6월 24일 공지된 행정안전부 고시 제2010-40호 -

“국민들이 다양한 모바일 기기를 사용할 수 있도록 모바일 앱보다
모바일 웹을 표준으로 권고하고, 국제표준화 기구에서 제공하는
표준 사용을 의무화하여 최소 3종 이상의 웹 브라우저에서 동등한
서비스 제공”
HTML5 Key Elements for Mobile

HTML5 = HTML + CSS + JS API

„ Off-line 지원: Web database, Local Storage, App Cache
„ 미디어 처리: Video, Audio, Canvas
„ 입력지원: Advanced Forms
„ 위치정보: GeoLocation
„ 디바이스 접근: Camera, Calendar, Address book
„ Desktop experience: notification, Drag & Drop
„ Visual 강화: Typography, Transforms & Animations
HTML5 & Web Browser

https://demos.mozilla.org/ko/
UI Library for Touch Devices
„ iPhone style UI library
„ JQTouch: http://jqtouch.com
„ iUI: http://code.google.com/p/iui/
„ WebApp.Net: http://webapp-net.com
„ Sencha Touch: JQTouch + Ext JS + Raphaël: http://sencha.com

http://dev.sencha.com/deploy/touch/examples/kitchensink/
App Packaging Framework

„ 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
„ NimbleLit
„ http://www.nimblekit.com/
„ iPhone
Remember When You Develop Mobile Web

Keep Web standards and Follow

Mobile Web Best Practice
Mobile Web Best Practice

Care for Usability first

than technical issues

http://www.w3c.or.kr/Translation/mwbp_flip_cards/
MS vision of the Future & Future of Screen
Technology

http://www.youtube.com/watch?v=0USn7eufXps&featur http://www.youtube.com/watch?v=g7_mOdi3O5E&feature
e=fvwrel =player_embedded
N-Screen
„ 서로 다른 Screen Device에서 하나의
서비스를 동일한 사용성으로 제공
„ One buy, Multi Use
„ 각 Device의 총체적 기능을
고려한 UI/UX

„ Online Activity는 더 이상 single task가 아님

„ 서로 다른 Screen Device를 통해
하나의 서비스에 새로운 가치
창출이 핵심
„ Interaction among Screen
Devices
Reference
„ Mobile Web Best Practices 1.0: http://www.w3.org/TR/2008/REC-
mobile-bp-20080729/Mobile
„ Mobile Web Application Best Practices:
http://www.w3.org/TR/mwabp/
„ Global Authoring Practices for the mobile Web:
http://www.passani.it/gap/
„ HTML5 in mobile devices:
http://en.wikipedia.org/wiki/Html5_in_mobile_devices
„ Mobile Developers Guide: http://dev.mobi
„ 모바일 컨텐츠 이야기: http://mobizen.pe.kr/
„ 구루 블로그: http://xguru.net
„ Designing the Mobile User Experience:
http://www.littlespringsdesign.com/
„ Google App inventor Beta: http://appinventor.googlelabs.com/
„ 모바일 OK (Web 2.0포럼): http://www.mobileok.kr/web/index.php
„ 한국형 모바일 OK 시험 및 인증 서비스: http://v.mobileok.kr/
„ 야후 모바일 블로그: http://ymobileblog.com/
 황순삼
& GoodBye!!