[웹 표준] 2. HTML5의 사례

 

 [웹 표준] 1. N-Screen과 HTML5에서는 웹 표준에 따른 HTML5의 등장 배경과 필요성을 간략히 소개했었습니다. 그렇다면 HTML5가 사용되는 사례는 무엇이 있을까요? 대표적인 예로 Google의 Gmail, Google Docs등은 HTML5로 제공되어 실시간 데이터 저장과 공유, 다양한 브라우저에서의 접근성 등으로 이미 널리 사용되고 있고 모바일 기기의 보급으로 HTML5를 이용한 수 많은 모바일 웹/앱이 등장하고 있습니다. 이번 포스팅에서는 이러한 HTML5한 기술을 사용한, 그 중에서도 그래픽 요소들이 강조된 사례들을 몇 가지 소개하도록 하겠습니다.


1. TRON : Legacy (http://disneydigitalbooks.go.com/tron)

디즈니사와 IE9가 합작하여 HTML5로 구현한 Tron의 웹툰 사이트 입니다. Canvas, Audio 태그 등을 사용하여 기존의 전통적인 만화를 인터렉티브하게 표현했습니다. 마우스나 화살표를 이용하여 드래그하면서 카툰을 볼 수 있습니다.

2. Google Body Browser (bodybrowser.googlelabs.com)

HTML5가 사용되는 가장 많은 사례를 보유하고 있는 Google에서 교육용으로 내놓은 Body Browser입니다. 3D 그래픽을 위한 WebGL을 이용하여 인체의 신비를 간단한 조작법으로 다채롭게 볼 수 있도록 제작되었습니다. WebGL은 새로운 표준으로 현재는 크롬이나 사파리, 파이어폭스에서만 지원하고 있습니다. 버튼이나 마우스를 이용하여 상하좌우 조절 / 확대 축소은 물론이고 좌측의 슬라이더를 움직이면 뼈, 근육, 장기 등 인체를 단계별로 자세히 관찰할 수 있습니다. 장기나 뼈를 선택하면 명칭도 알려주고 심지어 혈관도 종류별로 선택이 가능합니다. 단순히 신기하기만 한 것이 아니라 교육용으로 굉장히 유용하게 이용될 수 있을것 같습니다.

3. CubeOut (http://alteredqualia.com/cubeout/)

브라우저에서 실행하는 3차원 3D 테트리스 게임입니다. 별도의 프로그램 설치 없이 바로 시작할 수 있습니다.

4. Quake 2 (http://code.google.com/p/quake2-gwt-port)

위의 테트리스가 비교적 단순한 게임이었다면 Quake2는 한차원 더 높은 게임 구현 모습을 보여줍니다. 이 역시 WebGL을 사용하여 3D 기술을 보여주고 있습니다. 위의 영상은 게임 데모 영상으로 현재 직접 플레이가 가능한 것은 아니라고 하네요. 게임을 하기 위해 수 분에 걸쳐 프로그램을 설치할 필요 없이 바로 브라우저에서 멀티 플레이까지 지원하는 3D 게임을 할 수 있는 날도 머지 않은것 같습니다.

5. Mugtub (http://mugtug.com)

포토샵과 같은 별도의 사진 보정 프로그램이 아닌 웹에서 바로 사진을 보정하거나 그림을 그릴 수 있는 서비스들이 많이 선보이고 있습니다. 그 중에 대표적인 Mugtug는 그림 그리기와 이미지 편집을 한 곳에 모아둔 사이트입니다. 사진을 직접 올려서 편집할 수도 있지만 웹 서비스인 만큼 이미지 호스팅 서비스인 Fliker, Picasa에서 직접 사진을 불러와서 사용할 수 있으며 작업한 사진은 바로 웹에 저장하거나 공유할 수 있습니다.

 위의 사례들을 보면 기존에 플래시나 Active-X등의 별도의 프로그램 설치를 사용하여 구현했었던 기능들을 훨씬 빠르고 가벼운 HTML5를 이용하여 제공하고 있습니다. 이미 필수처럼 느껴지며 널리 사용되는 플래시를 제공하지 않는 대신 그 대안으로 HTML5를 밀고있는 애플의 자신감이 바로 여기에 있었던것 같습니다.

 데모 사이트로 유명한 Mr.doob (http://mrdoob.com)을 보면 HTML5로 얼마나 많은 것들을 "아름답게" 보여주는지 알 수 있습니다. 사이트에 들어가서 직접 확인해보세요. 위 사이트도 WebGL을 사용하여 IE에서는 지원되지 않으며 크롬 9, 파이어폭스 4, 사파리 10.6 이상에서 보실 수 있습니다.

이상 HTML5를 이용한 사례를 알아보았습니다.
추후에 또 다른 새롭고 흥미로운 사례를 발견하면 이 곳에 소개하도록 하겠습니다.

---

E-Biz 사업본부 / 상품기획팀 류연주@allje_ryj
Tel. 02-514-9948 Fax. 02-514-9902 E.mail ryj@allje.com