Html5의 현재 그리고 미래

2012. 5.

포비커 박종일 이사

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

HTML5의 현재 그리고 미래

목 차

HTML5 적용 사례

HTML5 개요 1

3

HTML5 표준과 지원 현황 2

국내에서 HTML5 의미 4

글로벌 사업자의 HTML5 전략 5

Summary 6

2

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

HTML5 개요

Web Development

to the next level

HTML+ CSS + JS(API)

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

A fully open, uncontrolled Platform Forged by widely respected standards bodies

3


HTML5 개요

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

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

4


HTML5 개요

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

http://msittrend.com/html5.html

5


적용 플랫폼

Platform Version

해상도

단말 제조사 자제 규격

스토어(검수, 정산)

적용 브라우저

브라우저 Version

해상도

플러그인 정책

도메인, 웹스토어

> 생산성

(비용, 시간)

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

Platform Fragmentation VS Browser Compatibility

HTML5 개요

확장성

(인프라, 접근)

6


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 개요

7


GitHub Archive - April 2012

HTML5 개요

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

Mobile Developer interest in HTML5

8


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

HTML5 표준과 지원 현황

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

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

• N-Screen 대응

• 웹 기술 표준화

9


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


MOBILE

HTML WG

Canvas, CSS3 2D 3D

Transforms, SVG, WebGL

MediaStream Processing API,

Web Audio API

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 WG

Web Application Security WG

10



1991 HTML

1994 HTML2

1996 CSS JavaScript +

1997

1998

HTML4

CSS2

2005 AJAX

2000 XHTML

XHTML2 WG 2002

WHATWG 2004

2007 HTML5 WG

2010

2014

HTML5(WD)

HTML5(REC) XHTML 표준화 중단

오페라, 모질라, 애플

구글(lan Hickson)

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

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

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

2013 HTML5(PR)

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

11



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

12



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>

13



New Web Design and Applications Web of Service & Web of Devices

Graphics & 3D

Connectivity Device Access

Multimedia

Offline & Storage

Performance

Semantics

CSS3

14



주요기능 설명 관련 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

15



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

16



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

17



Plugin 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

18


HTML5 Canvas Demo

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

HTML5 적용 사례

19


HTML5 Drag &Drop Demo

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

20


HTML5 SVG Map Demo

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

HTML5 적용 사례

21


HTML5 WebRTC(Real Time Communication) Demo

HTML5 적용 사례

http://youtu.be/aK1DC2zp6ZE

22


HTML5 WebGL Water Demo

HTML5 적용 사례

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

http://madebyevan.com

23


HTML5 Device API Demo

HTML5 적용 사례

http://dev.opera.com/labs

24


Web Intents Demo

HTML5 적용 사례

https://dev.twitter.com/docs/intents

http://youtu.be/gZB4ZOIt9g4

25


Drag and Drop HTML5 Base Game Maker

http://www.scirra.com

http://www.scirra.com

HTML5 적용 사례

http://www.scirra.com/

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

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

2 Solution에서 제공되는 기능 외에는 사용할 수 없으며, 고객의 니즈에 따른 확장과 커스터마이징이 불가능함 (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


Cloud9 저작도구

http://c9.io/

HTML5 적용 사례

HTML5 기반 지원 도구

• 특징

Open source IDE(GNU)

https://github.com/ajaxorg/cloud9

Visual debugger

HTML, CSS, PHP, Java, Ruby and

23 other languages

• Code Repositories

GitHub

Bitbucket

Mercurial Repositories

Git Repositories

FTP servers

30


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

HTML5 적용 사례

Performance

HW 접근

Web

Native

Web

HTML5

Native

HTML4.X

뉴스

포털

RIA

xHTML Function

검색 기업

File upload

Doc viewer

Media Player

차트, Grid

지도

Casual 게임

문서 3D Graphics

Communication

금융

소셜

의료

3D 게임

교육

Rich Media

Utility Photography

블로그

보안

위치

31


국내에서 HTML5 의미

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

국내 포털의 유선 인터넷 트래픽 카테고리별 모바일 앱과 모바일 웹 이용 방법

정보통신정책연구원 2011.12, HMC투자증권

세계, 국내 브라우저 시장 점유율(12.04) Source : 스택카운터(http://gs.statcounter.com)

32



현재 공공, 은행, 커머스 분야에서 비표준 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 → 모바일

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

33


접근성

호환성

기능성

사용성


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

현재 미래

MS, IE 종속

비표준 기술

PC 기반

웹서비스

개방화, 다양화

표준 기술

모바일, 가전등

범용

플랫폼화

34


글로벌 사업자의 HTML5 전략

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

Morgan Stanley Internet Trends June 7, 2010

McKinsey iConsumer research, April 2012

35



Google

http://html5rocks.com

slides.html5rocks.com/

www.chromeexperiments.com

Chrome + DART +Swiffy +

HTML5shiv

36



Adobe

http://beta.theexpressiveweb.com/

Dreamweaver CS6 + Edge + Muse

CreateJS + Shadow

37



Microsoft

http://html5labs.com/

Windows8(Metro WebApp) + IE10

+ AppStore

38



Facebook

OpenGraph + App Center

+ Ringmark

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

39



Apple

Safari + Web Apps + Author(EPUB3)

+ (-30%)

http://www.apple.com/html5/

40



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

플랫폼 사업자, 제조사 스토어

지상파TV, 케이블사업자

3rd Party 미디어 스토어

플랫폼 사업자, 제조사 스토어

3rd Party 미디어 스토어

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

미디어 서비스 사업자

오픈마켓 사업자

모바일에 이어 데스크탑, TV, 자동차, 가전 영역까지 HTML5기반 Web & Apps 활용 범위 확대

41


참고자료

HTML5 스펙 한글 번역본

- http://j.mp/html5ko (clearboth.org)

웹 개발자를 위한 최소 스펙

- http://j.mp/html5devel

알기 쉬운 튜토리얼 및 프리젠테이션

- http://www.html5rocks.com

실전 HTML5 가이드 (한글 PDF)

- http://j.mp/html5guide_ko

Dive Into HTML5

- http://diveintohtml5.org

HTML5 개발자 커뮤니티 및 Dev , Demo 사이트

- http://www.whatwg.org/ , http://www.html5demos.com

HTML5 리소스 모음

- 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의 현재 그리고 미래