Top 10 Questions about HTML5
Upcoming SlideShare
Loading in...5
×
 

Top 10 Questions about HTML5

on

  • 8,221 views

한국경제신문사가주관했던 한경IT클럽에서 발표한 HTML5에 관한 10가지 질문에 대한 발표자료입니다. 5개는 제가, 5개는 윤석찬 팀장이 나눠서 발표를 ...

한국경제신문사가주관했던 한경IT클럽에서 발표한 HTML5에 관한 10가지 질문에 대한 발표자료입니다. 5개는 제가, 5개는 윤석찬 팀장이 나눠서 발표를 했습니다. 관심 있으신 분들께 도움이 되시길 바랍니다.

Statistics

Views

Total Views
8,221
Views on SlideShare
5,229
Embed Views
2,992

Actions

Likes
14
Downloads
193
Comments
1

8 Embeds 2,992

http://channy.creation.net 2951
http://us-w1.rockmelt.com 15
http://www.laonsys.com 15
http://blog.naver.com 5
https://twitter.com 2
http://tweetedtimes.com 2
https://si0.twimg.com 1
http://192.168.1.8 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • 윤팀장님 발표자료와 합친 버전으로 다시 올렸습니다 ^^
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Top 10 Questions about HTML5 Top 10 Questions about HTML5 Presentation Transcript

  • hollobit@etri.re.kr한국경제신문사
  • 3
  • HTML5에 대한 10가지 궁금한 것들 1. HTML5의 가장 큰 차이와 특징은 ? (전) 2. HTML5는 마크업인가 개발언어인가 ? 3. HTML5 Canvas, Video, Audio 4. HTML5 표준화, 언제쯤 쓸 수 있나 ? (전) 5. HTML5로 만들면 어디서나 볼 수 있나 ? (전) 6. HTML5 앱이 네이티브 앱을 대체할까 ? (윤) 7. HTML로 ActiveX를 대체할 수 있을까? 공인인증서도? (윤) 8. HTML5 적용한 해외 사례들은 ? (전) 9. HTML5를 공부하려면 뭐부터 공부해야 하나요 ? (전) 10. 앞으로 새로 나올 미래 웹 기술은 ? (윤)4
  • HTML5에 대한 10가지 궁금한 것들5
  • 6
  • HTML5 ?7
  • HTML5 ? HTML5로 통칭되는 요소는 HTML5 뿐 아니라 CSS3, 웹 어플리케 이션을 위한 JavaScript API 확장을 포함한 것 통칭되는 “HTML5” HTML5 CSS3 JavaScript (Hypertext Markup Language 5.0) (Cascading Style Sheet 3.0) 콘텐츠 내용과 형식을 표현 각종 API를 통해 콘텐츠 표현 방법을 정의 기능을 표현  Web Storage  문서구조의 상세화  표현 기능 모듈화  Web Worker  멀티미디어  웹 폰트  Web Socket  폼과 이벤트 등  Geolocation API 서로 다른 다양한 브라우저 상에서 문서 구조의 의미를 명확히 하여 풍부한 기능과 자원을 제어할 수 일관된 표현 기능 제공, 효과적이고 편 디자인과 프로그램의 독립성을 확보 있는 로컬 어플리케이션 리한 표현 방식의 변경8
  • HTML5 ?9
  • HTML5 ? HTML5 기술의 주요 특징 시사점 보다 지능화되고 Semantics: 다양한 형태의 풍부한 보다 구조화되고 다양한 기능의 HTML 태그를 제공 웹 문서 표현 가능 Multimedia: 액티브X와 플래쉬 같은 별도 외부 플 비디오, 오디오 지원 기능의 자체 지원을 통한 강력한 멀티미디어 기능 제 러그 필요성 제거 공 Offline & Storage: 웹의 한계로 여겨졌던 네트워크 단 네트워크가 지원되지 않는 환경에서도 웹 이용을 가능케하는 오프라인 처 절시 처리 방법과 데이터 저장 기능 리 기능과 로컬 스토리지, DB, File 액세스 처리 기능 문제 해결 3D, Graphics & Effects: 외부 플러그인 기능 없이 다양한 SVG, 캔버스, WebGL 등을 통한 다양한 2차원/3차원 그래픽 기능의 제공 2D/3D 그래픽 처리 가능 Device Access: 웹 기반 디바이스 제어 기능을 통해 GPS, 카메라, 동작센서 등 디바이스의 하드웨어 기능을 웹에서 직접 제어 본격적인 웹 애플리케이션 개발 가 할 수 있도록 하는 기능 능 Performance & Integration: 웹의 가장 큰 문제 중 하나였던 성능 비동기 통신, 다중 쓰레드 기능 등을 통한 웹에서의 처리 성능을 향상 문제를 대폭 개선 Connectivity: 웹에서의 다양한 통신기능(메시징, 클라이언트와 서버간의 효율적인 통신 기능 제공을 통한 웹 기반 커뮤니케 응용간 통신 등) 제공을 통한 응용 이션 효율 대폭 강화 개발 범위 확대 CSS3 Styling Effect: UI 측면에서 N-스크린 서비스 제공 기존 웹 문서의 변경과 성능저하 없이 웹 애플리케이션의 UI(스타일과 효 가능 과 등) 기능을 대폭 강화10
  • HTML5의 주요 특징  Offline / Storage  Semantics & Markup  Web SQL Database  Better semantic tags  Local Storage  Markup for applications  Descriptive link relations  IndexedDB  Microdata  Application Cache  ARIA attributes  Realtime / Communication  Web Form  Web Workers  Graphics / Multimedia  Web Socket  <Video> / <Audio>  Web Notifications  Canvas 2D  File / Hardware Access  Canvas 3D (WebGL)  Native Drag & Drop  Inline SVG  Desktop Drag-In (File API)  CSS3  Desktop Drag-Out  CSS Selectors  FileSystem APIs  Web Fonts  Geolocation  Device Orientation  Nuts & Bolts  Speech Input  History API11
  • HTML5를 바라보는 5가지 관점차세대 웹 기술의 총합의 관점으로 HTML5단말, 플랫폼, 스크린의 경계가 없도록 하는 HTML5새로운 앱과 SW 환경으로서의 HTML5모든 정보, 서비스와 사물을 묶는 관점으로 HTML5인프라와 플랫폼으로서의 HTML512
  • 13
  • From Document to Application•1995 2000 2005 2010 Web Hypertext Application Technology Working Group
  • Return to W3C - HTML5 Era
  • Range of HTML5 HTML5 Buzz Word CSS3Geolocation Canvas HTML5 Offline WebRTCWeb Workers Device API Web Form Markup File API Video&Audio Web Sockets WebGL Server-Sent Indexed XMLHttpRequest DOM Storage Events Database API
  • 과거 웹 개발 (Web Document) Model Internet DB ViewPlug-in <! DOCTYPE XHTML…> <title>$title</title> Structure <body> <h1>Hello, Wolrd</h1> </body> </html> Presentation body { font-size: 9pt;} h1 {color:blue;} Function popup(url) { Behavior } window.open(url); Controller
  • 웹 2.0 시대 (Semi-application) Internet Model DBPlug-in View Structure {"Name": "Cheeso", Ajax OpenAPI "Rank": 7} Presentation Controller Behavior
  • HTML 5 기반 (Web application) LocalPlug-in Storage NoSQL Internet Structure Ajax RESTful {"Name": "Cheeso", "Rank": 7} disk Presentation Cloud Computing Behavior
  • 14
  • Media – Audio/Video
  • 2D - Canvas
  • 2D CSS3 Effects
  • 3D WebGL
  • 3D CSS3
  • 3D Games
  • 15
  • W3C HTML5 표준화16
  • HTML5 표준화17
  • HTML5 & Web App Technology Timeline 2010 2011 2012 2013 HTML5 Working Draft Canavs Web Workers AppCache Web form Geolocation FileAPI W3C WebGL Audio/Video WebFont Web App. DOM1 DOM2 DOM3 DOM4Specs. CSS1 CSS2 CSS3 HTTP Javascript AJAX hollobit@etri.re.kr XHR218
  • HTML5 Standardization - W3C HTML WG The W3C HTML WG is scheduled to finish the Recommendation of the HTML5 specs in Q2 2014.  The HTML WG is scheduled to publish a Candidate Recommendation of the HTML5 spec in mid- to late-2012. Specification FPWD WD LCWD CR PR REC 1 HTML5 2007 2010 2011.05 2012 Q2 2014 Q1 2014 Q2 2 HTML+RDFa 1.1 2009 2010 2011.05 2012 Q2 2014 Q1 2014 Q2 3 HTML Microdata 2009 2010 2011.05 2012 Q2 2014 Q1 2014 Q2 4 HTML Canvas 2D Context 2008 2010 2011.05 2012 Q2 2014 Q1 2014 Q2 Polyglot Markup: HTML-Compatible 5 2010 2010 2011.05 2012 Q2 2014 Q1 2014 Q2 XHTML Documents HTML5: Techniques for providing 6 2010 2010 2011.05 2012 Q2 2014 Q1 2014 Q2 useful text alternatives HTML to Platform Accessibility APIs 7 2011 2012.03 2012 Q1 2012 Q2 2014 Q1 2014 Q2 Implementation Guide 8 HTML5 differences from HTML4 2008 2011.05 2012 Q1 2012 Q2 2014 Q1 2014 Q2 9 HTML5: Edition for Web Authors 2011 2011.08 2012 Q1 2012 Q2 2014 Q1 2014 Q2 10 HTML: The Markup Language 2010 2011.03 2012 Q1 2012 Q2 2014 Q1 2014 Q2 hollobit@etri.re.kr FPWD:First Public Working Draft LCWD: Last Call Working Draft PR: Proposed Recommendation WD: Working Draft CR : Candidate Recommendation REC: Recommendation19
  • W3C Web App. & Web API Standardization Web App WG’s status 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: Recommendation20
  • Toward the Advanced Web App21
  • 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  Spellcheck API. Calendar.  Background Services API. Example: B2G  Contacts API. Examples:Tizen Contacts, B2G Background Services. Contacts  Hardware CapabilitiesBluetooth API.  File System API. Examples: Tizen Examples: Tizen Bluetooth, B2G Web Bluetooth. FileSystem, B2G Device Storage.  Telephony API. Examples: B2G Web  Messaging API. Examples: Tizen Messaging, B2G Telephony, Tizen Call. Web SMS.  Sensors API.  Device Capabilities API. Example: Chrome  Resource Lock API. Example: B2G Resource Sockets Lock.  DNS Resolution API. An API for resolving DNS  Network Interface API. Examples: B2G Mobile names. Connection, B2G WiFi Information.  System Settings API. Example: B2G Settings.  USB API. Example: B2G Web USB.  Accounts API.  Power Management API. Example: B2G Power  Media Storage API. Example: Tizen Media Management Content.  Secure Elements API.  Browser API. Example: B2G BrowserAPI  Web Intent Registration API.22
  • HTML5 지원 현황23 Source: http://html5test.com/results.html
  • HTML5 지원 현황24 Source: http://visual.ly/current-state-html5
  • HTML5 개발 계획들25
  • 26
  • Screen Convergence27
  • Multi Screen Solution28
  • HTML5 Testing Task Force Status29
  • Ring mark30 http://visual.ly/idc-next-level-mobile-web
  • 31
  • 웹 앱의 네 가지 문제점소프트웨어 설치 문제로컬 저장 공간 문제인터랙티브한 유저인터페이스 문제서버 의존성의 문제
  • DOM StoragesessionStorage.setItem(version,5);sessionStorage.getItem(version);
  • <input type="file" multiple /><div id=“box" draggable></div>
  • var ws = new WebSocket("ws://example.com/service");ws.onopen = function() { ws.send("message to send");};ws.onmessage = function (evt) { var rev_msg = ev.data…};ws.onclose = function() { // websocket is closed. };
  • WebRTC
  • 32
  • SketchPadhttp://mugtug.com/sketchpad/
  • Hand of Greedhttp://brainiumstudios.com/webapp/
  • 한국의 액티브X
  • Legacy: crypto.signText and CAPICOM
  • 왜 공인 인증은 웹 표준이 없나? 관심이 없어서…
  • Crypto in W3C HTML W/GSimple Keygen • http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2009- April/019206.html • http://www.w3.org/TR/html-markup/keygen.html • Integrates tightly with the form submission model • Issues on Microsoft has no intention of ever implementing the <keygen> element. (Crypto part was changed “optional”)Simple form signing • http://lists.whatwg.org/htdig.cgi/whatwg- whatwg.org/2006-October/007571.html • Strict form submission for crypto.signText
  • Draft: Web Crypto API• http://html5.creation.net/webcrypto-api/• Focused on certificate services, but issues on identity
  • Raising Web IdentityIdentity Crisis • Dead of OpenID and widely usages of OAuth • Lock-in social web giants (Facebook, Twitter) • Needs of self-managed distributed Identity systemBrowserID and DOM Crypt (2011.5) • Mozilla’s new identity policy • http://identity.mozilla.com/post/7616727542/introducing- browserid-a-better-way-to-sign-in • http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2011- May/031741.html
  • Web Cryptography W/Ghttp://www.w3.org/2011/11/webcryptography-charter.htmlPrimary API Features in scope are: – key generation, encryption, decryption, deletion, digital signature generation and verification, hash/message authentication codes, key transport/agreement, strong random number generation, key derivation functions, and key storage and control beyond the lifetime of a single session. In addition, the API should be asynchronous and must prevent or control access to secret key material and other sensitive cryptographic values and settings. Encryption and decryption include both symmetric and asymmetric cryptography.Secondary API Features that may be in scope are: – control of TLS session login/logout, derivation of keys from TLS sessions, a simplified data protection function, multiple key containers, key import/export, a common method for accessing and defining properties of keys, and the lifecycle control of credentials such enrollment, selection, and revocation of credentials with a focus enabling the selection of certificates for signing and encryption.Out of scope: – features including special handling directly for non-opaque key identification schemes, access-control mechanisms beyond the enforcement of the same-origin policy, and functions in the API that require smartcard or other device-specific behavior.
  • Web Cryptography API•http://www.w3.org/2012/webcrypto/WebCryptoAPI/
  • Major Functions– Signature, MAC, Public Key Encryption, Symmetric Encryption and HashRequirements– a standard, cross-browser API– the speed of native crypto implementation– the security of isolating the keys from JavaScript code– persistent key storage and access to system cert/keyUse Cases– http://www.w3.org/wiki/NetflixWebCryptoUseCase– http://www.w3.org/wiki/KoreaWebCryptoUseCase
  • Future PlanSecondary API spec– aka. Web Certificate Service API– TLS login/out, key management including import/export and signing/verification– Discussions for smartcard and USB tokenGet started– Join W3C WebCryptography W/G • http://lists.w3.org/Archives/Public/public-webcrypto/– Join W3C WebCrypto API Community Group • http://www.w3.org/community/webcryptoapi/
  • 33
  • 해외의 주요 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 http://www.gmail.com 2011.09 구글 Clendar http://google.com/calendar 소셜 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 2011.05 http://facebook.angrybirds.com 게임 Cut the Rope http://www.cuttherope.ie 2012.01 Fieldrunner http://fieldrunnershtml5.appspot.com 2011.1034
  • Case : Video http://www.justafriend.ie/35
  • Case : Canvas, SVG, Game Twinkle Pop36 http://game.wren.kr/each/tp/
  • Case : WebGL + LocalStorage http://chrome.angrybirds.com/37
  • Case : Offline & N-Screen https://read.amazon.com38
  • Case : Web OS & UI39
  • Case : Web OS & UI http://pieos.com40
  • 41
  • 서적들 - HTML5, CSS3, 웹 표준 기본서들42
  • 서적들 - 디자이너/기획자를 위한 HTML543
  • 서적들 - 모바일 HTML5 Web App 관련44
  • 서적 - 웹 UI/UX 디자인 관련45
  • HTML5 어떻게 공부하나요 ?HTML5 스펙 너무 어려워요! 게다가 모두 영어!  한글 HTML5 번역본  http://j.mp/html5ko (clearboth.org)그래도 내용이 너무 많아요  웹 개발자를 위한 최소 스펙  http://j.mp/html5devel디자이너/기획자도 알아야 하나요 ?  많은 문서/책자들  HTML5: Edition for Web Authors, …알기쉬운 튜토리얼 및 프리젠테이션은 없나요 ?  Google의 선물  http://www.html5rocks.com그 외에 꼭 추천해주실만한 것은 ?  실전 HTML5 가이드 (한글 PDF)  http://j.mp/html5guide_ko  기타 한글로 된 많은 HTML5, CSS3, JavaScript 관련 서적들46 참고: http://xguru.net/635
  • JavaScript 전성 시대 JavaScript Libraries  http://bit.ly/tVFW6Y  Application Frameworks, Server Side Library, Testing Frameworks  Game Engines, Animation Library, Image manipulation • Akihabara, IMPACT, enchant.js, Unity3D Server-side JavaScript  Node.js : Evented Server-Side Javascript  http://nodejs.org • Google Chrome의 Javascript Engine V8을 단독으로 사용 • 모든 Network I/O는 NonBlocking, File I/O는 Asynchronous • Thread 방식에 비해 뛰어난 성능 • HTTPd, FTPd, IMAP, WebDAV 등 다양한 서버모듈 Javascript로 컴파일 되는 언어들  http://j.mp/hp2pnR  CoffeeScript & Kaffeine : Javascript를 더 간결하게  J2js  Java ByteCode to JS, Script#  C# to JS47
  • 48
  • 현재의 Web Runtime HTML5 Buzz World? CSS3 2D Canvas HTML5 Offline ECMA 5thWebFont(WOF Web Form Markup Audio Data API F) Video & Audio SVG Drag & Drop API DOM Storage WebM Codec Micro Data File API WebGL Web Workers Geolocation Device API Indexed DBXMLHttpRequest 2 Server-Sent Events Web Sockets WebRTC SPDY •http://caniuse.com/
  • Web APIHTML5의 미지원 항목?– 통신: WiFi 정보, 모바일 통신,– 각종 센서: 광센서, 근접센서...– 하드웨어 제어: USB, BlueTooth, NFC...Mozilla Web API– HTML5 내 기본 API 이외 웹 기반 API로서 W3C의 Device API와 함께 빠진 표준안을 제 정하고 구현. •https://wiki.mozilla.org/WebAPI
  • Web API의 구현 현황기존 지원 API– Geolocation (위치 정보), Orientation (가속도 센서), Audio Data API, WebGL (3D 그래픽), Camera API (WebRTC 에 포함)– Android용 Firefox 에서 구현 완료개발 완료 API– SMS, Telephony, Contacts Settings, Network Information Vibration, Pointer Lock Battery Status, Resource Lock (sleeve 금지 ) Light Sensor (광센서), Proximity Sensor (근접센서)개발 중인 API– WebRTC (Camera, P2P 포함) Open Web Apps (앱 관리) Device Storage Idle, Power Management Mobile Connection, WiFi Information (무선 정보),TCP Socket개발 예정 API– UDB Datagram Socket Bluetooth, USB, NFC WebSocket API, Background Service USB Reading(B2G 전용)
  • http://arewemobileyet.com/
  • Boot2GeckoOpen Mobile Web OS– 웹 기반 앱의 실행에 최적화– 폐쇄형 상용 모바일 OS의 대안주요 구성– Gaia – 유저인터페이스– Gecko – 웹 런타임– Linux – Gonk 기반 임베디드 OS https://wiki.mozilla.org/B2G
  • Demo: Find b2g in Youtube!
  • 향후 계획주요 일정– 2012/03/09 - M2.1 Dogfood Release– 2012/03/26 - M2.5 Developer Preview Phone JSConf 에서 개발 단말 배포– 212/06/01 - M3– 2012/06/29 - M4제품화 계획– Telefnica: 올해 중 단말기 출시 (유럽 및 남미)– Deutsche Telekom (T-Mobile) Innovation Labs 개발에 참여.– Adobe, Qualcomm 등도 협력 (PhoneGap 의 B2G 대응)국내에서도 관심 있는 벤더 있음?
  • Mozilla 마켓플레이스목적: 웹 플랫폼으로서 업계표준기술로 어디에서라도 동작하는 애플리케이션 환경 구축단말 및 운영체제 독립적인 웹 앱스토어 구축– 인증, 과금, 커뮤니티 기반 심사 시 스템 채택브라우저 비 의존– Firefox 뿐만 아니라 다른 브라우저 에서 이용 가능 및 하위 호환성 제 공Firefox 베타 버전에 탑재 완료 및올해 정식 릴리스를 예정 •https://marketplace.mozilla.org
  • 미래의 웹 기술 방향서버가 필요 없는 웹– DOM Storage, Indexed DB– WebSocket, WebRTC– Offline App Cache멀티미디어 기반 웹– Audio/Video, 2D(Canvas/SVG), 3D(WebGL)– CSS3(Transform, Animation, 3D)디바이스 독립적 웹– Web API, B2G비즈니스 플랫폼으로서 웹– Mozilla Market Place– BrowserID
  • 결론: 한국의 당면과제PC 웹 - IE 점유율 90%, 크롬 4%, Firefox 2%...– Global: IE 30%, 크롬 30%, Firefox 25%, 기타 10%– 액티브 X 기반 PC 환경 개선모바일 웹 선도 ▶ PC 웹 환경 개선– 모바일 웹 – Android Webkit 72%, iOS Safari 27%...– 모바일 기반의 다양한 웹애플리케이션 장려– 그러나, 안드로이드 중심 생태계 개선대안과 다양성에 대한 공론화 ▶ 글로벌 지향
  • 49
  • 스마트 모바일로 패러다임 전환 60,000 전체 모바일 가입자 추월 50,000 40,000 인터넷 이용자수 추월 초고속 인터넷 가입자 30,000 인터넷 이용자수 이동통신 가입자 스마트폰 가입자 20,000 초고속 인터넷 가입자수 추월 10,000 - 2003 2004 2005 2006 2007 2008 2009 2010 2011 201250
  • 개발자 수요 - HTML5에 대한 수요 증가51
  • 기업 수요 - HTML5에 대한 수요 증가  2014년 모바일에서 HTML5 성장율은 Flash나 Sliverlight의 10배  2014년 유명 사이트 100개중 30개는 HTML5 offline 기능 적용  HTML5는 Mobile Enterprise Application을 위한 핵심 요소52
  • 시장효과 - 스마트 광고 시장의 효과 • 세계 온라인 광고 시장 (‘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,000250,000 25,000200,000 20,000150,000 15,000100,000 10,000 50,000 5,000 - - 2011 2012 2013 2014 2015 2016 2011 2012 2013 2014 2015 2016 데스크탑 광고 (세계) 모바일 광고 (세계) 데스크탑 광고 (한국) 모바일 광고 (한국) 53
  • 시장효과 - 스마트 콘텐츠 시장의 효과• 스마트 콘텐츠 세계 시장 (‘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 성장 목표치54
  • 시장효과 - 스마트 상거래 시장의 효과 • 온라인 쇼핑 세계 시장 (‘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 hollobit@etri.re.kr, 단위: 억원 700,000 hollobit@etri.re.kr, 단위: 억원 16,000,000 14,000,000 600,000 12,000,000 500,000 10,000,000 400,000 8,000,000 6,000,000 300,000 4,000,000 200,000 2,000,000 100,000 - 2011 2012 2013 2014 2015 2016 - 데스크탑 상거래 (세계) 모바일 상거래 (세계) 2011 2012 2013 2014 2015 2016 온라인 쇼핑몰 (한국) 모바일 상거래 (한국)55
  • Thank youFor more discussion : JongHong Jeon (hollobit@etri.re.kr) @hollobit Channy Yun (channy@gmail.com) @channyun