Html5의 현재 그리고 미래 배포자료 최종

2012. 5.

포비커 박종일 이사

미래의 커뮤니케이션 툴을 창조하는 기업 – 주식회사 포비커

HTML5 의 현재 그리고 미래

목 차

HTML5 적용 사례HTML5 적용 사례

HTML5 개요HTML5 개요1

3

HTML5 표준과 지원 현황HTML5 표준과 지원 현황2

국내에서 HTML5 의미국내에서 HTML5 의미4

글로벌 사업자의 HTML5 전략글로벌 사업자의 HTML5 전략5

SummarySummary6

3

미래의 커뮤니케이션 툴을 창조하는 기업

HTML5 개요

Web

Development

to the next levelHTML+ CSS + JS(API)

http://en.wikipedia.org/wiki/HTML5

A fully open, uncontrolled PlatformForged by widely respected standards bodies

4


HTML5 개요

Since 2005 Web2.0?HTML5 = Rich Web + Web as Platform

http://map.web2summit.com/#t

5


HTML5 개요

클라이언트 중심 (API) 아키텍처멀티 스크린과 클라우드 환경 대응

http://msittrend.com/html5.html

6


적용 플랫폼

Platform Version

해상도

단말 제조사 자제 규격

스토어 ( 검수 , 배포 , 설치 )

적용 브라우저

브라우저 Version

해상도

플러그인 정책

도메인 , 웹스토어

>생산성

( 비용 , 시간 )

高 퀄리티 , 특화 기능 中 퀄리티 , 일반 기능

Platform Fragmentation VS Browser Compatibility

HTML5 개요

확장성( 인프라 , 접

근 )

7


HTML5 는 웹이 가진 기술적 한계에 대한 모든 해답은 아니지만 현실적인 대안으로 써 의미 있는 기술적 진화를 보여주고 있음

• HTML5 는 ActiveX , Flash 기반 플러그인 기술 대체

• HTML5 는 멀티 터치등 인터랙티브 UI/UX 지원

• HTML5 는 보다 빠른 데이터 , 대용량 전송 보장 (WebSocket)

• HTML5 는 local file storage 를 통해 저장 기능 지원

• HTML5 는 위치기반 서비스 지원

• HTML5 는 RIA 없이 Web Video/Audio 지원

• HTML5 는 JS 없이 다양한 위젯 (UI 콤포넌트 ) 저작 가능 (CSS3)

• HTML5 는 Private Policy 와 보안 기능 강화

• HTML5 는 간단한 웹 개발 지원 (JS Lib)

• HTML5 는 클라이언트 중심의 서비스 환경 지원

• HTML5 는 개인화를 위한 기능 지원

• HTML5 는 컨셉의 변화 : 내용과 데이터의 분리

• HTML5 는 새로운 웹 개발 방법론 ( 설치형 웹앱 , 클라이언트 중심 분산

처리 )

• HTML5 는 지속적으로 이해관계자의 상호 공동 목표를 수렴 중• HTML5 는 Multi-Device integration framework 으로 발전

HTML5 개요

8


GitHub Archive - April 20120

HTML5 개요

Developer interest in HTML5 HTML5 is playing a central role with the widespread

Mobile Developer interest in HTML5

9


Next Generation Features for Modern Web Development Also can include AJAX + JSON+ XML + XHTML

HTML5 표준과 지원 현황

http://en.wikipedia.org/wiki/HTML5

• 브라우저 기반 동일한 실행 환경

• N-Screen 대응

• 웹 기술 표준화

10


HTML5 는 Web Application 개발을 위한 표준 명세단말 H/W 접근 , 내부 자원 접근에 대한 표준 명세 추가


MOBILE

HTML WG

Canvas, CSS3,

3DTransforms, SVG, WebGL

MediaStream Processing

API, Web Audio, Media

Capture Web Events Working Group,

Touch Events API

Device API WG

Geolocation

WG

HTML WG

Web Messaging API,

WebSocket API,

Server-Sent Events API,

XMLHttpRequest Level

2

Web Storage, File API,

Indexed Database API

HTML5 Application Cache,

Widget Packaging,

Web Application Security WG

11



1991 HTMLHTML

1994 HTML2HTML2

1996 CSSCSS JavaScriptJavaScript+

1997

1998

HTML4HTML4

CSS2CSS2

2005 AJAXAJAX

2000 XHTMLXHTML

XHTML2 WGXHTML2 WG2002

WHATWGWHATWG 2004

2007 HTML5 WGHTML5 WG

2010

2014

HTML5(WD)HTML5(WD)

HTML5(REC)HTML5(REC)XHTML 표준화 중단XHTML 표준화 중단

오페라 , 모질라 ,

애플구글 (lan Hickson)

Working Drafts(WD) 단계 W3C 에 의해 진행 작업으로 표현이 되기 시작하는 단계이나 , 아직 그룹 또는 W3C 에 의해 의견이 합의되지 않은 상태

Proposed Recommendations(PR)

(1) 작성된 그룹내에서 합의가 이루어졌고 ,(2) 검토를 위하여 Advisory Committee 에 제안된 단계

Recommendations(REC) W3C 내에서 합의가 이루어졌고 Director 의 승인을 받은 단계

2013 HTML5(PR)HTML5(PR)

2012 년 05 월 현재 LCWD(Last Call Working Draft) 상태

12



구조화된 문서 형태 (Semantics & Markup)다양한 기능 (Application Program Interface)

http://platform.html5.org/

13



New(Removed) Elements in HTML5

New Semantic/Structural Elements

http://dev.w3.org/html5/markup/elements.html

New Media Elements

The new <canvas> Elements

New Form Elements

Removed Elements<acronym> <applet> <basefont> <big> <center> <dir> <font>

<frame> <frameset> <noframes> <strike> <tt>

14



New Web Design and ApplicationsWeb of Service & Web of Devices

Graphics & 3D

ConnectivityDevice Access

Multimedia

Offline & Storage

Performance

Semantics

CSS3

15



주요기능 설명 관련 W3C 표준명웹폼

(Web From)사용자의 입력정보를 받기 위해 사용되는 입력형태에 대한 정의에 사용되는 마크업 , 애트리뷰트와 이벤트

HTML5

캔버스(CANVAS)

웹에서 즉시모드 (immediate mode) 로 2 차원 그래픽을 그리기 위 한 API 와 <canvas> 내 각 종 객체 를 회전 , 변환 하고 그레디언트 , 이미지 생성 등 각종 효과를 주는 기능에 대한 API

Canvas 2D API HTML Canvas 2D Context

SVG(Scalable Vector Graphic)

XML 기반의 2 차원 백터 그래픽을 표현하기 위한 언어 HTML5

Video/Audio<video> 는 비디오 또는 영화를 보여주기 위해 사용되는 미디어 엘리먼트이며 , <audio> 는 사운드나 오디오 스트림을 표현하기 위한 미디어 엘리먼트

HTML5

Geolocation 디바이스의 위치 정보 및 방위를 제공하는 API 표준 Geolocation API

Offline Web Applications(SQL Database)

다양한 표준 SQL 을 사용해 질의할 수 있는 데이터베이스 기능에 대한 API

Web SQL Database

로컬저장소(Local Storage)

기존의 쿠키의 기능을 개선하기 위한 목적으로 개발된 기능으로 웹 클라이언트에서 키와 값이 쌍으로 구성된 데이터를 영구적으로 저장하는 기능

Web Storage

웹 소캣(Web Socket)

웹 애플리케이션이 서버측의 프로세스와 직접적인 양방향 통신을 위한 API

WebSocket API

웹 워커(Web Worker)

웹 애플리케이션을 위한 쓰레드 (Thread) 기능에 대한 API Web Workers

그래픽 라이브러리(WebGL)

WebGL 은 웹 기 반 의 그 래 픽 라 이 브 러 리 로 자 바 스 크 립 트 프로그래밍 언어를 통해서 사용할 수 있으며 호환성이 있는 웹 브라우저에서 인터랙티브한 3D 그래픽을 사용할 수 있는 API

WebGL

16



Compatibility tables for support of HTML5 Compatibility tables for support of CSS3

http://caniuse.com

Compatibility tables for support of JS API

Compatibility tables for support of HTML5 in browsers

17



Desktop browsers HTML5 Support timeline

Compatibility tables for support of HTML5 in browsers

http://html5test.com

Mobile browsers

Tizen1.0 Samsung, Intel, Linux fud

408 15

18



Plug-in refers to a user-agent defined set of content handlers(ex PDF Viewer)

⚠Warning!

Browsers should take extreme care when interacting

with external content intended for plugins.

When third-party software is run with the same

privileges as the user agent itself, vulnerabilities in the

third-party software become as dangerous as those in

the user agent.http://www.w3.org/TR/2011/WD-html5-20110525/infrastructure.html#plugins

https://github.com/bebraw/jswiki/wiki/File-Formats

http://html5video.org

PDF.JS

Building faithful & efficient PDF renderer

HTML5 technology(XHR2, WebWorker) experiment

No native code

Secure(web sandbox)

Mozilla Labs Project – Open Source

PDF.JS

Building faithful & efficient PDF renderer

HTML5 technology(XHR2, WebWorker) experiment

No native code

Secure(web sandbox)

Mozilla Labs Project – Open Source

19


HTML5 Canvas Demo

http://demo.riamore.net/demo/demo.html

HTML5 적용 사례

20


HTML5 Drag &Drop Demo

http://www.dhtmlgoodies.com/scripts/drag-drop-custom/demo-drag-drop-

3.html

21


HTML5 SVG Map Demo

http://davidlynch.org/projects/maphilight/docs/

demo_usa.html

HTML5 적용 사례

22


HTML5 WebRTC(Real Time Communication)

Demo

HTML5 적용 사례

http://youtu.be/aK1DC2zp6ZE

23


HTML5 WebGL Water Demo

HTML5 적용 사례

http://minimal.be/lab/Sprite3D/

http://madebyevan.com/webgl-water/

24


HTML5 Device API Demo

HTML5 적용 사례

http://www.youtube.com/v/

x2T4BJwPRnQ

http://dev.opera.com/labs

25


Drag and Drop HTML5 Base Game Maker

http://www.scirra.com

HTML5 적용 사례

26


DaVinci HTML5 WYSIWYG 저작도구

http://www.davincisdk.com/eco/kr/index.html

HTML5 적용 사례

27


DaVinci HTML5 WYSIWYG 저작도구

http://www.davincisdk.com/eco/kr/index.html

HTML5 적용 사례

Custom Format(meta format)

Export

Import

11 Export 된 소스는 수정이 불가능함

22Solution 에서 제공되는 기능 외에는 사용할 수 없으며 , 고객의 니즈에

따른 확장과 커스터마이징이 불가능함 (Solution 종속적 )

저작단계에서 meta format 을 이용하기 때문에 , 3rd Party JavaScript library 나 CSS library 를 적용할 수 없음

Davinci 솔루션은 저작단계에서부터 HTML5 를 기반으로 저작함

고객의 Needs 에 따라 Custom Widget을 자유롭게 추가할 수 있으며 , 3rd Party

Solution 과의 혼용 지원

28


HP WebOS CLOUD 저작도구

http://ares.palm.com

HTML5 적용 사례

Web (Safari, Chrome or Firefox) 기반

지원 도구

• 구성

Drag-and-drop interface builder

Code Editor & Web 기반 API Doc & Help

Visual debugger

Source control integration

•특징

Cloud 기반 Workflow 및 저장 기능 제공

로그인 (HP 개발자 Account 동기화 )

프로젝트 별 디렉토리 관리 기능 제공

Widget 별 기본 Style 및 속성

GPS 및 Map 연동을 위한 설정 기능 지원

29


HTML5 는 Native API 를 대체하는 방향으로 적용 범위 확대

HTML5 적용 사례

Performance

HW 접근

Web

Native

Web

HTML5

Native

HTML4

HTML5

Bas

e W

eb A

pp

뉴스

포털

RIAFunction

검색 기업

File upload

Doc viewer

Media Player

차트 , Grid지도

Casual 게임

문서3D Graphics

Communication

금융

소셜

의료

3D 게임

교육

Rich Media

UtilityPhotography

블로그

보안

위치

30


국내에서 HTML5 의미

국내 인터넷 환경은 다양성과 개방성이 실종유선 인터넷 트래픽의 지속적 감소 및 모바일 트래픽 증가

국내 포털의 유선 인터넷 트래픽카테고리 별 모바일 앱과 모바일 웹 이용 방법정보통신정책연구원 2011.12, HMC투자증권

31



현재 공공 , 은행 , 커머스 분야에서 비표준 ActiveX 사용 HTML5 기반 ActiveX 대체 기술 보급 활동

인터넷 이용환경 개선

구분민간 100 대

사이트

행정기관

100 대 사이트

ActiveX 사용 사이트 수 (%) 86% 82%

총 ActiveX 사용 프로그램 338 개 305 개

사용 기능

결재 및 인증 41.1% 13.0%

보안 22.5% 40.0%

파일 처리 6.8% 3.3%

웹 확장 문서 0.8% 0.7%

멀티미디어 및 UI 22.4% 31.0%

기타 5.0% 11.8%

ActiveX 사용 사례 ( 평균 3.7~3.9 개 사용 )http://web.kisa.or.kr

WIPI = ActiveX

PC → 모바일 ( 태블릿 )

글로벌 서비스에 의한 가입자 ( 체류시간 ) 잠식

32



표준 기반의 서비스 환경 조성을 위한 촉매제HTML5 보급 확산을 통한 인터넷 이용 환경 개선

현재 미래

33


글로벌 사업자의 HTML5 전략

Desktop 에서 Mobile 로 인터넷 이용 환경 변화개인의 다양한 인터넷 디바이스 소유 환경 대응

Morgan Stanley Internet Trends June 7, 2010

McKinsey iConsumer research, April 2012

34



Google

http://html5rocks.com

slides.html5rocks.com/

www.chromeexperiments.com

Chrome + DART +Swiffy +

HTML5shiv

35



Adobe

http://beta.theexpressiveweb.com/

Dreamweaver CS6 + Edge +

Muse CreateJS + Shadow

36



Microsoft

http://html5labs.com/

Windows8(Metro WebApp) + IE10

+ AppStore

37



Facebook

Open Graph + AppCenter

+ Ringmark

https://developers.facebook.com/html5/

38



Apple

Safari + WebApps + Author(EPUB3)

+ (-30%)

https://developers.facebook.com/html5/

39



리눅스 재단 + 삼성전자 + 인텔

SDK(W3C + UI + Device + Lagacy)

+ WebStore

http://tizen.orgEtc : HP webOS, EU Weninos, Google Chome OS, Mozila Boot-to-Gecko(B2G)

40



플랫폼 사업자 , 통신사 스토어 , 제조사 스토어 , 3rd Party 스토어 OS 플랫폼 사업자 , SW 도소매유통 (ESD), 브라우저 개발사

플랫폼 사업자 , 제조사 스토어지상파 TV, 케이블사업자3rd Party 미디어 스토어

플랫폼 사업자 , 제조사 스토어3rd Party 미디어 스토어

플랫폼 사업자 , 출판사 (교과서 )

오픈마켓 사업자

모바일에 이어 데스크탑 , TV, 자동차 , 가전 영역까지HTML5 기반 SW 직접 유통 ( 설치형 WebApp)

41


참고자료HTML5 스펙 한글 번역본

- http://j.mp/html5ko (clearboth.org)웹 개발자를 위한 최소 스펙

- http://j.mp/html5devel알기 쉬운 튜토리얼 및 프리젠테이션

- http://www.html5rocks.com실전 HTML5 가이드 ( 한글 PDF)

- http://j.mp/html5guide_koDive Into HTML5

- http://diveintohtml5.orgHTML5 개발자 커뮤니티 및 Dev , Demo 사이트

- http://www.whatwg.org/ , http://www.html5demos.comHTML5 리소스 모음

- http://www.webdesignerdepot.com/2011/06/the-ultimate-html5-resource-guide/ Mobile Web & HTML5 Performance Optimization

- http://www.slideshare.net/firt/mobile-web-html5-performance-optimization Best Practices for a Faster Web App with HTML5

- http://www.html5rocks.com/tutorials/speed/quick/

- http://www.html5rocks.com/webappfieldguide/toc/index/ HTML5 Frameworks and Useful Apps for Mobile Web Development

- http://skytechgeek.com/2011/11/html5-frameworks-and-useful-apps-for-mobile-web-development/20 Useful HTML5 and CSS3 Tools for Web Designers

- http://t.co/g5nHHgiX The Definitive Guide To HTML5: 14 Predictions For 2012

- http://lnkd.in/Ucy44i JavaScript & HTML5 Frameworks and Related Tools

- http://www.remotesynthesis.com/post.cfm/50-javascript-html5-frameworks-and-related-tools

Technology

Html5의 현재 그리고 미래 배포자료 최종