HTML5로 한 발 더 내딛기 전에 챙겨야 할 것들

Web Standards 댓글 달기

현재 웹의 화두는 웹 어플리케이션으로의 진화라고 요약될 수 있을 것이다. 이를 아우르는 새로운 웹 표준으로 HTML5가 자리잡고 있는데, 여기에는 과거 데스크탑 어플리케이션의 전유물로만 여겨지던 여러 기술들을 거의 모두 아우르고 있다. 과거, 한 때 정체되어 있던, HTML4, XHTML1 그리고 DOM2 HTML 웹 기술들을 대체할 목적으로 새로운 틀이 만들어지고 있는 것이다.

그렇다면, 지금 당장 HTML5를 사용할 수 있을까? 해답은 바로 웹 브라우저들의 지원 상황에 달려있다.
공식적으로 발표된 HTML5의 W3C Candidate Recommendation 단계로의 진입은 일러야 2012년으로 예상하고 있으며, 현 브라우저들의 지원 상황도 그 편차가 심하지만, 대세를 그르치지 않는 이상 앞으로 상황은 급속도로 좋아지리라 생각된다.

또한, 당장 HTML5를 사용해도 별 큰 문제가 없는 것이, HTML5 태생부터 과거 호환성을 염두에 두었기에 큰 무리없이 점진적으로 새 기술을 흡수(Progressive Enhancement)하는데 유리하다는 점도 있겠다. 좀 더 자세한 브라우저들의 HTML5 기술 지원 상황은 When can I use… 페이지에서 확인할 수 있다.

자, 그럼 HTML5로 전환하기 전 챙겨야 할 사항들을 알아보자.

예상대로 가장 먼저 챙겨야 할 것은 IE를 위한 것으로 HTML5에는 더 의미에 맞는 구조를 표현해 주기 위해 새로 생겨난 element들이 추가되었는데, IE에선 이 요소들을 인식하지 못해서 CSS 적용 조차 할 수 없다. 그래서 이 새로운 요소들을 인식시켜주는 html5hiv란 이름의 JavaScript 사용이 필요하다. 해당 JavaScript 파일을 내려받고, 반드시 HTML 문서의 head 부분에 다음과 같이 추가해주어야 한다.

<!--[if lt IE 9]>
<script src="source_to_js_file/html5.js"></script>
<![endif]-->

덤으로, 기본적으로 새로운 요소들을 인식하지 못하는 브라우저에서 이 새 요소가 문서 흐름에서 block level 요소로 표시되도록 하는 CSS 정의도 다음과 같이 해준다.

article, aside, details, figcaption, figure, footer, header, main, nav, section, summary {
  display: block;
}

참고로, 이 중에는 과거 dialog 요소가 불명확한 사용 용례로 삭제된 사례가 있기 때문에 새로운 요소의 추가/삭제의 가능성이 아직 남아 있음. Eric Meyer씨의 CSS reset을 기본으로 한 HTML5 Reset Stylesheet도 눈여겨 볼 만함.

HTML5 Markup과 관련되서 챙겨야 할 것은 이정도이고, 다른 광범위한 기술들은 각기의 대응 전략을 세워야 하는데, 여기에 각 기술에 따른 몇 가지 대체 꼼수들을 알아보자.

Canvas

IE를 위해 ExplorerCanvas라는 이름의 JavaScript룰 추가해야 함.

SVG

이 놈도 모든 브라우저들에서 힘을 쓰려면 JavaScript의 힘을 빌려야 하는데, 대표적으로 실제 rendering을 위해 Flash를 사용하는 SVG Web과 웹에서의 vector graphics 구현을 손쉽게 해주는 Raphaël이 있다.

getElementsByClassName, CSS3 selectors

IE에선 이 유용한 method들을 사용할 수가 없는데, 어차피 다양하게 나와있는 JavaScript 라이브러리를 쓰면 해결될 것이다.

HTML5 Forms(Web Forms 2)

현재 Opera가 가장 좋은 지원 상황을 보여주고 있는데, 다른 브라우저에선 아직 완전하진 않지만 비슷한 구현을 도와주는 webforms2 프로젝트가 진행중에 있다.

Video/Audio

Video for Everybody! 페이지를 보면 JavaScript 도움없이 모든 브라우저에서 보여줄 수 있는 비디오를 심어넣는 방법이 소개되어 있다. 브라우저가 지원하는 비디오 container와 codec(MPEG-4/H.264, Flash, Ogg/Theora)에 따라서 해당 fallback 비디오 영상을 보여준다.

<!-- "Video For Everybody" v0.4 by Kroc Camen of Camen Design <http://camendesign.com/code/video_for_everybody>
     =================================================================================================================== -->
<!-- first try HTML5 playback. if serving as XML, expand `controls` to `controls="controls"` and autoplay likewise       -->
<!-- warning: playback does not work on iPad/iPhone if you include the poster attribute! we're awaiting a fix from apple -->
<video width="640" height="360" poster="__POSTER__.JPG" controls>
  <!-- MP4 must be first for iPad! you must use `</source>` to avoid a closure bug in Firefox 3.0 / Camino 2.0! -->
  <source src="__VIDEO__.MP4" type="video/mp4"><!-- Safari / iPhone video    --></source>
  <source src="__VIDEO__.OGV" type="video/ogg"><!-- Firefox native OGG video --></source>
  <!-- fallback to Flash -->
  <object width="640" height="384" type="application/x-shockwave-flash" data="__FLASH__.SWF?image=__POSTER__.JPG&amp;file=__VIDEO__.MP4">
    <!-- Firefox uses the `data` attribute above, IE/Safari uses the param below -->
    <param name="movie" value="__FLASH__.SWF?image=__POSTER__.JPG&amp;file=__VIDEO__.MP4" />
    <!-- fallback image. note the title field below, put the title of the video there -->
    <img src="__POSTER__.JPG" width="640" height="360" alt="__TITLE__" title="No video playback capabilities, please download the video below" />
  </object>
</video>
<!-- you *must* offer a download link as they may be able to play the file locally. customise this bit all you want -->
<p>Download Video: <a href="__VIDEO__.MP4">Apple iTunes "MP4"</a> | <a href="__VIDEO__.OGV">Open Format "OGG"</a></p>

현재의 웹에서 사용되는 비디오에 관한 자세한 정보와 뒷얘기는 출판 예정인 Dive Into HTML5 책 중에 미리 공개된 Video on the Web 페이지에서 확인할 수 있다.

LocalStorage, Web Database, Offline Web applications, Geolocation API

아직 미지원 브라우저들에선 Google Gears를 설치하면 비슷한 기능을 구현할 수 있다.
참고로, Offline Web applications에서 사용되는 manifest 파일의 경우 이름과 확장자는 마음대로 사용할 수 있지만, 브라우저에서 인식되려면 꼭 서버에서 text/cache-manifest의 MIME type으로 전송되어야 하므로 서버에 다음과 같은 설정을 해주는 것이 중요하다.

<IfModule mime_module>
  .
  .
  # HTML5 Application Cache 
  AddType text/cache-manifest .appcache
</IfModule>

여기서 유달리 HTML5 지원 상황에서도 따로 뒤처져 있는 IE를 위해, IE 9에선 HTML5 지원 상황이 좀 더 나아지리라 바라지만, 전에도 소개한 적 있는 Google Chrome Frame을 언급하지 않을 수 없다. 물론, 일반 웹 사이트보단 여러 HTML5 기술이 필수인 웹 어플리케이션에서라면 고려해 볼 만 하겠다.

이제, 대표적인 HTML5 시연 페이지들로 마무리.

앞으로, HTML5의 위력은 Mobile Web에서 그 위세가 더 드세지리라 예상해본다.

덧붙임(1.26.2012): appcache 파일이 제대로 인식되기 위한 필요조건인 MIME type checking 과정이 삭제됨. – Bug 14701 – appcache: remove the requirement for the MIME type

꼬리표:

관련된 주제의 글

“HTML5로 한 발 더 내딛기 전에 챙겨야 할 것들”에 달린 3개의 댓글

소중한 글 읽었습니다.
HTML5에서 Ajax기능을 사용하는 방법에 대해 좀 가르쳐주시면 감사하겠습니다.

댓글을 남겨 주세요