코드쓰는사람

HTML5, 그리고 <video>

HTML4가 웹을 지배한 지난 10여년간 웹 환경에도 많은 변화가 있었습니다. 10년이면 강산도 변하는데 웹이라고 예외는 아니니까요. 그 중 가장 큰 변화를 꼽는다면 웹 문서가 이제는 더 이상 '문서'가 아니라 '응용프로그램' 혹은 '미디어'로 자리매김했다는 것입니다. 지금의 웹은 역동적이고 인터랙티브하고 다양한 멀티미디어를 보여주며 사용자들도 이를 자연스럽게 받아들이고 요구하기 시작했습니다. 동시에 음악과 동영상은 부가 요소가 아닌 필수 요소가 되어갔습니다.

사용자들의 높아진 요구에 따라 웹 제작자들은 기존의 HTML에 한계를 느꼈습니다. HTML5는 바로 그러한 배경에서 탄생하게 되었습니다. 그런데, 그 중에서도 가장 주목받지 못하는 부분이 멀티미디어, 즉 <video>, <audio> 태그였습니다. 거의 모든 브라우저와 OS에 설치되어있어 플러그인 기술이라고 부르기도 어색한 Adobe Flash가 이미 사용자들의 욕구를 충분히 채워주고 있었기 때문입니다. Adobe Flash는 심지어 OS와 함께 배포되는 경우도 많아 명실상부한 사실상 표준(de facto standard)이었기때문에,  불편함은 거의 없었고 Flash를 통해 제공해주는 콘텐츠 품질도 만족스러웠습니다.

'아이폰이 나타나기 전'까지는요.

Flash vs HTML5

애플에서 2007년에 최초로 발표한 아이폰은 해마다 개량을 거듭하며 스마트폰 돌풍을 이끌고 있습니다. 아이폰은 데스크톱과 동일한 웹 브라우징 경험을 제공하는 것으로도 유명한데 안타까운 사실은 바로 그 '웹 브라우징 경험'에 Adobe Flash는 포함되지 않았다는 것입니다.  굳이 스티브 잡스가 발표한 Adobe Flash에 대한 입장까지 들먹이지 않더라도 앞으로도 애플이 아이폰 혹은 아이패드에서 Adobe Flash를 지원하지 않으리라는 것은 쉽게 짐작할 수 있을 것입니다.

이 덕분에 그간 아무런 고민없이 사용해왔던 Flash 기반의 멀티미디어 서비스에 대한 재고(再考)가 이루어졌습니다. 사실 Adobe Flash는 그 자체가 가지고 있는 문제도 적지 않습니다. 게다가 지금은 처음 Flash를 사용해 멀티미디어 서비스를 제공하던 때와는 달리 브라우저에서 직접 지원해주는 쓸만한 대체제가 존재하고 있었습니다. 바로 HTML5 <video> 입니다. HTML5 <video>는 현재 인터넷 익스플로러(이하 IE)를 제외한 모든 주요 브라우저에서 지원하고 있으며, IE도 9버전부터 지원하고 있습니다. HTML5 <video>를 지원하는 주요 웹 브라우저의 종류와 버전은 다음과 같습니다.

<video> 요소 지원 현황

IE 9.0+

Firefox 3.5+

Safari 3.0+

Chrome 3.0+

Opera 10.5+

iPhone 1.0+

Android 2.0+

여전히 Adobe Flash냐 HTML5 <video>냐 하는 부분에 대해서는 논란이 많습니다. 확실히 오랜 시간 서비스해온 만큼 Flash쪽이 더 보편적이고 동일한 플랫폼을 보장해주는 한편 성능 면에서도 이점이 많기 때문입니다. 반면, HTML5 <video>는 웹 브라우저에서 제공하기 때문에 별도의 플러그인이 필요하지 않으며 자바스크립트, CSS 등의 기반 웹 기술을 이용해 훨씬 더 유연하게 다룰 수 있다는 장점이 존재합니다.

간단하게 HTML5 <video>의 장점을 정리해보았습니다.

간편함

아마도 동영상 컨텐츠가 있을 때 이를 가장 빨리 웹 페이지에 게시할 수 있는 방법은 HTML5 일 것입니다. Adobe Flash는 동영상 컨텐츠를 Flash Video (flv) 형식으로 변환하는 것은 물론, *.flv 파일을 재생할 수  있는 별도의 플레이어를 마련해야 하고 플레이어를 사용하기 위해 또 다시 외우기도 힘든 코드를 복사해서 붙여야 합니다.

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="550" height="400" id="myMovieName">
<param name="movie" value="myPlayer.swf">
<param name="quality" value="high">
<param name="bgcolor" value="#FFFFFF">
<embed href="myPlayer.swf" quality="high" bgcolor="#FFFFFF" width="550" height="400" name="myMovieName" type="application/x-shockwave-flash" pluginpage="http://www.macromedia.com/go/getflashplayer"></embed>
</object>

그에 비하면, HTML5 <video>는 너무나 단순합니다.

<video src="example.mp4"></video>

위 코드는 원래대로라면 <video> 태그를 지원하는 모든 브라우저에서 잘 동작했어야 하지만, 아직은 해결하기 힘든 문제가 있습니다.  이 부분에 대해서는 다음에 다루어 보도록 하겠습니다.

만약, <video>를 지원하지 않는 웹 브라우저를 위해 Flash를 대체요소(fallback)로 제공하고 싶다면 다음과 같이 작성할 수 있습니다.

<video src="example.mp4">
 <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="550" height="400" id="myMovieName">
 <param name="movie" value="myPlayer.swf">
 <param name="quality" value="high">
 <param name="bgcolor" value="#FFFFFF">
 <embed href="myPlayer.swf" quality="high" bgcolor="#FFFFFF" width="550" height="400" name="myMovieName" type="application/x-shockwave-flash" pluginpage="http://www.macromedia.com/go/getflashplayer"></embed>
 </object>
</video>

확장성

그림2는 <video>와 <canvas>를 사용해서 구현한 특수효과 예제입니다. Adobe Flash는 아무리 널리 퍼져있다고 해도 플러그인에 기반하고 있기때문에, 플러그인 표시 영역 바깥에서는 인터랙션이 곤란합니다. 하지만, HTML5는 웹 브라우저에서 제공하는 네이티브 객체이므로 그림2처럼 사용자의 클릭에 따라 화면이 깨지는 효과도 어렵지 않게 구현할 수 있습니다.

접근성

앞서 말씀드린대로 아이폰과 아이패드에서는 Flash를 비롯한 웹 브라우저 플러그인 기술을 지원하지 않습니다. 안드로이드 계열의 스마트폰에서는 Flash를 지원하기는 하나 'Flash는 안드로이드에서 실패했다(번역 링크)'는 말이 나올만큼 아직은 불안하다고 보는 시각이 많습니다. 모바일 기기에서 Flash를 사용해 동영상을 보기에는 무리라는 의미죠.

그러나 HTML5 기술을 사용하면 아이폰 등의 모바일 기기에서도 동영상을 볼 수 있습니다. 오페라 모바일도 곧 HTML5를 지원한다고 하니 적어도 모바일 기기에서의 접근성은 HTML5가 Flash보다 높다고 볼 수 있습니다.

아이폰에서 웹 페이지에 포함된 HTML5 <video> 객체를 보면 그림 3과 같이 화면에 나타나고, 이 동영상을 클릭하면 그림 4처럼 전체 화면으로 동영상을 재생합니다(데모 링크).

디자인

HTML5의 <video> 객체는 자바스크립트로 쉽게 다룰 수 있는 것은 물론 CSS도 자유롭게 적용할 수 있습니다. 따라서, 데모 사이트처럼 간단한 CSS만으로도 동영상에 반사 효과를 주는 것도 가능합니다(데모를 보려면 Safari+QuickTime 혹은 WebKit nightly build 버전이 필요합니다).

<video> 태그는 당장 사용하는 것이 좋을까요? 아쉽지만 이 질문에 대한 대답은 '아니요'에 가깝습니다. 여전히 국내에서 대부분을 차지하는 IE6~8 버전에서 지원하지 못한다는 사실은 차치하고라도 <video> 자체의 문제도 있기 때문입니다. 그 중 <video>의 발전을 저해하는 가장 큰 요인으로는 '코덱(codec)' 문제가 있습니다. 코덱에 대해서는 다음 글 '코덱 전쟁'에서 다룰텐데, 읽고 나면 만만치 않은 문제라는 생각이 절로 들 것입니다.

그렇다면 사용하지 말아야 할까요?

이 질문에 대한 대답은 정확히 '네'라고 하기 힘듭니다. 올해 초 세계 최대의 동영상 서비스인 유튜브는 HTML5 <video>를 제공하기 시작했고, 또 다른 동영상 서비스인 Vimeo 역시 HTML5 <video>를 제공하고 있습니다. 그 외에도 내노라 하는 서비스 업체들이 HTML5 <video>를 지원할만큼 분명 동영상 분야에서도 HTML5는 매력적입니다. 앞서 소개한 모바일 기기에서의 접근성은 굳이 언급할 필요도 없을 것입니다.

To use or not to use.

정답은 없습니다.

.. and Next

다음 글에서는 <video>의 발목을 가장 크게 잡고 있는 '코덱'에 대해서 중점적으로 다루어 보겠습니다. 가히 전쟁이라고 불러도 좋을만큼 <video>의 코덱은 격렬하게 움직이고 있습니다. 누구의 승리인가와 상관없이 이 전쟁이 끝나는 날이 <video>가 본격적으로 성장할 때일 것입니다.