HTML5 그 놈이 온다.

작성자 : 김문규
최초 작성일 : 2009.09.24

변하고 있다. 당신이 모르고 있을 뿐

 아마도 매일 인터넷 서핑을 하고 있는 당신, 웹 개발에 관심 있으신 분이 아니라면 HTML이란 단어에 많이 익숙하지 않으실 겁니다. 웹 개발자라고 하시더라도 HTML은 단순한 표현 언어라고 생각하시는 분이 많습니다. 맞습니다. 그런데, 더 이상 아닐지도 모르겠습니다. HTML5라는 말을 들어 보셨나요? 구글에 HTML5라는 키워드를 넣는 순간 많은 글이 쏟아져 나오는 것을 보시게 될 겁니다. 2007년도 글이 좀 있고, 2009년도부터 많은 글이 등록되고 있습니다. 또한, 구글을 비롯한 인터넷 업체의 발표회에서 절대 빠지지 않는 단어 중 하나는 HTML5 입니다. 대체 뭐길래? 그들은 이에 오감을 곤두세우고 있을까요?

먼저 말씀 드리면, HTML5는?

 최근 10여년 간의 웹 기술 발전을 대부분 포함하는 새로운 HTML 표준 규약을 가리킵니다. 그리고, 그 이면의 HTML5는 인터넷 관련 업체들이 다음 세대 웹 시장의 주도권을 쥐기 위한 싸움의 결정체라고도 생각됩니다.

조금만 백그라운드 지식을...

 HTML4는 1998년도에 정해진 표준입니다. 인터넷에서 문서를 표현하기 위한 마크업 언어(Markup Language) 표준으로 만들어 졌습니다. 한동안 잘 사용되어 왔지요. 하지만, 그래픽, 멀티미디어에 대한 요구가 많아지면서 어느 날부턴가 우리에게는 RIA, AJAX라는 표현이 많이 들리기 시작했습니다. 한잠 자고 일어나면 Flash, Flex, Silverlight, JavaFX 등등 이름이 멋진 기술들이 속속 소개되기 시작했습니다. 따라가기도 힘들고 모두 파악하기도 힘들어져 버렸습니다. 그래서 인지 심플해야 할 웹이 점점 복잡해져 버리기 시작한 것이지요. (ActiveX는 이야기도 꺼내지 않겠습니다.)

 이유야 여러 가지가 있겠지만, 표준 기관이 제 역할을 못했고 시장 지배적인 회사가 기술을 선도하지 못했기 때문이라고 저는 생각합니다. 그래서, 모두가 생각하길(대부분이 맞을 수도..), 속된 말로 '더러워진 웹'을 정리할 때가 된 것입니다. 그래서, 업계의 젊은 피(?)들이 힘을 모아 이 판도를 바꾸어 보겠다고 나서게 되었습니다. 구글과 애플 그리고 오픈 소스 진영의 모질라 재단입니다.

'너무 복잡해지고 몇몇 업체의 기술이 지배하고 있는 웹 기술을 표준화하고 공개해서 사용자에게 새로운 선택(choice)의 기회를 주자!'

라는 대의 명분을 가지고 이 반란은 시작되었습니다.

잠시 딴 이야기 좀... 브라우저 뭐 쓰세요?

 잠시 딴 이야기를 하겠습니다. 브라우저 무엇을 사용하시나요? 아마 IE라고 답하시는 분이 대부분일 것입니다. 맞습니다. 아직도 IE의 점유율이 70% 이상인 것이 사실입니다. 하지만, 재미난 사실은 국내에서도 이미 파이어폭스(firefox)라는 불여우 브라우저의 점유율이 30%를 넘보고 있다는 사실입니다. 조사마다 그 값은 차이가 있지만 확실한 것은 비주류 브라우저들의 반란이 시작되었다는 것입니다. 항간에는 불여우 브라우저의 점유율이 세계적으로(단기적으로) 51%를 넘었다는 기사도 있습니다.

 무엇을 의미할까요?

그간 시장의 대장이라는 이유로 수없이 많은 좋은 기술을 핍박하고 누를 수 있는 힘이 점점 약해지고 있다는 것입니다. 더 이상 대장의 말 보다 대세의 말이 중요해 졌단 말이지요.

대세는 무엇?

 당연히 HTML5의 표준화가 대세입니다. HTML5는 초 신기술에 대한 정의가 아닙니다. 그런데, 왜? 주목하는 것인가요? 판세를 바꿀 수 있기 때문입니다. 예전에 왕을 폐위하기 위해서는 항상 명분이 필요했습니다. 그리고, 이를 위해 법과 관련 조례 등등이 필요했지요. (꼭 아니더라도 느낌만.. ^^) 이번 표준화도 이와 비슷해 보입니다. 시장의 약자들이 모여서 HTML5를 무기로 현재 왕인 MS IE, Adobe flash 콤비의 힘을 약화 시켜서 웹 생태계를 좀 평등하게 만들겠다는 겁니다. (또 다른 왕이 되고 싶기도 하겠지요.) 다르게 말하면 'IE 완벽 호환' 이라는 단어를 웹에서 없애 버리겠다는 것이지요. 몇 년 전 만에도 거의 불가능해 보였습니다. 그런데, 처음에는 불가능해 보이던 이 반란이 몇 년에 걸쳐서 힘을 키우더니 최근에는 드디어 주목을 받기 시작한 것입니다. 앞서 말한 브라우저 지배력의 재편으로 인해 3약이 모여 1강을 협박하기에 이른 것이지요. 이미 변화는 시작되었습니다.

그럼 잠깐 알아볼까요? HTML5가 뭔지? (주의! 기술에 관심 없으면 패스!)

 진짜 너무 방대하고 기술적인 스펙이라서 일일이 설명하는 것은 포기했습니다. ^^ 다만 핵심적인 키워드 5개만 짚고 넘어가겠습니다. 예제 사이트를 적절하게 이용해 주세요~

 

1. Canvas 를 통한 그래픽 드로잉(drawing) 지원

 - 이제 Javascript로 그림을 그리는 것이 가능합니다. 사각형, 원, 자유도형 그리고 색칠하고 모두 가능합니다. 게임도 가능하겠지요?

뮤직 플레이어 (firefox3.5+ and more)

http://9elements.com/io/projects/html5/canvas/

둠과 유사한 게임 (firefox3.5+ and more)

http://www.benjoffe.com/code/demos/canvascape/

마리오카트와 유사한 게임 (firefox3.5+ and more)

http://www.nihilogic.dk/labs/mariokart/

데이터 시트 (firefox3.5+ and more)

http://igrapher.com/ 

3D 지원 (firefox3.5+ and more)

http://www.macrumors.com/2009/09/13/webgl-support-begins-to-arrive-in-webkit/

http://www.sebleedelisle.com/2009/09/simple-3d-in-html5-canvas/

2. Video 코덱 표준화

 - 현재 Ogg Theora와 H.264가 격돌 중입니다. 코덱이 표준화 되면 동영상 플러그인이 필요 없게 됩니다. 바로 시청 가능~ 개발자 입장에서는 비디오 객체를 Javascript로 다룰 수 있게 됩니다. 기존보다 easy!

HTML5 <video>로 구현된 예제 (firefox3.5+ and more)

http://people.opera.com/brucel/demo/video/controls.html

http://www.double.co.nz/video_test/test1.html

http://tinyvid.tv/

video 객체를 script로 제어하는 예제 (firefox3.5+ and more)

http://people.mozilla.com/~prouget/demos/DynamicContentInjection/play.xhtml

SVG를 연동하여 동적으로 video를 제어하는 예제 (firefox3.5+ and more)

http://www.double.co.nz/video_test/video.svg

3. Local Storage 지원

 - 구글 기어(Google Gear)랑 비슷한 겁니다. 로컬 하드의 특정 영역에 DB 형태로 저장하고 꺼내고 가능합니다. 오프라인 어플리케이션! 이 가능해 집니다.

Notepad 데모 (Safari only)

http://webkit.org/demos/sticky-notes/index.html

Key, Value 쌍 저장 데모 (firefox3.5+ and more)

http://people.w3.org/mike/localstorage.html

 

4. Geolocation API 표준화

 - 장치 API와 브라우저 간에 인터페이스를 표준화해서 위치 정보를 브라우저에서 사용할 수 있게 됩니다. 카 네비게이션 이런 것도 가능해 지겠지요?

현재의 위치를 알려주는 서비스 예제 (firefox3.5+ and more)

http://www.browsergeolocation.com/

canvas 기술로 구현한 자동차 내비게이션 컨셉 구현 예제 (firefox3.5+ and more)

http://ernestdelgado.com/public-tests/canvas-gpsmap/

(현재는 위치 정보와 연계되지 않았지만, 주요 응용 분야임)

5. Web Worker를 이용한 multi thread 지원

- multi thread를 지원하기 때문에 task의 병렬처리가 가능해 집니다. 이 기술로 얻을 수 있는 효과로는 부드러운 UI 렌더링, 백그라운드 프로세스를 이용한 로컬 데이터 업데이트 등을 들 수 있습니다.

http://people.mozilla.com/~prouget/demos/worker_and_simulatedannealing/index.xhtml

6. 그 외에 태그 표현과 관련해서 많은 변경

- 너무 많아서 패스

http://dev.w3.org/html5/html4-differences/

http://channy.creation.net/project/html5/html4-differences/Overview_ko.html

그럼 이제 무슨 생각이 드십니까?

 '뭐, 몇 개 빼고는 사용자 입장에서 장점은 없는 거 아닌가요?' 라는 생각이 드시나요? 그럴 수도 있습니다. 실제로 사용자 입장에서는 그래픽, 멀티미디어 뭐 이런 거 다 Flash가 해 줬습니다. 인터넷도 빵빵하니까 굳이 로컬에 저장 할 필요도 없습니다. 그깟 위치정보 없으면 어떻습니까?

근데 아쉽게도 하나만 알고 둘을 모르시는 것은 아닐까요? 지금까지 인터넷을 PC로만 하셨지요? 휴대폰으로 인터넷다운 인터넷을 못 해보았기 때문에 그러한 반응을 보이시는 것 같습니다. 지금까지 모바일 웹 은 항상 뒷전이었습니다. 그 이유는 일단 화면이 작고 브라우저 성능이 너무 떨어졌기 때문입니다. 네이티브 어플리케이션(native application)과 표현력의 격차가 너무나 크기 때문에 이미 눈높이가 높아진 사용자에게 모바일 웹으로는 어필하기가 어려웠습니다. 하지만, 모바일 브라우저로도 게임이 된다면? 꼭 인터넷에 연결 하지 않아도 이전에 읽었던 메일을 확인할 수 있다면? 웹에서 멀티미디어를 빵빵(? 약간 과장)하게 즐길 수 있다면? 어떠시겠습니까?

그렇습니다. HTML5는 모바일 웹에 새로운 바람을 불어 넣을 것입니다. 새로운 표준은 우리의 눈높이를 맞추기 위한 기술적인 환경을 만들어 줄 것입니다. 기존에 우리가 바라고 원하던 모바일 웹이 실현되기에  좋은 환경이 만들어 지게 되는 것입니다. 우리가 지금까지 프로그램을 깔아야만 즐길 수 있던 유용한 모바일 애플리케이션들을 곧 플랫폼과 무관하게 브라우저를 통해 디바이스(휴대폰)에서 사용하게 될 날이 올 것입니다.

이제 마치며

 제가 드리는 말씀은 최신 논문을 분석해서 드리는 말씀이 아닙니다. 이미 이 분야의 전문가(?)라는 분들의 의견을 제가 편드는 쪽으로 미화해서 말씀 드리고 있습니다. ^^ (그래도 근거가 있단 말이지요.) 누구도 아직까지는 HTML5가 어떻게 될 거라고는 단언하지 못합니다. 아직 강자가 건재하기 때문입니다. 하지만, 바램이 있다면 웹이 더 이상 폐쇄적인 기술에 휘둘리지 말고 그 플랫폼 기술이 모든 오픈 되는 것입니다. 소스 코드의 오픈이 아니라 웹 플랫폼의 오픈을 말씀드리는 것입니다.

 수년간 윈도우즈라는 고마운 OS에 의해 IT가 이끌어져 왔습니다. 하지만, 여기에는 분명히 장점과 단점이 존재했고 단점에 의한 폐해도 많이 보아 왔습니다. 차세대 응용 플랫폼 중 하나일 웹! 누군가가 이를 소유한 다는 것이 옳을까요? 가지고 있어야 돕는다는 논리는 이제 구식이라고 생각합니다. 이제는 같이 생각하고 같이 발전시킬 시기입니다. 그렇게 되길 희망합니다.