애플이 직접 보여주는 HTML5 예제 7선

애플은 HTML5를 열렬히 지지한다. 그리고 애플은 아이폰과 아이패드와 같은 모바일 기기에 플래시를 탑재하지 않기로 결정했다. 최근 D8 컨퍼런스에서 스티브 잡스는 '플래시는 지고, HTML5가 뜨고 있다'고 말했다. 그렇다면 대체 HTML5로 무엇을 할 수 있을까?

이에 대한 답으로 애플은 HTML5 예제 7선을 선보였다.이 예제는 현재 최신 버전의 사파리 브라우저에서만 동작하도록 강제 설정되어 있다. (아이폰 4.0 베타에서도 동작하는 것을 확인했다. 오늘 새벽에 아이폰 4.0 정식 버전이 나올 듯 하니, 업그레이드 후 아이폰으로 접속해도 이 예제들을 볼 수 있다) 이는 아직 HTML5 표준화 작업이 진행 중이고, 브라우저마다 지원하는 정도가 다르기 때문이라고 생각된다. 하지만 HTML5는 애플만의 기술이 아니라 세계 표준 기술이기 때문에 조만간 모든 브라우저에서도 이 예제들을 볼 수 있을 것이다.



그 동안 우리는 플래시 플레이어나 윈도우 미디어 플레이어, 퀵 타임 플레이어 등을 이용하여 웹 상에서 동영상을 재생할 수 있었다. 그러나 HTML5에서는 이러한 플러그인을 요구하지 않는다. <VIDEO> 태그와 함께 영상을 제어하기 위한 인터페이스가 표준으로 추가 되었기 때문이다. 이 예제는 단순히 영상을 재생하는 것에 그치지 않고 영상의 확대/축소, 텍스트를 이용한 마스킹, 투시 변환 효과를 함께 선보였다.



보기 좋은 텍스트를 위해 대부분의 경우 포토샵이나 일러스트레이터 등으로 타이포그래피 작업을 한 뒤 이미지로 내보낸다. 그러나 HTML5부터는 CSS3와 SVG(Scalable Vector Graphics)를 이용하여 텍스트 위치의 미세한 지정, 자간 조정, 투명도 조절, 회전, 그림자 효과 등을 적용할 수 있다. 이렇게 하면 이미지보다 훨씬 적은 용량으로 벡터 그래픽 기반의 고품질 텍스트 효과를 얻을 수 있다. 이는 특히 신문이나 잡지 등을 웹으로 옮길 때 매우 유용하다. 또한 자바 스크립트를 통해 동적으로 텍스트에 다양한 효과를 적용하여 애니메이션 효과를 입힐 수도 있다.



HTML5를 이용하면 매우 부드럽고 역동적인 사진 갤러리를 만들 수 있다. 이 예제에서는 다양한 전환 효과를 설정할 수 있는데 특히 3차원 전환 효과는 무척 매력적이다. 이렇게 매력적인 사진 갤러리는 HTML5 표준에 추가된 그리기 인터페이스(Canvas)를 통해 구현된다. 이 표준을 구현하는 대부분의 브라우저가 3차원 하드웨어 가속을 사용하기 때문에 매우 부드럽고 역동적인 그래픽을 구현할 수 있다.



파워포인트 등을 이용해 슬라이드 쇼를 구성할 때 간혹 극적인 연출을 위해 장면 전환 효과를 사용하곤 한다. 이번 예제에서는 다양한 장면 전환 효과를 보여준다. 아이패드의 사진 슬라이드 쇼에서 보여준 다양한 전환 효과들(투명 전환, 3차원 전환, 종이 접기 효과 등) 모두 HTML5를 통해 구현될 수 있다. 갤러리와 마찬가지로 매우 부드럽게 동작하는 것이 인상적이다.

이 외에도 오디오 재생, 드래그를 이용한 360도 물체 회전, 스트리트 뷰를 보는 듯 한 360도 시점 전환 예제가 있다.

하나씩 둘러보고 나면 이런 의문이 들 것이다. '저거 충분히 플래시로 구현할 수 있는데요? 이미 어디선가 본 것 같은데요? 대체 HTML5가 플래시보다 나은 게 뭡니까?'사실 위의 예제들은 모두 플래시로 구현할 수 있다. 그러나 정말 중요한 것은 어도비 같은 특정 기업의 기술에 의존하지 않고 표준 기술로 구현했다는 것이다. 특정 기업의 기술에 종속되는 것이 얼마나 무섭고 위험한 일인지 우리는 이미 ActiveX를 통해 경험하지 않았는가?


< 이 글의 저작권은 semix2에게 있으며, 무단전재와 재배포를 금지합니다. >