웹 어플리케이션 기술의 진화 Jonghong Jeon ETRI, SRC Email: hollobit@etri.re.kr Blog: http://mobile2.tistory.com http://twitter.com/hollobit http://www.etri.re.kr
모바일 혁명 - 디바이스 2 Source: Morgan Stanley, Mobile Internet Report, 2009.12
모바일 혁명 인터페이스 기술의 진화 3 Source: Morgan Stanley, Mobile Internet Report, 2010.4
모바일 혁명 컨텐츠 유통 방식 4 Source: Morgan Stanley, Mobile Internet Report, 2010.4
모바일 혁명 패러다임의 변화 5 Source: Morgan Stanley, Mobile Internet Report, 2010.4
I am certain that the mobile telecoms world will count its time in two Eras. The Era BI: time Before the iphone, and the ER A AI: time After the iphone Author of Digital Korea, Tomi T Ahonen http://communities-dominate.blogs.com/brands/2007/05/entering_iphone.html http://www.tomiahonen.com/ hollobit@etri.re.kr 6
아이폰 출시 이후의 변화들 iphone Announce Android OS announced iphone 2G Release 영국,독일, 프랑스 출시 안드로이드 개발자 경진대회 1차 Android Market Announced SDK1.1 HTC Magic SDK 1.0 T-Mobile G1 SDK V1.5 iphone 3G Release (일본 등) 위피의무화 해제 결정 위피의무화 해제 시행 Google SDK1.6 Nexus One SDK2.0 Motolora ipad Droid 발표 개인개통 1호 iphone 3GS Release 중국 출시 WPS7 발표 한국 출시 (88번째) 2007 hollobit@etri.re.kr 7
2010년, 스마트폰 대중화의 원년 8
MWC 2010 주요 이슈 9
m.xxx.com App Vs. Web Just as businesses in the PC-based Web spent years in the 90's wondering if a desktop app or web browser based service was the best choice, in 2010 the same question applies to mobile phone applications.
iphone & Web Applications q 아이폰 출시 후 많은 Web Application 등장, 그러나. 4488여개의 iphone용 웹 어플리케이션 :http://www.apple.com/webapps/ AppStore에는 208,834개 등록 (http://www.apptism.com) 11
Web-based vs. Native Application 12
왜 Native Application이 더 좋다고 생각할까? q Five Common Reasons Performance Offline Mode Findability Device Attributes Monetization 13
무조건 App 이 최고 일까?
만약 재미있는 어떤 앱을 만든다면? q아이폰용으로 개발 q안드로이드용으로 개발 q윈도우 모바일용으로 개발 q 삼성 바다용으로 개발 q 블랙베리용으로 개발 q 팜용으로 개발 q. q2010년 3월 현재 전세계 App Store 60개 이상 15
과연 Web Application은 Native Application를 따라잡지 못할까?
웹 기술은 느리지만 계속 진화 q 대표적인 사건들 1995, Netscape이 JavaScript 도입 1999, Microsoft XMLHTTP 적용 2002, Mozilla 1.0 가 XMLHttpRequest 내장 q 본격적인 웹 어플리케이션의 시작 2004, Gmail 베타 서비스 시작 2005, AJAX 등장 (구글맵) q 웹 어플리케이션을 위한 다양한 기능들이 요구되고 있음 17
웹 어플리케이션을 위해 필요한 것들은? q 현재의 웹 기술로 어려운 것들 대표적인 확장 기술이 필요한 부분들 Playing video Webcam / microphone access Better file uploads Geolocation Offline abilities 3D Positional and multi-channel audio Drag and drop of content and files into and out of webapps 구글이 HTML5와 함께 발전시키고 있는 것들 Web Worker, O3D, Rich Text Editing(ContentEditable), Notification, P2P, Drag & Drop, File Upload, Multi File access 참고: http://rhio.tistory.com/331 q 현재 표준화가 진행 중 18
Web Application 기술의 진화 문제점 Performance Offline Mode Findability Device Attributes Monetization 개선 방안 -Javascript 속도 개선 -WebGL 표준화 시작 -CSS 속도 개선 -Widget 기술 -XHR / AJAX -HTML5의 App Cache 기능 -Local Storage & Database -W3C Geolocation API -W3C Device API & Policy WG 19
웹 플랫폼으로의 발전 20
주요 단점과 한계의 극복 21
Graphic? - CSS3, WebGL http://www.youtube.com/watch?v=bqyhlrzotak&hl=ko http://www.youtube.com/watch?v=2rpkpj6zo9w 22
More, More, More 23
W3C 신규 표준화 기술들 q XHR, XHR 2.0 q Web IDL q HTML5 q Widget 1.0 24 Requirements, P&C, Digital Sig., APIs & Events, Access Request Policy, q CSS3 Select Level3, Media Query q Web Application API Web Storage, Web Database, Web Workers, Web Sockets API, Server-Sent Events, Offline Web Applications q Geolocation API q Device APIs and Policy q DOM Level 3
웹의 진화
Web 1.0 à Web 2.0 + Web Squared 26
마크업/스타일 언어의 진화 27 http://cscie12.dce.harvard.edu/lecture_notes/2010/20100217/images/web_standards_timeline.png
웹 응용 프레임워크의 발전 28
웹 클라우드 서비스의 진화 29 Source: Morgan Stanley, Mobile Internet Report, 2010.4
웹 어플리케이션의 기술과 표준의 발전
웹 표준과 기술의 진화 New Standards Widget HTML5 Hybrid Web New Platform & Real time Web & Device API Browser Social Web Web Application Store Web Cloud Mobile Device & Platform War 31
Web Application Architecture HTML5 (Web forms, Video/Audio, Canvas..) Web Application APIs (Web IDL, Web Socket, Web Worker, Web Database.) XML XMLHTTPRequest Widgets API Device APIs CSS (Calendar, Camera GPS, File,..) ECMASCript DOM HTTP + URI/IRI+ Unicode 32
HTML5? 33
HTML 5: A Chance to Do Things Differently 34
HTML5 Demo Canvas and Audio q HTML 5 can do with animation 35 http://9elements.com/io/projects/html5/canvas/
HTML5 Demo Canvascape Textures 36 http://www.benjoffe.com/code/demos/canvascape/textures
HTML5 Demo Video + CSS Visual Effects http://www.satine.org/research/webkit/video/trailers.html 37
HTML5 Demo - Geolocation q iphone-like experience in your browser 38
HTML5 Demo Drag and Drop q Web apps become more like desktop http://shapeshed.com/examples/drag-and-drop/ 39
HTML5 40
HTML5 Support 41
미디어 사이트들의 HTML5 지원 계획 42 http://techcrunch.com/2010/06/03/survey-ipad-html5-video/
W3C HTML WG 43
Device API - 장치 속성의 제어 Web Application Web Application Browser Web Engine Browser Device API Device Capability 44
Device API 기술 표준화 2008 2009 OMTP Bondi 1.0 W3C Geolocation WG Security for Ac cess to Device APIs from the Web. PhoneGap JIL W3C DAP WG 45
OMTP BONDI 아키텍처 46 46
OMTP BONDI 로드맵 II. Ver 1.1(10.02) Ver 1.5(10.06?) Ver 2.0(?) System Event APIs Updated Reference Implementation Compliance Reporting Developer tools Security tools Desktop RI* Widget-install Widget-update Telephony API APDU** API Bluetooth API Sensors API Crypto API Server Push API DLNA*** API Widget Runtime Update requirements API Extensibility Connection Profile Definition Subscriber Identity API App launcher API Widget security enhancements Fast Standards W3C Widget Target Device APIs and Policy W3C Web Apps Target *RI :Reference Implementation ** *DLNA : Digital Living Network Alliance ** APDU : Application Protocol Data Unit 47
W3C Device API & Policy WG의 로드맵 48
W3C Widgets 1.0 q A widget is an interactive single purpose application for displaying and/or upda ting local data or data on the Web, packaged in a way to allow a single downl oad and installation on a user's machine or mobile device. q A widget may run as a stand-alone application (meaning it can run outside of a Web browser), and it is envisioned that the kind of widgets being standardiz ed by this effort will one day be embedded into Web documents. q In this document, the runtime environment in which a widget is run is referred to as a widget user agent. q Note that running widgets may be the specific purpose of a widget user agent, or it may be a mode of operation of a more generic user agent (e.g. a Web br owser). q A widget running on a widget user agent is referred to as an instantiated widg et. Prior to instantiation, a widget exists as a widget package. 49
Widgets 1.0: Landscape 50
위젯의 발전 방향 51
결론 More people will access the mobile web than the desktop web. 2013 In according to Gartner. 2015 In according to Morgan Stanley. We think there is the potential to actually make this mobile web better than the PC web. Jonathan Rosenberg, Google
2+1 모바일 응용 개발 방법 q Native Application App Store - Monetize Better Performance Better Graphics & UI q Web Application Platform Independent No installation Always update q Native + Web? 53
모바일 응용 개발 방법 비교 Portability Hyper Links Discoverability Distribution & Market Siz e Usage of Device Capabiliti es Supportability & Upgrade ability Entry Costs Revenue Share 54 Mobile App 특정 모바일 단말 및 플랫폼에 맞게 개발되며, 다운로드 및 설치가 되어야 함 각 플랫폼에 포팅해야 함(iPhone, BlackBerry, Android, Pal m and the list goes on ) 외부 링크를 통한 브라우저 호출은 가능하지만, 내부 링크 는 불가능하고, 앱 간 호출은 보안 제약이 있음 앱스토어 홍보와 마케팅을 위한 비용이 필요 플랫폼과 단말의 종류에 한계가 있으며, 상위 부분에 있는 것과 하위 내용과 차별화 됨 단말의 모든 기능 제어 가능(GPS, camera, voice, RFID, ad dress book, calendar, etc.) 앱이 다운로드 되고 나면, 지원에 어려움이 있음. 버그가 있는 부분에 대해서는 다시 등록하고 모두에게 재다운로 드 받으라고 해야 함 앱스토어 개발자 등록 비용이 필요 (Apple charges develo pers $99 and enterprises $299, RIM charges $200 ) 앱스토어를 통해 판매시 수익 공유 (Apple takes 30%, RI M takes 20%) Mobile Web Application 브라우저를 통해 접속하며, 설치와 업데이트 불필요 표준 웹만 개발하면 어디서나 볼 수 있음 어떤 부분이건 링크로 연결 가능 검색 사이트, 이메일 홍보, 트위터 링크 등으로 홍보 가능 누구든 접속 가능 현재는 불가능 (HTML와 Device API 표준화를 통해 2011년부터 가능할 것으로 전망) 사이트를 수정하면 언제든 바로 업데이트 없음 모두 내꺼 User Experience 풍부한 사용자 인터페이스 제공이 가능 HTML/CSS/JavaScript 등의 기능에 의해 한정됨 Performance Offline Browsing 바이너리 코드로 실행되므로 속도가 빠름 로컬 저장소를 이용해 가능 네트웍을 거치며, 서버에서 제공되고, 브라우저 를 통해 처리되기에 성능 변동폭이 큼 HTML5의 App Cache 기능을 이용해 구현해야 지만 가능
모바일 웹 응용을 선택해야 하는 10가지 이유 1. Compatibility 2. Usability 3. Accessibility 4. Easy use, Easy develop 5. No installation & Always update 6. Open API & Mashup, Web with Everything 7. Platform Independent 8. no screening 9. Potentiality 10.Always Evolving 55
왜 모바일 웹인가? - 가능성 q As of December 1st, we estimate a total number of 326,600 Mobile Touch Web sites. This compares with 148,000 iphone apps in the App Store and 24,000 apps in the Android market. The circular chart in Figure 2 shows the constituent parts of the Mobile Touch Content ecosystem that is growing up around these new devices. Global total number of Web sites scanned 112.6m http://www.taptu.com/metrics/taptumobiletouchwebreportjan2010.pdf 56
왜 모바일 웹인가? - 경쟁력 57
미래 리치 모바일 웹 어플리케이션 58
어떤 대비를 해야 할 것인가? q 핵심은 재사용 자원과 플랫폼 경쟁력 q Contents mobileok Mobile Web services q Mashup & Open Web Cloud Open API & Mashup support Hybrid Web Application q Web Application Device API HTML5 & Web Application Web Application Store q Standards, Standards, Standads 59
Thank you For more discussion : JongHong Jeon (hollobit@etri.re.kr) +82-42-860-5333 Blog : http://mobile2.tistory.com/m http://twitter.com/hollobit OR 60