미래 웹 기술에 관한 이야기

2011년, W3C HTML5 표준화 동향 및 전망

이원석(wonsuk73@gmail.com) — Sat, 08 Jan 2011 05:47:58 +0900

본 글은 모바일 웹2.0 포럼의 이슈리포트로 발간된 글입니다.

W3C HTML5 대한민국 관심그룹 의장 이원석

1. HTML5 표준 개요

HTML5는 W3C(World Wide Web Consortium)를 중심으로 개발되고 있는 차세대 HTML 표준으로 웹 애플리케이션 개발을 위한 표준 개발을 목표로 하고 있다. 따라서 HTML5는 현재 사용중인 HTML4에 비해 상당히 많은 새로운 기능들을 포함한다. HTML5는 크게 마크업 표준과 API 표준으로 구성되어 있는데, 이와 같은 마크업과 API 부분의 혼재와 많은 분량에서 발생되는 혼란스러움과 표준 개발의 효율성을 높이기 위해 2009년 4월 이후에 표준안이 여러 개의 문서로 분리되어 개발되고 있다. 또한 이에 대한 표준 개발은 W3C HTML WG 외에도 웹 애플리케이션(Web Application) WG, Geolocation WG 그리고 디바이스 API 및 정책(Device API and Policy) WG에서 관련된 표준을 개발하고 있다. 최근 웹 애플리케이션(Web Application) WG의 경우 활동계획서를 다시 정리하면서 HTML5와 관련된 5~6개 정도의 추가적인 표준 개발을 제안하는 등 적극적으로 HTML5에 대한 표준개발을 진행하고 있다. 또한 최근에 Web Notification WG, Web Performance WG 그리고 Web Event WG 등 추가적인 표준 개발을 위한 WG들이 속속 활동을 시작하고 있다. 앞으로도 지속적으로 HTML5와 관련된 추가적인 표준화 활동들이 늘어날 것으로 예상된다.

HTML5 와 관련된 주요 WG별 표준개발 내용은 아래와 같다.

<표1> HTML5 관련 W3C 주요 WG 현황

WG 명	표준개발 범위	개발 표준 현황
HTML WG	HTML5 마크업 관련 표준 개발	- HTML5 - HTML+RDFa - HTML Microdata - HTML Canvas 2D Context
Web Application WG	웹 애플리케이션 개발에 필요한 웹소켓, 웹워커, IndexedDB, FileAPI 등을 포함하여 HTML5와 관련된 주요 API 표준 개발	- Web Sockets API - Web Storage - Web Workers - Indexed Database API - Server-Sent Events - Cross-Origin Resource Sharing (CORS) - HTML5 Web Messaging - Clipboard Operations - File API - File API: Directories and System - File API: Writer - Programmable HTTP Caching and Serving
Device APIs and Policy WG	데스크탑, 랩탑, 모바일 인터넷 단말(MID), 핸드폰 등 다양한 기기의 웹 브라우저에서 일정, 업무, 연락처, 카메라, 메시지, 시스템 정보, 이벤트 등의 다양한 단말 기능을 사용할 수 있도록 하는 API 표준	- Contacts API - The Calendar API - The Media Capture API - The Messaging API - The System Information API
Geolocation WG	Geolocation API를 포함하여 가속센서, 방향센서 등 센서에 관련된 표준 개발	- Geolocation API - DeviceOrientation Event
Web Notification WG	사용자에게 알려주기 위해 필요한 Notification과 관련된 API 표준으로, Notification과 관련하여 사용자 인터액션(Interaction) 관리에 필요한 이벤트에 대한 표준도 포함	- Web Notifications
Web Performance WG	웹 브라우저의 특징들과 API들에 대한 애플리케이션 성능 측정에 대한 표준 개발	- Navigation Timing
Web Event WG	모든 디바이스의 멀티터치, 펜-테블릿 입력 등의 사용을 가능하게 하는 방법에 대한 표준 개발	- Web Events
Web Real-Time Communications WG	웹 브라우저에서 P2P(Peer to Peer) 오디오, 비디오 등 실시간 통신을 위한 클라이언트 API 표준 개발	- WG Charter 검토 중

* 참고로 각 WG에서 개발하고 있는 표준 중 주요 표준을 포함시켰고, 또한 W3C Note는 포함하지 않음.

2. HTML5 표준화 동향

HTML5 표준 중 마크업 부분은 기존 HTML4보다 훨씬 더 명확하게 의미 표현이 가능하도록 28개의 새로운 마크업이 추가되었다. 이를 통해서 검색 엔진 등 웹의 콘텐츠를 기반으로 하는 다양한 서비스나 애플리케이션은 개선된 기능을 제공할 수 있을 것으로 기대된다. 또는 HTML4까지는 없었지만 HTML5에 새롭게 추가된 API의 경우는 네이티브(Native) 애플리케이션과 유사한 수준의 웹 애플리케이션 개발을 위해 필요한 부분을 정의한 것이다. 현재 HTML5에 포함된 내용은 상당히 광범위하나 현재 주요 브라우저들이 지원하는 기능을 기준 정리해 보면 아래와 같다.

<표 2> HTML5의 주요 특징과 관련 표준개발 현황

기능	설명	표준개발 현황
HTML5 마크업	HTML5에 대한 기본 마크업 및 애트리뷰크에 대한 표준 정의	- HTML5 - LCWD 단계
웹 폼 (Web From)	사용자의 입력정보를 받기 위해 사용되는 입력형태에 대한 정의에 사용되는 마크업, 애트리뷰트와 이벤트	- HTML5 - LCWD 단계
캔버스 (canvas)	웹에서 즉시모드(immediate mode)로 2차원 그래픽을 그리기 위한 API와 <canvas> 내 각종 객체를 회전, 변환하고 그레디언트, 이미지 생성 등 각종 효과를 주는 기능에 대한 API	- HTML Canvas 2D Context - LCWD 단계
SVG (Scalable Vector Graphic)	XML 기반의 2차원 백터 그래픽을 표현하기 위한 언어	- HTML5 - LCWD 단계
비디오/오디오(Video/Audio)	<video>는 비디오 또는 영화를 보여주기 위해 사용되는 미디어 엘리먼트이며, <audio>는 사운드나 오디오 스트림을 표현하기 위한 미디어 엘리먼트	- HTML5 - LCWD 단계
Geolocation	디바이스의 지리적 위치 정보를 제공하는 API 표준	- Geolocation API - CR 단계
오프라인 웹 애플리케이션(Offline Web Application)	인터넷 연결이 지원되지 않는 경우에도 웹 애플리케이션이 정상적으로 수행될 수 있도록 지원하는 기능으로 애플리케이션에 대한 캐슁과 데이터에 대한 캐슁으로 구성	- HTML5 - LCWD 단계
Indexed Database API	대량의 구조화된 데이터 저장 기능 및 인덱스 기반의 고성능 검색 기능에 대한 API	- Indexed Database API - WD 단계
웹 SQL 데이터베이스(Web SQL Database)	다양한 표준 SQL을 사용해 질의할 수 있는 데이터베이스 기능에 대한 API	- Web SQL Database - W3C Note 예정
로컬저장소 (Local Storage)	기존 쿠키의 기능을 개선하기 위한 목적으로 개발된 기능으로 웹 클라이언트에서 키와 값이 쌍으로 구성된 데이터를 영구적으로 저장하는 기능	- Web Storage - LCWD 단계
웹 소켓 (Web Socket)	웹 애플리케이션이 서버 측의 프로세스와 직접적인 양방향 통신을 위한 API	- The WebSocket API - WD 단계
웹 워커 (Web Worker)	웹 애플리케이션을 위한 쓰레드(Thread) 기능에 대한 API	- Web Workers - LCWD 단계

* WD: Working Draft

* LCWD: Last Call Working Draft

* CR: Candidate Recommendation

* PR: Proposed Recommendation

* REC: Recommendation

사실 W3C와 HTML WG 의장들은 2007년부터 개발하고 있는 HTML5 표준이 다양한 회사들의 비즈니스 이슈로 많은 논쟁과 더불어 표준 개발이 지연되는 것에 우려하고 있었다. 따라서 HTML WG 의장들은 WG내의 표준개발을 효과적으로 하기 위한 방안으로 단계별 규칙을 만들어서 진행하였지만 생각만큼 빠르게 진행되지 않았다. 2010년 9월초 기준으로 HTML5 표준에는 200개 정도의 버그와 25 개정도의 이슈가 있는 상황이었다. 이러한 상황을 최대한 빨리 정리하기 위해 W3C와 HTML WG의장들은 2010년 10월부터 받는 HTML5 표준과 관련된 모든 새로운 버그들은 의장들의 허가할 수 있는 예외적인 상황으로 인정하여 Last Call 코멘트로 처리하기로 결정했다. 즉, 2010년 10월 1일을 기준으로 HTML5 표준을 포함한 HTML WG의 HTML5 관련 표준들에 대한 Last Call을 진행하기로 결정했다. Last Call에 대한 구체적인 일정은 아래와 같다.

- 2010년 10월 1일: HTML5 표준 초안 Last Call 돌입

- 2011년 5월 22일: HTML5 표준 초안 Last Call 종료

이러한 조치로 HTML5에 대한 표준 개발 속도는 한층 탄력을 받을 것으로 예상된다. 하지만 오해하지 않아야 할 부분은 현재 Last Call에 들어간 표준안이 HTML5 마크업과 관련된 표준으로 HTML WG에서 개발 중인 표준에 국한된다. HTML5의 주요 API와 관련된 표준은 다른 표준안으로 각각 개발되고 있어 표준 승인 일정이 다르다는 것이다. 또한 현재 Last Call에 들어간 표준도 이후에도 최종 권고안이 되기 위해서는 CR(Candidate Recommendation) 및 PR(Proposed Recommendation)를 거쳐 Rec(Recommendation)까지 완료가 되어야 한다는 것이다.

3. HTML5 향후 전망

2010년 세계적인 주요 IT 기업들은 HTML 기술 개발, 표준화 및 서비스 적용에 발 빠른 대응을 하고 있다. 먼저, 구글은 지속적으로 공들여 개발한 구글 기어스(Google Gears)를 포기하고 HTML5에 집중하기로 하였으며, 자사의 핵심 서비스 중 하나인 유튜브(Youtube)에서 플래쉬 플러그인(Flash Plug-In)이 필요없는 HTML5 기반 동영상 서비스를 시작하였다. 또한 구글은 스마트폰 플랫폼인 안드로이드의 웹 플랫폼에도 이미 HTML5의 많은 기능을 제공하고 있으며, 최근 W3C의 HTML5 관련 WG(Working Group)에 적극적으로 참여하는 등 HTML5 기술개발에 총력을 기울이고 있다. 이와 더불어 애플도 최근 아이패드를 발표하면서 앞으로 아이폰과 아이패드에서 플래쉬를 배제하고 HTML5를 적용할 것임을 분명히 하였으며, 이미 아이튠즈 등 주요 소프트웨어에 웹의 표준 기술을 적극적으로 도입하고 있다. 또한 애플도 W3C HTML WG의 공동의장으로 활동하는 등 HTML5 관련 표준화 활동에 적극적으로 대응하고 있다. 마이크로소프트의 경우도 실버라이트와 IE9과의 역할을 분명히 정리하면서 IE9에 HTML5 기능을 빠르게 추가하고 있다. IE9의 공식버전은 2011년 상반기에 출시될 것으로 예상된다.

모바일의 경우 최근 아이폰, 안드로이드 그리고 블랙베리 등 주요 스마트폰 플랫폼들은 HTML5의 주요기능을 지원하는 웹 브라우저를 내장하고 있다. 따라서, 네이티브와 유사한 수준의 모바일 웹 애플리케이션 개발이 가능하기 때문에 향후 지속적으로 모바일 웹 애플리케이션 개발은 확대될 것으로 예상된다. 유튜브 모바일, 야후 메일, 지메일, 구글Docs 애플리케이션 등은 HTML5 기반 모바일 웹 애플리케이션의 가능성을 보여주는 대표적인 웹 애플리케이션들이다. 또한 앞으로 최대한 웹 표준 기술을 활용하되 네이티브 애플리케이션으로 패키징하는 하이브리드(Hybrid) 모바일 애플리케이션들이 향후 상당기간 동안은 확대 될 것으로 예상된다. 이는 HTML5의 장점을 적극적으로 활용하면서도 웹 표준으로 해결할 수 있는 특정 기능을 활용할 수 있는 장점과 동시에 앱스토어를 통해 배포가 가능한 애플리케이션 개발이 가능하다는 장점이 있다. 또한 어느 정도의 적용 노력은 필요하지만 기존의 네이티브 애플리케이션과 비교하면 훨씬 효과적으로 다양한 모바일 플랫폼에 대응이 가능하다는 측면에서 큰 장점을 갖기 때문이다.

지금은 급격히 모바일 인터넷 시대로 가고 있는 변화의 시기이며, 지속적으로 다양한 인터넷 가능한 모바일 디바이스들이 출현하게 될 것이다. 향후 모바일 애플리케이션은 네이티브, 하이브리드 그리고 웹 애플리케이션들이 공존할 것으로 예상되나 2011년이 네이티브 애플리케이션 중심에서 HTML5 기반의 하이브리드 애플리케이션 또는 웹 애플리케이션 중심으로 중심축이 이동하는 원년이 될 것으로 전망된다.

추가적으로 현재 W3C는 HTML5 표준 개발에 더욱 집중하고 있으며, 웹 애플리케이션 개발에 필요한 추가적인 표준 개발을 위한 WG들을 지속적으로 신설하고 있는 상황이다. 국내의 경우 W3C 대한민국 사무국을 중심으로 W3C HTML5 대한민국 관심그룹(W3C HTML5 Korean Interest Group)을 신설하여 11월 11일 킥오프 회의를 시작으로 공식적인 활동에 들어갔다. 또한 웹 플랫폼 기술은 주요 브라우저 벤더들 그리고 관련 오픈소스 프로젝트들을 중심으로 빠르게 발전하고 있는 상황이며, 크롬은 이미 크롬 웹 스토어를 런칭하여 서비스를 제공하고 있고 모질라는 표준 기반의 웹 앱스토어를 준비하고 있는 상황이다. 이와 같은 다각적인 노력을 볼 때 2011년은 HTML5 기반 모바일 웹 애플리케이션이 활성화되는 원년이 될 것으로 전망해 본다.

[지디넷칼럼] HTML5 웹앱의 가능성에 주목하라

이원석(wonsuk73@gmail.com) — Tue, 14 Dec 2010 13:01:04 +0900

[지디넷코리아]지금까지 어도비의 플래시와 같은 RIA 기술은 웹에서 동영상, 광고, 검색 등 다양한 서비스에서 활용되고 있으며, 국내의 경우는 인터넷 뱅킹, 홈페이지 제작 등의 경우까지 상당히 많이 활용을 하고 있다.

또한 스마트폰이 나오면서 아이폰 앱스토어나 안드로이드 마켓 등 스마트폰의 애플리케이션 유통 채널이 등장하면서 그야말로 스마트폰 애플리케이션의 전성시대를 만들고 있다. 그러나 점점더 많은 모바일 플랫폼 및 단말들이 출시되면서 점차적으로 HTML5 기반의 웹 애플리케이션에 대한 업계의 관심이 크게 증가하고 있다.

본 고에서는 최근 이슈가 되고 있는 테블릿, 구글의 크롬OS와 크롬 웹스토어의 출시에 따라 더욱 주목 받고 있는 HTML5 기반 웹 애플리케이션의 가능성을 이야기 해볼까 한다.

■ 저물고 있는 RIA 플랫폼의 전성시대

1999 년 W3C에서 HTML 4.01 권고안이 공개된 이후 W3C는 지금까지 10년이 넘는 세월 동안 새로운 HTML 권고안이 공개되지 못했다. 이러한 상황은 HTML 표준이 인터넷 산업의 빠른 팽창 속에서 새롭게 요구되는 다양한 요구사항들을 반영하지 못했음을 의미한다. 결과적으로 어도비의 플래쉬와 MS의 실버라이트와 같은 RIA(Rich Internet Application) 플랫폼 기술이 시장의 요구사항을 만족시키면서 RIA의 전성시대를 이끌었다.

그러나 스마트폰과 테블릿 등 모바일 단말의 활용이 증가하면서 RIA를 활용하는 대신 HTML5와 같은 웹 표준의 활용에 대한 관심이 크게 증가하고 있다. 이러한 상황은 RIA 플랫폼들이 기존의 데스크탑 PC 환경에 비해 모바일 환경에 적용하기에 만만치 않기 때문이다. 즉, 데스크탑 PC와 비교할 때, 모바일 플랫폼의 다양성, 빠른 플랫폼 업그레이드, 그리고 낮은 모바일 단말의 컴퓨팅 파워 등은 RIA 플랫폼 적용에 걸림돌이 되고 있다.

또한 애플이 자사의 아이폰, 아이패드에서 플래시 지원을 하지않고 HTML5을 적극적으로 수용하면서 이러한 상황은 더욱 확고해 지고 있다.

■ 스마트폰 애플리케이션은 하이브리드 형태로 진화

스 마트폰 성공의 1등 공신은 애플리케이션 개발자와 소비자를 직접 연결시켜주는 앱스토어이다. 현재 아이폰 앱스토어에 등록된 애플리케이션 개수는 2010년 10월 20일 기준으로 30만개를 넘어섰고, 안드로이드 마켓에도 애플리케이션 개수가 빠르게 증가하고 있다.

그러나 모바일 플랫폼들이 지속적으로 많아지고 모바일 애플리케이션의 경쟁이 치열해 지면서 투자대비 효율을 극대화 하기 위해 하이브리드 형태의 애플리케이션 개발이 점차 증가하고 있다. 이는 애플리케이션의 많은 부분은 표준 웹 기술을 활용하되 꼭 필요한 부분만 네이티브 기능을 활용하여 개발한다. 그리고 마지막으로 타겟 앱스토어에 맞는 패키징 후 등록을 한다. 즉, 네이트브 애플리케이션으로 보이지만 내부적으로는 표준 웹 기술을 많이 사용한다. 멀티 플랫폼 이슈 때문에 앞으로 상당기간 하이브리드 애플리케이션이 확산될 것으로 예상된다.

■ 웹 애플리케이션 스토어의 등장 및 해결이 필요한 이슈

몇 달전 아이폰을 지원하는 오픈 앱 마켓(Open App Market)이라는 웹 애플리케이션 스토어가 처음 등장을 했고, 최근 구글이 크롬 웹스토어를 공개하였다. 그리고 모질라도 웹 애플리케이션 스토어에 대한 계획이 있다고 한다. 이러한 웹 애플리케이션 스토어들은 잠재력이 있는 웹 애플리케이션을 사용자가 쉽게 찾고 이용할 수 있는 통로를 제공한다는 측면에서 의미가 크며, 향후 웹 애플리케이션 활성화에 크게 기여할 것으로 예상된다.

하지만 웹 애플리케이션 스토어가 큰 의미를 갖기 위해서는 이에 대한 표준이 필요해 보인다. 지금까지는 표준이 없다보니 오픈 앱 마켓의 경우 아이폰만을 지원하며, 크롬 웹 스토어의 경우도 현재 크롬OS와 크롬 브라우저로만 사용이 가능할 뿐 다른 웹 브라우저에서는 이를 활용할 수 없다. 이러한 문제는 스마트폰의 앱스토어에 비해 개선된 것이 없어 보인다.

상당기간 동안 네이티브, 하이브리드, 웹 애플리케이션이 공존할 것으로 예상된다. 즉, 타겟 애플리케이션의 특성이 이와 같은 세가지 방법 중 어떤 것을 활용하는 것이 좋을지 고민이 필요하다는 의미이다.

그러나 점차적으로 네이티브 애플리케이션들이 하이브리드 형태로 이동하고, 또한 네이티브나 하이브리드 애플리케이션이 점진적으로 웹 애플리케이션 형태로 이동할 것이다. 이러한 상황은 모바일 단말 뿐아니라 TV, 캠코더, 카메라, 냉장고 등 향후 거의 모든 기기들에도 적절한 애플리케이션을 제공해야 한다는 관점에서 웹 보다 더 효율적인 방법이 아직까지는 없기 때문이다. 또한 iOS 4.2의 가속센서 및 웹소켓을 위한 자바스크립트 API 지원 등 주요 브라우저 벤더의 적극적인 노력이 HTML5 기반 웹 애플리케이션의 가능성을 더욱 높이고 있다. 2011년에는 어떤 형태의 모바일 애플리케이션들이 강세를 보일지 지켜보자.

[필자소개]
현 재 ETRI 선임연구원이며, W3C HTML5 대한민국 관심그룹(W3C HTML5 Korean Interest Group) 의장, 모바일 웹 2.0 포럼 HTML5 AG(Ad-hoc Group) 의장, W3C 대한민국 사무국 코디네이터 등으로도 활동하고 있다. 트위터는 @wonsuk73을 사용하고, 미래 웹 표준 기술에 관한 이야기(http://www.wonsuk73.com/)라는 블로그를 운영중이다.

(지디넷코리아 원문링크) http://www.zdnet.co.kr/Contents/2010/12/14/zdnet20101214093848.htm

W3C HTML5 대한민국 관심그룹 킥오프 회의 진행

이원석(wonsuk73@gmail.com) — Fri, 12 Nov 2010 15:50:32 +0900

2010년 11월 11일에 W3C HTML5 대한민국 관심그룹 킥오프 회의를 SK그린빌딩에서 진행했다. HTML5 대한민국 관심그룹에 대한 좀더 자세한 내용은 예전에 블로그에 썼던 W3C HTML5 대한민국 관심그룹(HTML5 Korean Interest Group) 활동 시작!!! 글을 참조하기 바란다. 이번 회의에는 정말 특별한 회의였는데, 그 이유는 W3C의 CEO인 Jeff Jaffe가 직접 참석하였고, 또한 W3C와 최근 웹 표준 기술에 대한 소개를 했기 때문이다.

행사장 분위기

HTML5 킥오프 회의 프로그램

14:00 ~ 14:40: W3C 소개 (Jeff Jaffe, CEO of W3C)

14:40 ~ 15:10: Break:

15:10 ~ 15:50: Introduction of W3C HTML5 Korean Interest Group (이원석, W3C HTML5 대한민국 관심그룹 의장)

15:50 ~ 16:00: Break:

16:00 ~ 18:00: HTML5 Korean Interest Group 킥오프 회의

Jeff 발표 후 떠나기 전 기념샷

Jeff의 기조연설 직후 20분 정도 휴식을 하여 참석자들이 Jeff와 개인적으로 이야기할 수 있는 시간을 갖었고, 이후 필자가 Introduction of W3C HTML5 Korean Interest Group에 대하여 발표했다. 이 발표에서는 HTML5에 대한 간단한 소개, HTML5 표준화 현황 및 표준 개발 일정 그리고 마지막으로 W3C HTML5 대한민국 관심그룹의 임무, 운영기간, 활동 범위, 활동 방향 등에 대해서 소개하였다. 자세한 회의결과는 W3C 대한민국 사무국을 통해서 공개될 예정이다.

Introduction of W3C HTML5 Korean Interest Group에 대한 발표자료는 아래와 같다.

Introduction of W3C HTML5 Korean Interest Group

View more presentations from Wonsuk Lee.

HTML5 대한민국 관심그룹 차기회의 일정

일시: 2010년 12월 2일(목요일) 15:00 ~ 18:00

장소: SK그린빌딩 20층 대회의실

마지막으로 W3C HTML5 대한민국 관심그룹에는 HTML5에 관심이 있는 어떤 분이라도 가입이 가능하며, W3C HTML5 대한민국 관심그룹 활동 및 참여방법 안내에 따라 가입하면된다. 관심있는 분들의 적극적인 참여를 기대한다.

W3C HTML5 대한민국 관심그룹(HTML5 Korean Interest Group) 활동 시작!!!

이원석(wonsuk73@gmail.com) — Wed, 27 Oct 2010 13:03:25 +0900

소 개

드디어 W3C HTML5 대한민국 관심그룹이 활동을 시작한다. W3C HTML5 KIG(HTML5 Korean Interest Group)에 대해서 간단하게 소개를 하면 W3C HTML5 KIG은 W3C의 공식적인 그룹이며 W3C에서 HTML 표준 개발을 담당하고 있는 HTML WG의 하위 그룹에 속해있다. 그리고 HTML5에 관심이 있는 분이면 특별한 제약없이 참여가 가능합니다.

활동목표

대한민국에서 HTML5 표준(안) 그리고 HTML5와 밀접히 관계된 표준에 초점을 둔 논의를 활성화 하고, 이들 표준과 관련된 대한민국의 코멘트와 질문들을 모으며, 이들 표준에 정의된 기술에 대한 대한민국의 특별한 유즈케이스(Use Case)를 정리하는 것이다. 그리고 이러한 활동의 결과를 W3C의 HTML WG 및 다른 적절한 WG 그리고 W3C 회원사와 커뮤니티에 보고하는 것이다.

활동범위

HTML5 대한민국 관심그룹의 작업은 대한민국에서 HTML5 표준(안)에 대한 논의의 핵심적인 역할을 하는 것이다. 본 그룹은 대한민국의 관련 기업이나 전문가들이 HTML5 및 관련 기술과 관련된 W3C 활동 참여를 촉진시키기 위한 방법으로 대한민국 W3C 멤버들과 합의하에 제안되었다. 그리고 대한민국 W3C 멤버들은 다음과 같은 리스트의 실현에 도움을 줄 수 있는 새로운 관심그룹의 생성 제안에 동의 하였다:

HTML5에 대한 잠재적인 공헌자들이 HTML5에 관한 공개적인 논의를 영어보다는 모국어를 통해서 효과적으로 참여할 수 있도록 한다.
공헌자들이 모국어를 이용해서 기술적인 논의를 할 수 있는 환경의 제공은 잠재적 참여자들에게 같은 시간대에서 다른 공헌자들과 적시에 의사소통을 할 수 있는 최적의 기회를 제공한다.

본 그룹은 HTML5 표준(안)을 포함하여 다음과 같은 관련 표준(안)들에 대해 검토할 수 있다. 그러나 반드시 아래의 표준(안)들에 제한되는 것은 아니다:

본 그룹은 Device APIs and Policy Working Group이나 Web Performance Working Group 등 웹 API와 관련된 다른 그룹에서 개발된 표준초안에 대해서도 검토할 수 있다.

HTML5 표준(안)과 관련 표준(안) 검토와 함께 본 그룹은 이들 표준(안)에 대한 코멘트와 질문들을 받아 정리하고, 이들 표준(안)에 정의된 기술과 관련된 대한민국에서의 특별한 유즈케이스(Use Case)들에 대한 정보를 모을 수 있다. 또한 이러한 활동의 결과를 HTML WG과 Web Applications WG, Geolocation WG 그리고 Device APIs and Policy WG 등 관련된 적절한 그룹 그리고 W3C 회원사 및 공동체에 제공할 수 있다.

W3C HTML5 KIG은 대한 자세한 사항은 HTML5 대한민국 관심그룹 챠터(HTML5 Korean Interest Group Charter)를 보면 자세히 알수 있습니다.

가입방법

가입 방법은 W3C HTML5 대한민국 관심그룹 활동 및 참여방법 안내를 보고 가입하면 된다.

HTML5 KIG에 대한 개인적인 기대

향후HTML5는 현재 W3C에서 개발하고 있는 표준의 중심에 있으며 산업계의 요구도 상당하다.또한 앞으로 HTML5의 적용은 모바일 단말을 시작으로 거의 모든 Internet Connected Device로 확장 될 것으로 예상된다. 따라서 HTML5 KIG가 국내의 HTML5 관련 기술 및 표준화 동향, 현재의 이슈를 논의하는 국내의 대표적인 논의장의 역할과 국내 기업들이 원하는 표준 기능을 W3C 표준에 반영하는 창구역할을 기대한다.

관련기사

- ETRI, 국내 'W3C HTML5 그룹' 설립

- ETRI, HTML5 요구사항 반영 위한 국내 공식창구 발족

- ETRI, '국내 W3C HTML5 그룹' 설립

- ETRI, 국내 W3C HTML5 그룹 설립

- ETRI, 국내 HTML5 이해단체 개설

W3C, HTML5 표준 초안 Last Call 예정

이원석(wonsuk73@gmail.com) — Thu, 16 Sep 2010 14:40:04 +0900

지금까지 말이 많았던 HTML5 표준 개발 일정에 대한 Last Call 일정이 공개되었다. 이는 W3C에서 HTML WG의 의장들에게 좀더 빨리 HTML5 표준 개발을 진행해 줄 것을 요청함에 따라서 새로운 Last Call 일정을 준비한 것이다. 지금까지 HTML5 표준 개발 일정에 대한 불만들이 많았던 상황에서 아주 좋은 뉴스라고 생각이 된다.

간단하게 일정을 정리해보면 아래와 같다.

- 2010년 10월 1일: HTML5 표준 초안 Last Call

n HTML5 Last Call 코멘트 받기 시작

- 2011년 5월 22일: HTML5 표준 초안 Last Call 종료

n HTML5에 대한 모든 코멘트와 이슈들 정리완료

이렇게 진행된 상황을 간단히 설명하면, W3C는 HTML5 표준을 2007년부터 개발하고 있다. 다양한 회사들의 비즈니스 이슈로 지금까지 많은 논쟁이 있었으며, 따라서 HTML WG 의장들은 WG내의 표준개발을 효과적으로 하기 위해 결정정책을 만들어서 진행하고 있었다. 현재 HTML5 표준에는 200개 정도의 버그와 25 개정도의 이슈가 있는 상황이다.

이와 같은 상황에서 좀더 빠르게 HTML5을 Last Call 단계로 진행하기 위해, HTML WG 의장들은 HTML5의 초기 Last Call에 대한 일정 계획하여 진행할 계획이다. 2010년 10월부터 받는 HTML5 표준과 관련된 모든 새로운 버그들은 의장들의 허가할 수 있는 예외적인 상황으로 인정하여 Last Call 코멘트로 처리될 예정이다. 이러한 의지는 초기 Last Call로 가기 위한 것으로 최대한 빨리 이슈들을 정리하기 위한 것이다.

구체적인 Last Call 마무리 일정

2011년 5월 22까지 Last Call 단계를 마무리하는 구체적인 일정은 아래와 같다.

목표 일정	수행할 작업
2010년 10월 1일	- Cutoff for bugs to be considered as pre-LC feedback Consequence of missing this date: bugs beyond this date will be treated as Last Call comments. The Chairs could grant exceptions on a case-by-case basis, but in general there is no guarantee of a bug filed after the cutoff being settled before Last Call. Note: We're working with the editor to find ways to ensure tighter change control for the draft after the cutoff date, but we do not have anything to announce on this front yet.
2010년 12월 8일	- All bugs filed by cutoff date addressed by editor Consequences of missing this date: bugs still open past this date can be escalated to issues immediately if the originator so chooses.
2011년 1월 22일	- Cutoff for escalating bugs for pre-LC consideration - all issues in tracker, calls for proposal issued by this date Consequences of missing this date: any further escalations will be treated as a Last Call comment.
2011년 2월 23일	- Every issue has at least one Change Proposal Consequences of missing this date: issues will be closed without prejudice and marked POSTPONED; can be reconsidered during LC or for a later version of HTML.
2011년 3월 22일	- all calls for counter-proposals complete Consequences of missing this date: if any issue has only one proposal, we call for consensus on that proposal.
2011년 4월 22일	- all issues resolved; LC resolution presented to group Consequences of missing this date: this would be solely a failure by the chairs, so we would publicly eat crow and plot a new date.
2011년 5월 22일	- fixable LC objections addressed; if all goes well, LC resolution carries Consequences of missing this date: try LC resolution again.

참고자료

HTML5: Getting to Last Call

http://www.w3.org/QA/2010/09/html5_getting_to_last_call.html

Timeline to Last Call

http://lists.w3.org/Archives/Public/public-html/2010Sep/0074.html

HTML5 최고 전문가들의 주옥같은 강의

이원석(wonsuk73@gmail.com) — Tue, 07 Sep 2010 13:30:38 +0900

샌프란시스코의 자바, PHP 그리고 HTML5 사용자 그룹이 호스트하여 개최된 HTML5에 대한 행사가 2010년 5월 11일에 있었다. 이 행사에 초청된 연사들은 HTML5에 대한 최고의 전문가이기 때문에 HTML5에 대해 관심이 있는 분이라면 본 비디오들은 반드시 참고할 필요가 있다.

1. LearnAbout HTML5 and the Future of the Web (구글 Brad Neuberg)

2.Learn About HTML5 and IE9 (마이크로소프트 Giorgio Sardo)

3. Learn About HTML5 Communications APIs ( Kaazing Peter Lubbers )

HTML5를 활용하여 빠른 웹 애플리케이션 개발하기

이원석(wonsuk73@gmail.com) — Fri, 03 Sep 2010 13:15:49 +0900

본 글은 구글이 운영하고 있는 HTML5ROCKS (HTML5 개발자 사이트)에 올라온 Best Practices for a Faster Web App with HTML5를 기반으로 번역하여 정리한 것이다. 원문과 거의 비슷하지만 완전히 똑같이 번역한 것은 아니다.

원문: http://www.html5rocks.com/tutorials/speed/quick/

n 소개

HTML5의 많은 부분은 지금까지 자바스크립트 라이브러리로 처리했던 다양한 기술과 기능에 대한 네이티브 브라우저 기능을 제공하는 것이다. 이러한 기능을 사용하는 것은 처리속도를 훨씬 빠르게 만들 수 있다. 본 튜터리얼에서는 어떻게 HTML5와 CSS3를 이용하여 반응이 빠른 애플리케이션을 개발할 수 있는지에 중점을 둔다.

n 팁1: 쿠키 대신 웹 저장소를 사용하라

쿠키는 지금까지 사용자 데이터를 식별하기 위해 지금까지 사용되어 왔지만 이는 심각한 단점들을 가지고 있었다. 가장 큰 결점은 모든 쿠키 데이터가 모든 HTTP 헤더에 추가된다는 것이다. 이는 성능에 커다란 악영향을 줄 수 있으며, 특히 XHR을 사용하는 경우에는 더욱 문제가 될 수 있다. 그래서 모범사례는 쿠키 크기를 줄이는 것이다. HTML5에서는 이보다 더 효과적인 방법이 있는데, 이는 쿠키 대신 sessionStorage와 localStorage를 사용하는 것이다.

// if localStorage is present, use that

if (('localStorage' in window) && window.localStorage !== null) {

// easy object property API

localStorage.wishlist = '["Unicorn","Narwhal","Deathbear"]';

} else {

// without sessionStorage we'll have to use a far-future cookie

// with document.cookie's awkward API :(

var date = new Date();

date.setTime(date.getTime()+(365*24*60*60*1000));

var expires = date.toGMTString();

var cookiestr = 'wishlist=["Unicorn","Narwhal","Deathbear"];'+

' expires='+expires+'; path=/';

document.cookie = cookiestr;

}

n 팁2: 자바스크립트 애니메이션 대신 CSS Transitions를 사용하라

CSS Transitions는 두 상태간의 아주 매력적인 시각 효과를 준다. 대부분의 스타일 프로퍼티는 택스트 그림자(text-shadow), 위치(position), 배경 또는 색상 등에 대한 처리로 변화될 수 있다. “:hover” 또는 HTML5 폼, “:invalid”과 “:valid”와 같이 pseudo-selector states를 변화하여효과를 줄 수 있다.

div.box {

left: 40px;

-webkit-transition: all 0.3s ease-out;

-moz-transition: all 0.3s ease-out;

-o-transition: all 0.3s ease-out;

transition: all 0.3s ease-out;

}

div.box.totheleft { left: 0px; }

div.box.totheright { left: 80px; }

“totheleft”와 “totheright” 클래스 토글링(toggling)을 추가하여 box를 이동할 수 있다. 이 코드의양을 자바스크립트 애니메이션 라이브러리와 비교해 보자. 명확히 브라우저에 보내지는 바이트 수는 CSS 기반 애니메이션을 사용할 때가 훨씬 적다. 추가적으로 GPU 레벨 가속화를 이용하면 이러한 시각 효과는 아주 부드럽게 처리될 것이다.

n 팁3: 서버와 통신하는 대신 클라이언트측의 데이터베이스를 사용하라

Web SQL Database와 IndexedDB는 클라이언트 측의 데이터베이스 기능이다. XHR 또는 폼 제출(form submission)를 이용해 데이터를 서버에 포스팅하는 것이 일반적인 패턴이지만, 이러한 방식 대신 클라이언트 측의 데이터베이스를 사용할 수 있다. HTTP 요청을 줄이는 것이 모든 성능 엔지니어의 1순위 목표이다. 따라서 데이터베이스를 이용하여 서버와의 통신을 많이 줄일 수 있다. localStorage 그리고 sessionStorage는 특정 사이트의 각 단계별 입력 정보를 저장하는데 활용할 수 있으며, 이는 클라이언트 측의 데이터베이스 API 보다 훨씬 빠르다.

예를 들면, 만일 수백개의 메시지를 갖은 데이터 그리드 컴포넌트 또는 수신함이 있을 때, 로컬 데이터베이스 안에 데이터 저장을 한 것은 사용자가 검색, 필터링, 정렬 등을 원할 때HTTP로 서버와 통신하는 것을 크게 줄일 수 있다.

좀더 자세히 이해하고 싶으면 Web SQL Database Tutorial을 참고해라

n 팁4: 자바스크립트 개선은 상당한 성능 개선을 제공한다

자바스크립티 1.6에는 Array prototype에 대한 많은 메소드가 추가되었으며, 이들은 지금 IE를 제외한 대부분의 브라우저에서 사용가능하다.

// give me a new array of all values multiplied by 10

[5,6,7,8,900].map(function(value){ return value*10; }); // [50,60,70,80,9000]

// create links to specs and drop them into #links

['html5','css3','webgl'].forEach(function(value){

var linksList = document.querySelector('#links');

var newLink = value.link('http://google.com/search?btnI=1&q=' + value + ' spec');

linksList.innerHTML += newLink;

});

// Return a new array of all mathematical constants under 2

[3.14, 2.718, 1.618].filter(function(number){

return number < 2;

});

// [1.618]

// You can also use these extras on other collections like nodeLists

[].forEach.call(document.querySelectorAll('section[data-bucket]'), function(elem,i){

localStorage['bucket' + i] = elem.getAttribute('data-bucket');

})

대부분의 경우 이들 Native 메소드를 사용하는 것은 전형적인 for 루프를 사용하는 것 보다 훨씬빠르다: for ( var i = 0; len = arr.length; i < len; i++ ).

Native JSON 파싱( JSON.parse() )은 json2.js 파일을 대체한다. Native JSON은 외부의 스크립트를 사용하는 것보다 훨씬 빠르고 안전하다. 이미 IE8, 오페라 10.50, 파이어폭스 3.5, 사파리4.0.3 그리고 크롬에서 이미 제공한다.

n 팁5: 라이브 사이트에 대해서도 캐쉬 매니페스트(cache manifest)를 사용하라

2년전에 워드프레스(Wordpress는 워드프레스 터보(Wordpress Turbo)라는 기능을 추가하기 위해 구글 기어스(Google Gears)를 사용했다. 이는 속도를 높이기 위해 관리 패털의 많은 자원들을 로컬에 캐슁하였다. 우리는 이와 같은 기능을 HTML5의 애플리케이션 캐쉬(applicationCache)와 cache.manifest로 실현할 수 있다.

애플리케이션 캐쉬는 Expires 헤더를 설정하여 사용하는 것보다 좀더 많은 장점이 있다. 그리고 이러한 방법은 캐슁할 파일을 명확히 정리하여 사용할 수 있고, 따라서 브라우저가 특정자원이 사용되기 전에 미리 캐슁할 수 있기 때문에 실행 속도를 최적화 시킬 수 있다.

사이트의 구조를 탬플릿으로 생각해 보자. 이는 HTML의 구조는 그대로 유지하고 변경 가능한 데이터를 포함한다. 애플리케이션 캐쉬를 이용해서 사이트를 구성하는 HTML 템플릿들을 처리하고, cache.manifest를 통해서 마크업을 캐슁한 후 컨텐츠의 업데이트는 JSON을 받아서 처리한다. 이와 같은 모델은 아이폰이나 안드로이드 Native 뉴스 앱이 하는 것과 아주 유사하다.

이에 대한 가이드는 application cache tutorial을 참조해라.

n 팁6: 비주얼 처리를 개선하기 위해서 하드웨어 가속기능을 켜라

가장 앞서고 있는 브라우저에서 많은 시각적 처리는 GPU-레벨 가속기능을 최대한 활동할 수 있다. GPU-레벨 가속기능은 고도의 동적 처리를 자연스럽게 처리하는데, 이는 Firefox Minefield와 IE9 그리고 사파리5에서 지원한다. 크롬은 현재 3D 변환 기능과 하드웨어 가속 기능을 윈도우 버전에서만 지원하며, 조만간 다른 플랫폼에서도 지원할 예정이다.

GPU 가속기능은 단지 아주 제한된 조건하에서만 동작한다. 그러나 3D 변환과 애니메이션 투명도는 이러한 기능을 기동시키기 위한 가장 일반적인 방법이다. 조심스럽게 이러한 기능을 켜는 방법은 아래와 같다.

.hwaccel { -webkit-transform: translateZ(0); }

그렇지만, 보장할 수는 없다. :)

지원되는 하드웨어 가속기능으로 애니메이션 변환(animated translation), 회전(rotation), 크기조정(scaling), 투명도는 확실히 부드럽게 표현될 것이다. 이들 효과는 층별 컨텐츠를 다시 그릴 필요없이 GPU로 직접 처리되는 장점을 가질 것이다. 그러나 페이지의 레이아웃에 영향을 주는 모든 프로퍼티들은 아직은 상대적으로 느리게 보일 것이다.

n 팁7: CPU에 부담을 많이 주는 오퍼레이션에 대해서는 웹 워커를 사용하라

웹워커는 두가지 중요한 장점을 갖는다. 1) 속도가 빨라진다. 2) 태스크들을 수행하는 동안에도 브라우저는 반응할 수 있는 상황을 유지한다. 워커에 대한 데모는 HTML5 Slide Deck을 참고해라

웹워커를 사용하기에 적합한 몇몇 상황들은 아래와 같다.

- 긴 문서의 테스트 포맷팅(Text formatting of a long document)

- 문법 강조(Syntax highlighting)

- 이미지 처리(Image processing)

- 이미지 합성(Image synthesis)

- 대량의 배열 처리(Processing large arrays)

n 팁8: HTML5 폼 애트리뷰트와 Input 타입

HTML5에는 search, tel, url, email, datetime, date, month, week, time, datetime-local, number, range, color 등 새로운 input type들을 추가됐다. 현재까지는 이들 기능지원에 대한 브라우저간의 편차가 크며, 단지 오페라만 대부분 기능을 지원하고 있다. 따라서 이러한 기능을 사용할 때 접속하는 브라우저의 지원여부를 확인해서 절절한 처리를 해주어야 한다.

추가적으로 HTML5에 폼과 관련하여 입력 폼의 기본값을 사용자에게 흐릿하게 보여주는placeholder와 페이지를 로딩한 후 입력박스에 자동으로 커서를 위치시키는 autofocus 애트리뷰트가 추가되었다. 또한 사용자 입력 값의 검증 기능과 관련해서 사용자가 입력을 했는지를 검증해 주는 required 애트리뷰트 그리고 입력 값 검증을 위한 패턴을 표현하는 pattern 애트리뷰트가 추가되었다. Pattern 애트리뷰트에 자바스크립트 정규식으로 패턴을 정의하면 브라우저가 사용자가 입력한 값이 정의된 패턴에 맞는지 검증을 자동으로 해준다. 예를들어 이메일 주소 같은 것을 이러한 pattern 애트리뷰트를 이용해서 쉽게 검증할 수 있다. 이러한 기능을 사용하면 자바스크립트로 코드를 상당히 줄일 수 있으며 브라우저 내장된 기능으로 처리하기 때문에 속도가 빠르다.

이와 관련된 데모는 HTML5 Slide deck을 참고해라.

n 팁9: 이미지 효과를 표현할 때 CSS3 effects를 최대한 활용해라

CSS3는 지금까지 정밀한 시각적 디자인 표현을 위해 사용하던 이미지 처리들을 대체할 수 있는다양한 종류의 기능을 제공한다. 2K 크기의 이미지를 100 Byte의 CSS로 대체하는 것은 큰 장점이다. 물론 추가적인 HTTP 요청이 필요없는 장점도 생긴다. 활용하기 좋은 CSS의 몇가지 주요 효과들은 아래와 같다.

l Linear and radial gradients

l Border-radius for rounded corners

l Box-shadow for drop shadows and glow

l RGBA for alpha opacity

l Transforms for rotation

l CSS masks

예를들어 gradients를 이용해서 아주 우아한 버튼을 만들 수 있으며 이미지로 처리하던 다양한 효과들을 대체할 수 있다. 이와 같은 기능들은 대부분의 브라우저들이 안정적으로 지원하고 있다. 또한 이런 기능을 지원하는 않는 브라우저에 대한 처리는 Modernizr와 같은 라이브러리를 이용하여 체크하고 대응되는 이미지를 준비하여 처리하면 된다.

n 팁10: XHR보다 적은 밴드위스로 빠르게 전달할 수 있는 웹소켓

웹소켓은 Comet의 인기가 급증하는 것에 대응해서 설계되었다. 지금은 XHR 모델 기반의Comet 대신에 웹소켓을 사용하는 것이 좋다.

웹소켓은 간결한 프레임을 사용하기 때문에 XHR 보다 훨씬 적은 bandwidth를 소비한다. 몇몇 리포트에 따르면 유선 환경에서 35% 정도의 바이트가 줄어든다고 한다. 추가적으로 메시지를 전송할 때 큰 크기를 대상으로 하면 성능의 차이가 훨씬더 명확해진다. 시험에서 XHR이 웹소켓보다 3500% 정도의 전송 시간이 더 필요한 것으로 평가되었다. 최근에 에릭슨 실험실은 웹소켓의 시험을 통해 HTTP 기반의 ping 시간이 웹소켓에 비해 3배 ~ 5배 정도 길다는 것을 확인했다. 따라서 에릭슨에서는 웹소켓이 실시간 애플리케이션에 확실히 더 적절하다는 것으로 결론을 내렸다.

n 추가적인 자원들

성능측정을 위해 파이어폭스의 Page Speed 플러그인, 그리고 YSlow를 사용할 수 있다. 추가적으로 Speed Tracker for Chrome과 DynaTrace Ajax for IE는 좀더 세부적인 분석 정보를 제공한다.

Chrome의 Developer Tools에 대한 가이드는 Resource Tab과 조만간 출시될 새로운 Audits panel을 통해 제공할 것이다.

HTML5 and the Future of the Mobile Web (발표자료 공유)

이원석(wonsuk73@gmail.com) — Tue, 31 Aug 2010 18:37:10 +0900

조금전 2010 모바일 콘텐츠 컨퍼런스에서 발표했던 자료이다. 이 자료를 준비하면서 모건스텐리의 인터넷 트랜드 리포트를 찹조했는데 모바일 시대가 빠르게 오고 있음을 다시금 느낄 수 있었다. 그리고 웹킷으로 정리가 되고 있는 모바일 웹 플랫폼 환경에서 HTML5 기반 웹 애플리케이션의 가능성은 충분하다는 생각이 들었다.

HTML5 and the Future of the Mobile Web

View more presentations from wonsuk73.

[지디넷칼럼] 다가오는 HTML5의 첫번째 무대, 모바일 웹

이원석(wonsuk73@gmail.com) — Mon, 09 Aug 2010 11:47:59 +0900

올해 초 세계적인 IT 기업 애플과 구글이 적극적으로 HTML5에 대한 지원의지를 밝히면서 HTML5는 세계 IT산업의 가장 중요한 키워드가 되고 있다. 또한 애플, 구글, MS, 모질라, 오페라와 같은 주요 웹 브라우저 업체들간의 브라우저 기술개발 경쟁이 치열해 지면서, HTML5 기술을 포함한 전체적인 웹 플랫폼 기술은 하루가 다르게 빠르게 발전하고 있다.

반면에 IT업체들이나 웹 개발자들은 새로운 서비스의 기획이나 개발에 있어 혼돈스러워하고 있다. 가장 주요한 이유를 보면, 첫째는 HTML5 표준 개발을 주도하고 있는 W3C에서 HTML5 표준에 대한 로드맵을 보여주지 못하고 있다는 것이다. 둘째는 현재 애플 사파리, 구글 크롬, 파이어폭스, 오페라 등 주요 브라우저들이 HTML5의 많은 기능을 지원하고 있으나 이들 브라우저가 지원하는 HTML5 기능이 다르다는 것이다.

또한 같은 브라우저의 경우도 버전에 따라서 지원하는 기능이 상당히 차이가 난다. 이외에도 국내의 경우 95%이상을 점유하고 있는 MS의 IE6, 7, 8이 HTML5를 거의 지원하지 못한다는 것이다. 그야말로 혼돈의 시대이다.

그럼 모바일 환경은 어떠한가? 현재까지 진행되는 상황을 보면 PC보다 모바일 환경이 HTML5 기반의 서비스 적용에 적합한 환경으로 변화하고 있으며, 바로 지금이 HTML5 기반의 모바일 서비스를 준비해야할 시기라고 생각한다.

■ 증대되는 모바일 웹의 중요성

작년 말에 발표된 모건스탠리의 보고서에 따르면 향후 5년 내로 모바일을 통해 웹에 접속하는 사람들이 데스크톱 PC로 접속하는 사람보다 많아질 전망이라고 한다. 예전에는 주로 PC나 노트북을 이용해 웹의 다양한 서비스를 이용했지만, 스마트폰이 활성화 되면서 스마트폰을 이용한 인터넷 사용시간이 크게 증가하고 있다.

또한 아이패드 같은 테블릿 제품이 성공적으로 출시되면서 가까운 미래에는 스마트폰, 테블릿, e북리더기 등 다양한 모바일 디바이스를 활용한 인터넷 사용이 더욱 증가할 것으로 예상된다.

■ 모바일 웹에서 HTML5 활용의 의미

웹에서 어떠한 기능을 구현하는가에 따라 다르겠지만 새로운 시맨틱 마크업을 추가한 HTML5를사용하면 같은 기능을 구현할 때 HTML4에 비해서 훨씬 적은 자바스크립트 코드로 구현이 가능하다. 따라서 기본적으로 웹 서비스 로딩속도가 빨라지며 이러한 특성은 특히 네트워크 속도에 예민한 모바일 환경에서 더욱 큰 의미를 갖는다.

또한 경우에 따라 다르겠지만 많은 기능이 HTML5 표준에 포함되어 브라우저의 기본기능으로 제공되면서 HTML5 기반의 서비스 실행속도가 15%정도는 향상되는 것으로 알려져 있다. 추가적으로 HTML5가 오프라인 웹 애플리케이션, Geolocation, 웹펌, 웹소켓, 웹 저장소 등 모바일 환경에 반드시 필요한 기능을 지원함으로써 모바일 환경에서 훨씬 향상된 웹 서비스와 애플리케이션을 개발할 수 있게 되었다.

■ 모바일 웹 브라우저 = 웹킷 = HTML5 ?

스마트폰의 시대가 되면서 모바일 웹 브라우저는 웹킷 플랫폼을 기반으로 개발하는 것이 대세가 되고 있다. 웹킷은 애플에서 시작한 브라우저 랜더링 엔진에 대한 오픈소스 프로젝트로 애플, 구글, 노키아 등 세계적인 IT 업체들의 적극적인 참여로 세계에서 가장 빠르게 발전하는 웹 플랫폼이 되었다.

현재 웹킷을 사용하고 있는 주요 모바일 플랫폼은 애플의 아이폰/아이패드용 iOS, 구글의 안드로이드, 노키아 S60 플랫폼 등이 있었고, 조만간 출시될 RIM(Research In Motion)의 블랙배리 6 OS도 웹킷 기반의 브라우저를 탑재한 것으로 알려졌다.

웹킷은 HTML5를 가장 잘 지원하는 웹 플랫폼이다. 따라서 웹킷 기반 모바일 브라우저가 크게 확산이 되면, 자연스럽게 모바일 환경은 HTML5를 지원하는 환경이 된다는 측면에서 상당히 중요한 의미를 갖는다.

■ HTML5, 모바일부터 준비가 필요한 시기

지난달 초 야후는 스마트폰을 위한 HTML5 기반 메일 서비스를 시작했는데, 이 서비스는 속도 개선은 물론 오프라인에서 메일 검색 기능지원, 화려한 사용자 인터페이스 등 기존의 웹 메일 서비스 보다 한층 개선된 기능을 제공한다.

또한 구글은 HTML5기반 유튜브 모바일 서비스를 개시하였는데, 이는 로딩 속도 개선, 화려한 사용자 인터페이스 그리고 네이티브 애플리케이션과 비교해도 손색 없는 비디오 품질을 제공한다.

이외에도 AOL의 모바일 사이트, 체크-인(Check-in) 모바일 서비스 등 다양한 서비스들이 HTML5 기반 서비스를 시작하였으며, 앞으로도 HTML5 기반 모바일 서비스는 점차 확대될 것으로 예상된다.

그럼 우리는 앞으로 어떤 준비가 필요할까? 불행히도 기업이든 개인이든 어떤 새로운 변화를 짧은 시간에 적응하는 것은 어렵다. 변화에 대한 올바른 이해과정인 시행착오의 시간이 필요하기 때문이다. HTML5가 가져오는 변화는 이미 우리 앞에 있으며 이를 피할 수 있는 방법은 없어 보인다. 따라서 지금부터 HTML5가 몰고 올 변화에 대한 적응을 시작할 필요가 있다. 그리고 HTML5 활용의 첫번째 무대는 모바일 환경임을 기억하자.

[필자소개]
현재 ETRI 선임연구원이며, W3C 대한민국 사무국 코디네이터, 모바일 웹 2.0 포럼 HTML5 AG(Ad-hoc Group) 의장 등으로도 활동하고 있다. 트위터는 @wonsuk73을 사용하고, 미래 웹 표준 기술에 관한 이야기(http://www.wonsuk73.com/)라는 블로그를 운영중이다.

(지디넷코리아 원문링크) http://www.zdnet.co.kr/Contents/2010/08/09/zdnet20100809103857.htm

HTML5, Device API 표준화 현황

이원석(wonsuk73@gmail.com) — Wed, 21 Jul 2010 17:21:50 +0900

지난 글 "HTML5 표준 범위와 W3C HTML WG 표준화 현황"에서 HTML5의 표준 범위에 대해서설명 하면서 Device API에 대한 중요성을 설명하였는데, 지난 7월 14일~16일까지 런던에서 W3C DAP(Device APIs and Policy) WG 회의가 있었다. 필자도 DAP WG에서 에디터를 맡고 있어 회의에 참석하였으며 이에 대한 주요한 내용을 정리해 본다.

기존 웹 애플리케이션의 한계: 음성인식 검색, 비디오 캡쳐 등 구현 불가

현재 다음과 구글이 제공하는 Native 스마트폰 애플리케이션은 음성인식 기반 인터넷 검색 기능을 제공하고 있으며, 구글의 스마트TV에서도 음성인식 기반의 콘텐츠 검색을 지원할 예정이다. 또한 스마트폰에서 카메라 애플리케이션이나 음악을 녹음해서 이를 기반으로 해당 노래에 대한 정보를 찾아주는 애플리케이션 등은 상당히 유용하고 인기있는 애플리케이션이다. 그러나 지금까지 표준기반의 웹 애플리케이션으로는 이러한 기능 개발이 불가능했다. 기본적으로 마이크나 비디오 카메라를 제어하기 위한 표준화된 자바스크립트 API가 존재하지 않았으며, 또한 HTML에서 이러한 디바이스들 연결하여 사용할 수 있도록 해주는 마크업이 존재하지 않았기 때문이다.

Device API 개념 소개

Device API 표준은 웹 애플리케이션이 디바이스의 자원들 (GPS, 센서, 주소록, 일정, 카메라 제어, 배터리 정보, 갤러리, 파일 시스템 등)을 접근 가능하게 하는 API 표준으로, 이러한 표준을 이용하면 웹 애플리케이션이 사진이나 동영상 캡처 등의 기능을 자연스럽게 지원할 수 있다. 아래의 그림은 Device API의 개념을 보여준다.

먼저 현재 DAP WG에서 적극적으로 개발 중인 API 표준은 아래와 같이 정리해 볼 수 있으며, 이러한 표준 이외에도 보안과 Privacy에 대한 표준 개발을 진행하고 있다.

API 이름	설 명	개발주체
Calendar	디바이스의 일정 정보에 접근하기 위한 API	프랑스 텔레콤, RIM
Contact	디바이스의 주소록 정보에 접근하기 위한API	프랑스 텔레콤
Media Capture	디바이스 내 오디오, 이미지, 비디오 기능에 접근하기 위한 API	인텔, 노키아, 도이치 텔레콤
Messaging	디바이스의 SMS, MMS, email 기능에 접근하기 위한 API	텔레포니카, 오페라, 에릭슨
System Information	디바이스의 기본적인 속성에 대한 API(배터리 용량, 네트워크 대역폭, CPU부하, 저장 용량, 입/출력 기기)	인텔, 오페라
Gallery	디바이스 내에 있는 미디어 갤러리(media gallery)에 접근하는 API.	ETRI
Powerbox	사용자 개인 리소스를 브라우저에서 요청하기 위한 웹 기반 전달 방식	구글
Application Launcher	디바이스에 인스톨된 어플리케이션(Native Application)에 접근하기 위한 API	ETRI

W3C DAP WG의 Device API 표준 개발 전략

DAP WG에서 지금까지 Device API에 대한 보안 및 Privacy 이슈가 아직 견고하게 정리가 되지 않은 상황이기 때문에 현재 개발하고 있는 표준 API들을 Read 기능과 Write 기능을 분리하여 별도의 표준으로 개발하기로 하였다. 이렇게한 이유는 표준 개발이 가능한 기능은 최대한 빠르게 시장에 제공하기 위함이다. 따라서 Device API에 포함된 표준들은 보안 및 Privacy 이슈가 상대적으로 적은 Read 기능에 대한 표준들이 빠르게 표준화가 이루어질 것이며, 그후 Write 기능에 대한 표준들이 개발될 예정이다.

Device API 표준과 HTML5 마크업 관계 정립

DAP WG에서 Device API 표준과 HTML5의 마크업 간의 조화를 이루기 위한 노력을 진행하고 있다. 이는 웹 애플리케이션이 보다 자유롭고 쉽게 디바이스의 자원들을 처리할 수 있는 방법들을 제공한다는 의미에서 상당히 중요한 이슈이다. 예로 이번 회의에서 초안이 정리된 HTML Media Capture 표준을 볼 수 있다. 본 표준은 Media Capture API와 별개로 HTML 마크업을 이용해서 디바이스의 자원과 연동하기 위한 기능을 정의하고 있다. HTML Media Capture 표준에 대해 이번회의에서 정리된 주요 내용은 아래와 같다. HTML의 <input>에 accept 애트리뷰트를 이용하여 어떤 Device에서 어떤 타입의 미디어를 받아들일지 정의하는 것이다. 즉, 카메라를 이용해서 image를 입력으로 받겠다고 정의를 한 것다.

* Note: capture의 값으로 camera, camcorder, microphone, filesystem이 올 수 있음.

아래의 예는 HTML Media Capture 표준을 이용해서 구현할 수 있는 Media Caputure File Picker에 대한 랜더링 예를 보여준다. 트위터 같은 애플리케이션을 보면 트위팅을 할 때 사진을 같이 올릴 수 있으며, 사진을 선택할 때 기존에 찍어둔 사진을 선택하여 활용할 수도 있고 바로 카메라 기능을 이용해서 직접 사진을 찍어서 사용할 수도 있다. 아래의 왼쪽 그림은 기존에 찍어둔 화일을 선택하는 모드를 보여주며, 오른쪽 그림은 직접 사진을 찍기위한 카메라 모드를 보여준다. 이런한 기능이 HTML Media Capture을 이용해서 웹 애플리케이션에서 가능해지는 것이다.

또한 Contacts API의 경우도 HTML5의 <input>이나 <device>과 어떤 형태로 조화롭게 활용할 수 있을지에 대해 고민하고 있다. 현재까지는 HTML5에 새롭게 추가된 <device> 보다는 <input>을 활용하는 것이 안정적이라는 의견이 많은 사황이다. 그리고 앞으로 센서, 메시징, 갤러리 등 다양한 디바이스의 자원들을 마크업으로도 연동하여 웹 애플리케이션으로 표현할 수 있을 것으로 예상된다.

Device API 관련 W3C WG의 역할 분담

사실 W3C에서 API에 대한 표준은 주로 Web Applications WG에서 개발하는 것으로 되어 있었으나 개발해야할 스펙이 많아 디바이스의 자원을 접근하는 API 개발은 DAP WG을 새롭게 만들어 진행하게 되었다. 그러나 Device API와 관련된 표준들도 여러 상황에 따라서 다른 WG에서 개발하기로 하거나 기존의 기술에 의해서 표준 개발의 필요성이 없어진 표준이 있다. 이러한 내용을 아래와 같이 정리할 수 있다.

- Web Applications WG로 이관: 화일 쓰기(File Writing)와 화일시스템 (Filesystems) 표준 개발

- Geolocation WG: Orientation / Acceleration 표준 개발

- Web Notification Working Group: Notification 표준 개발

- Application configuration 표준: localStorage와 Widget interface APIs로 대체

앞으로의 전망

앞으로는 HTML Media Capture 표준을 이용해서 웹 애플리케이션에서 음성인식 기능, 카메라 애플리케이션 구현이 가능할 것으로 생각되며, 향후 더 다양한 Device API 들이 제공되면 앞으로 정말 Native 애플리케이션과 같은 애플리케이션 개발이 가능할 것으로 기대한다. 이러한 의미에서 웹 플랫폼은 멀티플랫폼/멀티디바이스를 지원하는 가장 경쟁력있는 플랫폼으로 진화하고 있는 것이다.