제46회 HTML5 동향

HTML 5 동향 2011. 7. 13 LG CNS 정보기술연구소 모바일기술그룹

김상옥 선임 연구원

Contents I. Introduction II. Features…

• Web Form • Video & Audio • Canvas / SVG • Web workers / Web Socket • Offline Web Application • Geolocation III. 별첨

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…

II. Features – Canvas / SVG (2/3) ü 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…

II. Features – Canvas / SVG (3/3) ü Canvas / SVG 비교 Canvas • 높은 퍼포먼스의 2D영역으로 원하는

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

어떤것이라고 드로잉 능함

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

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

적합

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

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

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

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

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

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

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

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

수준의 처리가 용이

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

장 점

SVG

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

단 점

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

•

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

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

많을수록 성능저하)

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

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

• 텍스트 렌더링에 약함

법은 Canvas + SVG 조합)

• 지원하는 애니메이션 API가 부족 출처 : 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)

II. Features – Offline Web Application (2/3) ü Web Storage (Local & Session) ü Key/Value 쌍의 형태로 저장되며 Cookie의 단점을 극복하기 위한 기술 ü Cookie의 단점 – 보통 브라우저에서 최대 크기 4KB 정도로 제한 (Web Storage는 5Mb/도메인) – Request 호출 시마다 헤더에 전송하므로 많은 양의 값들을 저장할 경우 웹서버의 응답시간에 영향을 줌 (헤더 전송으로 악의적인 용도 사용가능)

ü Local Storage – 장기적으로 저장 가능(유효기간 없는 Cookie와 유사) – 브라우저 Window를 닫아도 유지되며 모든 브라우저 Window 간에 공유됨

ü Session Storage – 현재 브라우저 Window에만 유효한 저장공간 (브라우저 창을 닫으면 모두 삭제됨)

II. Features – Offline Web Application (3/3) ü 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

별첨1. W3C DAP (Device APIs and Policy) WG (1/2) ü 캘린더, 주소록, 카메라 등 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 (2/2) ü W3C DAP 표준개발 동향 API

설명

개발주체

Calendar

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

Contact

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

Capture

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

Intel, Nokia, 도이치 텔레콤

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

텔레포니카, Opera, 에릭슨

Messaging

System Information

File Writer Gallery Powerbox Application Launcher Tasks API Application Configuration User Interaction Communication Log

프랑스 텔러콤, RIM

시스템 기본적인 속성 정보에 대한 API (Battery용량, Network Bandwidth, CPU부하, 저장용량 Storage, I/O 기기) issue : DCO주1)와의 연동, 센서 기능 추가 파일을 쓰기 위한 API issue : 스트링으로부터 BLOB 생성 및 파일 쓰기에 대한 이벤트 모델 미디어 갤러리(media gallery)에 접근하는 API issue : 갤러리 메타데이터 속성, 갤러리 검색 메서드 이름

프랑스 텔레콤

Intel, Opera

Google ETRI

사용자 개인 리소스를 브라우저에서 요청하기 위한 웹 기반 전달 방식 issue : 유사 방식(Open Provider)와의 모델 차이 인스톨된 어플리케이션(Native Application)에 접근하기 위한 API

Google ETRI

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

-

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

-

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

-

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

-

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

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

별첨2. 웹 표준 관련 지원 현황 http://caniuse.com/

별첨3. Reference l HTML 5 종결자 사이트 http://www.dzinepress.com/2011/04/the-ultimate-html5-tutorials-and-usefultechniques/ l HTML 11 Labs http://html11.org/ l Canvas Application http://creativefan.com/ l Browser state http://gs.statcounter.com/#browser_version-KR-monthly-201005-201105 l W3C HTML5 http://www.w3.org/TR/html5/ 2010.10.01 LastCall (Spec 거의 안정화) -> 2011.05.22 LastCall 종료 -> Candidate REC (브라우저 테스트) -> Proposed REC -> 2014.12 REC

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