개발자가 참고할만한 국내 HTML5 사이트 모음

다양한 HTML5 웹사이트 사례들을 한눈에 살펴 보세요.

계속 업데이트 됩니다.

 

 
 

그래픽


네이버랩에서 새롭게 오픈한 HTML 5 버전의 디지털 뉴스 아카이브. HTML5 canvas를 이용하여 효과가 눈에 띈다. 플래쉬 버전에 비해 가벼운 속도도 인상적이다.

 

비디오/사운드


JoinsMSN에서 최근에 출시된 신차들을 한 눈에 비교해 볼 수 있도록 구성한 Auto Test Drive 웹사이트이다. HTML5 section 요소와jQuery를 이용하여 레이아웃과 애니메이션을 처리하였고, HTML5 Video 기능을 이용하여 자연스러운 트랜지션과 함께 비디오가 재생되도록 구성하였다. 화면 룩과 이미지, 그리고 영상이 어울어져서 HTML5만으로도 인터랙티브한 프로모션 페이지 구성이 가능하다는 것을 보여준다.

 

게임

여러분의 사이트를 등록 신청해주세요.

 

웹애플리케이션


네이버 사용자들을 위한 개인화 서비스인 네이버me에 HTML5가 적용되었다. HTML5의 DTD와 인코딩 선언을 사용하고, 새로 생기거나 변경 혹은 폐지된 요소와 속성들을 선별하여 적용하였다. HTML5와 CSS3적용기를 통해 자세한 내용을 확인할 수 있다.

 

미디어아트

여러분의 사이트를 등록 신청해주세요.

 

IE9 사이트 모드


네이트 첫페이지에IE9의 Jumplist기능이 적용되어 있다. 사이트 고정 기능을 이용해서 작업표시줄에 등록하거나 윈도우 시작 메뉴에서 항목을 확인할 수 있다. 뉴스, 판, 앱스토어, 왜떴을까, 싸이뮤직 등 방문자들이 자주 방문하는 페이지를 Nate Favorites라는 카테고리로 등록되어 있다. 뿐만 아니라 메일함, 미니홈피, 블로그 등 개인화 서비스들을 작업에 배치하여 사용자들이 좀 더 쉽게 각 서비스로 진입할 수 있도록 하였다.

사이트 모드에서는 네이트의 빨간색 브랜드 이미지가 고해상도 파비콘(64x64)과 사이트 모드를 통해서 잘 전달되고 있다.

 

카테고리

  • 그래픽
  • 비디오/사운드
  • 게임
  • 웹에플리케이션
  • 미디어아트
  • IE9 사이트 모드