HTML5 의미와전망 : 사례중심 Jonghong Jeon ETRI, SRC Email: hollobit@etri.re.kr Blog: http://mobile2.tistory.com http://twitter.com/hollobit 한국경제신문사 http://www.etri.re.kr
2011.8.6
20 Presents the WWW has given us Vast amounts of digital information Organized access. Communication. Multimedia sharing Entertainment. E-commerce. Real-time news. 3
HTML5 를바라보는 5 가지관점 차세대웹기술의총합의관점으로 HTML5 단말, 플랫폼, 스크린의경계가없도록하는 HTML5 새로운앱과 SW 환경으로서의 HTML5 모든정보, 서비스와사물을묶는관점으로 HTML5 인프라와플랫폼으로서의 HTML5 4
1. Evolution of Web (From Document to App)
Evolution of World Wide Web 6
Evolution of World Wide Web 1단계 (1989~1999) : 웹사이트의시대, HTML과 WAP HTML, URL, HTTP 라는세가지기술에기초한웹기술이제안되고, 보다나은인간중심의정보처리및지식공유등을목표로하는단계 2단계 (2000~2004) : XML과웹서비스, 시맨틱웹 XML(eXtensible Markup Language) 에기반하며인간중심의정보처리뿐아니라다양한디바이스와서비스, 멀티미디어를연결하는것을목표로하는단계 3단계 (2005~2009) : 웹 2.0, 웹플랫폼시대의성장 구글, 아마존, 위키피디아등의성공과함께웹산업을제2의전성기로이끌며다양한신규서비스가등장할수있는기반을마련 4단계 (2010~ 현재 ) : 웹앱의시대, 모바일과 N-Screen 시대 스마트폰및태블릿등다양한모바일기기들을대상으로 HTML5와 Web API를통해한단계진화된웹응용환경을제공하며, 위치정보및소셜정보등을결합하는통합응용플랫폼으로서웹이자리잡아가는단계 7
Evolution of World Wide Web Web Document Web Services Open Web Web App & APIs 웹사이트의시대, HTML 과 WAP 웹서비스의시대 웹 2.0, 웹플랫폼시대 웹앱의시대, 모바일과 N-Screen 시대 8
HTML5? HTML5 로통칭되는요소는 HTML5 뿐아니라 CSS3, 웹어플리케이션을위한 JavaScript API 확장을포함한것 통칭되는 HTML5 HTML5 (Hypertext Markup Language 5.0) 콘텐츠내용과형식을표현 문서구조의상세화 멀티미디어 폼과이벤트등 CSS3 (Cascading Style Sheet 3.0) 콘텐츠표현방법을정의 표현기능모듈화 웹폰트 JavaScript 각종 API 를통해기능을표현 Web Storage Web Worker Web Socket Geolocation API 문서구조의의미를명확히하여디자인과프로그램의독립성을확보 서로다른다양한브라우저상에서일관된표현기능제공, 효과적이고편리한표현방식의변경 풍부한기능과자원을제어할수있는로컬어플리케이션 9
HTML5? 11
HTML5 의주요특징 12 Offline / Storage Web SQL Database Local Storage IndexedDB Application Cache Realtime / Communication Web Workers Web Socket Web Notifications File / Hardware Access Native Drag & Drop Desktop Drag-In (File API) Desktop Drag-Out FileSystem APIs Geolocation Device Orientation Speech Input Semantics & Markup Better semantic tags Markup for applications Descriptive link relations Microdata ARIA attributes Web Form Graphics / Multimedia <Video> / <Audio> Canvas 2D Canvas 3D (WebGL) Inline SVG CSS3 CSS Selectors Web Fonts Nuts & Bolts History API
HTML5 & Web App Technology Timeline 2010 2011 2012 2013 HTML5 Working Draft Canavs Web Workers AppCache W3C Web App. Specs. CSS1 Web form DOM1 DOM2 DOM3 DOM4 CSS2 CSS3 Geolocation FileAPI WebGL Audio/Video WebFont HTTP Javascript AJAX hollobit@etri.re.kr XHR2 13
Evolution of World Wide Web 14 http://evolutionofweb.appspot.com/
W3C Web App. & Web API Standardization Web App WG s status 15 Name of Specification Last Publication ED FPWD WD LCWD CR PR REC Clipboard APIs and Events 2012-02-23 Cross-Origin Resource Sharing (CORS) 2010-07-27 DOM Level 3 Events 2011-05-31 DOM4 2012-01-05 Element Traversal 2008-12-22 File API 2011-10-20 File API: Directories and System 2011-04-19 File API: Writer 2011-04-19 From-Origin Header 2011-07-21 HTML5 Web Messaging 2012-03-03 Indexed Database API 2011-12-06 Java bindings for Web IDL 2012-02-07 Progress Events 2011-09-22 Selectors API 2009-12-22 Selectors API Level 2 2010-01-19 Server-Sent Events 2011-10-20 Shadow DOM Uniform Messaging Policy (UMP) 2010-01-26 Web IDL 2012-02-07 Web Sockets API 2011-12-08 Web Storage 2011-12-08 Web Workers 2012-03-13 XBL2 Primer 2007-07-18 XBL2 Spec 2007-03-16 XmlHttpRequest (Level 2) 2012-01-17 hollobit@etri.re.kr FPWD:First Public Working Draft LCWD: Last Call Working Draft PR: Proposed Recommendation WD: Working Draft CR : Candidate Recommendation REC: Recommendation
Toward the Advanced Web App 16
2. Smart Mobile Age (Single Screen N-Screen)
Changes ( 스마트디바이스급성장 ) 18 Source: http://totoro4.wordpress.com/2011/07/08/smart-device-leads-change-device-side/
Changes ( 스마트모바일시대 ) 19
스마트모바일로패러다임전환 60,000 전체모바일가입자추월 50,000 40,000 인터넷이용자수추월 초고속인터넷가입자 30,000 20,000 10,000 인터넷이용자수 이동통신가입자 스마트폰가입자 초고속인터넷가입자수추월 - 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 20
스마트모바일로패러다임전환 21
스마트모바일 = Multi Device & platform 22
스마트모바일 = Multi Screen & resolution 23
Fragmentation is a big problem Device Content Screen Fragmentations Application Platform Service 24
Solution? Device Content Screen Fragmentations Application Platform Service 25
HTML5 은유일한대안 26
Responsive Web Design http://www.boston.com/bostonglobe/features/ 27
HTML5 지원현황 28 Source: http://html5test.com/results.html
HTML5 지원현황 29 Source: http://visual.ly/current-state-html5
HTML5 Testing Task Force Status 30
Ring mark 31 http://visual.ly/idc-next-level-mobile-web
3. Multi Media & Performance
HTML5? Semantics: HTML5 기술의주요특징 보다구조화되고다양한기능의 HTML 태그를제공 Multimedia: 비디오, 오디오지원기능의자체지원을통한강력한멀티미디어기능제공 Offline & Storage: 네트워크가지원되지않는환경에서도웹이용을가능케하는오프라인처리기능과로컬스토리지, DB, File 액세스처리기능 3D, Graphics & Effects: SVG, 캔버스, WebGL 등을통한다양한 2차원 /3차원그래픽기능의제공 Device Access: GPS, 카메라, 동작센서등디바이스의하드웨어기능을웹에서직접제어할수있도록하는기능 Performance & Integration: 비동기통신, 다중쓰레드기능등을통한웹에서의처리성능을향상 Connectivity: 클라이언트와서버간의효율적인통신기능제공을통한웹기반커뮤니케이션효율대폭강화 CSS3 Styling Effect: 기존웹문서의변경과성능저하없이웹애플리케이션의 UI( 스타일과효과등 ) 기능을대폭강화 시사점 보다지능화되고다양한형태의풍부한웹문서표현가능 액티브 X 와플래쉬같은별도외부플러그필요성제거 웹의한계로여겨졌던네트워크단절시처리방법과데이터저장기능문제해결 외부플러그인기능없이다양한 2D/3D 그래픽처리가능 웹기반디바이스제어기능을통해본격적인웹애플리케이션개발가능 웹의가장큰문제중하나였던성능문제를대폭개선 웹에서의다양한통신기능 ( 메시징, 응용간통신등 ) 제공을통한응용개발범위확대 UI 측면에서 N-스크린서비스제공가능 33
HTML5 의주요특징 34 Offline / Storage Web SQL Database Local Storage IndexedDB Application Cache Realtime / Communication Web Workers Web Socket Web Notifications File / Hardware Access Native Drag & Drop Desktop Drag-In (File API) Desktop Drag-Out FileSystem APIs Geolocation Device Orientation Speech Input Semantics & Markup Better semantic tags Markup for applications Descriptive link relations Microdata ARIA attributes Web Form Graphics / Multimedia <Video> / <Audio> Canvas 2D Canvas 3D (WebGL) Inline SVG CSS3 CSS Selectors Web Fonts Nuts & Bolts History API
HTML5 Audio and Video New HTML5 media elements <audio> and <video> Native audio and video (no plugins required) Programmable with JavaScript Style with CSS Add videos and audio as if it was an image Codec support varies, but multiple source elements and fallback content can be used Complete JavaScript API available 35
Polling vs. WebSocket 36
해외의주요 HTML5 적용서비스들 분야이름 ( 개발사 ) 사이트 HTML5 서비스 시작일 구글 YouTube http://www.youtube.com/html5 2010.01 동영상 Netflix http://www.netflix.com 2010.12 Vimeo http://vimeo.com 2010.01 SlideShare http://www.slideshare.net/html5 2011.09 문서 구글 Docs http://docs.google.com 2010.04 작업 구글 Gmail 구글 Clendar http://www.gmail.com http://google.com/calendar 2011.09 소셜 Facebook s Spartan 2011.08 전자책 Amazon Kindle https://read.amazon.com/ 2011.09 신문사영국 Financial Times http://apps.ft.com/ftwebapp/ 2011.06 게임 http://chrome.angrybirds.com Angry Birds http://facebook.angrybirds.com 2011.05 Cut the Rope http://www.cuttherope.ie 2012.01 Fieldrunner http://fieldrunnershtml5.appspot.com 2011.10 37
Case : Video http://www.justafriend.ie/ 38
Case : Canvas, SVG, Game Twinkle Pop 39 http://game.wren.kr/each/tp/
Case : WebGL + LocalStorage http://chrome.angrybirds.com/ 40
Case : SVG + WebGL http://www.cuttherope.ie/ 41
Case : Audio http://daftpunk.themaninblue.com/ 42
Case: SVG http://slaveryfootprint.org/ 43
3. Web as a Platform
INTERNET PLATFORM & REMIX TV Daum Media Cloud NHN Mobile Web 2.0 Internet remix Apple Facebook Samsung SKT Nokia M2M Google Twitter Car, Home Social 45
The Web as an application platform Standards for Web Applications on Mobile: February 2012 current state and roadmap http://www.w3.org/2012/02/mobile-web-app-state/ 46
Toward WebOS Standardization W3C System Applications Working Group Charter (draft) Alarm API. Example: Tizen Alarm. Keyboard/IME API. Example: Chrome IME Application API. Example: Tizen Application Idle (user) API. Example: B2G Idle Calendar API. Examples: B2G Calendar, Tizen Calendar. Contacts API. Examples:Tizen Contacts, B2G Contacts File System API. Examples: Tizen FileSystem, B2G Device Storage. Messaging API. Examples: Tizen Messaging, B2G Web SMS. Device Capabilities API. Example: Chrome Sockets DNS Resolution API. An API for resolving DNS names. System Settings API. Example: B2G Settings. Accounts API. Media Storage API. Example: Tizen Media Content. Browser API. Example: B2G BrowserAPI Spellcheck API. Background Services API. Example: B2G Background Services. Hardware CapabilitiesBluetooth API. Examples: Tizen Bluetooth, B2G Web Bluetooth. Telephony API. Examples: B2G Web Telephony, Tizen Call. Sensors API. Resource Lock API. Example: B2G Resource Lock. Network Interface API. Examples: B2G Mobile Connection, B2G WiFi Information. USB API. Example: B2G Web USB. Power Management API. Example: B2G Power Management Secure Elements API. Web Intent Registration API. 47
Web of Things 48
Case : Web OS & UI 49
Case : Web OS & UI http://pieos.com 50
5. HTML5 의비즈니스적가치
개발자수요 - HTML5 에대한수요증가 54
기업수요 -HTML5 에대한수요증가 2014년모바일에서 HTML5 성장율은 Flash나 Sliverlight의 10배 2014년유명사이트 100개중 30개는 HTML5 offline 기능적용 HTML5는 Mobile Enterprise Application을위한핵심요소 55
기업수요 -HTML5 에대한수요증가 56
시장효과 - 스마트광고시장의효과 세계온라인광고시장 ( 16 년 280 억달러전망, 모바일광고시장 74% 로 206 억달러예상 ) 한국온라인광고시장 ( 현행대로면 16 년까지 3 조시장, 모바일광고비율 35% 1 조예상 ) 차세대웹을통해모바일광고시장 15% 추가개척시 16 년까지 2 조추가시장창출가능 350,000 hollobit@etri.re.kr, 단위 : 억원 35,000 hollobit@etri.re.kr, 단위 : 억원 300,000 30,000 250,000 25,000 200,000 20,000 150,000 15,000 100,000 10,000 50,000 5,000-2011 2012 2013 2014 2015 2016-2011 2012 2013 2014 2015 2016 데스크탑광고 ( 세계 ) 모바일광고 ( 세계 ) 데스크탑광고 ( 한국 ) 모바일광고 ( 한국 ) 57
시장효과 - 스마트콘텐츠시장의효과 스마트콘텐츠세계시장 ( 11년 151억달러 16년 1055억달러전망 ) 한국스마트콘텐츠세계시장 ( 현행대로면 11년세계시장대비 9% 수준에서 16년까지 3.8% 까지하락성장전망 ) 차세대웹개선을통해스마트콘텐츠경쟁력향상을하고 9% 규모유지시 16년까지 17조추가시장창출가능 1,400,000 1,200,000 1,000,000 800,000 600,000 hollobit@etri.re.kr, 단위 : 억원 400,000 200,000-2011 2012 2013 2014 2015 2016 스마트콘텐츠 ( 세계 ) 가트너스마트콘텐츠 ( 한국 ) KOCCA 성장목표치 58
시장효과 - 스마트상거래시장의효과 온라인쇼핑세계시장 ( 11 년 6896 억달러 16 년 1 조 6100 억달러전망 ) 모바일쇼핑세계시장 ( 11 년 180 억달러, 온라인대비 2.6% 16 년 1666 억달러전망, 10.3%) 한국온라인쇼핑시장 ( 11 년 33.8 조 16 년 68 조성장전망 ) 한국모바일쇼핑시장 ( 현행대로면 11 년 200 억, 온라인대비 0.1% 16 년 2.5 조전망, 3.7%) 차세대웹개선을통해모바일쇼핑시장을향상한다면, 16 년까지 14 조추가시장창출가능 20,000,000 800,000 18,000,000 16,000,000 hollobit@etri.re.kr, 단위 : 억원 700,000 hollobit@etri.re.kr, 단위 : 억원 14,000,000 600,000 12,000,000 500,000 10,000,000 8,000,000 400,000 6,000,000 300,000 4,000,000 200,000 2,000,000-2011 2012 2013 2014 2015 2016 데스크탑상거래 ( 세계 ) 모바일상거래 ( 세계 ) 100,000-2011 2012 2013 2014 2015 2016 온라인쇼핑몰 ( 한국 ) 모바일상거래 ( 한국 ) 59
스마트 TV & HTML5 60
TV, Internet and Web Internet Email, Web Internet Web engine Widget Internet Platform Web App. Marketplace 61
스마트 TV vs. ipad 애플은왜 ipad 를만들었을까? 62
마무리
HTML5 에대한 10 가지궁금증 1. HTML5가뭐죠? 장점은무엇인가요? 2. 모두들 HTML5에대해얘기하고있는데, 정말사용해도되나요? 3. HTML5 표준화가안되었는데도문제없나요? 4. 오래된브라우저도 HTML5를지원할수있나요? 5. 가장중요한새로운기능은무엇입니까? 6. HTML5가 Flash와 ActiveX를교체하나요? 7. HTML5을잘쓰려면무엇을공부해야하나요? 8. 제공자와고객이 HTML5 프로젝트에대해주의해야할점은? 9. HTML5이, 스마트폰애플리케이션개발과같이서로다른운영체제환경을지원하는데효과적일수있나요? 10.HTML5가네이티브앱을대체할까요? 64
HTML5 에대해꼭알아야하는 10 가지 1. HTML5 Markup isn t that big of a deal 2. The power of HTML5 is Javascript 3. How to know if you should embrace HTML5 now? 4. Care about which browsers implement an API, not which specification it belongs to 5. The <video> tag is the easy part 6. JSON now preferred over XML 7. Make it easy on yourself with graceful degradation and feature detection 8. The <canvas> is for more than drawing 9. Many common Javascript-based idioms for animation and effects are now supported by CSS3 10.XHTML is dead, long live XHTML 65 http://www.youtube.com/watch?v=9hcyniwlqzu
Conclusions HTML5 는전부가아닌차세대웹기술의일부 HTML5 는콘텐츠가아닌응용기술 HTML5 규격만이아닌다양한웹표준고려필요 개별생태계가아닌웹의생태계로접근해야 공급자관점이아닌수요자관점필요 폐쇄적생태계가아닌개방형생태계 66
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 67