HTML5 테스트하기 - 웹사이트 6곳
HTML5games
HTML5를 사용해 개발된 게임들을 플레이 해볼 수 있는 사이트 입니다. 어드벤쳐, 아케이드, 카드, 모바일, 퍼즐, 슈팅등 다양한 카테고리의 게임들을 HTML5로 제공하고 있습니다. 게임을 직접 플레이 해보시면 아시겠지만, 현재 가장 많이 사용되고 있는 플래시와 비교해봐도 그래픽과 사운드 측면에서 부족함이 없어 보입니다. 계속 진행하다 보면 플래시인지 HTML5인지 확인해 보지 않으면 구분이 안갈 정도군요. 플러그인이 설치되어야만 실행되며 상용툴로 개발해야 하는 플래시를 HTML5가 충분히 대체할 수 있겠군요.
HTML5 Readiness
현재 모든 웹브라우저가 HTML5에 대한 지원을 넓혀가고 있습니다. 이 사이트는 각 웹브라우저가 HTML5와 CSS3 지원을 위해 어떤 기능을 구현한 상태인지 시각적으로 표시해 보여 줍니다. HTML5와 관련된 28가지 기술에 대해 각 웹브라우저가 지원하고 있는 상태인지 색상으로 나타내고 있군요. 특정 기능을 나타내는 줄에 해당 웹브라우저의 색상이 없다면, 아직 그 기능이 웹브라우저에 구현되지 않은 상태라고 보시면 됩니다.
전체적으로 봤을때, 사파리와 크롬이 좀 더 앞서나가고 있는것 같군요.
HTML5 Element Reference Table
Josh Duck이 만든 프로젝트인 Periodic Table of the Elements란 웹사이트는, 104개의 HTML5 요소들을 주기율표 형태로 정리해 일목요연하게 보여주고 있습니다. 각 셀을 클릭하면 간략한 설명이 표시되며, 추가적인 사항을 확인해 볼 수 있도록 링크가 함께 표시됩니다.
HTML5 Test
사용중인 웹브라우저가 HTML5 기술을 얼마나 잘 지원하고 있는지 점수를 매겨주는 웹사이트 입니다. 웹사이트에 접속하면, 특정 기술에 대한 지원 여부로 점수를 매긴 다음 총점 400점중 몇 점을 받았는지 화면에 표시해 줍니다. HTML5 표준 스펙보다 더 많은 기능을 지원할 경우 보너스 포인트가 추가 됩니다.
각 부분별 기술 지원수는 색상이 적용되어 표시되기 때문에, 비디오나 캔버스 같은 항목을 웹브라우저가 얼마나 잘 지원해주고 있는지 한 눈에 확인할 수 있습니다.
HTML5 Gallery
HTML5를 사용해 개발된 웹사이트들을 한 곳에 모아 정리한 웹사이트 입니다. 썸네일을 클릭해 웹사이트에 대한 간략한 설명과 함께 어떤 HTML5 요소가 웹사이트 개발에 사용되었는지 확인해 볼 수 있습니다. 링크를 클릭하면 해당 웹사이트로 바로 이동할 수 있습니다.
목록에 표시된 웹사이트들을 통해 웹 개발자들이 HTML5를 어떻게 구현하고 있는지 살펴볼 수 있습니다.
YouTube HTML5 Beta
Video 태그(요소)는 HTML5에서 가장 크게 강조되는 부분중 하나 입니다. 이 Video 기능을 YouTube에서 확인해 볼 수 있습니다. https://www.youtube.com/html5에 접속한 다음 페이지 하단의 Join the HTML5 Trial 링크를 클릭하면 YouTube의 HTML5 Video Player 기능을 활성화 할 수 있습니다. HTML5 Video Player 기능이 활성화되면 대부분의 비디오에 대해 플리새 플레이어 대신 HTML5 플레이어를 사용해 비디오를 재생하게 됩니다. 이걸 통해 HTML5의 비디오 기술(요소)을 확인해 봄과 동시에, 현재 사용중인 웹브라우저가 HTML5 비디오 부분에 대해 어떻게 대처하고 있는지 직접 확인해 볼 수 있습니다. HTML5 Video의 각 웹브라우저별 대응을 위해 유투브가 어떤 방식과 노력을 기울이고 있는지는 앞서 언급된 HTML5 Video Player 활성화 페이지에 나온 내용을 읽어보시면 됩니다.
현재 사용중인 웹브라우저가 얼마나 잘 HTML5를 지원하고 있는지, 또 HTML5로 개발된 웹사이트와 게임에는 어떤것들이 있는지 직접 한 번 살펴보세요.
IT와 기술을 이해하고, 유용한 소프트웨어를 발견하도록 돕고 싶습니다. 윈도우(Windows), 맥(macOS), 리눅스(Linux), 스마트폰 앱, 웹 서비스, 기획 시리즈물까지. 더 많은 것을 발견하고, 더 많은 것을 해보세요.