HTML5가 점점 눈앞으로 다가오고 있습니다. 어느새 20년 가까이된 기존의 HTML(HyperText Markup Lange) 표준을 개선해 플래시 같은 플러그인이 없어도 더 많은 일들이 가능하도록 시각적인 측면과 데이터적인 측면 모두에서 획기적인 개선이 이루어지고 있습니다.
현재 사용되고 있는 HTML 4.01, XHTML 같은 표준은 웹페이지에 데이터가 어떻게 표시되어야 할지를 정의한 문서 서식 표준에 가까웠습니다. 이런 HTML이 이제 서식을 지정하는 제한된 역할에서 벗어나 플래시처럼 상호 작용 할 수 있는 애니메이션을 Canvas 객체로 표현해 내고, <audio>나 <video> 태그로 플러그인 없이 사운드나 영상을 재생해 내고, 여기서 더 나아가 로컬 컴퓨터에 데이터를 저장할 수 있게 되었습니다.
수 많은 일들이 오로지 표준 기술과 웹 브라우저 만으로 구현될 수 있게된 셈이지요. 파이어폭스, 크롬, 오페라, Internet Explorer 9와 같은 최신 웹 브라우저를 통해서만 제한적인 사용이 가능한 상태지만 , 이미 현재 주어진 환경만으로도 충분히 놀라운 일들이 가능한것 같습니다. 기존에는 생각할 수 없었던 형태와 방법으로 말이지요.
그런 의미에서 이번 포스팅에선 HTML5로 작성된 인상적인 사이트들을 한 곳에 모아 정리해 보려 합니다. HTML5로 어떤일들이 가능한지 느껴볼 수 있도록 말이지요. 기존에는 플러그인이나 외부 프로그램을 통해야만 가능했던 일들이기에 '음? 플러그인 없이 이게 가능했었나?'하는 생각이 작은 감탄사와 함께 머릿속을 스쳐 지나갈 겁니다.
전 파이어폭스 4 베타 버전으로 테스트 했습니다만 크롬, 사파리, 인터넷 익스플로러 9와 같은 다른 웹 브라우저에서도 HTML5를 지원하는 최신 버전이라면 잘 동작할 겁니다. 여기 있는 모든 사이트가 HTML5의 기술 시연 데모(Demo)에 가까운 데다가, HTML5 표준 자체도 아직 작업이 진행중에 있긴 하지만 위에서 언급한 최신 버전의 웹브라우저를 사용하고 있다면 살펴 보는데 특별한 문제는 없을 겁니다. 문제가 있을 경우 다른 웹브라우저에서 테스트 해보시면 됩니다.
새로 사고 싶은 제품들이 진열된 매장을 호기심과 기대감을 가지고 이리 저리 둘러 보는 것처럼, 이 모든 HTML5 사이트들을 재미있게 둘러 보셨으면 합니다. :)
Arcade Fire – The Wilderness Downtown
Arcade Fire와 Google에 의해 완성된 놀라운 HTML5 Canvas 기술 사용 데모 입니다. 미리 설명해 버리면 놀라움이 반감되어 버리겠지요? 직접 적절한 주소(예: New York)를 입력한 다음 화면에 펼쳐지는 영상과 기술적 마법을 즐겨 보셨으면 합니다.
WebVenture
WebVenture는 MacVenture라고 불리는 과거 매킨토시에서 사용되었던 게임 플랫폼을 HTML5와 자바스크립트로 구현해낸 결과물 입니다. 이제 Deja vu 1과 2, Shadowgate, Uninvited 같은 매킨토시 게임을 웹브라우저에서 바로 플레이해 볼 수 있습니다. 도스 게임으로 널리 알려진 울펜슈타인 3D 같은 게임들도 구현 작업이 웹브라우저에서 플레이 할 수 있게끔 HTML5로 구현되어 있군요.
20 Things I Learned About Browsers And The Web
구글에서 구성한 이 사이트는 웹브라우저가 어떻게 동작하고, 기반이 되는 여러 기술들이 어떻게 작용하는지를 "책" 형태로 소개해 보여주고 있습니다. 실제 책처럼 책장 형태로 된 페이지를 넘겨 볼 수 있을뿐만 아니라, 웹이 어떤 원리로 동작하는지 알고 싶어하는 분들께 좋은 읽을거리가 될듯 합니다. 아쉽게도 영문으로만 구성되어 있고 번역은 제공되고 있지 않습니다.
Collaborative Drawing
이 데모의 경우 HTML5의 WebSocket API를 사용해 웹사이트 방문자들이 모두 함께 실시간으로 캔버스에 그릴 수 있도록 하고 있습니다.
SketchPad
SketchPad는 웹을 위한 일종의 "그림판" 프로그램 입니다. 기본적인 드로잉 툴들을 오로지 HTML5와 자바스크립트 만으로 구현해 냈다는 점이 인상적으로 다가옵니다. 아마 HTML5가 아니었다면 플래시를 사용해야 구현 할 수 있겠지요.
Galactic Plunder
Galactic Plunder는 우주 공간을 배경으로 하는 2D 비행 슈팅 게임으로 역시나 HTML5 만으로 구현 되었습니다. 일반적인 횡스크롤 슈팅 게임만큼 게임의 기능이 풍부하진 않지만, HTML5 만으로 구현 되었다는 점이 인상적 입니다. HTML5의 Canvas와 Audio 객체를 사용해 이런 게임을 구현해 낼 수 있다니 놀랍군요. 플래시 같은 플러그인이나 외부 프로그래밍 언어가 없더라도 HTML5와 Javascript만 있으면 훌륭한 게임을 개발해 낼 수 있겠군요.
Video Effects
HTML5는 웹에서 비디오로 많은 일들을 할 수 있도록 해줍니다. 웹브라우저에서 플러그인 없이 비디오 파일을 재생할 수 있을 뿐만 아니라, 해당 비디오에 대해 여러 조작을 가할 수 있습니다. 이 데모 웹사이트에선 재생중인 비디오를 클릭할 경우 사각형 조각들로 나눠져 화면 밖으로 날아갑니다. 이 효과를 통해 HTML5에서 비디오에 어떤 조작이 가능한지 보여주고 있습니다.
Multiple Window Ball
이 데모에선 HTML5가 열려진 여러창에 걸쳐서 객체를 이동시킬 수 있음을 보여주고 있습니다. 열려진 각 창끼리 서로 상호 작용할 수 있다면 어떤 일들이 가능할 수 있을까요. 뭔가 아이디어가 떠오르진 않지만 잘만 활용하면 흥미로운 일이 가능하겠군요.
HTML5Rocks (Google)
HTML5 Rocks는 HTML5 언어의 특별한 기능들을 시연해 보이는 일종의 슬라이드쇼 웹사이트 입니다. 웹 개발자 분이시라면 샘플 코드와 함께 HTML5의 다양한 가능성들을 한눈에 확인해 보실 수 있을 겁니다.
8-bit Color Cycling
90년대 초에 게임을 즐겨본 경험이 있으시다면 이 그래픽 효과를 기억하고 계시리라 생각합니다. 당시 컴퓨터는 성능이 매우 제한적 이었기 때문에 그래픽 디지이너 분들은 그래픽 팔레트의 색상을 지속적으로 바꿔 정적으로 고정된 이미지가 실제로 움직이는 것처럼 보이는 일종의 눈속임을 사용했습니다. 한 마디로 '비디오'나 '영상'을 재생하기엔 성능이 부족했기에 고정된 이미지를 하나 화면에 띄워 놓은 다음 특정 부분의 색상을 지속적으로 바꿔 움직이는 것처럼 보이게 한 것이지요.
이 링크의 HTML5 웹사이트에선 HTML5의 Canvas가 이 고전적인 방법을 얼마나 잘 구현할 수 있는지 보여주고 있습니다. 향수를 불러 일으킬 만큼 아름다운 장면이 여럿 포함되어 있군요.
HTML5 Experiments from Hakim.se
이 웹사이트는 여러 데모 게임과 함께 간결하고 깔끔한 위젯들을 통해 HTML5로 어떤일들이 가능한지 보여주고 있습니다. HTML5를 어떻게 사용해야 할지 좋은 영감을 줄뿐만 아니라 기분 전환에도 도움이 되는것 같습니다.
Harmony
Twitter/Music Mashup
@9elements에서 개발한 이 HTML5 웹 애플리케이션은, 잔잔한 배경음과 함께 HTML5에 대해 이야기하는 트윗을 역동적으로 보여주고 있습니다. 배경에서 화려하게 움직이는 색색의 점들을 통해 말이지요. 직접 한 번 확인해 보세요.
Radiohead/HTML5 Mashup
Radiohead의 Idioteque가 배경음으로 재생됨과 동시에 곡의 진행에 따라 Thome Yorke란 분의 그림이 서서히 완성되어 가는 깔끔한 매시업 입니다. 예전 플래시 5와 MX가 사용되고 플래시가 한창 유행되기 시작하던 시기가 떠오르는 군요. 플래시 인트로 영상이나 무비로 이런 유형이 상당히 많이 유행했던 기억이 납니다. 애니메이션에 대해선 HTML5도 비슷한 흐름을 가지는 것이 아닐까 하는 생각이 듭니다.
HTML5Demos / CanvasDemos
HTML5와 HTML5 캔버스로 작성된 더욱 다양한 웹사이트와 데모를 확인해 보고 싶으실 경우, 이 두 웹사이트를 방문해 보시면 됩니다. 평범한 데모에서 부터 시작해 멋지고 화려한 매시업에 이르기까지 상당히 넓은 범위의 웹사이트를 다루고 있습니다. HTML5에 대해 흥미를 느끼기 시작하셨다면, 좀 더 다양한 영감과 데모들을 이곳에서 확인해 볼 수 있습니다.
현재 인터넷 상엔 수 없이 많은 HTML5 데모가 있고, HTML5는 지금 이 순간도 웹의 새로운 표준으로서 제 모습을 갖춰가고 있습니다. HTML5로 펼쳐지는 새로운 웹의 모습은 과연 지금과 얼마나 달라져 있을까요. HTML5가 가져올 플래시, 플러그인 밖으로의 웹의 확장과 변화가 더욱 기대됩니다.
'IT 이야기 > 웹 App/유용한 사이트' 카테고리의 다른 글
| 모든 사람에게 공개된 Google+ (4) | 2011/09/21 |
|---|---|
| HTML5 테스트하기 - 웹사이트 6곳 (2) | 2011/05/01 |
| HTML5로 작성된 놀라운 사이트 15곳 (33) | 2011/01/25 |
| 구글 번역, 색다른 4가지 활용법 (4) | 2011/01/11 |
| 긴 URL 주소, 짧게 줄이기 - Short URL (개발중, 개선됨!) (5) | 2010/12/24 |
| 웹기반 올인원 오피스 - Zoho (4) | 2010/12/23 |
댓글을 달아 주세요
안녕하세요 ~ 좋은 소개 글 잘 봤습니다
2011/01/28 19:45 [ ADDR : EDIT/ DEL : REPLY ]아 정말 멋지네욤!
특히 책을 브라우저에서 편하게 볼 수 있게 된다면 정말 좋을 꺼 같아요!!
플래시와 PC 환경을 벗어나 좀 더 다양한 곳에서 '웹브라우저에서 책을 넘겨 보는것'과 같은 풍부한 기능을 사용할 수 있도록 HTML5가 좀 더 빨리 일반화 되었으면 하는 생각이 듭니다. 웹을 좀 더 풍부하게 확장시킬 수 있도록 말이지요.
2011/01/29 15:31 [ ADDR : EDIT/ DEL ]플래시 대체는 좋은데, 플래시 이상으로 리소스 잡아먹는 괴물....
2011/01/30 15:33 [ ADDR : EDIT/ DEL : REPLY ]가령 그림 좀 복잡하게 하려면 자바스크립트가 미친듯이.... 비디오 태그도 잘 쓰려면 js추가해줘야 해서 그냥 비디오 태그만으로 끝나지도 않고... 뭐 프레임웍을 쓴다던가, 변환툴 등도 있겠지만 솔직히 별로 쉬워지는것 같지는 않음.
플래시에서 나아지는건 호환성 측면에서 그렇다는 거지 쉬워지지도 않고 노가다 거리가 줄어들지도 않음. 그리고 뭔가 압도적일정도의 대기능이 추가되는것도 아니고, 플래시던 실버라이트건 거기서 가능한 범위를 벗어나진 못함. 또 화려하고 다양한 기능이 추가되는 만큼 복잡해지고 요구하는 것도 많음. 그래도 그 호환성이 생각보다 큰 이유기도 하지만...
CPU를 비롯해서 생각보다 자원을 많이 먹더군요. 아직 완성된 표준이 아니기 때문에 최적화가 이루어지지 않아서 그렇지 않을까 하는 생각을 했습니다.
2011/02/01 09:32 [ ADDR : EDIT/ DEL ]개발 측면에선 고가의 전용툴이 필요하지 않기에 선택의 폭이 넓어지지 않을까 하는 생각이 듭니다. 기능 측면에선 이전의 플래시나 실버라이트를 넘어서긴 어렵겠지만 표준 기술이란 점에서 모든 웹브라우저가 지원하기만 한다면, (이전의 IE 전용 사이트 문제처럼) 특정 사용자가 소외되는일 없이 현재나 이후의 웹처럼 더 많은 사용자가 제한ㄴ없이 웹에 접근할 수 있지 않을까 생각합니다. ^^
멋진데요?
2011/01/30 20:36 [ ADDR : EDIT/ DEL : REPLY ]저도 상당히 흥미롭게 사이트들을 둘러봤습니다. 플래시와는 또 다른 느낌이 들더군요. ^^
2011/02/01 19:46 [ ADDR : EDIT/ DEL ]오페라 11 버전 사용중인데 속도가 많이 느리군요.
2011/01/31 09:03 [ ADDR : EDIT/ DEL : REPLY ]웹표준이라고는 하지만 아직 크롬이 아니면 차기 버전을 기다려야될 듯 합니다.
좋은 정보 감사합니다.
저도 테스트 하면서 느낀점이지만, 크롬에서 제 속도를 내더군요. 이후 웹 표준 작업이 더 진행된다면 나아지지 않을까 생각합니다. ^^
2011/02/01 19:45 [ ADDR : EDIT/ DEL ]글 잘읽었습니다...^^
2011/01/31 18:55 [ ADDR : EDIT/ DEL : REPLY ]애플홈페이지는 벌써 html5 로 바뀐거 같던데...
정말 멋지네요....
애플 홈페이지가 HTML5로 변경되었었나요.
2011/02/01 00:14 [ ADDR : EDIT/ DEL ]미처 신경쓰지 못했던 부분이군요. 알려주셔서 감사합니다. 한 번 확인해 봐야 겠군요.
HTML5로 상당히 멋진 일들이 가능한것 같습니다.
이후가 더욱 기대되는 이유중 하나가 바로 이것 때문이겠지요. 방문해 주셔서 감사합니다.
너무좋은내용 보고 갑니다
2011/03/04 15:45 [ ADDR : EDIT/ DEL : REPLY ]잘 보고 가셨다니 저도 기쁨니다 ㅎ
2011/03/06 12:30 [ ADDR : EDIT/ DEL ]좋은 정보네요.. html5 상당히 충격적이네요^^
2011/03/23 11:24 [ ADDR : EDIT/ DEL : REPLY ]지금은 실감하기 어렵지만, 좀 더 시간이 흐른다면 일상화 되지 않을까 생각합니다. ^^
2011/03/25 22:47 [ ADDR : EDIT/ DEL ]좋은 포스팅, 잘 봤습니다.
2011/04/28 00:38 [ ADDR : EDIT/ DEL : REPLY ]가슴이 설레는 기술이네요.
앞으로의 발전을 기대하게 하지요.
2011/04/30 20:42 [ ADDR : EDIT/ DEL ]잘 보셨다니 저도 기쁨니다. ^^
어마어마하네요
2011/05/08 23:16 [ ADDR : EDIT/ DEL : REPLY ]HTML5의 상당한 기능성을 볼수 있는것 같습니다!
한번더 인터넷은 변하겠네요
그렇지요? HTML5가 일상화된 모습을 하루 빨리 보고 싶다는 생각이 듭니다 ㅎ
2011/05/10 21:27 [ ADDR : EDIT/ DEL ]HTML5 참대단합니다...
2011/07/11 17:46 [ ADDR : EDIT/ DEL : REPLY ]앞으로 더 신기한 사이트들이 많이 나오겠꾼요
'이런게 가능했던가?'라고 생각할 수 있을만큼 신선하고 새로우며, 즐거운 사이트가 여럿 나와줬으면 하는 생각이 듭니다. 하나 만들고 싶다는 생각도 듭니다.
2011/07/12 00:05 [ ADDR : EDIT/ DEL ]개인 홈페이지가 유행하던 시점만해도, 지금처럼 불특정 다수의 여러 사람과 팔로우나 친구 신청을 통해 관계를 형성할 수 있을거라곤 생각도 할 수 없었죠. 끊임없이 수십, 수백명 이상이 동시에 이야기를 주고받고, 생성된 하나의 작은 메시지가 수천 수만의 사람들에게 전달될 수 있을거라곤 생각할 수 없었습니다. 그런데, 이 모든게 지금은 일상화 되어 있지요.
HTML5도 SNS 같은 기술이 되었으면 하는 생각이 듭니다. 일상 생활속에 녹아 들어와, 많은 변화를 이뤄냈으면 합니다.
오페라 11 버전 사용중인데 속도가 많이 느리군요.
2011/11/25 22:35 [ ADDR : EDIT/ DEL : REPLY ]11 버전은 사용해 보질 않아서 잘 모르겠습니다.
2011/12/08 23:42 [ ADDR : EDIT/ DEL ]아마 크롬으로 접속해 보시면 가장 빠른 속도가 나올 겁니다.
대단하네요. 잘보고갑니다.^^
2011/12/09 18:12 [ ADDR : EDIT/ DEL : REPLY ]넵. 방문해 주셔서 감사합니다.
2011/12/24 14:09 [ ADDR : EDIT/ DEL ]html5 실망이네요.
2011/12/20 04:01 [ ADDR : EDIT/ DEL : REPLY ]html5 사이트라고 하더라도 html5 규격준수를 제대로 지키는 사이트는 별로 없으며
html5의 밋밋한 기능으을 보안하기위해 jquery로 마감하고..그게 html5기능인량 .....
솔직히 보니 html5는 제약과규격의 목적은 홈페이지를 더 쉽게 다양하게 디자인하고 여러 브라우저에게
표준적인 구현을위한것 보다도, 검색엔진을 가진 포탈사이트들의 정보인덱스 및 정보기관들의 인터넷 검열을 보다 더 쉽게 하기위한 목적으로 한것 같다는 엉뚱한생각드는건..
왜? 일까요....
말씀하신 이야기도 일리가 있어 보입니다.
2011/12/24 20:00 [ ADDR : EDIT/ DEL ]W3C 웹 표준 기구와 기타 이해 관계 당사자들이 정보 기관(?..)들의 인터넷 검열(?!$%#)을 좀 더 손쉽게 하고(...) 검색엔진과 포털 사이트의 정보 인덱싱을 위해 기술을 개발하고 있을수도 있겠지요(.......)
그런데..
설령 그 가정이 사실이라 하더라도 HTML5가 아직 완성된 기술 표준이 아니라는 사실에는 변함이 없습니다.
최종 출시일까지 그리 길지 않은 기간이 남아있긴 하지만, 미완의 상태라는 점이 결코 작지 않은 가능성과 함께 큰 변화의 여지를 남겨놓고 있습니다.
무엇보다 HTML5는 로컬 저장소(Local Storage), Canvas, 사용자 위치 확인 등 이전에는 (HTML 만으로) 구현이 불가능했던 수 많은 제약 사항들을 "가능"하게 해주고 있습니다.
결코 적지 않은수의 "기반 기술(다른 기능이나 앱을 구현할 수 있도록 기반을 제공하는 기술)"이 새롭게 포함되고 있습니다.
jQuery는 어디까지나 웹 개발의 "자바스크립트" 부분에서 개발 기간을 단축하고, "화면구성(UI)"과 애니메이션 효과, 아작스와 같은 기타 관련 기능을 좀 더 손쉽게 구현하기 위한것일 뿐이지요.
HTML5의 사용이 일반화 된다면 말씀하신 jQuery 마감(?..) 부분도 점차적으로 변화되어 나갈것이라 생각합니다.
아직 여러 사항을 속단하거나 예단할 시기는 아닌것 같습니다. 좀 더 시간적 여유를 가지고 지켜봐야 하지 않을까요.
퍼갑니다.. 출처를 확실히 남기겠습니다. ^^
2012/05/16 15:07 [ ADDR : EDIT/ DEL : REPLY ]현재 '전문'을 퍼가는 것은 허용하고 있지 않습니다. ^^
2012/05/16 22:27 [ ADDR : EDIT/ DEL ]퍼가지 마시고, 제 블로그 글로 링크를 걸어 주셨으면 합니다.
이욜~~ 멋지당♥
2012/07/13 22:57 [ ADDR : EDIT/ DEL : REPLY ]아, 춥파춥스님.
2012/07/14 16:19 [ ADDR : EDIT/ DEL ]반갑습니다. 다시 방문해 주셨군요. ^^
웹 기술 표준 기관인 W3C가 2014년도까지 인터넷상의 거의 모든 사이트 기반 기술을 HTML5로 전환하는 것을 목표로 하고 있다고 합니다. 실제로 많은 기업들도 HTML5로의 전환을 좀 더 가속화하고 있는 상태이기도 하고 말이지요.
앞으로 인상깊은 사이트들을 좀 더 많이 볼 수 있게 되지 않을까 하는 생각이 듭니다.
이제 저를 단골손님으로 처리하세요 ㅋㅋㅋㅋㅋㅋㅋㅋ
2012/07/14 16:46 [ ADDR : EDIT/ DEL ]흐하하하하~~
빨리 html5로 전환되면 좋겠네용
제 블로그도 좀 멋지게 꾸미겡♥ㅋㅋ
이제 저를 단골손님으로 처리하세요 ㅋㅋㅋㅋㅋㅋㅋㅋ
2012/07/14 16:46 [ ADDR : EDIT/ DEL ]흐하하하하~~
빨리 html5로 전환되면 좋겠네용
제 블로그도 좀 멋지게 꾸미겡♥ㅋㅋ
으핫. 댓글을 두 번씩이나 다셨군요.
2012/07/14 19:28 [ ADDR : EDIT/ DEL ]글 쓰는 사람 입장에서
자신이 쓴글을 읽어주는 사람이 한 사람 더 늘어난다는 것은 기쁜 일입니다. ^^
단골이라면 언제든지 환영입니다.
제 블로그에 오신것을 진심으로 환영합니다! ㅎ
HTML5로 완전히 전환되기까진 아직 조금 더 시간이 필요할겁니다. 위에서 댓글로 말씀드린 것처럼 약 2년 정도의 시간이 필요할 것으로 예상됩니다.