HTML 5 브라우저별 호환 비교&샘플 사이트

HTML 5 브라우저별 호환 비교&샘플 사이트

1. HTML5 브라우저별 호환 비교표

사용자 삽입 이미지

(출처:404techsupport.com)

위에서 보면 알겠지만 맥이든 윈도우든 사파리나 파이어폭스가 최고라고 조사되고 있다.
또한, 여러 큰 밴더들에서는 이미 HTML5와 관련된 샘플을 제공하고 있다.
아래는 윈도우 기준으로 다양하게 다시 조사한 항목들이다.

1) Internet Explorer 8

사용자 삽입 이미지

2) FireFox 3.5

사용자 삽입 이미지



3) Chrome

사용자 삽입 이미지



4) Opera Browser

사용자 삽입 이미지



5) Safari

사용자 삽입 이미지

2. HTML5 샘플 제공 사이트

1) Apple HTML5 showcase ( http://www.apple.com/html5 )

사용자 삽입 이미지

애플의 HTML5 쇼케이스 사이트(http://www.apple.com/html5)


애플에서 제공하는 HTML5 쇼케이스 사이트이다. 비디오, 타이포그라피, 갤러리, 변형(이미지 회전), 오디오, 360도 회전(이미지) VR(Virtual Reality) 등 7개의 수준높은 샘플과 소스코드를 제공한다.


사용자 삽입 이미지

애플 쇼케이스와 연결된 Safari Technology Demos(http://developer.apple.com/safaridemos/) 사이트에서는 7개 더 많은 14개의 데모와 소스코드를 제공한다. 허나, 사파리와 관련된 개발 정보 및 가이드 라인만 볼 수 있는데, 처음 HTML5를 접하고 가이드 라인을 구상하는 데는 큰 도움이 되지 않을까 싶다.

사용자 삽입 이미지


허나 애플 측은 자신들의 브라우저인 사파리를 권장한다. 왜? 뭐 당연히 자기들 브라우저를 마케팅 하려는 요소가 강하지 않겠는가. 

사용자 삽입 이미지

Firefox로 접속한 애플 html5 테스트 사이트의 사파리 권장 메시지

나는 위의 경고팝업을 보고 사실 파이어폭스 3.6에서는 HTML5가 지원 안되는 줄만 알았다. 그런데 HTML5 demos 사이트를 가보니 지원 안하는게 아니었다. 다만, Apple측에서 자신들의 퀄리티 높은(?) 샘플을 파폭에서는 마치 지원 안하는 것처럼 보이려고 해 놓은 것만 같다.

2. HTML 5 Gallery(
http://html5gallery.com/)

사용자 삽입 이미지



약 500여개의 사이트가 링크된 이 HTML5 gallery에서는 주로 웹 사이트에 적용된 HTML5 기술을 볼 수 있다. 테그를 통해 주로 사용된 HTML5 테그를 볼 수 있는데, 블로그,뉴스,개인 포트폴리오,스포츠, 웹Apps 등 28개의 카테고리를 제공하고 이에 따라 유저들의 호응까지 알 수 있어서 HTML5를 벤치마킹 하는 데에 큰 도움을 주는 사이트가 아닌가 싶다.


블로그로 제작된 이 사이트는 자료는 많은데 사실 댓글 등을 보면 유저의 호응이 없어서 약간 신뢰가 떨어지는 단점이 있긴 하다. 하지만 최근 업데이트가 7/17 일자이니 나름대로 업데이트는 잘 하는 편이 아닌가 싶다.


3. HTML5 Demos and Examples(http://html5demos.com/)

사용자 삽입 이미지

HTML5 샘플과 브라우저 호환 목록을 제공하는 HTML 5 demos(http://html5demos.com)



위 사이트는 HTML5의 몇몇 핵심 기능들에 대한 22개의 데모들과 소스코드를 제공하고, 이에 쓰인 기술과 호환되는 브라우저를 보여준다. 딱 봐도 IE는 정말 GG쳐야 하지 않나 싶다.


3. Microsoft Internet Explorer 9 Test Driver(http://ie.microsoft.com/testdrive)


사용자 삽입 이미지

약 40개의 HTML5 샘플을 제공하는 Internet Explorer 9 Test Drive 사이트이다. 본래는 IE9의 Preview를 위한 사이트로 개발되었으나, 사실 크롬같은 HTML5 호환 사이트에서는 샘플을 제공하고 있다. 굳이 IE9 Preview를 깔지 않아도 된다는 사실! 샘플 분량은 많지만 퀄리티는 그닥 기대할 것이 아니다. 당장 가장 앞에 있는 Amazon Shelf 라는 샘플만 봐도 알겠지만 말이다.




———————————————————-


몇 가지 HTML5 기술을 볼 수 있는 사이트들과 브라우저의 호환을 살펴봤는데, 사실 외국 사이트들을 찾으면 HTML5 기술을 사용한 사이트들은 엄청나게 많긴 하다. 하지만 국내에는 거의 없다 시피 한 것이 사실이지만 말이다.