Youtube와 HTML 5

from Column 2010.01.21 23:59

Share |



유튜브가 HTML5 지원을 시작했습니다.
웹킷을 사용하시는 분들은 HTML5나 CSS 3.0에 비교적 익숙하시겠지만, 아마 모르시는 분들이 더 많으실거라 생각됩니다.

HTML5는 차세대 (최신) HTML 버전입니다.
가장 큰 특징은 직관적인 태그 (Video, Audio, Svg 등 흡사 BBCode를 연상시킵니다.) 와 유동적인 웹페이지 제작을 위한 API 제공 등을 들 수 있습니다.
현재 역동적인 인터페이스를 지향하는 대부분의 웹페이지 (주로 시각적인 즐거움을 추구하는) 는 대부분 플래시 (Flash) 로 제작이 되고 있습니다만,
HTML5와 CSS 3.0이 본격적으로 사용되는 시기가 오면, 플래시를 사용하지 않고도 이런 역동적인 웹페이지를 구축하는 것이 가능해집니다.

HTML5, CSS 3.0에 대해 이해가 잘 안 되시는 분들은 웹킷 블로그에서 그 기술들을 직접 체험해보실 수 있습니다.
단, 웹킷을 설치하셔야 됩니다. (크롬이나 사파리도 되긴 하는데 WebGL이나 CSS Animation 같은 기술의 지원이 완벽하지 않습니다.)
웹킷은 여기서 내려 받으실 수 있습니다.

현재 체험해볼 수 있는 기술들은 상당히 다양합니다.
CSS Animation은 최신 버전 사파리를 사용해보신 분들이라면, 한 번씩 다 경험해보셨을거라 생각합니다. (처음에 나오는 인트로 영상)
그런 역동적인 모션도 HTML과 CSS만으로 구현이 가능합니다. 용량이나 화질 (퀄리티) 적인 측면에서 봤을 때도 그게 훨씬 효율적이고요.
플래시처럼 통합된 형태가 아니기 때문에, 원본이 되는 텍스트나 이미지도 보존이 가능합니다.

잘 이해가 안 되시는 분들을 위해 동영상을 준비했습니다.

(Vimeo를 이용중이라 ClickToFlash를 사용하시는 분들은 제대로 나오지 않을 수 있습니다.
그럴 때는 다른 웹 브라우저를 이용하시거나 빈 공간을 마우스 오른쪽 클릭하셔서 플래시로 불러오시기 바랍니다.)


WebGL + CSS Animation from IAM on Vimeo.


보시는 것과 같이 이미지 (PNG 배경 파일) 와 텍스트는 그대로 있고, 여기에 CSS Animation으로 움직임이나 전환 효과 등을 준 것입니다.
이 기술을 이용해 총이나 룰렛이 돌아가는 역동적인 움직임들을 플래시에 관한 특별한 지식없이 이미지와 코드만으로 쉽게 구현이 가능합니다.
최근에는 한층 더 완성도 높은 애니메이션 효과를 보여주더군요.


Animations, Transitions and 3D Transforms from IAM on Vimeo.


녹화한 영상이기에 프레임이 약간 끊기는 것처럼 보이는데, 실제로 테스트해보시면 80~90 프레임 정도로 상당히 부드럽게 구현됩니다.
여기는 각각의 상자들을 텍스트로 처리했지만, 텍스트를 이미지로 바꾸는 것도 가능하고 동영상으로 바꾸는 것도 가능합니다.
원한다면 특정 상자를 클릭했을 때 전체화면으로 전환되도록 설정하고, 그 전환 효과를 CSS Animation을 통해 구현하는 것도 가능하겠죠.
이처럼, 앞으로 개발될 무수히 많은 기술들과의 접목이 가능하다는게 HTML5가 갖고 있는 가장 큰 장점입니다.
또 한 가지 중요한 점은 이 모든게 아주 가볍고 유연하게 작동한다는 것입니다.

잡설이 길었는데, (-0-) 요지는 유튜브가 이런 HTML5 기반의 서비스를 시작한다는 것입니다.
물론 아직 시험 단계인만큼 전면적으로 도입한 것은 아니고, testtube에 접속하셔서 HTML5 Video를 활성화하시면 이용하실 수 있습니다.
유튜브가 발 빠르게 HTML5 비디오를 도입하는 이유는 자사의 Chrome OS에 접목시키기 위함이라는 의견이 많은데,
만약 이게 구글이 원하는 대로 잘 진행이 된다면, 구글이 지향하는 Chrome OS에 날개를 달아주는 격이라는 생각이 드네요.

현재 지원하는 웹 브라우저는 웹킷 엔진을 사용하는 사파리 (4.0 이상), 구글 크롬, 크롬 프레임이 설치된 인터넷 익스플로러입니다.
아직 시험 단계이기 때문에 비디오 중간에 나오는 광고나 풀스크린 모드는 지원하지 않습니다.
HD 모드를 지원하지 않는다는 말은 없는데, 사용해 본 결과 기본적으로 HD를 재생하는 것 같지는 않습니다.
다만, 주소를 따오는 방식을 이용하면 HD 화질로도 시청이 가능합니다.





HTML5 비디오 모드로 전환이 되면, 동영상 재생 준비시 위와 같이 플레이어 중앙에 HTML5라는 문구가 뜹니다.
HD모드, 풀스크린 모드, 광고 등이 지원되지 않기 때문에 플레이어 자체는 굉장히 단순한 형태입니다. :-)

아직 부족한 면이 많습니다만, 첫 발걸음을 뗐다는데 의의를 두고 싶네요.

사실 많은 (대부분의) 사이트들이 구현이 쉽고 비교적 안정적이라는 이유로,
원본 파일은 H.264/AAC/MP4, H.264/MP3/MP4를 사용하면서도 껍데기는 플래시 플레이어를 이용합니다.

하지만 플래시는 사용자가 많을 뿐 엄연히 비표준 포맷입니다.
특히 맥이나 리눅스같은 비윈도우 환경에서는 재생 (Playback) 관련해서 많은 문제들이 산재해있습니다.

그런 측면에서 볼 때, 유튜브의 이번 HTML5 지원은 큰 의미가 있다고 할 수 있겠네요.

사실 이미 아이폰용 유튜브 앱을 통해 플래시 플레이어 없이 동영상 구동이 가능하다는 것 (퀵타임 플레이어를 이용해) 을 보여준 바 있고,
지금도 ClickToFlash라는 사파리용 플러그인을 이용하면 퀵타임 플레이어를 이용해 유튜브 동영상 구동이 가능하긴 합니다만,
이런 저런걸 떠나서 공식적으로 지원을 시작했다는데 높은 점수를 주고 싶습니다.

뜻하지 않게 글이 길어진 관계로 오늘은 여기서 마무리를 짓도록 하고,
내일은 일반 플래시 플레이어, HTML5 플레이어, ClickToFlash를 이용한 퀵타임 플레이어 재생에 어떤 차이가 있고,
각각의 장단점은 무엇인지에 대해 알아보도록 하겠습니다. :-)



Email Print Favorites Twitter Facebook Google Buzz Google My Space Delicious Digg Reddit Stumbleupon Friendfeed More