미래 웹 기술에 관한 이야기

2012년 HTML5 총정리 ;)

이원석(wonsuk73@gmail.com) — Thu, 06 Dec 2012 00:20:04 +0900

오늘 2012년 마지막 W3C HTML5 KIG 회의에서 발표한 "2012년 HTML5 총정리" 자료를 공유합니다. 사실 2012년에 HTML5와 관련 무수한 많은 이슈들이 있었고, 모든 것을 정리할 수는 없지만 HTML5weekly에서 정리한 내용을 기반으로 올 한해를 정리해 보았습니다^^

Industry trend of HTML5 in 2012 (2012년 HTML5 총정리) from Wonsuk

참고로 W3C HTML5 KIG에 참여를 원하시면 W3C HTML5 대한민국 관심그룹 활동 및 참여방법 안내를 참고하세요!! 2013년에도 W3C HTML5 KIG에서 HTML5 표준 동향 및 이슈, 브라우저 기술 동향, Web Application Best Practice에 대한 논의를 지속적으로 진행할 예정입니다. 참고로 현재 본 그룹의 가입자는 대략 600명 정도가 됩니다.

'HTML5 표준 기술' 카테고리의 다른 글

2012년 HTML5 총정리 ;) (0)	00:20:04
W3C, 개정된 HTML5 표준화 일정 공개 (HTML5 및 HTML5.1) (6)	2012/10/05
2011년, W3C HTML5 표준화 동향 및 전망 (6)	2011/01/08
W3C HTML5 대한민국 관심그룹 킥오프 회의 진행 (4)	2010/11/12
W3C HTML5 대한민국 관심그룹(HTML5 Korean Interest Group) 활동 시작!!! (23)	2010/10/27
W3C, HTML5 표준 초안 Last Call 예정 (10)	2010/09/16

W3C, 개정된 HTML5 표준화 일정 공개 (HTML5 및 HTML5.1)

이원석(wonsuk73@gmail.com) — Fri, 05 Oct 2012 23:57:49 +0900

제가 거의 2년만에 다시 블로그를 써 봅니다!^^

최근에 W3C에서 HTML5 표준에 대한 좀더 명확한 일정을 공개했다. 재밌는 것은 이번에 개정된 일정을 보면 HTML5와 HTML5.1에 대한 일정을 같이 공개했다는 것이다. 도대체 왜 HTML5.1에 대한 일정까지 공개하게 된 것인지 정리해 보았다!

* 위 그림은 [2]에서 참고하였습니다.

반드시 HTML5 표준화는 2014년까지

업계에서 HTML5에 대한 관심을 정말 대단하다. 최근에는 Intel, Qualcomm 등 반도체 업체들까지 HTML5의 중요성을 강조하고 있기 때문이다. 이렇게 HTML5에 대한 관심이 커지면서 W3C도 최대한 빨리 표준개발을 진행하기 위해 최선을 다하고 있다. 하지만 W3C는 HTML5는 HTML4에 비해서 워낙 변화의 폭이 크고 지속적으로 이슈가 발생하면서 2014년에도 표준을 마무리할 수 있을지 의문이 있었다. 이에 따라서 W3C CEO는 HTML5 핵심부분을 책임지고 있는 HTML WG과 관련 WG의 의장들에게 2014년까지 HTML5의 표준 개발을 가능하게 할 수 있는 방법을 찾고, 정리해 줄 것을 요청하여 아래와 같은 내용으로 향후계획을 발표했다.

참고로, W3C에 오랜기간 참여하고 있는 사람으로써 이번 정리는 반드시 필요한 내용이라고 생각하고 있다.

HTML5의 2014년 완료를 위해 정리한 핵심적인 내용은 아래와 같다.

- 2012년 4Q까지 HTML5 최종표준 완료 및 2016년 4Q까지 HTML5.1 최종표준 완료에 맞춰 Charter 개정

- HTML5 표준안이 CR(Candidate Recommendaton)에서 PR(Proposed Recommendation)으로 넘어가는 조건을 기 브라우저간 상호운용성이 증명된 기능이 아닌 꼭 상호운용성 Testing이 필요한 기능에 대해 진행

- 표준안의 크기와 복잡도를 감안하여 모듈화 방식 활용

간단히 설명하면 현재 HTML5 내용 중 이미 안정화된 내용을 기반으로 HTML5 표준은 개발 예정이며, 단기간에 정리하기 힘든 이슈들은 HTML5.1 또는 HTML5.2 등을 통해 단계적으로 표준화를 하겠다는 계획이다. 이를 위해 현재 명확히 정리되지 않은 이슈들은 Extension specification 형태로 개발하고 안정화가 되면 시점에 따라 HTML5 또는 HTML5.X 표준안에 포함시킨다.

현재 발표된 HTML5 및 HTML5.1에 대한 구체적인 표준화 일정은 아래와 같다.

수정된 HTML 5.0 개발 일정

1) CR(Candidate Recommendation): 2012년 4분기

2) LCf: 2014년 3분기

3) PR(Proposed Recommendation): 2014년 4분기

4) Rec(Recommendation): 2014년 4분기

HTML5.1 개발 일정

1) FPWD(First Publication Working DrafT): 2012년 4분기

2) LC(Working Draft Last Call): 2014년 3분기

3) CR(Candidate Recommendation): 2015년 1분기

4) Rec(Recommendation): 2016년 4분기

HTML5는 워낙 덩치가 큰 내용이며 다양한 회사들이 모여서 표준을 만들기 때문에 표준 개발에는 정말 많은 노력과 시간이 필요하지만, Web을 사랑하는 사람으로써 HTML5가 2014년까지는 반드시 한번 정리되기를 기대해 본다!

참고문헌

[1] http://dev.w3.org/html5/decision-policy/html5-2014-plan.html

[2] http://www.bybe.net/blog/w3c-plans-to-finish-html5-and-html-51-2014/2016.html

'HTML5 표준 기술' 카테고리의 다른 글

2012년 HTML5 총정리 ;) (0)	00:20:04
W3C, 개정된 HTML5 표준화 일정 공개 (HTML5 및 HTML5.1) (6)	2012/10/05
2011년, W3C HTML5 표준화 동향 및 전망 (6)	2011/01/08
W3C HTML5 대한민국 관심그룹 킥오프 회의 진행 (4)	2010/11/12
W3C HTML5 대한민국 관심그룹(HTML5 Korean Interest Group) 활동 시작!!! (23)	2010/10/27
W3C, HTML5 표준 초안 Last Call 예정 (10)	2010/09/16

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 표준 기술' 카테고리의 다른 글

2012년 HTML5 총정리 ;) (0)	00:20:04
W3C, 개정된 HTML5 표준화 일정 공개 (HTML5 및 HTML5.1) (6)	2012/10/05
2011년, W3C HTML5 표준화 동향 및 전망 (6)	2011/01/08
W3C HTML5 대한민국 관심그룹 킥오프 회의 진행 (4)	2010/11/12
W3C HTML5 대한민국 관심그룹(HTML5 Korean Interest Group) 활동 시작!!! (23)	2010/10/27
W3C, HTML5 표준 초안 Last Call 예정 (10)	2010/09/16

[지디넷칼럼] 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

'ZDNET 컬럼 기고글' 카테고리의 다른 글

[지디넷칼럼] HTML5 웹앱의 가능성에 주목하라 (0)	2010/12/14
[지디넷칼럼] 다가오는 HTML5의 첫번째 무대, 모바일 웹 (2)	2010/08/09
[지디넷칼럼] 웹3.0 시대, 웹표준의 전략적 가치 (0)	2010/06/18

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 대한민국 관심그룹 활동 및 참여방법 안내에 따라 가입하면된다. 관심있는 분들의 적극적인 참여를 기대한다.

'HTML5 표준 기술' 카테고리의 다른 글

W3C, 개정된 HTML5 표준화 일정 공개 (HTML5 및 HTML5.1) (6)	2012/10/05
2011년, W3C HTML5 표준화 동향 및 전망 (6)	2011/01/08
W3C HTML5 대한민국 관심그룹 킥오프 회의 진행 (4)	2010/11/12
W3C HTML5 대한민국 관심그룹(HTML5 Korean Interest Group) 활동 시작!!! (23)	2010/10/27
W3C, HTML5 표준 초안 Last Call 예정 (10)	2010/09/16
HTML5 최고 전문가들의 주옥같은 강의 (10)	2010/09/07

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 이해단체 개설

'HTML5 표준 기술' 카테고리의 다른 글

2011년, W3C HTML5 표준화 동향 및 전망 (6)	2011/01/08
W3C HTML5 대한민국 관심그룹 킥오프 회의 진행 (4)	2010/11/12
W3C HTML5 대한민국 관심그룹(HTML5 Korean Interest Group) 활동 시작!!! (23)	2010/10/27
W3C, HTML5 표준 초안 Last Call 예정 (10)	2010/09/16
HTML5 최고 전문가들의 주옥같은 강의 (10)	2010/09/07
HTML5를 활용하여 빠른 웹 애플리케이션 개발하기 (44)	2010/09/03

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 표준 기술' 카테고리의 다른 글

W3C HTML5 대한민국 관심그룹 킥오프 회의 진행 (4)	2010/11/12
W3C HTML5 대한민국 관심그룹(HTML5 Korean Interest Group) 활동 시작!!! (23)	2010/10/27
W3C, HTML5 표준 초안 Last Call 예정 (10)	2010/09/16
HTML5 최고 전문가들의 주옥같은 강의 (10)	2010/09/07
HTML5를 활용하여 빠른 웹 애플리케이션 개발하기 (44)	2010/09/03
HTML5 and the Future of the Mobile Web (발표자료 공유) (9)	2010/08/31

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 표준 기술' 카테고리의 다른 글

W3C HTML5 대한민국 관심그룹(HTML5 Korean Interest Group) 활동 시작!!! (23)	2010/10/27
W3C, HTML5 표준 초안 Last Call 예정 (10)	2010/09/16
HTML5 최고 전문가들의 주옥같은 강의 (10)	2010/09/07
HTML5를 활용하여 빠른 웹 애플리케이션 개발하기 (44)	2010/09/03
HTML5 and the Future of the Mobile Web (발표자료 공유) (9)	2010/08/31
HTML5, Device API 표준화 현황 (14)	2010/07/21

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 표준 기술' 카테고리의 다른 글

W3C, HTML5 표준 초안 Last Call 예정 (10)	2010/09/16
HTML5 최고 전문가들의 주옥같은 강의 (10)	2010/09/07
HTML5를 활용하여 빠른 웹 애플리케이션 개발하기 (44)	2010/09/03
HTML5 and the Future of the Mobile Web (발표자료 공유) (9)	2010/08/31
HTML5, Device API 표준화 현황 (14)	2010/07/21
HTML5, 구글코리아 Tech Talk 발표자료 (12)	2010/07/08

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 표준 기술' 카테고리의 다른 글

HTML5 최고 전문가들의 주옥같은 강의 (10)	2010/09/07
HTML5를 활용하여 빠른 웹 애플리케이션 개발하기 (44)	2010/09/03
HTML5 and the Future of the Mobile Web (발표자료 공유) (9)	2010/08/31
HTML5, Device API 표준화 현황 (14)	2010/07/21
HTML5, 구글코리아 Tech Talk 발표자료 (12)	2010/07/08
HTML5 표준 범위와 W3C HTML WG 표준화 현황 (0)	2010/06/23