Microsoft PowerPoint hollobit-r3

Transcription

1 HTML5의 과거, 현재, 그리고 미래 Jonghong Jeon ETRI, SRC Blog:

2

3 Growth of Web Sites Total Sites Across All Domains August July ,916,461 sites 3

4 20 Presents the WWW has given us Vast amounts of digital information Organized access. Communication. Multimedia sharing Entertainment. E-commerce. Real-time news. 4

5 Online Activities, 2000 ~

6 World Wide Web (1989~1991) 6

7 In The Beginning... World Wide Web (Tim Berners-Lee, 1989) universe of network-accessible information anyone, anywhere, anytime Client to server interactions Db & other software HTML (data/display) Hello There Here s a zippy HTML page, with lots of Colors and Links...!!! Fun, Eh? Internet communication protocols Web Server Ftp News URLs (location e.g -- ) HTTP (transfer) Internet Resources 7

8 1. Evolution of Web (From Document to App)

9 Evolution of World Wide Web 9

10 Evolution of World Wide Web 10

11 Evolution of World Wide Web HTML, URL, HTTP 라는 세 가지 기술에 기초한 웹 기술이 제안되고, 보다 나은 인간 중심의 정보처리 및 지식공유 등을 목표로 하는 단계 XML(eXtensible Markup Language)에 기반하며 인간 중심의 정보 처리뿐 아 니라 다양한 디바이스와 서비스, 멀티미디어를 연결하는 것을 목표로 하는 단계 구글, 아마존, 위키피디아 등의 성공과 함께 웹 산업을 제2의 전성기로 이 끌며 다양한 신규 서비스가 등장할 수 있는 기반을 마련 스마트 폰 및 태블릿 등 다양한 모바일 기기들을 대상으로 HTML5와 Web API를 통해 한 단계 진화된 웹 응용 환경을 제공하며, 위치정보 및 소셜 정 보 등을 결합하는 통합 응용 플랫폼으로서 웹이 자리잡아 가는 단계 11

12 Evolution of World Wide Web

13 Evolution of World Wide Web 13

14 The History of HTML5 emerging WHAT Working Group is born (Apple, Mozilla, Opera) 2006 W3C announces it will work with WHAT WG st version of HTML5 is published (by Ian Hickson) HTML5 is a continually evolving technology that will never be absolutely finished 2008 Firefox 3 becomes HTML5 compatible (Chrome, Safari, IE) Reference:

15 The History of HTML5 growing YouTube offers HTML5 video Player Steve Jobs trashes Flash in an open letter Scribd documents switch to HTML Arcade Fire s HTML5-based interactive film is a hit Chrome Web Store opens 15 Reference:

16 The History of HTML5 explosion Disney buys HTML5 gaming start-up Rocker Pack FT, attracted more 2M users, 10 months after launch Pandora begins moving to HTML Amazon creates Kindle Cloud Reader Twitter rolls out new HTML5 version for ipad % of Alexa s top 100 sites use HTML Boston Globe opens subscription-only BostonGlobe.com Uses responsive design and CSS Adobe stops making Flash for mobile devices Flickr gets a new HTML5 uploader (large files) LinkedIn creates 95% HTML5 native app for the ipad Wix.com: +1M HTHML5 websites created by users 90 days after the publishing platform released its HTML5 website builder B(1,000,000,000) HTML5-compatible smartphones 16 Reference:

17 해외의 주요 HTML5 적용 서비스들 분야 이름 (개발사) 사이트 HTML5 서비스 시작일 구글 YouTube 동영상 Netflix Vimeo SlideShare 문서 구글 Docs 작업 구글 Gmail 구글 Clendar 소셜 Facebook s Spartan 전자책 Amazon Kindle 신문사 영국 Financial Times 게임 Angry Birds Cut the Rope Fieldrunner

18 2. Smart Mobile Age (Single Screen N-Screen)

19 Changes (스마트 디바이스 급성장) 19 Source:

20 Changes (스마트 모바일 시대) 20

21 Changes (스마트 모바일 시대) 2013년 10억대가 넘는 HTML5 가능 단말 등장 21

22 스마트 모바일로 패러다임 전환 60,000 전체 모바일 가입자 추월 50,000 40,000 인터넷 이용자수 추월 초고속 인터넷 가입자 30,000 20,000 10,000 인터넷 이용자수 이동통신 가입자 스마트폰 가입자 초고속 인터넷 가입자수 추월

23 스마트 모바일로 패러다임 전환 23

24 스마트 모바일 = Multi Device & platform 24

25 스마트 모바일 = Multi Screen & resolution 25

26 Fragmentation is a big problem Device Content Screen Fragmentations Application Platform Service 26

27 27

28 Solution? Device Content Screen Fragmentations Application Platform Service 28

29 HTML5은 유일한 대안 29

30 HTML5 s Potential 30

31 2. The Meaning of HTML5

32 HTML5 Revolution 32

33 HTML5를 바라보는 5가지 관점 차세대 웹 기술의 총합의 관점으로 HTML5 단말, 플랫폼, 스크린의 경계가 없도록 하는 HTML5 새로운 앱과 SW 환경으로서의 HTML5 모든 정보, 서비스와 사물을 묶는 관점으로 HTML5 인프라와 플랫폼으로서의 HTML5 33

34 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 문서 구조의 의미를 명확히 하여 디자인과 프로그램의 독립성을 확보 서로 다른 다양한 브라우저 상에서 일관된 표현 기능 제공, 효과적이고 편 리한 표현 방식의 변경 풍부한 기능과 자원을 제어할 수 있는 로컬 어플리케이션 34

35 HTML5? Web Application은 HTML, CSS, JavaScript의 협주곡 통칭되는 HTML5 HTML5 콘텐츠 내용과 형식을 표현 문서구조의 상세화 멀티미디어 폼과 이벤트 등 CSS3 콘텐츠 표현 방법을 정의 표현 기능 모듈화 웹폰트 JavaScript 각종 API를 통해 기능을 표현 Web Storage Web Worker Web Socket Geolocation API 문서 구조의 의미를 명확히 하여 디자인과 프로그램의 독립성을 확보 서로 다른 다양한 브라우저 상에서 일관된 표현 기능 제공, 효과적이고 편 리한 표현 방식의 변경 풍부한 기능과 자원을 제어할 수 있는 로컬 어플리케이션 35

36 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-스크린 서비스 제공 가능 36

37 2. The Meaning of HTML5 2.1 Simple & Efficient

38 New HTML5 Tags <article> <aside> <audio> <canvas> <command> <datalist> <details> <dialog> <embed> <figure> <footer> <header> <hgroup> <keygen> <mark> <meter> <nav> <output> <ruby> <rt> <rp> <section> <source> <video> 38

39 Removed Tags in HTML5 <acronym> <applet> <basefont> <big> <center> <dir> <font> <s> <strike> <frame> <frameset> <u> <noframes> <tt> 39

40 Simplified Doctype HTML4/XHTML HTML 4.01 Strict HTML 4.01 Transitional HTML 4.01 Frameset XHTML 1.0 Strict XHTML 1.0 Transitional XHTML 1.0 Frameset XHTML 1.1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " rg/tr/html4/loose.dtd"> HTML5 <!DOCTYPE html> 40

41 Simplified Character Set HTML4 <meta http-equiv="content-type" content= "text/html; charset=utf-8"> HTML5 <meta charset=utf-8> 41

42 HTML5 Form HTML5 의 새로운 input type들 Search, tel, url, datetime, date, month, week, time, and datetime-local Number, range, Color Mobile 에서 number, , url 지원을 추가 placeholder attribute를 지원 42 <label for=" "> address</label> <input id= type=" "

43 HTML5 Form - New input types Input Type Purpose Notes tel search For entering a telephone number. To prompt users to enter text that they want to search for. tel does not enforce a particular syntax, so if you want to ensure a particular format, you can use pattern or setcustomvalidity() to do additional validation. The difference between search and text is primarily stylistic. Using a n input type of search might result in the input field being styled i n a way that is consistent with that platform s search fields. url For entering a single URL. url is intended for entering a single website address (absolute URL). datetime date month week time datetime-local number range For entering either a single address or a li st of addresses. For entering a date and time with the time zone set to UTC. For entering a date with no time zone. For entering a date with a year and a month, bu t no time zone. For entering a date that consists of a week-year number and a week number, but no time zone. For entering a time value with hour, minute, sec onds, and fractional seconds, but no time zone. For entering a date and time with no time zone. For numerical input For numerical input, but unlike number, the actu al is not important. If the multiple attribute is specified, then multiple addresses can be entered, separated by commas. Valid values are floating point numbers (whole and decimal numbe rs). The implementation of the range control is a slider in most browse rs that support it. color For choosing color through a color well control. The value must be a valid lowercase simple color such as #

44 HTML5 Form - New input attributes 44 Attribute Purpose Notes autofocus placeholder form required autocomplete pattern dirname novalidate formaction formenctype formmethod formnovalidate formtarget Focuses the input on the element when the pa ge is loaded. Gives the user a hint about what sort of data t hey should enter. Specifies one or more forms to which the inpu t element belongs. A boolean attribute that means the element is required. For specifying that a field should not autocom plete or be pre-filled by the browser based on a user s past entries. For validating an element s value against a reg ular expression. For submitting the directionality of the control with the form. For disabling form submission validation when specified on a form element. For overriding the action attribute on the form element. For overriding the enctype attribute on the for m element. For overriding the method attribute on the for m element. For overriding the novalidate attribute on the form element. For overriding the target attribute on the form element. autofocus can be applied to input, select, textarea, and button. The placeholder value is displayed in light text until the element gets f ocus and the user enters some data. It can be specified on input and t extarea. By using the form attribute, the input elements can be placed anywher e on the page, not just within the form element. Also, a single input element can be associated with more than one form. The required attribute is helpful for doing browser-based validation wit hout using custom JavaScript. The autocomplete attribute for fields like a credit card number or onetime password, which you don t want autocomplete. By default, autoco mplete is in the on state, so if you want to disable it, set it to off. When using a pattern, you should also specify a title value to give the user a description of the pattern that s expected. For example, if the user entered text data with right-to-left directionali ty and the input element contained the dirname attribute, then an indi cation of the right-to-left directionality would be submitted along with the input value. This attribute is supported on input and button elements. This attribute is supported on input and button elements. This attribute is supported on input and button elements. This attribute is supported on input and button elements. This attribute is supported on input and button elements.

45 2. The Meaning of HTML5 2.2 Age of Web Application

46 앱 생태계의 성장 46

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

48 HTML5의 주요특징 Application 48

49 HTML5의 주요특징 49 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

50 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 XHR2 50

51 W3C Web App. & Web API Standardization Web App WG s status 51 Name of Specification Last Publication ED FPWD WD LCWD CR PR REC Clipboard APIs and Events Cross-Origin Resource Sharing (CORS) DOM Level 3 Events DOM Element Traversal File API File API: Directories and System File API: Writer From-Origin Header HTML5 Web Messaging Indexed Database API Java bindings for Web IDL Progress Events Selectors API Selectors API Level Server-Sent Events Shadow DOM Uniform Messaging Policy (UMP) Web IDL Web Sockets API Web Storage Web Workers XBL2 Primer XBL2 Spec XmlHttpRequest (Level 2) 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

52 Toward the Advanced Web App 52

53 Near Field Communications (NFC) WG End date : 2 years after ratification The scope of the Near Field Communications Working Group is limited to the development of APIs for Web page scripts to perform the following operations with NFC devices: Reading/Writing NDEF messages Setting NFC tags to read-only Formatting NDEF compatible NFC tags Peer to peer exchange of NDEF messages between NFC devices Peer to peer message channel between NFC devices supporting the Logical Link Control Protocol (LLCP), e.g. using the HTML5 Message Channel Communication with contactless cards using the application protocol data unit (APDU) format as defined by ISO/IEC NFC Card emulation mode for NFC devices, e.g. to emulate a card supporting APDU operations to allow the use of a phone for payments or for unlocking electronic door locks 53

54 Web Cryptography API WG End date : 31 March 2014 The Working Group will determine use cases that the API needs to support and use these to derive requirements. Primary API Features: 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. 54

55 Web Real-Time Communications WG End date : 28 February 2013 Enabling real-time communications between Web browsers require the following clientside technologies to be available: API functions to explore device capabilities, e.g. camera, microphone, speakers (currently in scope for the Device APIs & Policy Working Group) API functions to capture media from local devices (camera and microphone) (currently in scope for the Device APIs & Policy Working Group) API functions for encoding and other processing of those media streams, API functions for establishing direct peer-to-peer connections, including firewall/nat traversal API functions for decoding and processing (including echo cancelling, stream synchronization and a number of other functions) of those streams at the incoming end, Delivery to the user of those media streams via local screens and audio output devices (partially covered with HTML5) 55

56 2. The Meaning of HTML5 2.3 Multi Media & Performance

57 HTML5의 주요특징 57 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

58 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 58

59 Case : Video 59

60 Case : WebGL + LocalStorage 60

61 Case : SVG + WebGL 61

62 Case : Audio 62

63 Dynamic Editor by Bret Victor 63

64 2. The Meaning of HTML Web as a Platform

65 Web Platform Technology Web Services Platform Technology (Web Resources) Web Client Platform Technology Web Server Platform Technology 65

66 Web Platform Layer User Interaction JavaScript + Web APIs Presentation HTML 5 & CSS 3 Transport Resources HTTP (WebSocket, WebRTC, RESTful..) Web Resource URIs (Service, Content, Site) 66

67 Online Activities, 2000 ~

68 Evolution of Web Platform Open API Search Mail Office Image Sharing Video Sharing Shopping Commerce Book Map News Payment Cloud Ads SNS 68

69 The Web as an application platform Standards for Web Applications on Mobile: May 2012 current state and roadmap 69

70 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. 70

71 Case : Chrome OS 71

72 Case : Firefox OS (B2G) 72

73 Case : Firefox OS (B2G) 73

74 Case : Web OS & UI 74

75 3. Interoperability Issues

76 HTML5 지원 현황 76 Source:

77 HTML5 지원 현황 77 Source:

78 HTML5 Testing Task Force Status 78

79 Ring mark 79

80 4. HTML5의 비즈니스적 가치

81 HTML5 관련 비즈니스 영역 81

82 개발자 수요 - HTML5에 대한수요증가 82

83 기업 수요 -HTML5에대한수요증가 2014년 모바일에서 HTML5 성장율은 Flash나 Sliverlight의 10배 2014년 유명 사이트 100개중 30개는 HTML5 offline 기능 적용 HTML5는 Mobile Enterprise Application을 위한핵심요소 83

84 기업 수요 -HTML5에대한수요증가 84

85 시장효과 - 스마트 광고 시장의 효과 세계 온라인 광고 시장 ( 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 25, ,000 20, ,000 15, ,000 10,000 50,000 5, 데스크탑 광고 (세계) 모바일 광고 (세계) 데스크탑 광고 (한국) 모바일 광고 (한국) 85

86 시장효과 - 스마트 콘텐츠 시장의 효과 스마트 콘텐츠 세계 시장 ( 11년 151억 달러 16년 1055억 달러 전망) 한국 스마트 콘텐츠 세계 시장 (현행대로면 11년 세계 시장 대비 9% 수준에서 16년까지 3.8%까지 하락 성장 전망) 차세대 웹 개선을 통해 스마트 콘텐츠 경쟁력 향상을 하고 9% 규모 유지시 16년까지 17조 추가 시장 창출 가능 1,400,000 1,200,000 1,000, , ,000 hollobit@etri.re.kr, 단위: 억원 400, , 스마트 콘텐츠 (세계) 가트너 스마트 콘텐츠 (한국) KOCCA 성장 목표치 86

87 시장효과 - 스마트 상거래 시장의 효과 온라인 쇼핑 세계 시장 ( 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 18,000,000 16,000,000 hollobit@etri.re.kr, 단위: 억원 700,000 hollobit@etri.re.kr, 단위: 억원 14,000, ,000 12,000, ,000 10,000,000 8,000, ,000 6,000, ,000 4,000, ,000 2,000, 데스크탑 상거래 (세계) 모바일 상거래 (세계) 100, 온라인 쇼핑몰 (한국) 모바일 상거래 (한국) 87

88 5. 한국의웹현실

89 브라우저 사용 통계 ( 12.02) 한국과 세계 브라우저별 사용 현황 비교 100% 90% 80% Other Opera 70% Safari 60% 50% 40% Firefox Chrome IE 30% 20% % 0% 한국 전세계 89 Source: Statcounter,

90 비표준 기술 사용 현황 (2012년) 주요 웹사이트 ActiveX 사용현황 주요 200대 사이트 中, 147곳 (74%)에서 ActiveX 사용 (KISA, '12. 6) < 국내 200대 사이트 ActiveX 사용 현황 > 90

91 웹 전문 개발자의 부족 최초의 웹 기술 학습 경로로는 비정규 과정이 절반이 넘는 59%를 차지하며, 재직 후 주기적인 재교육은 6%에 불과할 뿐만 아니라 재교육 방식도 독학 이나 사내교육이 58%나 되어 체계적인 교육 이 이루어지지 못하는 실정임 W3C에서발간된웹표준문서(HTML5 등)는 69%가 조금만 알고 있거나 잘 모른다고 응답하여, 관련 정보의 제공 및 확산 필요성 이 제기됨 웹 표준 문서를 잘 모르는 이유로는 실무에서 사용하지 않기 때문 이 39%, 한글 웹 표준 문서가 보급되지 않아서 가 31%를 차지 웹 표준에 맞는 개발이 필요하다고는 생각하지만 (91%), 실제로 는 부분적 으로만 반영하거나 아예 비표준 방식으로 개발 (72%) 관련 표준 정보를 얻을 수 있는 채널도 부족 년 웹 개발자 전문성 설문조사 결과 (KISA)

92 방통위, HTML5 활성화 정책 발표 인터넷 글로벌 경쟁력 강화를 위한 차세대 웹 표준 (HTML5) 확산 추진계획 ( ) 핵심 과제 세부 추진 과제 웹 기반의 개방형 기술 개발 및 표준화 웹 기반 공인인증서 등 개발 W3C (웹 관련 국제 표준기구) 국제 표준 활동 강화 HTML5 보안에 대한 선제적 조치 강구 HTML5 전환및수요 확산 200개 웹 사이트의 HTML5 전환 지원 웹표준진단도구보급및모범사례확산 HTML5 Flagship Project (시범사업) 실시 인식 제고 및 제도 개선 우수 사례 기업 공모전 및 캠페인 실시 20종의 HTML5 표준 문서 한글 번역 및 보급 웹 개발 RFP 가이드라인 마련 5년 間 3,000명의 전문 인력 양성 10 재직 인력 재교육 11 대학의 고급 전문 인력 양성 12 HTML5 취업 교육 92 HTML5 산업 활성 化 13 HTML5 기반 중소 벤처기업 육성 14 HTML5 지원센터 구축 15 공통 모듈의 보급 등을 통한 웹 앱 개발 지원

93 6. 미래 - HTML.next

94 HTML WG 10 documents 80 organizations (234 representatives), 259 invited experts ~35 participants in Mountain View on May ¾ Next HTML WG charter: scope and new deliverables Web App WG (May ½) Web App Sec WG (May 2/3) ~370 mails/month ~300 mails/month bugzilla: ~700 changes/month 94

95 HTML5 표준화 세부 현황 - HTML WG HTML5 표준화는 2014년 최종 표준 제정을 목표로 작업 중 HTML WG에서는 2012년도 중반(늦어도 후반)까지는 후보 표준안 (Candidate Recommendation) 단계를 목표 Specification FPWD WD LCWD CR PR REC 1 HTML Q Q Q2 2 HTML+RDFa Q Q Q2 3 HTML Microdata Q Q Q2 4 HTML Canvas 2D Context Q Q Q2 5 6 Polyglot Markup: HTML-Compatible XHTML Documents HTML5: Techniques for providing useful text alternatives Q Q Q Q Q Q2 7 HTML to Platform Accessibility APIs Implementation Guide Q Q Q Q2 8 HTML5 differences from HTML Q Q Q Q2 9 HTML5: Edition for Web Authors Q Q Q Q2 10 HTML: The Markup Language Q Q Q Q2 95 FPWD:First Public Working Draft LCWD: Last Call Working Draft PR: Proposed Recommendation WD: Working Draft CR : Candidate Recommendation REC: Recommendation

96 HTML.next The mission of the HTML Working Group is to continue the evolution of HTML. Media Source Extensions: allow JavaScript to generate media streams for playback Encrypted Media Extensions: enable playback of protected content extend media element to allow decryption key acquisition Canvas 2D Context additions Ellipses, dashed lines text on path, SVG matrix transforms 96

97 HTML.next - Proposed attributes capture (proposal) Provides a hint that by default, for an input element whose type element has the value file, the filepicker control should be placed in a particular media capturing mode; possible values are camera, camcorder, microphone, and filesystem. inert (proposal) A way to disable an entire subtree, without necessarily making the elements in that subtree appear disabled (e.g., the way that controls behind a modal dialog are disabled without appearing that way, in traditional UIs). inputmode (notes) Specifies what type of keyboard to use for a particular input or textarea element for example, to switch to displaying a keyboard optimized for typing in numbers rather than letters, or for typing in URLs, or for auto-capitalizing; similar to the inputmode attribute from XHTML 1.1/Basic. download (proposal) Indicates that the author intends an a element to be used for downloading a resource. The attribute may have a value; the value, if any, specifies the default filename that the author recommends for use in labeling the resource in a local file system. ping (proposal) Enables hyperlink auditing: when used on an a element, gives the URLs of the resources that are interested in being notified if the user follows the hyperlink for that element. 97

98 HTML.next - Proposed elements content (Web Components) Represents an insertion point in a shadow DOM subtree. The insertion point is replaced with the elements children at rendering time. The <content> element itself is never rendered. data (proposal) For marking up machine-readable data. datagrid (proposal) Represents an interactive/sortable representation of tree, list, or tabular data in the form of rows and cells. (Might be rendered in browsers as a column-sortable spreadsheet view and/or collapsible/expandable tree view ). <datagrid> was previously part of the HTML draft, but was dropped in decorator (Web Components) Defines a new decorator. Typically, you would also give it an id attribute to make it addressable from CSS. element (Web Components) Defines a new custom element. intent (Web Intents) Represents an intent registration. menuitem (Mozilla proposal) Represents a command in a menu in a Web application. reco (Web Speech) Represents a speech-input (speech recognition) control in a user interface. shadow (Web Components) Specifies an insertion point, where the next-oldest shadow DOM subtree in element s list of shadow DOM subtrees is rendered. The <shadow> element itself is never rendered. template (Web Components) Defines an inert chunk of DOM that can then be used for creating DOM instances in an unknown parsing context. tts (Web Speech) Represents an audio stream comprised of synthesized speech output (text to speech). DOM interface inherits from HTMLMediaElement (that is, the DOM interface for the HTML <audio> and <video elements). 98

99 COMMUNITY GROUPS Produce documents that can be used as input by the Working Group Web Hypertext Application Technology Responsive Images HTML5 Specifications HTML Editing APIs Games Fixing Application Cache 99

100 7. 마무리

101 Conclusions 1. 차세대 웹 기술의 총합의 관점으로 HTML5 2. 단말, 플랫폼, 스크린의 경계가 없도록 하는 HTML5 3. 새로운 앱과 SW 환경으로서의 HTML5 4. 모든 정보, 서비스와 사물을 묶는 관점으로 HTML5 5. 인프라와 플랫폼으로서의 HTML5 101

102 Conclusions HTML5는 전부가 아닌 차세대 웹 기술의 일부 HTML5는 콘텐츠가 아닌 응용 기술 HTML5 규격만이 아닌 다양한 웹 표준 고려 필요 개별 생태계가 아닌 웹의 생태계로 접근해야 공급자 관점이 아닌 수요자 관점 필요 폐쇄적 생태계가 아닌 개방형 생태계 102

103 Thank you For more discussion : JongHong Jeon (hollobit@etri.re.kr) Blog : OR 103