SlideShare una empresa de Scribd logo
1 de 105
Descargar para leer sin conexión
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 API
11
HTML5를 바라보는 5가지 관점
차세대 웹 기술의 총합의 관점으로 HTML5

단말, 플랫폼, 스크린의 경계가 없도록 하는 HTML5

새로운 앱과 SW 환경으로서의 HTML5

모든 정보, 서비스와 사물을 묶는 관점으로 HTML5

인프라와 플랫폼으로서의 HTML5


12
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                     CSS3
Geolocation

                    Canvas      HTML5         Offline
                                                              WebRTC

Web 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
                                            View
Plug-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              DB

Plug-in
                                                  View
          Structure
                                               {"Name": "Cheeso",
                         Ajax        OpenAPI   "Rank": 7}


          Presentation
                                               Controller
           Behavior
HTML 5 기반                           (Web application)



                          Local
Plug-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                                                 DOM4
Specs.

                   CSS1      CSS2                                       CSS3
         HTTP   Javascript          AJAX                  hollobit@etri.re.kr                    XHR2

18
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: Recommendation
19
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: Recommendation
20
Toward the Advanced Web App




21
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 Convergence




27
Multi Screen Solution




28
HTML5 Testing Task Force Status




29
Ring mark




30          http://visual.ly/idc-next-level-mobile-web
31
웹 앱의 네 가지 문제점

소프트웨어 설치 문제

로컬 저장 공간 문제

인터랙티브한 유저인터페이스 문제

서버 의존성의 문제
DOM Storage




sessionStorage.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
SketchPad
http://mugtug.com/sketchpad/
Hand of Greed
http://brainiumstudios.com/webapp/
한국의 액티브X
Legacy: crypto.signText and CAPICOM
왜 공인 인증은 웹 표준이 없나?

     관심이 없어서…
Crypto in W3C HTML W/G
Simple 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 Identity
Identity Crisis
   • Dead of OpenID and widely usages of OAuth
   • Lock-in social web giants (Facebook, Twitter)
   • Needs of self-managed distributed Identity system


BrowserID 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/G
http://www.w3.org/2011/11/webcryptography-charter.html

Primary 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 Hash

Requirements
–   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/key

Use Cases
– http://www.w3.org/wiki/NetflixWebCryptoUseCase
– http://www.w3.org/wiki/KoreaWebCryptoUseCase
Future Plan
Secondary API spec
– aka. Web Certificate Service API
– TLS login/out, key management including
  import/export and signing/verification
– Discussions for smartcard and USB token

Get 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.10


34
Case : Video
 http://www.justafriend.ie/




35
Case : Canvas, SVG, Game
 Twinkle Pop




36                         http://game.wren.kr/each/tp/
Case : WebGL + LocalStorage
 http://chrome.angrybirds.com/




37
Case : Offline & N-Screen

     https://read.amazon.com




38
Case : Web OS & UI




39
Case : Web OS & UI
 http://pieos.com




40
41
서적들 - HTML5, CSS3, 웹 표준 기본서들




42
서적들 - 디자이너/기획자를 위한 HTML5




43
서적들 - 모바일 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 JS


47
48
현재의 Web Runtime
                                   HTML5 Buzz World?


    CSS3
                      2D Canvas
                                        HTML5           Offline                ECMA 5th


WebFont(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 DB


XMLHttpRequest 2           Server-Sent Events       Web Sockets       WebRTC              SPDY




                                  •http://caniuse.com/
Web API
HTML5의 미지원 항목?
– 통신: 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/
Boot2Gecko
Open 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   2012


50
개발자 수요 - 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,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

                      데스크탑 광고 (세계)             모바일 광고 (세계)                      데스크탑 광고 (한국)               모바일 광고 (한국)


 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 you
For more discussion :
 JongHong Jeon (hollobit@etri.re.kr)
   @hollobit
 Channy Yun (channy@gmail.com)
   @channyun

Más contenido relacionado

La actualidad más candente

Html5 강좌파일_v_3.0
Html5 강좌파일_v_3.0Html5 강좌파일_v_3.0
Html5 강좌파일_v_3.0Youngjo Jang
 
태블릿과 HTML5 기술 (조경 인사이트 포럼, 2011)
태블릿과 HTML5 기술 (조경 인사이트 포럼, 2011)태블릿과 HTML5 기술 (조경 인사이트 포럼, 2011)
태블릿과 HTML5 기술 (조경 인사이트 포럼, 2011)Channy Yun
 
HTML5 기반 다매체 연동형 서비스 발전 방향(티비스톰 정운교 이사)
HTML5 기반 다매체 연동형 서비스 발전 방향(티비스톰 정운교 이사)HTML5 기반 다매체 연동형 서비스 발전 방향(티비스톰 정운교 이사)
HTML5 기반 다매체 연동형 서비스 발전 방향(티비스톰 정운교 이사)JeongHeon Lee
 
[D2 오픈세미나]1.html5 api 옥상훈
[D2 오픈세미나]1.html5 api 옥상훈[D2 오픈세미나]1.html5 api 옥상훈
[D2 오픈세미나]1.html5 api 옥상훈NAVER D2
 
인터렉티브를 위한 브리지 서버 Ver1.0
인터렉티브를 위한 브리지 서버 Ver1.0인터렉티브를 위한 브리지 서버 Ver1.0
인터렉티브를 위한 브리지 서버 Ver1.0Wooram Cha
 
개방과 검색 그리고 참여 문화 (2008)
개방과 검색 그리고 참여 문화 (2008)개방과 검색 그리고 참여 문화 (2008)
개방과 검색 그리고 참여 문화 (2008)Channy Yun
 
JavaScript MEAN 스택
JavaScript MEAN 스택JavaScript MEAN 스택
JavaScript MEAN 스택Tai Hoon KIM
 
NAVER의 웹/HTML5환경 대응 현황
NAVER의 웹/HTML5환경 대응 현황NAVER의 웹/HTML5환경 대응 현황
NAVER의 웹/HTML5환경 대응 현황NAVER Engineering
 
W3C HTML5 Conference 2015 - NAVER 웹 기술 및 환경 전망
W3C HTML5 Conference 2015 - NAVER 웹 기술 및 환경 전망W3C HTML5 Conference 2015 - NAVER 웹 기술 및 환경 전망
W3C HTML5 Conference 2015 - NAVER 웹 기술 및 환경 전망NAVER Engineering
 
The comprehensive guide for optimizing the performance of mobile HTML5 Web ap...
The comprehensive guide for optimizing the performance of mobile HTML5 Web ap...The comprehensive guide for optimizing the performance of mobile HTML5 Web ap...
The comprehensive guide for optimizing the performance of mobile HTML5 Web ap...Sang Seok Lim
 
자바카페 프론트엔드스터디 E01 - HTML5
자바카페 프론트엔드스터디 E01 - HTML5자바카페 프론트엔드스터디 E01 - HTML5
자바카페 프론트엔드스터디 E01 - HTML5Young-Beom Rhee
 
HTML5 스펙 소개
HTML5 스펙 소개HTML5 스펙 소개
HTML5 스펙 소개Toby Yun
 
[D2 오픈세미나]4.진보된개발환경 주우영
[D2 오픈세미나]4.진보된개발환경 주우영[D2 오픈세미나]4.진보된개발환경 주우영
[D2 오픈세미나]4.진보된개발환경 주우영NAVER D2
 
[D2 오픈세미나]5.html5 api 테트리스게임_이진권
[D2 오픈세미나]5.html5 api 테트리스게임_이진권[D2 오픈세미나]5.html5 api 테트리스게임_이진권
[D2 오픈세미나]5.html5 api 테트리스게임_이진권NAVER D2
 
차세대 웹비즈니스를 위한 "HTML5"
차세대 웹비즈니스를 위한 "HTML5"차세대 웹비즈니스를 위한 "HTML5"
차세대 웹비즈니스를 위한 "HTML5"Changhwan Yi
 
Process Oriented Architecture
Process Oriented ArchitectureProcess Oriented Architecture
Process Oriented ArchitectureuEngine Solutions
 
Web os세미나.v1.0.111510
Web os세미나.v1.0.111510Web os세미나.v1.0.111510
Web os세미나.v1.0.111510우일 권
 
HTML5 관점에서 본 2014 모바일 웹 앱 개발 동향과 사례 및 발전 방향 전망
HTML5 관점에서 본 2014 모바일 웹 앱 개발 동향과 사례 및 발전 방향 전망HTML5 관점에서 본 2014 모바일 웹 앱 개발 동향과 사례 및 발전 방향 전망
HTML5 관점에서 본 2014 모바일 웹 앱 개발 동향과 사례 및 발전 방향 전망Sang Seok Lim
 

La actualidad más candente (20)

Html5 강좌파일_v_3.0
Html5 강좌파일_v_3.0Html5 강좌파일_v_3.0
Html5 강좌파일_v_3.0
 
HTML5 Tutorial(Korean)
HTML5 Tutorial(Korean)HTML5 Tutorial(Korean)
HTML5 Tutorial(Korean)
 
태블릿과 HTML5 기술 (조경 인사이트 포럼, 2011)
태블릿과 HTML5 기술 (조경 인사이트 포럼, 2011)태블릿과 HTML5 기술 (조경 인사이트 포럼, 2011)
태블릿과 HTML5 기술 (조경 인사이트 포럼, 2011)
 
HTML5 기반 다매체 연동형 서비스 발전 방향(티비스톰 정운교 이사)
HTML5 기반 다매체 연동형 서비스 발전 방향(티비스톰 정운교 이사)HTML5 기반 다매체 연동형 서비스 발전 방향(티비스톰 정운교 이사)
HTML5 기반 다매체 연동형 서비스 발전 방향(티비스톰 정운교 이사)
 
[D2 오픈세미나]1.html5 api 옥상훈
[D2 오픈세미나]1.html5 api 옥상훈[D2 오픈세미나]1.html5 api 옥상훈
[D2 오픈세미나]1.html5 api 옥상훈
 
HTML5 and Smart TV
HTML5 and Smart TVHTML5 and Smart TV
HTML5 and Smart TV
 
인터렉티브를 위한 브리지 서버 Ver1.0
인터렉티브를 위한 브리지 서버 Ver1.0인터렉티브를 위한 브리지 서버 Ver1.0
인터렉티브를 위한 브리지 서버 Ver1.0
 
개방과 검색 그리고 참여 문화 (2008)
개방과 검색 그리고 참여 문화 (2008)개방과 검색 그리고 참여 문화 (2008)
개방과 검색 그리고 참여 문화 (2008)
 
JavaScript MEAN 스택
JavaScript MEAN 스택JavaScript MEAN 스택
JavaScript MEAN 스택
 
NAVER의 웹/HTML5환경 대응 현황
NAVER의 웹/HTML5환경 대응 현황NAVER의 웹/HTML5환경 대응 현황
NAVER의 웹/HTML5환경 대응 현황
 
W3C HTML5 Conference 2015 - NAVER 웹 기술 및 환경 전망
W3C HTML5 Conference 2015 - NAVER 웹 기술 및 환경 전망W3C HTML5 Conference 2015 - NAVER 웹 기술 및 환경 전망
W3C HTML5 Conference 2015 - NAVER 웹 기술 및 환경 전망
 
The comprehensive guide for optimizing the performance of mobile HTML5 Web ap...
The comprehensive guide for optimizing the performance of mobile HTML5 Web ap...The comprehensive guide for optimizing the performance of mobile HTML5 Web ap...
The comprehensive guide for optimizing the performance of mobile HTML5 Web ap...
 
자바카페 프론트엔드스터디 E01 - HTML5
자바카페 프론트엔드스터디 E01 - HTML5자바카페 프론트엔드스터디 E01 - HTML5
자바카페 프론트엔드스터디 E01 - HTML5
 
HTML5 스펙 소개
HTML5 스펙 소개HTML5 스펙 소개
HTML5 스펙 소개
 
[D2 오픈세미나]4.진보된개발환경 주우영
[D2 오픈세미나]4.진보된개발환경 주우영[D2 오픈세미나]4.진보된개발환경 주우영
[D2 오픈세미나]4.진보된개발환경 주우영
 
[D2 오픈세미나]5.html5 api 테트리스게임_이진권
[D2 오픈세미나]5.html5 api 테트리스게임_이진권[D2 오픈세미나]5.html5 api 테트리스게임_이진권
[D2 오픈세미나]5.html5 api 테트리스게임_이진권
 
차세대 웹비즈니스를 위한 "HTML5"
차세대 웹비즈니스를 위한 "HTML5"차세대 웹비즈니스를 위한 "HTML5"
차세대 웹비즈니스를 위한 "HTML5"
 
Process Oriented Architecture
Process Oriented ArchitectureProcess Oriented Architecture
Process Oriented Architecture
 
Web os세미나.v1.0.111510
Web os세미나.v1.0.111510Web os세미나.v1.0.111510
Web os세미나.v1.0.111510
 
HTML5 관점에서 본 2014 모바일 웹 앱 개발 동향과 사례 및 발전 방향 전망
HTML5 관점에서 본 2014 모바일 웹 앱 개발 동향과 사례 및 발전 방향 전망HTML5 관점에서 본 2014 모바일 웹 앱 개발 동향과 사례 및 발전 방향 전망
HTML5 관점에서 본 2014 모바일 웹 앱 개발 동향과 사례 및 발전 방향 전망
 

Destacado

HTML5 and Mobile Web (2009)
HTML5 and Mobile Web (2009)HTML5 and Mobile Web (2009)
HTML5 and Mobile Web (2009)Channy Yun
 
HTML5 소개 및 배우기- HTML5 Open Conference
HTML5 소개 및 배우기- HTML5 Open ConferenceHTML5 소개 및 배우기- HTML5 Open Conference
HTML5 소개 및 배우기- HTML5 Open ConferenceChanny Yun
 
HTML5 in Korea (2010)
HTML5 in Korea (2010)HTML5 in Korea (2010)
HTML5 in Korea (2010)Channy Yun
 
(2015년 상반기) HTML5 및 Hybrid app 최신 동향
(2015년 상반기) HTML5 및 Hybrid app 최신 동향(2015년 상반기) HTML5 및 Hybrid app 최신 동향
(2015년 상반기) HTML5 및 Hybrid app 최신 동향Wonsuk Lee
 
처음부터 다시 배우는 HTML5 & CSS3 1일차
처음부터 다시 배우는 HTML5 & CSS3 1일차처음부터 다시 배우는 HTML5 & CSS3 1일차
처음부터 다시 배우는 HTML5 & CSS3 1일차Michael Yang
 
처음부터 다시 배우는 HTML5 & CSS3 강의자료 2일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 2일차처음부터 다시 배우는 HTML5 & CSS3 강의자료 2일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 2일차Michael Yang
 
Web app 개발 방법론
Web app 개발 방법론Web app 개발 방법론
Web app 개발 방법론Sang Seok Lim
 
HTML5 관점에서 2015년 웹 앱 개발 동향과 사례 및 2016년 발전 방향 저...
HTML5 관점에서 2015년 웹 앱 개발 동향과 사례 및 2016년 발전 방향 저...HTML5 관점에서 2015년 웹 앱 개발 동향과 사례 및 2016년 발전 방향 저...
HTML5 관점에서 2015년 웹 앱 개발 동향과 사례 및 2016년 발전 방향 저...Sang Seok Lim
 
웹 접근성의 이해 - 한국형 웹 콘텐츠 접근성 2.0을 중심으로
웹 접근성의 이해 - 한국형 웹 콘텐츠 접근성 2.0을 중심으로웹 접근성의 이해 - 한국형 웹 콘텐츠 접근성 2.0을 중심으로
웹 접근성의 이해 - 한국형 웹 콘텐츠 접근성 2.0을 중심으로Joon-Ho Hyun
 
스마트시대를 준비하는 웹표준 RIA
스마트시대를 준비하는 웹표준 RIA스마트시대를 준비하는 웹표준 RIA
스마트시대를 준비하는 웹표준 RIA욱래 김
 
차세대 웹(Html5) 플랫폼의 동향과 기업 업무 적용 방안
차세대 웹(Html5) 플랫폼의 동향과 기업 업무 적용 방안차세대 웹(Html5) 플랫폼의 동향과 기업 업무 적용 방안
차세대 웹(Html5) 플랫폼의 동향과 기업 업무 적용 방안욱래 김
 
Flexplatform 서비스 소개서
Flexplatform 서비스 소개서Flexplatform 서비스 소개서
Flexplatform 서비스 소개서sucommunication
 
오늘 당장 시작하는 HTML5
오늘 당장 시작하는 HTML5오늘 당장 시작하는 HTML5
오늘 당장 시작하는 HTML5Taegon Kim
 
The Status Of Web Interoperability And Activities In China, Japan And Korea
The Status Of Web Interoperability And Activities In China, Japan And KoreaThe Status Of Web Interoperability And Activities In China, Japan And Korea
The Status Of Web Interoperability And Activities In China, Japan And KoreaChanny Yun
 
2012, 대한민국 웹 표준, 그 기로에 서다
2012, 대한민국 웹 표준, 그 기로에 서다2012, 대한민국 웹 표준, 그 기로에 서다
2012, 대한민국 웹 표준, 그 기로에 서다Jonathan Jeon
 
The History and Status of Web Crypto API (2012)
The History and Status of Web Crypto API (2012)The History and Status of Web Crypto API (2012)
The History and Status of Web Crypto API (2012)Channy Yun
 
골때리는 자바스크립트 발표자료
골때리는 자바스크립트 발표자료골때리는 자바스크립트 발표자료
골때리는 자바스크립트 발표자료욱진 양
 
시나브로 CSS3
시나브로 CSS3시나브로 CSS3
시나브로 CSS3승환 오
 
헷갈리는 자바스크립트 정리
헷갈리는 자바스크립트 정리헷갈리는 자바스크립트 정리
헷갈리는 자바스크립트 정리은숙 이
 

Destacado (20)

HTML5 and Mobile Web (2009)
HTML5 and Mobile Web (2009)HTML5 and Mobile Web (2009)
HTML5 and Mobile Web (2009)
 
HTML5 소개 및 배우기- HTML5 Open Conference
HTML5 소개 및 배우기- HTML5 Open ConferenceHTML5 소개 및 배우기- HTML5 Open Conference
HTML5 소개 및 배우기- HTML5 Open Conference
 
HTML5 in Korea (2010)
HTML5 in Korea (2010)HTML5 in Korea (2010)
HTML5 in Korea (2010)
 
(2015년 상반기) HTML5 및 Hybrid app 최신 동향
(2015년 상반기) HTML5 및 Hybrid app 최신 동향(2015년 상반기) HTML5 및 Hybrid app 최신 동향
(2015년 상반기) HTML5 및 Hybrid app 최신 동향
 
처음부터 다시 배우는 HTML5 & CSS3 1일차
처음부터 다시 배우는 HTML5 & CSS3 1일차처음부터 다시 배우는 HTML5 & CSS3 1일차
처음부터 다시 배우는 HTML5 & CSS3 1일차
 
N-Screen 종결자, HTML5
N-Screen 종결자, HTML5N-Screen 종결자, HTML5
N-Screen 종결자, HTML5
 
처음부터 다시 배우는 HTML5 & CSS3 강의자료 2일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 2일차처음부터 다시 배우는 HTML5 & CSS3 강의자료 2일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 2일차
 
Web app 개발 방법론
Web app 개발 방법론Web app 개발 방법론
Web app 개발 방법론
 
HTML5 관점에서 2015년 웹 앱 개발 동향과 사례 및 2016년 발전 방향 저...
HTML5 관점에서 2015년 웹 앱 개발 동향과 사례 및 2016년 발전 방향 저...HTML5 관점에서 2015년 웹 앱 개발 동향과 사례 및 2016년 발전 방향 저...
HTML5 관점에서 2015년 웹 앱 개발 동향과 사례 및 2016년 발전 방향 저...
 
웹 접근성의 이해 - 한국형 웹 콘텐츠 접근성 2.0을 중심으로
웹 접근성의 이해 - 한국형 웹 콘텐츠 접근성 2.0을 중심으로웹 접근성의 이해 - 한국형 웹 콘텐츠 접근성 2.0을 중심으로
웹 접근성의 이해 - 한국형 웹 콘텐츠 접근성 2.0을 중심으로
 
스마트시대를 준비하는 웹표준 RIA
스마트시대를 준비하는 웹표준 RIA스마트시대를 준비하는 웹표준 RIA
스마트시대를 준비하는 웹표준 RIA
 
차세대 웹(Html5) 플랫폼의 동향과 기업 업무 적용 방안
차세대 웹(Html5) 플랫폼의 동향과 기업 업무 적용 방안차세대 웹(Html5) 플랫폼의 동향과 기업 업무 적용 방안
차세대 웹(Html5) 플랫폼의 동향과 기업 업무 적용 방안
 
Flexplatform 서비스 소개서
Flexplatform 서비스 소개서Flexplatform 서비스 소개서
Flexplatform 서비스 소개서
 
오늘 당장 시작하는 HTML5
오늘 당장 시작하는 HTML5오늘 당장 시작하는 HTML5
오늘 당장 시작하는 HTML5
 
The Status Of Web Interoperability And Activities In China, Japan And Korea
The Status Of Web Interoperability And Activities In China, Japan And KoreaThe Status Of Web Interoperability And Activities In China, Japan And Korea
The Status Of Web Interoperability And Activities In China, Japan And Korea
 
2012, 대한민국 웹 표준, 그 기로에 서다
2012, 대한민국 웹 표준, 그 기로에 서다2012, 대한민국 웹 표준, 그 기로에 서다
2012, 대한민국 웹 표준, 그 기로에 서다
 
The History and Status of Web Crypto API (2012)
The History and Status of Web Crypto API (2012)The History and Status of Web Crypto API (2012)
The History and Status of Web Crypto API (2012)
 
골때리는 자바스크립트 발표자료
골때리는 자바스크립트 발표자료골때리는 자바스크립트 발표자료
골때리는 자바스크립트 발표자료
 
시나브로 CSS3
시나브로 CSS3시나브로 CSS3
시나브로 CSS3
 
헷갈리는 자바스크립트 정리
헷갈리는 자바스크립트 정리헷갈리는 자바스크립트 정리
헷갈리는 자바스크립트 정리
 

Similar a Top 10 Questions about HTML5

Javascript and Web Performance
Javascript and Web PerformanceJavascript and Web Performance
Javascript and Web PerformanceJonathan Jeon
 
Mozilla 오픈 웹 모바일 플랫폼 (2012)
Mozilla 오픈 웹 모바일 플랫폼 (2012)Mozilla 오픈 웹 모바일 플랫폼 (2012)
Mozilla 오픈 웹 모바일 플랫폼 (2012)Channy Yun
 
하이브리드 앱(Hybrid App)
하이브리드 앱(Hybrid App)하이브리드 앱(Hybrid App)
하이브리드 앱(Hybrid App)Changhwan Yi
 
01.모바일 프레임워크 이론
01.모바일 프레임워크 이론01.모바일 프레임워크 이론
01.모바일 프레임워크 이론Hankyo
 
네이티브 웹앱 기술 동향 및 전망
네이티브 웹앱 기술 동향 및 전망네이티브 웹앱 기술 동향 및 전망
네이티브 웹앱 기술 동향 및 전망Wonsuk Lee
 
네이티브 웹앱 기술 동향 및 전망
네이티브 웹앱 기술 동향 및 전망네이티브 웹앱 기술 동향 및 전망
네이티브 웹앱 기술 동향 및 전망Wonsuk Lee
 
Unionweb프로젝트
Unionweb프로젝트Unionweb프로젝트
Unionweb프로젝트Dong-Jin Park
 
[D2 오픈세미나]3.자바스크립트mean스택 김태훈
[D2 오픈세미나]3.자바스크립트mean스택 김태훈[D2 오픈세미나]3.자바스크립트mean스택 김태훈
[D2 오픈세미나]3.자바스크립트mean스택 김태훈NAVER D2
 
HTML5 융합 기술 표준화 동향
HTML5 융합 기술 표준화 동향HTML5 융합 기술 표준화 동향
HTML5 융합 기술 표준화 동향Jonathan Jeon
 
Future Web and WoT(Web of Things)
Future Web and WoT(Web of Things)Future Web and WoT(Web of Things)
Future Web and WoT(Web of Things)Jonathan Jeon
 
OCE - Cno 2014 private sector oriented open paas oce
OCE - Cno 2014 private sector oriented open paas   oceOCE - Cno 2014 private sector oriented open paas   oce
OCE - Cno 2014 private sector oriented open paas oceuEngine Solutions
 
웹 2.0 기술 소개 (2006)
웹 2.0 기술 소개 (2006)웹 2.0 기술 소개 (2006)
웹 2.0 기술 소개 (2006)Channy Yun
 
Swc발표자료3 1(seoul case1)
Swc발표자료3 1(seoul case1)Swc발표자료3 1(seoul case1)
Swc발표자료3 1(seoul case1)마경근 마
 
2011 04-22 oracle
2011 04-22 oracle2011 04-22 oracle
2011 04-22 oracleCana Ko
 
웹의 발전과 Adobe Air
웹의 발전과 Adobe Air웹의 발전과 Adobe Air
웹의 발전과 Adobe Air재훈 임
 
[HCI2010]UI패턴기반 UI설계/개발자동화사례발표
[HCI2010]UI패턴기반 UI설계/개발자동화사례발표[HCI2010]UI패턴기반 UI설계/개발자동화사례발표
[HCI2010]UI패턴기반 UI설계/개발자동화사례발표ChangGyum Kim
 
Web develop UI/UX Tool 'SBUx'
Web develop UI/UX Tool 'SBUx'Web develop UI/UX Tool 'SBUx'
Web develop UI/UX Tool 'SBUx'ssuser4e0be8
 
Service-Oriented Architecture in a Nutshell
Service-Oriented Architecture in a NutshellService-Oriented Architecture in a Nutshell
Service-Oriented Architecture in a NutshellSamsung Electronics
 
[Korea Linux Forum] Implementing web based online multiplayer tetris with Ope...
[Korea Linux Forum] Implementing web based online multiplayer tetris with Ope...[Korea Linux Forum] Implementing web based online multiplayer tetris with Ope...
[Korea Linux Forum] Implementing web based online multiplayer tetris with Ope...JinKwon Lee
 

Similar a Top 10 Questions about HTML5 (20)

Javascript and Web Performance
Javascript and Web PerformanceJavascript and Web Performance
Javascript and Web Performance
 
Mozilla 오픈 웹 모바일 플랫폼 (2012)
Mozilla 오픈 웹 모바일 플랫폼 (2012)Mozilla 오픈 웹 모바일 플랫폼 (2012)
Mozilla 오픈 웹 모바일 플랫폼 (2012)
 
하이브리드 앱(Hybrid App)
하이브리드 앱(Hybrid App)하이브리드 앱(Hybrid App)
하이브리드 앱(Hybrid App)
 
01.모바일 프레임워크 이론
01.모바일 프레임워크 이론01.모바일 프레임워크 이론
01.모바일 프레임워크 이론
 
네이티브 웹앱 기술 동향 및 전망
네이티브 웹앱 기술 동향 및 전망네이티브 웹앱 기술 동향 및 전망
네이티브 웹앱 기술 동향 및 전망
 
네이티브 웹앱 기술 동향 및 전망
네이티브 웹앱 기술 동향 및 전망네이티브 웹앱 기술 동향 및 전망
네이티브 웹앱 기술 동향 및 전망
 
Unionweb프로젝트
Unionweb프로젝트Unionweb프로젝트
Unionweb프로젝트
 
[D2 오픈세미나]3.자바스크립트mean스택 김태훈
[D2 오픈세미나]3.자바스크립트mean스택 김태훈[D2 오픈세미나]3.자바스크립트mean스택 김태훈
[D2 오픈세미나]3.자바스크립트mean스택 김태훈
 
HTML5 융합 기술 표준화 동향
HTML5 융합 기술 표준화 동향HTML5 융합 기술 표준화 동향
HTML5 융합 기술 표준화 동향
 
Future Web and WoT(Web of Things)
Future Web and WoT(Web of Things)Future Web and WoT(Web of Things)
Future Web and WoT(Web of Things)
 
OCE - Cno 2014 private sector oriented open paas oce
OCE - Cno 2014 private sector oriented open paas   oceOCE - Cno 2014 private sector oriented open paas   oce
OCE - Cno 2014 private sector oriented open paas oce
 
웹 2.0 기술 소개 (2006)
웹 2.0 기술 소개 (2006)웹 2.0 기술 소개 (2006)
웹 2.0 기술 소개 (2006)
 
Swc발표자료3 1(seoul case1)
Swc발표자료3 1(seoul case1)Swc발표자료3 1(seoul case1)
Swc발표자료3 1(seoul case1)
 
2011 04-22 oracle
2011 04-22 oracle2011 04-22 oracle
2011 04-22 oracle
 
웹의 발전과 Adobe Air
웹의 발전과 Adobe Air웹의 발전과 Adobe Air
웹의 발전과 Adobe Air
 
[HCI2010]UI패턴기반 UI설계/개발자동화사례발표
[HCI2010]UI패턴기반 UI설계/개발자동화사례발표[HCI2010]UI패턴기반 UI설계/개발자동화사례발표
[HCI2010]UI패턴기반 UI설계/개발자동화사례발표
 
Web develop UI/UX Tool 'SBUx'
Web develop UI/UX Tool 'SBUx'Web develop UI/UX Tool 'SBUx'
Web develop UI/UX Tool 'SBUx'
 
모바일환경과 개발방향
모바일환경과 개발방향 모바일환경과 개발방향
모바일환경과 개발방향
 
Service-Oriented Architecture in a Nutshell
Service-Oriented Architecture in a NutshellService-Oriented Architecture in a Nutshell
Service-Oriented Architecture in a Nutshell
 
[Korea Linux Forum] Implementing web based online multiplayer tetris with Ope...
[Korea Linux Forum] Implementing web based online multiplayer tetris with Ope...[Korea Linux Forum] Implementing web based online multiplayer tetris with Ope...
[Korea Linux Forum] Implementing web based online multiplayer tetris with Ope...
 

Más de Jonathan Jeon

Standardization for Artificial Intelligence in Medicine
Standardization for Artificial Intelligence in MedicineStandardization for Artificial Intelligence in Medicine
Standardization for Artificial Intelligence in MedicineJonathan Jeon
 
IoT 및 인공지능을 활용한 헬스케어 제품․서비스 개발 동향 및 주요 과제
IoT 및 인공지능을 활용한  헬스케어 제품․서비스  개발 동향 및 주요 과제IoT 및 인공지능을 활용한  헬스케어 제품․서비스  개발 동향 및 주요 과제
IoT 및 인공지능을 활용한 헬스케어 제품․서비스 개발 동향 및 주요 과제Jonathan Jeon
 
헬스케어 웨어러블 : 주요 동향과 이슈
헬스케어 웨어러블 : 주요 동향과 이슈헬스케어 웨어러블 : 주요 동향과 이슈
헬스케어 웨어러블 : 주요 동향과 이슈Jonathan Jeon
 
4차 산업혁명 시대, 의료기기 표준화 이슈
4차 산업혁명 시대, 의료기기 표준화 이슈4차 산업혁명 시대, 의료기기 표준화 이슈
4차 산업혁명 시대, 의료기기 표준화 이슈Jonathan Jeon
 
Trends on standardization for smart wearable devices & services (ITU-T, OCF, ...
Trends on standardization for smart wearable devices & services (ITU-T, OCF, ...Trends on standardization for smart wearable devices & services (ITU-T, OCF, ...
Trends on standardization for smart wearable devices & services (ITU-T, OCF, ...Jonathan Jeon
 
AI and IoT : How do IoT and AI change the world?
AI and IoT : How do IoT and AI change the world?AI and IoT : How do IoT and AI change the world?
AI and IoT : How do IoT and AI change the world?Jonathan Jeon
 
Web Browser as Universal client for IoT
Web Browser as Universal client for IoTWeb Browser as Universal client for IoT
Web Browser as Universal client for IoTJonathan Jeon
 
OCF/IoTivity for Healthcare/Fitness/Wearable
OCF/IoTivity for Healthcare/Fitness/WearableOCF/IoTivity for Healthcare/Fitness/Wearable
OCF/IoTivity for Healthcare/Fitness/WearableJonathan Jeon
 
#3 Quantified Self Seoul Meetup
#3 Quantified Self Seoul Meetup #3 Quantified Self Seoul Meetup
#3 Quantified Self Seoul Meetup Jonathan Jeon
 
Trends on Smart Wearable Application Standardization
Trends on Smart Wearable Application StandardizationTrends on Smart Wearable Application Standardization
Trends on Smart Wearable Application StandardizationJonathan Jeon
 
New ICT Trends in CES 2016
New ICT Trends in CES 2016New ICT Trends in CES 2016
New ICT Trends in CES 2016Jonathan Jeon
 
The Web, After HTML5
The Web, After HTML5The Web, After HTML5
The Web, After HTML5Jonathan Jeon
 
Open Source and Open Standards
Open Source and Open StandardsOpen Source and Open Standards
Open Source and Open StandardsJonathan Jeon
 
Open Source and Open Standards
Open Source and Open StandardsOpen Source and Open Standards
Open Source and Open StandardsJonathan Jeon
 
Hybrid App Platform - HyWAI 3.5
Hybrid App Platform - HyWAI 3.5Hybrid App Platform - HyWAI 3.5
Hybrid App Platform - HyWAI 3.5Jonathan Jeon
 
HyWAI Web Bluetooth API
HyWAI Web Bluetooth APIHyWAI Web Bluetooth API
HyWAI Web Bluetooth APIJonathan Jeon
 
WoT.js - WoT App. Framework for Open Source Hardware
WoT.js - WoT App. Framework for Open Source HardwareWoT.js - WoT App. Framework for Open Source Hardware
WoT.js - WoT App. Framework for Open Source HardwareJonathan Jeon
 
IoT and WoT (Internet of Things and Web of Things)
IoT and WoT (Internet of Things and Web of Things)IoT and WoT (Internet of Things and Web of Things)
IoT and WoT (Internet of Things and Web of Things)Jonathan Jeon
 
Web Technology and Standards Tutorial
Web Technology and Standards Tutorial Web Technology and Standards Tutorial
Web Technology and Standards Tutorial Jonathan Jeon
 

Más de Jonathan Jeon (20)

Standardization for Artificial Intelligence in Medicine
Standardization for Artificial Intelligence in MedicineStandardization for Artificial Intelligence in Medicine
Standardization for Artificial Intelligence in Medicine
 
IoT 및 인공지능을 활용한 헬스케어 제품․서비스 개발 동향 및 주요 과제
IoT 및 인공지능을 활용한  헬스케어 제품․서비스  개발 동향 및 주요 과제IoT 및 인공지능을 활용한  헬스케어 제품․서비스  개발 동향 및 주요 과제
IoT 및 인공지능을 활용한 헬스케어 제품․서비스 개발 동향 및 주요 과제
 
헬스케어 웨어러블 : 주요 동향과 이슈
헬스케어 웨어러블 : 주요 동향과 이슈헬스케어 웨어러블 : 주요 동향과 이슈
헬스케어 웨어러블 : 주요 동향과 이슈
 
4차 산업혁명 시대, 의료기기 표준화 이슈
4차 산업혁명 시대, 의료기기 표준화 이슈4차 산업혁명 시대, 의료기기 표준화 이슈
4차 산업혁명 시대, 의료기기 표준화 이슈
 
Trends on standardization for smart wearable devices & services (ITU-T, OCF, ...
Trends on standardization for smart wearable devices & services (ITU-T, OCF, ...Trends on standardization for smart wearable devices & services (ITU-T, OCF, ...
Trends on standardization for smart wearable devices & services (ITU-T, OCF, ...
 
AI and IoT : How do IoT and AI change the world?
AI and IoT : How do IoT and AI change the world?AI and IoT : How do IoT and AI change the world?
AI and IoT : How do IoT and AI change the world?
 
Web Browser as Universal client for IoT
Web Browser as Universal client for IoTWeb Browser as Universal client for IoT
Web Browser as Universal client for IoT
 
OCF/IoTivity for Healthcare/Fitness/Wearable
OCF/IoTivity for Healthcare/Fitness/WearableOCF/IoTivity for Healthcare/Fitness/Wearable
OCF/IoTivity for Healthcare/Fitness/Wearable
 
#3 Quantified Self Seoul Meetup
#3 Quantified Self Seoul Meetup #3 Quantified Self Seoul Meetup
#3 Quantified Self Seoul Meetup
 
Trends on Smart Wearable Application Standardization
Trends on Smart Wearable Application StandardizationTrends on Smart Wearable Application Standardization
Trends on Smart Wearable Application Standardization
 
New ICT Trends in CES 2016
New ICT Trends in CES 2016New ICT Trends in CES 2016
New ICT Trends in CES 2016
 
The Web, After HTML5
The Web, After HTML5The Web, After HTML5
The Web, After HTML5
 
Open Source and Open Standards
Open Source and Open StandardsOpen Source and Open Standards
Open Source and Open Standards
 
Open Source and Open Standards
Open Source and Open StandardsOpen Source and Open Standards
Open Source and Open Standards
 
Hybrid App Platform - HyWAI 3.5
Hybrid App Platform - HyWAI 3.5Hybrid App Platform - HyWAI 3.5
Hybrid App Platform - HyWAI 3.5
 
HyWAI Web Bluetooth API
HyWAI Web Bluetooth APIHyWAI Web Bluetooth API
HyWAI Web Bluetooth API
 
WoT.js - WoT App. Framework for Open Source Hardware
WoT.js - WoT App. Framework for Open Source HardwareWoT.js - WoT App. Framework for Open Source Hardware
WoT.js - WoT App. Framework for Open Source Hardware
 
IoT and WoT (Internet of Things and Web of Things)
IoT and WoT (Internet of Things and Web of Things)IoT and WoT (Internet of Things and Web of Things)
IoT and WoT (Internet of Things and Web of Things)
 
Web Technology and Standards Tutorial
Web Technology and Standards Tutorial Web Technology and Standards Tutorial
Web Technology and Standards Tutorial
 
Mobile, IoT and Web
Mobile, IoT and WebMobile, IoT and Web
Mobile, IoT and Web
 

Top 10 Questions about HTML5

  • 2.
  • 3. 3
  • 4. 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
  • 5. HTML5에 대한 10가지 궁금한 것들 5
  • 6. 6
  • 8. 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
  • 10. 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
  • 11. 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 API 11
  • 12. HTML5를 바라보는 5가지 관점 차세대 웹 기술의 총합의 관점으로 HTML5 단말, 플랫폼, 스크린의 경계가 없도록 하는 HTML5 새로운 앱과 SW 환경으로서의 HTML5 모든 정보, 서비스와 사물을 묶는 관점으로 HTML5 인프라와 플랫폼으로서의 HTML5 12
  • 13. 13
  • 14. From Document to Application •1995 2000 2005 2010 Web Hypertext Application Technology Working Group
  • 15. Return to W3C - HTML5 Era
  • 16. Range of HTML5 HTML5 Buzz Word CSS3 Geolocation Canvas HTML5 Offline WebRTC Web Workers Device API Web Form Markup File API Video&Audio Web Sockets WebGL Server-Sent Indexed XMLHttpRequest DOM Storage Events Database API
  • 17. 과거 웹 개발 (Web Document) Model Internet DB View Plug-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
  • 18. 웹 2.0 시대 (Semi-application) Internet Model DB Plug-in View Structure {"Name": "Cheeso", Ajax OpenAPI "Rank": 7} Presentation Controller Behavior
  • 19. HTML 5 기반 (Web application) Local Plug-in Storage NoSQL Internet Structure Ajax RESTful {"Name": "Cheeso", "Rank": 7} disk Presentation Cloud Computing Behavior
  • 20.
  • 21. 14
  • 28.
  • 29. 15
  • 32. 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 DOM4 Specs. CSS1 CSS2 CSS3 HTTP Javascript AJAX hollobit@etri.re.kr XHR2 18
  • 33. 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: Recommendation 19
  • 34. 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: Recommendation 20
  • 35. Toward the Advanced Web App 21
  • 36. 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
  • 37. HTML5 지원 현황 23 Source: http://html5test.com/results.html
  • 38. HTML5 지원 현황 24 Source: http://visual.ly/current-state-html5
  • 40. 26
  • 43. HTML5 Testing Task Force Status 29
  • 44. Ring mark 30 http://visual.ly/idc-next-level-mobile-web
  • 45. 31
  • 46.
  • 47. 웹 앱의 네 가지 문제점 소프트웨어 설치 문제 로컬 저장 공간 문제 인터랙티브한 유저인터페이스 문제 서버 의존성의 문제
  • 48.
  • 49.
  • 51.
  • 52. <input type="file" multiple /> <div id=“box" draggable></div>
  • 53.
  • 54. 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. };
  • 56. 32
  • 57.
  • 60.
  • 63. 왜 공인 인증은 웹 표준이 없나? 관심이 없어서…
  • 64. Crypto in W3C HTML W/G Simple 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
  • 65. Draft: Web Crypto API • http://html5.creation.net/webcrypto-api/ • Focused on certificate services, but issues on identity
  • 66. Raising Web Identity Identity Crisis • Dead of OpenID and widely usages of OAuth • Lock-in social web giants (Facebook, Twitter) • Needs of self-managed distributed Identity system BrowserID 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
  • 67. Web Cryptography W/G http://www.w3.org/2011/11/webcryptography-charter.html Primary 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.
  • 69. Major Functions – Signature, MAC, Public Key Encryption, Symmetric Encryption and Hash Requirements – 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/key Use Cases – http://www.w3.org/wiki/NetflixWebCryptoUseCase – http://www.w3.org/wiki/KoreaWebCryptoUseCase
  • 70. Future Plan Secondary API spec – aka. Web Certificate Service API – TLS login/out, key management including import/export and signing/verification – Discussions for smartcard and USB token Get 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/
  • 71. 33
  • 72. 해외의 주요 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.10 34
  • 73. Case : Video  http://www.justafriend.ie/ 35
  • 74. Case : Canvas, SVG, Game  Twinkle Pop 36 http://game.wren.kr/each/tp/
  • 75. Case : WebGL + LocalStorage  http://chrome.angrybirds.com/ 37
  • 76. Case : Offline & N-Screen https://read.amazon.com 38
  • 77. Case : Web OS & UI 39
  • 78. Case : Web OS & UI  http://pieos.com 40
  • 79. 41
  • 80. 서적들 - HTML5, CSS3, 웹 표준 기본서들 42
  • 82. 서적들 - 모바일 HTML5 Web App 관련 44
  • 83. 서적 - 웹 UI/UX 디자인 관련 45
  • 84. 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
  • 85. 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 JS 47
  • 86. 48
  • 87. 현재의 Web Runtime HTML5 Buzz World? CSS3 2D Canvas HTML5 Offline ECMA 5th WebFont(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 DB XMLHttpRequest 2 Server-Sent Events Web Sockets WebRTC SPDY •http://caniuse.com/
  • 88. Web API HTML5의 미지원 항목? – 통신: WiFi 정보, 모바일 통신, – 각종 센서: 광센서, 근접센서... – 하드웨어 제어: USB, BlueTooth, NFC... Mozilla Web API – HTML5 내 기본 API 이외 웹 기반 API로서 W3C의 Device API와 함께 빠진 표준안을 제 정하고 구현. •https://wiki.mozilla.org/WebAPI
  • 89. 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 전용)
  • 91. Boot2Gecko Open Mobile Web OS – 웹 기반 앱의 실행에 최적화 – 폐쇄형 상용 모바일 OS의 대안 주요 구성 – Gaia – 유저인터페이스 – Gecko – 웹 런타임 – Linux – Gonk 기반 임베디드 OS https://wiki.mozilla.org/B2G
  • 92. Demo: Find b2g in Youtube!
  • 93. 향후 계획 주요 일정 – 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 대응) 국내에서도 관심 있는 벤더 있음?
  • 94. Mozilla 마켓플레이스 목적: 웹 플랫폼으로서 업계표준 기술로 어디에서라도 동작하는 애 플리케이션 환경 구축 단말 및 운영체제 독립적인 웹 앱 스토어 구축 – 인증, 과금, 커뮤니티 기반 심사 시 스템 채택 브라우저 비 의존 – Firefox 뿐만 아니라 다른 브라우저 에서 이용 가능 및 하위 호환성 제 공 Firefox 베타 버전에 탑재 완료 및 올해 정식 릴리스를 예정 •https://marketplace.mozilla.org
  • 95.
  • 96. 미래의 웹 기술 방향 서버가 필요 없는 웹 – 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
  • 97. 결론: 한국의 당면과제 PC 웹 - IE 점유율 90%, 크롬 4%, Firefox 2%... – Global: IE 30%, 크롬 30%, Firefox 25%, 기타 10% – 액티브 X 기반 PC 환경 개선 모바일 웹 선도 ▶ PC 웹 환경 개선 – 모바일 웹 – Android Webkit 72%, iOS Safari 27%... – 모바일 기반의 다양한 웹애플리케이션 장려 – 그러나, 안드로이드 중심 생태계 개선 대안과 다양성에 대한 공론화 ▶ 글로벌 지향
  • 98. 49
  • 99. 스마트 모바일로 패러다임 전환 60,000 전체 모바일 가입자 추월 50,000 40,000 인터넷 이용자수 추월 초고속 인터넷 가입자 30,000 인터넷 이용자수 이동통신 가입자 스마트폰 가입자 20,000 초고속 인터넷 가입자수 추월 10,000 - 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 50
  • 100. 개발자 수요 - HTML5에 대한 수요 증가 51
  • 101. 기업 수요 - HTML5에 대한 수요 증가  2014년 모바일에서 HTML5 성장율은 Flash나 Sliverlight의 10배  2014년 유명 사이트 100개중 30개는 HTML5 offline 기능 적용  HTML5는 Mobile Enterprise Application을 위한 핵심 요소 52
  • 102. 시장효과 - 스마트 광고 시장의 효과 • 세계 온라인 광고 시장 (‘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 데스크탑 광고 (세계) 모바일 광고 (세계) 데스크탑 광고 (한국) 모바일 광고 (한국) 53
  • 103. 시장효과 - 스마트 콘텐츠 시장의 효과 • 스마트 콘텐츠 세계 시장 (‘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
  • 104. 시장효과 - 스마트 상거래 시장의 효과 • 온라인 쇼핑 세계 시장 (‘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
  • 105. Thank you For more discussion : JongHong Jeon (hollobit@etri.re.kr) @hollobit Channy Yun (channy@gmail.com) @channyun