제46회 html5 동향

HTML 5 동향

2011. 7. 13

LG CNS 정보기술연구소모바일기술그룹

김상옥 선임 연구원

I. Introduction

II. Features…•Web Form• Video & Audio• Canvas / SVG•Web workers / Web Socket• Offline Web Application• Geolocation

III. 별첨

Contents

I. Introduction

• HTML5 소개

ü 웹 표준 기구 W3C에서 만들고 있는 차세대 웹 표준안으로서 Microsoft, Mozilla,

Apple, Google, Opera 등 모든 웹 브라우저 벤더가 참여하고 있는 산업 표준

ü 2004년 웹 브라우저 벤더와 개발자 커뮤니티가 주축이 된 웹 하이퍼텍스트

애플리케이션 워킹그룹(WHATWG)의 초안으로부터 시작

ü 웹 브라우저 호환성, 구조적이고 의미적 마크업 및 편리한 웹폼 기능을 제공하여

웹 개발자들의 생산성을 높임과 동시에 Rich Web Application을 개발 할 수 있는

다양한 JavaScript API를 포함

ü 2007년부터 W3C의 HTML W/G에서 HTML5 표준안으로 개발되고 있는 동시에

최신 버전의 웹 브라우저에서 빠르게 탑재되고 있어 차세대 웹 서비스 개발의 주요

기술

출처 : 한국 웹 표준 커뮤니티 (HTML5 가이드)

II. Features – Web Form

• Web Form 2.0

ü 웹 양식을 지원하는 tag로 Form tag는 HTML 문서에서 사용자 입력을 위해

제공되는 양식

ü 기존 Form tag는 텍스트, 버턴, 선택박스, 체크박스 등 단순한 형태의 입력

양식만을 제공

ü HTML5의 Web Form 2.0

– 달력양식, Range 양식, email 등 새롭고 실용적인 양식 추가

– 입력 보조 수단이나 입력 값 검증 등에도 활용 가능 (기존 스크립트에

의존할 수 밖에 없었던 기능적 요소)

ü form tutorial…

ü drag & drop demo…

II. Features – Video & Audio

• Video & Audio

ü HTML5에서는 새로운 미디어 요소인 <audio>와 <video> tag를 이용하여

별도의 브라우저 플러그인을 이용하지 않고 미디어를 웹 페이지에 추가 가능

ü JavaScript를 이용하여 미디어를 직접 제어 가능 (상황별 다양한 이벤트 제공)

ü HTML5를 지원하지 않는 브라우저의 경우 기존 플래시 등과 같은 플러그인을

이용한 미디어 재생 가능(코드 혼용 가능)

ü HTML5 미디어 요소들의 명세는 아직도 진행 중이며 여전히 Codec(MPEG4,

WebM), Streaming 등에 대한 다양한 이슈들이 존재

ü video & audio demo…

II. Features – Canvas / SVG (1/3)

• Canvas

ü 선, 도형, 텍스트, 이미지와 같은 그래픽을 표현할 수 있고 색깔, 그림자, 패턴과

같은 효과 적용이 가능

– 다양한 도형 그리기 API, 2D 렌더링 기능 제공

– 선, 면, 그라데이션, 텍스트 렌더링, 패턴 브러쉬 제공

– 이미지 처리, 비디오 프레임 단위 추출, 동적 Canvas 이미지 추출 제공

– 픽셀 단위 제어 제공

ü Canvas demo…(1), (2)

ü 참고 : WebGL

– 오픈 그래픽 라이브러리인 OpenGL(OpenGL ES 2.0)에 기반한 웹 표준 그래픽 라이브러리

(브라우저에 별도의 플러그 인 없이 하드웨어 가속되는 3D그래픽 표현 가능)

– Apple, Google, Mozilla 및 Opera, AMD 및 NVIDIA 등이 WebGL Working Group 멤버로 활동

(Google의 웹 용 3D API인 O3D 플러그 인 기술을 포기하고 WebGL 선택)

– WebGL demo…


ü SVG (Scalable Vector Graphics)

ü W3C의 2차원 그래픽을 기술하는 XML 기반 언어

ü 벡터 기반 그래픽 언어(일부 래스터 그래픽 기능도 가능)

ü SVG는 실질적이고 유연한 그래픽 포맷을 XML로 구현한다는 목표로 만들어짐

– 중첩된 변형, 클리핑 경로, 알파 마스크, 래스터 필터 효과, 템플릿 객체 포함

– 애니메이션, 줌과 플래닝 뷰, 다양한 그래픽 명령어, 그룹핑, 스크립팅,

하이퍼링크, 구조화 된 메타데이터, CSS, 특화된 DOM super set, 기타 XML

문서로의 임베딩(e.g. html) 지원

– XHTML 1.1+과 비슷한 방식으로 모듈화

– Mobile SVG Profiles: SVG Tiny and SVG Basic에서는 모바일 폰과 PDA에

적합한 SVG 모듈 정의

ü SVG demo…


ü Canvas / SVG 비교

Canvas SVG

장

점

• 높은 퍼포먼스의 2D영역으로 원하는

어떤것이라고 드로잉 능함

• 지속적인 수행 - 모든것이 픽셀이므로 이미지

해상도가 높을 경우에만 수행능력이 떨어짐

• .png나 .jpg로 저장할수 있음

• 래스터방식(점-dotted방식)의 그래픽에 적합하여

게임이나 도형처리가 용이, 이미지 편집과 같이 픽셀

수준의 처리가 용이

• 해상도에 독립적 - 어떤 화면 해상도에서도 처리

가능하기때문(벡터방식)에 SVG 를 크로스플랫폼 UI 에

적합

• 애니메이션에 대한 지원이 좋음 – element 단위의

명확한 태그나 스크립트로 구현이 가능

• JavaScript로 SVG DOM API 를 이용한 모든

element들의 자유자재로 컨트롤 가능

• SVG는 XML 파일 포맷이므로 모든 주요 Web browser

에서 지원하고 Web App UI에 좀더 좋은 솔루션으로 사용

단

점

• 드로잉할 DOM노드가 없고 픽셀로만 컨트롤가능

• 애니메이션에 대한 API가 없으므로 필요할때마다

이벤트를 업데이트하거나 타이머를 작동시켜야 함

• 텍스트 렌더링에 약함

• 지원하는 애니메이션 API가 부족

• 문서 복잡도가 증가할수록 렌더링이 느림(DOM이

많을수록 성능저하)

• 게임과 같은 같은 곳에서는 적합하지 않음(가장 좋은 방

법은 Canvas + SVG 조합)

출처 : http://techbug.tistory.com/207

II. Features – Web workers / Web socket (1/2)

ü Web workers

ü Single-thread로 동작하는 JavaScript의 코드 개발에 대한 제약을 극복하기 위한

방법으로 Multi-thread의 개념을 도입한 기술

ü 특징

– XmlHttpRequest 객체를 이용한 I/O 작업 가능

– sub-wokers 생성 가능(생성된 thread에서 다른 thread를 생성)

– Global function에 접근 가능

– timout과 interval을 사용 가능

– importScripts()를 이용한 다른 스크립트 로딩 가능

– Thread를 생성한 생성자를 통해서만 메세지 통신 가능

ü Web workers demo…

II. Features – Web workers / Web socket (2/2)

ü Web socket

ü Connectless인 HTML을 이용한 웹 어플리케이션 개발의 제약을 극복하기 위함

ü Polling 기반의 다양한 방법이 시도(request후 response 상태 유지)

– Hidden frame : hidden frame을 사용하여 반복적인 재요청

– Ajax : 비동기식 반복 요청, 클라이언트의 비효율적인 재요청

– Long-polling : 서버 데이터 수신 후 재요청 가능, 불필요한 반복적 요청의

비효율성 개선

ü 특징

– 서버와 브라우저가 지속적으로 연결된 TCP 라인을 통한 실시간 데이터

통신[일반적인 TCP socket과 같이 연결지향/양방향 전이중(full-duplex) 통신]

– Http header에 불필요한 데이터가 줄어 data 통신 크기와 응답시간 향상

ü Web socket demo…(1), (2), (3) Tetris demo 출처 : http://vimeo.com/17214540

II. Features – Offline Web Application (1/3)

ü Application Cache

ü Web Application 주요 구성요소인 HTML, JS, CSS 등의 문서파일들과 각종

이미지 파일들을 브라우저의 임시영역에 cache로 저장하고, offline 상태

브라우저가 Refresh 하더라도 application을 로딩하도록 지원

ü 현재 각 도메인당 5M로 캐쉬 크기가 설정되어 있는 것으로 알려져 있으며,

데스크탑의 경우 5MB 이상은 사용자에게 확장여부 확인

(브라우저 구현에 따라 다르고, 현재로서는 표준의 크기가 제한되어 있지 않음)

ü 특징

– Offline 지원

– 속도 향상

– 서버 부하 감소

ü Application Cache demo…(1), (2)


ü Web Storage (Local & Session)

ü Key/Value 쌍의 형태로 저장되며 Cookie의 단점을 극복하기 위한 기술

ü Cookie의 단점

– 보통 브라우저에서 최대 크기 4KB 정도로 제한 (Web Storage는 5Mb/도메인)

– Request 호출 시마다 헤더에 전송하므로 많은 양의 값들을 저장할 경우

웹서버의 응답시간에 영향을 줌 (헤더 전송으로 악의적인 용도 사용가능)

ü Local Storage

– 장기적으로 저장 가능(유효기간 없는 Cookie와 유사)

– 브라우저 Window를 닫아도 유지되며 모든 브라우저 Window 간에 공유됨

ü Session Storage

– 현재 브라우저 Window에만 유효한 저장공간

(브라우저 창을 닫으면 모두 삭제됨)


ü Web Database

ü 웹 브라우저에 Database 엔진을 이용하여 JavaScript로 사용하는 기술로 현재 Web

SQL Database와 Indexed Database 기술(W3C 표준)이 존재

ü Web SQL Database

– 현재 Webkit 기반 브라우저(Safari, Chrome, Opera, iPhone, Android) 지원주1)

– 구현 기술로 SQLite Database 사용

– HTML5 표준에서 제외 (SQLite에 종속적인 SQL 언어 기반)

ü Indexed Database

– 현재 Firefox, Safari, Chrome 지원

– B-tree 기반의 Key/Value 형태

– HTML5의 표준 사양이 진행중

주1) Async 모델만 지원기본 5Mb 설정Desktop : 1G 이하iPhone, Android : 50Mb 이하

II. Features – Geolocation

ü Geolocation

ü 위치 정보를 제공하기 위한 API

ü HTML5 표준이 아닌 Geolocation API 라는 표준으로 정의(Google)

ü 모바일 환경에서 가장 많이 사용되는 API

ü 모바일 브라우저 구현에 따라 IP Address, WiFi/Bluetooth MAC Address,

GSM/CDMA 의 셀타워 정보 등으로부터 위치정보 제공

ü Geolocation demo…

ü 별첨1 : W3C DAP

ü 캘린더, 주소록, 카메라 등 Device 서비스와 관계된 웹 응용과 웹 위젯 개발을 가능케 하는 클라이언트

API 표준 및 보안 정책 프레임워크 정의

- 2009년 8월 W3C는 DAP WG을 신설(최초 Nokia 주도) 현재까지 관련 API 구현 및 표준화 진행 중

- DAP WG의 표준 개발 범위는 위젯이나 웹 응용에 제공되어야 하는 Device(데스크탑, 모바일 인터넷

Device(MID), 휴대폰 등)에 서비스를 위한 API 명세를 개발하는 것

- BONDI와 JIL 스펙 조율 중, HTML5 마크업 관계 정립 중

별첨1. W3C DAP (Device APIs and Policy) WG (1/2)

ü W3C DAP 표준개발 동향

출처: 모바일 웹 플랫폼과 Device API 표준, TTA Journal

API 설명 개발주체

Calendar일정 정보에 접근하기 위한 APIissue : 보안 이슈, 음력 및 국제화 (iCal, vCalendar) 지원

프랑스 텔러콤, RIM

Contact주소록 정보에 접근하기 위한 APIissue : 멀티 디바이스 주소록, SIM 주소록 및 인터넷 주소록(Facebook, Twitter) 연동

프랑스 텔레콤

Capture오디오, 이미지, 비디오 기능에 접근하기 위한 APIissue : Geolocation API와 연동

Intel, Nokia, 도이치텔레콤

MessagingSMS, MMS, Email 기능에 접근하기 위한 APIissue : MMS 메시징 생성 방식, 메시징 로그 접근 방식

텔레포니카, Opera, 에릭슨

System Information시스템 기본적인 속성 정보에 대한 API (Battery용량, Network Bandwidth, CPU부하, 저장용량Storage, I/O 기기)issue : DCO주1)와의 연동, 센서 기능 추가

Intel, Opera

File Writer파일을 쓰기 위한 APIissue : 스트링으로부터 BLOB 생성 및 파일 쓰기에 대한 이벤트 모델

Google

Gallery미디어 갤러리(media gallery)에 접근하는 APIissue : 갤러리 메타데이터 속성, 갤러리 검색 메서드 이름

ETRI

Powerbox사용자 개인 리소스를 브라우저에서 요청하기 위한 웹 기반 전달 방식issue : 유사 방식(Open Provider)와의 모델 차이

Google

Application Launcher 인스톨된 어플리케이션(Native Application)에 접근하기 위한 API ETRI

Tasks API 저장된 업무(Task) 관리(task의 추가, 삭제, 수정)을 위한 API -

Application Configuration 웹 어플리케이션의 설정(사용자의 선호도나 환경설정)을 변경하기 위한 API -

User Interaction서로 다른 플랫폼에서 사용자가 웹 어플리케이션을 더욱 쉽게 조작할 수 있도록 하는 API의집합

-

Communication Log 전화, 문자의 기록(log) 내용 및 메타데이터에 접근하기 위한 API -

주1) DCO(Device Context Ontology) : 웹응용의상호연동(디바이스코디네이션)표준

별첨1. W3C DAP (Device APIs and Policy) WG (2/2)

별첨2. 웹 표준 관련 지원 현황

http://caniuse.com/

별첨3. Reference

l HTML 5 종결자 사이트http://www.dzinepress.com/2011/04/the-ultimate-html5-tutorials-and-useful-techniques/

l HTML 11 Labshttp://html11.org/

출처: HTML5 이해와 표준화 동향LG CNS 정보기술연구원생산성혁신팀 채민철 과장

l Canvas Applicationhttp://creativefan.com/

l W3C HTML5http://www.w3.org/TR/html5/2010.10.01 LastCall (Spec 거의 안정화)-> 2011.05.22 LastCall 종료-> Candidate REC (브라우저 테스트)-> Proposed REC -> 2014.12 REC

l Browser statehttp://gs.statcounter.com/#browser_version-KR-monthly-201005-201105

제46회 html5 동향

Documents