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

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


Video


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


Typography


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


Gallery


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


Transitions


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

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

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

  1. 티비의 세상구경 2010.06.07 12:55 ADDRESS | MODIFY/DELETE | REPLY

    html5의 예제들만 봐도 정말 멋진데요!!
    잡스말처럼 정말 html5가 표준화작업만 완성되면
    플래쉬는 정말 져버릴수도 있을것 같네요 ^^;;

    • semix2 2010.06.07 13:04 ADDRESS | MODIFY/DELETE

      가장 큰 걸림돌은 적절한 편집 도구가 없다는 건데 최근 어도비에서 HTML5 저작 도구를 개발하고 있답니다. (구글 I/O 2010에서 선보였지요) 저작 도구까지 갖추어지면 상당 부분의 플래시들이 HTML5로 바뀔 것 같아요. ^^ 티비님도 즐거운 한 주 시작하세요-!!

  2. HTML 2010.06.07 13:12 ADDRESS | MODIFY/DELETE | REPLY

    아쉽게도 애플 사파리에서만 이용 가능하네요.
    현재로선 사파리만의 HTML5로군요.

    • semix2 2010.06.07 14:25 ADDRESS | MODIFY/DELETE

      네, 그런데 정말 사파리만의 HTML5인지는 모르겠습니다. 그냥 일부러 강제 설정을 한 건지도 모르겠어요. 혹시나 잘 못 보여지면 애플이 의도하는 메시지가 왜곡될 수 있으니까요.

      그래도 HTML5는 세계 표준이니까, 애플만의 잔치는 안될겁니다. 애플, 구글, 모질라, 마이크로소프트 다들 달리고 있잖아요. ^^

  3. 도신 2010.06.07 14:49 ADDRESS | MODIFY/DELETE | REPLY

    이게 HTML5가 맞는지 의문입니다. 비디오의 경우 브라우저 자체로 돌아가는게 아니라 퀵타임 라이브러리를 기반으로 돌아가거든요. 애플이 HTML5를 띄우면서 하는 말이 별도 애드온이 필요 없다는 말인데, 이 말과는 반대로 정작 퀵타임을 설치하지 않으면 해당 기능이 구현되지 않습니다. 윈도우야 퀵타임을 설치하면 된다 치더라도 퀵타임이 지원되지 않는 리눅스 계열에선 제대로 보여지지도 않죠.

    해외 포럼에서도 이와 관련해서 말이 많은데, 이번에 공개한 데모 대부분이 HTML5과는 별로 관계가 없는 - 사파리 전용 코드만을 통해서 돌아가는거라고도 합니다. 정말 HTML5라면 웹킷 빌드가 더 높은 크롬계열에서도 잘 돌아가야 하는데 그렇지 않을 뿐더러 브라우저 스니핑으로 타 브라우저를 차단한 흔적이 곳곳에 보인다는군요. 이러면 과거 IE6 전용 HTML과 무슨 차이가 있냐는 말도 있으며, 혹자는 이번 애플 데모를 보고 사기라고 강하게 비난하기도 합니다.

    개인적으로 돌려봐도 3D부분의 경우 퀵타임을 넘어서 아예 OSX 계열이 아니면 구동조차 안되는 - 사파리 전용 코드를 넘어 아예 OS전용 코드가 심어져 있는게 아닌지 싶은데, 이러면 윈도우 전용 ActiveX와 무슨 차이가 있는지 의문입니다.

    얼마전 마소에서 내놓은 HTML5 샘플은 그럭저럭 다른 웹브라우저에서도 잘 구현이 됐었는데 이번 애플 데모는 아무리 사파리용이라는 조건을 달았지만 구현 자체가 퀵타임 라이브러리를 이용한다는데서 진정한 의미의 HTML5라고 보기엔 많이 부족합니다.

    • semix2 2010.06.07 15:16 ADDRESS | MODIFY/DELETE

      좋은 지적 감사드립니다. 현재 HTML5에서 가장 안풀리는 문제 중 하나가 코덱이라고 들었습니다. 애플은 퀵 타임을 밀고 싶을테고, 마이크로소프트는 WMV를 밀고 싶을겁니다. 최근 구글 I/O 2010에서는 구글/모질라 등이 VP8을 지원하기로 약속했죠. 태그나 제어 API 정도는 합의에 이르고 있지만 코덱은 합의를 도출하지 못한 것으로 알고 있습니다. 그래서 표준 코덱이 결정되지 않는 한 이 문제는 해결되지 않을 듯 싶네요. (만약 퀵 타임이 표준으로 결정된다면 모든 브라우저가 퀵 타임 코덱을 포함할 겁니다)

      3D 부분은 조금 의아한데요, OSX 계열이 아니면 구동조차 안된다는 부분이 이해가 안됩니다. 아마도 사파리 브라우저가 Canvas API를 구현하는 과정에서 하드웨어 가속을 위해 OSX 코드를 호출하나본데, 사실 이건 전혀 문제가 되지 않습니다. 빠르고 효율적인 Canvas API를 구현하기 위해 DirectX, OpenGL 등 다양한 기술이 활용될 수 있으니까요. 어디까지나 HTML5는 스펙입니다. 구현은 자유에요.

      HTML5 표준이 아직 진행 중이기 때문에 누가 먼저 잘 구현하느냐가 표준 채택에 있어 우위를 누릴 것 같습니다. 다소곳이 앉아서 마냥 기다릴 순 없지요. 과거 HTML 역사를 봐도 그렇습니다. <IMG> 태그가 왜 IMAGE가 아니고 IMG인가도 같은 이유거든요. 먼저 구현해서 배포한 쪽이 이깁니다. ^^;;;

      이번 사례는 애플이 HTML5 표준에 참여하면서 어떤 비젼을 갖고 있는지 보여주는 데 의의가 있다고 생각합니다. 지금 이런 저런 말이 많지만, 만약 이게 다 표준으로 채택되면 그걸로 끝입니다. 모든 브라우저들이 다 따를 수 밖에 없지요.

      표준 전쟁입니다. 아주 흥미진진 하지요? ^^ 다시 한 번 좋은 지적에 감사드립니다. 저도 이 예제들을 따로 짜서 다른 브라우저로 돌려봐야겠네요. 해보고 한 번 더 포스팅해 볼까 생각 중입니다.

    • 메서슈미트 2010.06.08 02:46 ADDRESS | MODIFY/DELETE

      semix2님이 조금 오해를 하고계시는게 있어서 댓글답니다. 일단 퀵타임은 프로그램입니다. 코덱이 아닙니다. 애플이 지지하는 비디오 코덱은 (AVC가 포함된) MPEG-4로, 이것은 애플의 규격이 아니라 방송통신 및 산업계 표준입니다.

      퀵타임 라이브러리와 MPEG-4는 별도입니다. 퀵타임에서 MPEG-4를 구동할 수 있는 것도 퀵타임이 별도의 MPEG-4 코덱을 내장하고 있기 때문일 뿐입니다.

      그리고 사파리뿐만 아니라 구글 크롬에서도 이미 MPEG-4를 동일한 식으로 표현합니다. 즉 HTML5 비디오라면 크롬도 사파리도 퀵타임 라이브러리를 사용하지 않는다는 것입니다. 어디 영상 하나 올리고 테스트해보면 바로 알 수 있습니다.

      위에서 말씀하신 퀵타임 라이브러리 이야기는 동영상 코덱의 이야기가 아닙니다. 플래시같은 그런 인터렉티브 오브젝트를 말하는 것입니다. 예를 들면 키노트 프리젠테이션을 MOV로 만들어 퀵타임으로 구동하는 것 같은겁니다.

      그것은 단순한 비디오가 아니므로 코덱으로 구현되는 것이 아니라 퀵타임 라이브러리가 있어야 구동되는 것입니다. 그래서 어도비 종속 플랫폼에서 애플 종속 플랫폼으로 옮기는것 그 이상도 이하도 아니게 되는겁니다.

      그리고 벡터 및 3D부분에서 OSX전용 코드라는 것은 쿼츠 익스트림, 코어 이미지, 코어 애니메이션 같은 기술을 말하는 것입니다. 이러한 기술들은 맥 이외의 플랫폼에서는 구동하는 것이 전혀 불가능합니다.

      HTML5가 지향하는 것은 플러그인의 거부입니다. 구현을 위해 플러그인의 사용이 자유가 된다면 HTML4에서 벗어나지 못한겁니다.

    • semix2 2010.06.08 14:16 ADDRESS | MODIFY/DELETE

      안녕하세요 메서슈미트님! 좋은 정보 감사드립니다. 우선 퀵 타임은 제가 잘 못 이야기했네요. 애플에서 사용하는 코덱 명칭을 몰라서 그냥 퀵 타임이라고 이야기했습니다. ^^;; MPEG-4 였군요!

      퀵 타임 라이브러리가 연동되는거라면 문제가 있겠네요. 하지만 라이브러리 연동을 위한 별도의 코드가 아닌, HTML5 스펙 내에서 브라우저가 판단해 연동시킨 거라면 상관없을 것 같다는 게 제 생각입니다.

      쿼츠, 코어 애니메이션 등의 기술이 Canvas API 호출에 사용된다고 해도 문제가 안될거라 생각해요. 맥 플랫폼에서는 쿼츠, 윈도우 플랫폼에서는 DirectX, 리눅스 플랫폼에서는 OpenGL을 써서 하드웨어 가속을 한다면 아무 문제 없지 않을까요?

      HTML5가 플러그인의 거부를 지향하는 건 동의합니다. 그러나 거부의 대상이 HTML/CSS/Script 스펙일 뿐, 스펙을 구현하는 브라우저가 어떤 기술에 의존하는가는 문제되지 않다고 생각합니다. (제가 고집이 좀 세지요?) 어쨌든 브라우저는 해당 스펙을 제대로 이해해서 동작시키면 되니까요.

      맥용 브라우저가 쿼츠나 코어 애니메이션 없이 구현되는 걸 바라지 않습니다. 이는 윈도우 익스플로러보고 DirectX 호출하지 말라는 것과 같은 이야기와 마찬가지 아닐까요?

  4. GC 2010.06.08 09:50 ADDRESS | MODIFY/DELETE | REPLY

    타이포 부분이 흥미롭네요.
    다행이 사파리 사용자지만, 설마 진짜로 사파리만의 html5가 되지는 않겠죠..아마도 ㅎㅎ ^^
    유익한 정보 잘 보고 갑니다.

    • semix2 2010.06.08 14:18 ADDRESS | MODIFY/DELETE

      타이포 정말 아름답지요? 타이포의 경우 CSS3 스펙을 활용하는 듯 한데 이미 이것 말고도 다양한 CSS3 예제들이 있고, 다양한 브라우저를 통해 검증되고 있답니다. 사파리만의 HTML5가 되진 않을거에요. 구글과 모질라도 상당한 영향력이 있으니까요! 그나저나 마이크로소프트는 참 조용하네요.. ^^

  5. Kata Pro 2010.06.09 00:29 ADDRESS | MODIFY/DELETE | REPLY

    좋은 정보 감사합니다. 엮인글(트랙백)을 추가하였습니다.
    결국 포토샵이나 플래시 하나로 계속 버티고 딴지거는 회사는 오래가지 않을 겁니다.
    때는 바야흐로 혁신적인 발전이 주도하는 분위기죠.

    • semix2 2010.06.09 21:38 ADDRESS | MODIFY/DELETE

      어서오세요- 프로님! 어도비는 스티브 잡스 말대로 HTML5 에디터로 장사해야 할 듯? ^^ 이미 만들고 있더라구요. 구글 I/O 2010 때 보여줬습니다.

      뭐, 그래도 플래시는 죽지 않을 거에요. 다만 요즘 어도비의 행보를 보면 조금 걱정이 들긴 합니다. ㅋㅋ

  6. Shinlucky 2010.06.09 15:07 ADDRESS | MODIFY/DELETE | REPLY

    전 방금 웹GL로 간단하게 퀘이크 돌리는거 봤어요. 감동!!

    • semix2 2010.06.09 21:39 ADDRESS | MODIFY/DELETE

      앗! 오랜만입니다. Shinlucky님! 신럭키..라고 읽어야 하나요? ^^ 저도 웹 GL로 퀘이크 돌리는 거 봤는데 기절할 뻔 했습니다. 온라인까지 지원하더라구요! 초당 60프레임 찍어내고 있고... 으어-!!

  7. Kata Pro 2010.06.10 01:03 ADDRESS | MODIFY/DELETE | REPLY

    방금 사파리 최신버전(4.1인지 5인지)을 설치했는데 HTML5를 먼저 확인해보고 싶어 지는 군요.

    플래시가 낡은 기술이라고 여겨지면 --- 애플만이 아니라, 과거 플로피 디스크가 골동품 취급을 받듯이 --- 구식 브라우저와 광고에서 열심히 돌아가는 기술이 되겠죠. 플래시가 무거운지 어떤지는 잘 모르겠으나 저는 플래시 없이도 지금까지 인터넷을 구경했으니, 앞으로도 그러리라고 봅니다.

    • semix2 2010.06.10 01:49 ADDRESS | MODIFY/DELETE

      맞아요. 변화에 적절히 대처하지 못하는 기술은 그렇게 사라집니다. 말씀하신대로 플로피 디스크가 좋은 예네요. 애플이 보여준 HTML5 사례는 극히 일부 사례만 보여줄 뿐, HTML5의 가능성은 좀 더 광범위하다고 생각됩니다. 웹 소켓, 스레드, 로컬 스토리지, 지오그래피 등을 활용한 보다 멋진 웹 어플리케이션이 앞으로 많이 등장할 겁니다. 플래시가 망할거라고 단정짓기는 어렵지만, 상당한 타격을 입을 건 분명한 듯 합니다.

      오늘 블로그 스킨에 효과를 좀 넣었는데 인터넷 익스플로러에서 개똥되는 걸 뒤늦게 알았습니다;; 불여우, 크롬, 오페라, 사파리 다 잘 되는데 오직 익스플로러만 말썽이네요. 아오!! 말 없는 MS가 사실 제일 나쁜 놈입니다!! 크릉-

  8. Kata Pro 2010.06.10 07:45 ADDRESS | MODIFY/DELETE | REPLY

    오늘보니 좌우영역이 회색으로 보이다가 마우스를 받을 때 (아마 Hover) 밝게 보이는 화면으로 바뀌어 있군요. 이것도 IE에서는 안되는 건가요?

    요새는 스타일리쉬한 블로그는 IE는 지원안한다고 공지하더군요.
    저는 오래전부터 IE와 담쌓고 있었다가, 자바스크립트와 CSS에서 IE가 지원이 미비한점이 개선건의하고 싶어지구요.

    • semix2 2010.06.10 14:12 ADDRESS | MODIFY/DELETE

      네, 맞아요! 부가 정보의 알파값을 떨어뜨려놓고 마우스를 올리면 페이드인 시키게 해 놨는데 오직 익스플로러만 이상하게 보이더라구요. 게다가 너무 느려요!! 왼쪽 사이드바 링크에 마우스를 올리면 RoundRect를 그리게 해 놨는데 익스플로러는 그냥 사각형으로 그리고, 제대로 못 따라옵니다. 오직 익스플로러만!!! 크앙-

      익스플로러 9에서는 HTML5를 적극 수용한다는데, 업데이트를 통해 버전 7, 8에서도 지원 좀 제대로 해줬으면 좋겠습니다. MS는 항상 자기네 구 제품 때문에 발목이 잡히네요. 비주얼 스튜디오도 그렇고....

      요즘 jQuery를 써 보고 있는데 이것 저것 시험 중입니다. ㅋㅋ 한 동안은 종종 이상하게 보일 수도 있어요. ^^

CATEGORIES