너무많은기대를하는것은아닌가?

HTML5 와차세대모바일웹 Jonghong Jeon ETRI, SRC Email: hollobit@etri.re.kr Blog: http://mobile2.tistory.com http://twitter.com/hollobit http://www.etri.re.kr

너무많은기대를하는것은아닌가?

떼돈

좀냉정해질필요가있다 좀차분해질필요가있다 Source: http://try.powermapper.com/demo/statsversions.aspx

그냥새로운마크업중하나일뿐.. 그리고약간의기회와가능성일뿐!!

Web-based vs. Native Application 6

HTML5? 7

HTML5 의주요특징 8

HTML5 apps: What's It Good For? q enable web apps to deliver a far richer experience; In-browser video, available without the use of a plugin Canvas. This new tag enables developers to use vector graphics on the page, much like Flash, although again without the use of a plugin Geolocation Cross-domain messaging In-browser storage Drag and drop Enhanced web forms 9

HTML5: Web Development to the next level http://slides.html5rocks.com/ 10

HTML5 표준화 11

W3C HTML WG 12

HTML5 이모바일산업에미치는영향 YouTube Hulu Scribd Gmail Mobile Ad 5 B$ ( 10) 8 B$ ( 11) 11 B$ ( 12) 15 B$ ( 13) Mobile AppStore 6.7 B$ ( 10) 29.5 B$ ( 13) ipad, Tablet, Smartbook, SmartTV, Mobile devices.. 13

왜모바일에서 HTML5 를주목하는가? 단위 : 십만 PC 댓수 유선브로드밴드가입자 HTML5 지원브라우저사용율 (FF+ 크롬 ) HTML5 지원브라우저내장 PC 사용자수 이동통신가입자수 2007 10,000 3,044 33,327 스마트폰사용자수 ( 추정 ) 스마트폰비율 HTML5 지원스마트폰사용자수 세계인구 2008 11,200 3,653 39,658 4,521 11.40% 67,000 2009 12,544 4,490 45,332 6,936 15.30% 350 67,399 2010 14,049 4,849 27% 1,964 49,949 10,589 21.20% 1,483 68,544 2011 15,735 5,010 35% 2,630 53,843 15,991 29.70% 3,157 69,572 2012 17,623 5,361 45% 3,618 58,219 21,483 36.90% 4,860 70,616 2013 19,738 5,682 55% 4,688 62,475 26,739 42.80% 6,489 71,675 2014 22,107 5,966 65% 5,817 66,848 31,419 47.00% 7,940 72,750 2015 24,760 6,265 75% 7,048 71,528 37,194 52.00% 9,730 73,841 참고자료 : Gartner, Morgan Stanley, IDC 시장자료 hollobit@etri.re.kr 14

참고자료 Devices (PC vs. SmartPhone) 15 Source: Morgan Stanley, Mobile Internet Report, 2010.6

참고자료 패러다임의변화 16 Source: Morgan Stanley, Mobile Internet Report, 2010.4

참고자료 HTML5 활용도예측 (PC) 17 기반자료추청 2011 2012 2013

참고자료 HTML5 활용도 ( 모바일 ) 18

브라우저별 HTML5 지원현황 Browser Score (out of 300) Date tested Safari Nightly 220 8th June Chrome Nightly 217 8th June Safari 5 208 8th June Chrome 5 197 8th June Firefox 4 Beta 1 189 30th June Mobile Safari 5 (ios4.0) 185 30th June Firefox Nightly 176 8th June Opera 10.6 159 3rd July Firefox 3.6 139 8th June Opera 10.5 129 8th June Safari 4 129 8th June Mobile Safari 4 (ios3.1.3) 125 30th June IE 9 Preview 4 96 6th August IE 9 Preview 2 32 8th June Safari 3.2 29 8th June Internet Explorer 8 27 8th June Source: http://oli.jp/2010/html5test/ 19

모바일브라우저별 HTML5 지원현황 (1/2) hollobit@etri.re.kr 20

모바일브라우저별 HTML5 지원현황 (2/2) hollobit@etri.re.kr 21

모바일 HTML5 의영향 [1] 새로운웹환경 HTML5 CSS3 JS 22

모바일 HTML5 의영향 [2] 데이터서비스 q Erisson CEO 의전망 2010년 - 전세계모바일인터넷가입자 - 50억명 2009년말 - 전세계모바일데이터사용량이음성데이터사용량을초과 모바일브로드밴드가입자 : 3억 6천만명 ( 09) -> 34억명 ( 15) 2015년모바일데이터시장이통신사매출의 90% 를차지 2015년인터넷접속총인구의 80% 가모바일기기를통해접속 2020년 500억개의기기가네트워크 (Web) 에연결될것으로전망 23

모바일 HTML5 의영향 [2] 데이터서비스 q 가능성 1: HTML5 기반서비스와데이터트래픽의확대 Source: Morgan Stanley, Mobile Internet Report, 2009 24 Source: 애틀라스리서치그룹

모바일 HTML5 의영향 [3] Web 2.0 의완성 o Technical Innovation of Web 2.0 콘텐츠유통과상거래방식의변화 Blog, RSS/Atom, UCC 브라우징방식의변화 Tagging, Social Browsing, Microformat, Offline 웹응용환경의변화 HTML5, Web Application, RIA, AJAX, Browser 확장기술, XUL 서비스제공방식의변화 Open API, 웹서비스, REST, Mashup, SOW 디바이스의변화 Multi-Screen, 다양한모바일단말, Mobile Web 2.0 o Standards, XML, Open API, mashup 이핵심키워드 25

모바일 HTML5 의영향 [3] Web 2.0 의완성 가능성 : 웹응용및 UI 기술혁신을통한사용성 / 기능성 / 편의성개선 [1] 참여 [2] 브라우징 [3] 웹응용, 웹 UI [4] 서비스제공방식, 서비스연동방식 [1] 참여활용 [5] 단말무선 Standards, XML, Open API, mashup Internet Technology, Platform Technology, IP Convergence (Google Platform, GRID, Skype, Youtube, ) 26

모바일 HTML5 의영향 [4] Rich Web q <video>, <audio> Flash 기반사이트의전환 YouTube, Vimeo, Scribd q 왜 HTML5 인가? Search Friendly 호환성 ( 유무선 ) 접근성 성능 27 http://www.scribd.com/doc/30964170/scribd-in-html5 http://estima.wordpress.com/2010/05/07/scribd/

모바일 HTML5 의영향 [5] HTML5 Apps q HTML5 App 은다양한단말과플랫폼들을효과적으로지원하는유일한방법 28 Offline 지원 : LocalStorage, Web Database, App Cache 미디어처리 : Video, Audio, Canvas 입력지원 : Advanced Forms 위치정보 : GeoLocation q 추가기능 WebSocket, FileReader IndexedDB, Web Workers q 향후기능 Device APIs Touch Interface Widget http://mobizen.pe.kr/926

모바일 HTML5 의영향 [5] HTML5 Apps Portability Hyper Links Discoverability Distribution & Market Siz e Usage of Device Capabiliti es Supportability & Upgrade ability Entry Costs Revenue Share 29 Mobile App 특정모바일단말및플랫폼에맞게개발되며, 다운로드및설치가되어야함 각플랫폼에포팅해야함 (iphone, BlackBerry, Android, Pal m and the list goes on ) 외부링크를통한브라우저호출은가능하지만, 내부링크는불가능하고, 앱간호출은보안제약이있음 앱스토어홍보와마케팅을위한비용이필요 플랫폼과단말의종류에한계가있으며, 상위부분에있는것과하위내용과차별화됨 단말의모든기능제어가능 (GPS, camera, voice, RFID, a ddress book, calendar, etc.) 앱이다운로드되고나면, 지원에어려움이있음. 버그가있는부분에대해서는다시등록하고모두에게재다운로드받으라고해야함 앱스토어개발자등록비용이필요 (Apple charges develo pers $99 and enterprises $299, RIM charges $200 ) 앱스토어를통해판매시수익공유 (Apple takes 30%, RI M takes 20%) HTML5 Mobile Application 브라우저를통해접속하며, 설치와업데이트불필요 표준웹만개발하면어디서나볼수있음 어떤부분이건링크로연결가능 검색사이트, 이메일홍보, 트위터링크등으로홍보가능 누구든접속가능 현재는불가능 (HTML 와 Device API 표준화를통해 2011 년부터가능할것으로전망 ) 사이트를수정하면언제든바로업데이트 없음 모두내꺼 User Experience 풍부한사용자인터페이스제공이가능 HTML/CSS/JavaScript 등의기능에의해한정됨 Performance Offline Browsing 바이너리코드로실행되므로속도가빠름 로컬저장소를이용해가능 네트웍을거치며, 서버에서제공되고, 브라우저를통해처리되기에성능변동폭이큼 HTML5 의 App Cache 기능을이용해구현해야지만가능

모바일 HTML5 의영향 [6] 광고 q Apple, 모바일광고플랫폼업체 Quattro Wireless 를인수후, HTML5 기반의모바일광고플랫폼 iad 를발표 è 마이크로웹서비스? 30 앱실행도중광고노출 ( 멀티태스킹지원 ) HTML5 기반의 interactive 광고 ( 또는앱 ) 광고수익의 60% 는개발자몫 ios4 가탑재된단말에서실행 사례 : LED Light for iphone4 Free 앱 iad 첫날광고수입 애플의 40% 징수제외한 60% 수익기준 애플리케이션다운로드횟수약 9,000 건 첫날광고수입은 1,372$ (1 개월지속시 4 만 $ 이상 ) 1,000 회조회당광고수입 ecpm 은 147.55$ 광고조회율은 9,300 회 광고클릭율 (CTR) 은 11.8% 클릭당광고수입 (CPC) 는 1.25 달러 Admob 과비교시 ecpm 11.8 배, 클릭률 7.1 배, CPC 는 1.6 배높음

모바일 HTML5 의영향 [6] 광고 31

모바일 HTML5 의영향 [7] 위치기반서비스 q navigator.geolocation.getcurrentposition q 위치기반응용들 로컬검색 지도서비스 사용자위치트래킹 Geo Social 현재위치기반서비스 32

모바일 HTML5 의영향 [8] 성능향상 웹소켓과 XHR 비교 40 배 33 http://bloga.jp/ws/jq/wakachi/mecab/wakachi.html

모바일 HTML5 의영향 [8] 성능향상 q 5 Signs You Need HTML5 Web Sockets Sign#1: Your application has data that must flow bi-directionally Sign#2: Your application must scale to large numbers of concurrent users Sign#3: Your application must extend TCP-based protocols to the browser Sign#4: Your application developers need an API that is easy to use Sign#5: Your application must extend SOA over the Web and in the cloud Source: http://blog.kaazing.com/?p=352 34

모바일 HTML5 의영향 [8] 성능향상 q Best Practices for a Faster Web App with HTML5 35 Source : http://www.html5rocks.com/tutorials/speed/quick/ Tip 1: Use web storage in place of cookies Tip 2: Use CSS Transitions instead of JavaScript animation Tip 3: Use client-side databases instead of server roundtrips Tip 4: JavaScript improvements lend considerable performance advantages Tip 5: Use cache manifest for live sites, not just offline apps Tip 6: Enable hardware acceleration to enhance visual experience Tip 7: For CPU-heavy operations, Web Workers deliver Tip 8: HTML5 Form attributes and input types Tip 9: Use CSS3 effects instead of requesting heavy image sprites Tip 10: WebSockets for faster delivery with less bandwidth than XHR q Mobile Web Application Best Practices http://www.w3.org/tr/mwabp/

모바일 HTML5 의영향 [9] UI 개선 q HTML5 의새로운 input type 들 Search, tel, url, email datetime, date, month, week, time, and datetime-local Number, range, Color q Mobile Safari (on the iphone) 은 number, email, url 지원을추가 q Chrome 5 beta 에서 placeholder attribute 를지원 36 <label for="email">email address</label> <input id= email type="email" placeholder="jonathan@example.com">

모바일 HTML5 의영향 [10] Hybrid App Comparison: App Inventor, DroidDraw, Rhomobile, PhoneGap, Appcelerator, WebView, and AML 37 http://www.amlcode.com/2010/07/16/comparison-appinventor-rhomobile-phonegap-appcelerator-webview-and-aml/

모바일 HTML5 의영향 [11] 새로운기회 q Multi-Screen q Mobile Commerce q Mobile Search q Voice Browsing q Web on TV q Web 3D, Web GL q Augmented Reality q E-book q Web Game q Web Store & Widget q Device APIs q Security & Privacy 38

모바일 HTML5 의영향 [11] 새로운기회 39

HTML5 관련리소스 q HTML5 - http://www.w3.org/tr/html5/ q HTML5 differences from HTML4 - http://www.w3.org/tr/html5-diff/ q 실전 HTML5 가이드 - http://webstandards.or.kr/html5 q 놀랄만큼유용하고재미있는 HTML5 모바일앱 30개 - http://is.gd/e87hy q Detecting HTML5 Features - http://diveintohtml5.org/detect.html q 기타참조사이트 http://kr.html5doctor.com http://html5gallery.com http://html5demos.com http://html5rocks.com http://html5games.com http://www.html5video.org/ http://www.chromeexperiments.com/ http://html5test.com http://html5readiness.com/ 40

Standardization Activity - Future of Mobile Web Application

Evolution of Web Application Tech. Weaknesses Performance Offline Mode Device Attributes Monetization Overcome -Javascript Acceleration -WebGL Standards -Enhanced CSS Performance -Widget Technology -XHR / AJAX -Web Socket -Web Worker -HTML5 App Cache -Local Storage & Database -W3C Geolocation API -W3C Device API & Policy WG -Widget Store (Web App Store) 42

Evolution of Web Application Tech. HTML5 New Standards Web App. API Device API Widget Hybrid Web New Platform & Browser Real time Web & Social Web Web Application Store Web Cloud Mobile Device & Platform War 43

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 44

Device Capability Web Application Web Application Browser Web Engine Browser Device API Device Capability 45

W3C Device API and Policy WG q Priority APIs Contacts (reading from addressbook) Contacts Writer (writing to addressbook) Calendar HTML Media Capture (camera/microphone interactions through HTML forms) Media Capture API (programmatic access to camera/microphone) Messaging (SMS, MMS, emails) q Other Systems info and events (CPU, network, etc.) Gallery (stored media interactions) Device Interface Application Launcher Tasks User Interaction Communication Log, Policy Framework Policy Markup for Device APIs Device API Features q Informative docs q Exploratory work 46

W3C Web Application WG s deliverables Name of Spec Last Publication Type Remarks Cross-Origin Resource Sharing (CORS) 27-Jul-10 WD Clipboard Operations 15-Nov-06 WD DOM Level 3 Events 03-Sep-09 WD Element Traversal 22-Dec-08 REC File API 17-Nov-09 FPWD File API: Writer 06-Apr-10 FPWD File API: Directories and System [ No Formal Pub ] Indexed Database API 05-Jan-10 WD WebSimpleDB API Programmable HTTP Caching and Serving 14-Jan-10 WD DataCache API Progress Events 21-May-08 WD Selectors API 22-Dec-09 CR Selectors API Level 2 19-Jan-10 FPWD Server-Sent Events 22-Dec-09 LCWD Uniform Messaging Policy (UMP) 26-Jan-10 FPWD See Comparison of CORS and UMP Web SQL Database 22-Dec-09 WD Web Database Web IDL 19-Dec-08 WD Web Sockets API 22-Dec-09 WD Dependency on Web Socket protocol. deck. Web Storage 22-Dec-09 LCWD Web Workers 22-Dec-09 LCWD XBL2 Spec 16-Mar-07 CR XBL2 Primer 18-Jul-07 WD XmlHttpRequest 03-Aug-10 CR XmlHttpRequest Level 2 20-Aug-09 WD Widgets Specifications Name of Spec Last Publication Type Remarks Widget Packaging & Configuration 01-Dec-09 CR The Widget Interface (TWI) 22-Dec-09 CR Widget Access Request Policy (WARP) 20-Apr-10 CR Digital Signatures for Widgets 24-Jun-10 CR Widget URIs 08-Oct-09 LCWD view-mode Media Feature 24-Jun-10 CR Widget Updates 13-Apr-10 WD Widgets 1.0: Landscape 14-Apr-08 WD Widgets 1.0: Requirements 30-Apr-09 WD 47 Source: http://www.w3.org/2008/webapps/wiki/pubstatus#api_specifications

기타새로운작업들 q New WG & XG 48 Web Performance Working Group Voice Browser Working Group Web Notification Working Group Web Application Security Working Group Point of Interest Working Group Linked Data for Government WG Charter Model-Based UI XG Social Web XG q Workshop Workshop on Augmented Reality on the Web Workshop on Web on TV Workshop on Privacy and data usage control Workshop on Emotion Markup Language

.. 그리고, 새로운가능성들.. http://www.youtube.com/watch?v=gl2dwxa1_gw&feature=related 49

맺음말 : 스마트폰과모바일웹 스마트모바일 디바이스의확산 웹생태계의확산 브라우저 고성능화 웹어플리케이션 기술의경쟁 / 발전 모바일웹서비스의 증가 50

맺음말 q 모바일 HTML5 의영향 [1] 새로운웹환경 : 새로운모바일웹, 유무선통합 [2] 데이터서비스 : 데이터수익원증대 [3] Web 2.0의완성 : UI/UX 부분의보완 [4] Rich Web : 보다다양한기능제공, 주요웹서비스활용 [5] HTML5 Apps : HTML5 앱의성장 [6] 광고 : 마이크로사이트, 상호작용형 HTML5 광고시장 [7] 위치기반서비스 : 위치기반서비스 [8] 성능향상 : 빠르고뛰어난웹서비스제공 [9] UI 개선 : 보다편리한 UI 제공 [10] Hybrid App : 앱과통합되는환경 [11] 새로운기회들 51

맺음말 HTML5 는 유무선통합의관점과웹표준기반개발의중요성을일깨우고모바일중심의기술시대가도래함과모바일웹 2.0의새로운시작을알리며새로운웹과앱의개발기회, 새로운수익모델의가능성, 그리고많은새로운웹경험의편리함를제공하는출발점 앞으로의미래는어떻게준비하고시작하느냐에달려 52

Mobile Golden Cross & Golden Age 다양화 Mobile Golden Age Smartphone 표준화완료 HTML5 Apps LTE 전국서비스 2010 2011 2012 2013 hollobit@etri.re.kr 53

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 54