HTML5 Site Gallery

여기 38개의 HTML5로 디자인된 사이트들이 여러분의 영감을 돋구어줄 것입니다.(번역)

여기 38개의 HTML5로 디자인된 사이트들이 여러분의 영감을 돋구어줄 것입니다.(번역)

HTML의발전에서 HTML5는여태개발되었던사이트들의신선한공기처럼다가왔습니다. “플래시킬러” “새로운거대한것” “미래의웹디자인” 등의수식어가붙은 HTML5가우리들에게다가오고있습니다. 심지어웹디자이너에게도 HTML5는다시한번우리들을즐겁게만드는데놀라운툴로다가왔습니다. 여기작은웹의수집이 HTML5로써의구조화가말해주는즐거움을알려줄것입니다. (역자주 : 솔직히아래사이트들전부다추천입니다.. 제겐솔직히신선한디자인적충격을안겨주었습니다.) 트론웹사이트 HTML5 캔버스의요소들을정말놀라우리만큼잘사용했습니다. 즐겨보세요. 자라미디어디자인 디자인에이전시회사의홈페이지로컨텐츠를매끄러운가로스크롤로보여줍니다. Karlsruhe의블로그 비주얼라이즈( visualise) 캐나다의마이크로블로깅플렛폼입니다. 버튜티디자인스튜디오 퓨마웹사이트 토오타프리우스프로젝트     와이어드마인드 와이어드마인드는 Wored.co.uk의컨텐츠를다른방식으로탐험해볼수있는시각효과를제공해줍니다. MS의 IE 9브라우저와파트너쉽을맺고매우빠른표준브라우저에서여러분이할수있는것이무엇인지를보여줍니다. (역자주 : 상당히시각적이면서도놀라운디자인과브라우징방법을보여줍니다. 꼭꼭방문해보시기를추천합니다.) 황야의시내(the wilderness downtown) 불릿에이전시(The Bullit Agency) 미칠듯한효과로아티스트들을보여줍니다. 슬라이드바없이부드럽게컨텐츠를이동하고, 메뉴들이위치를이동합니다. (역자주 : 정말멋진사이트입니다. 꼭방문하셔서멋진디자인효과를살펴보시길..) S5 스타일포트폴리오(…)

Sinuous – 빨간공 피하기. <canvas>를 사용한 게임(간단리뷰)

Sinuous – 빨간공 피하기. 를 사용한 게임(간단리뷰)

Sinuous는 아주 간단하고 단순한 공피하기 게임입니다. 마우스 조작으로 떨어지는 빨간 공을 피하는 게임인데, 예전의 “뷃뛟” 이라는 게임이 생각나는군요. ㅎㅎ(아마 이 게임이 곰플레이어 안에 있었죠?)   게임은 단순하지만, 마우스로 조작해서 생각보다 미세 컨트롤이 되지 않기 떄문에 어렵습니다. 구글 계정을 통해 리더보드에 점수를 기록할 수도 있습니다.     위와 같이 빨간공 이외에도 실드, 타임 등의 아이템이 떨어집니다.(…)

HTML5 Canvas를 활용하는 유용한 사이트 세가지(번역)

HTML5 Canvas를 활용하는 유용한 사이트 세가지(번역)

HTML5의 캔버스 요소를 사용해서 게임을 반드는 데 관계된 괜찮은 3개의 사이트를 소개합니다.   Auto-Resizing HTML5 Games (HTML5 Rocks) Derek Detweiler 라는 Gopherwood 스튜디오의 게임 디자이너로써, 그들은 HTML5 를 통해 모바일 폰에서 호환 가능한 게임을 만들었다가 대부분의 스마트폰이 그들의 게임 일부분만 보여주는 것을 보고 어떠한 해상도에서도 게임을 원활하게 보여줄 수 있는 방법에 대해 생각하였습니다. 그러면서 그들이 생각한(…)

Free HTML5 Template

Free HTML5 Template

HTML5 와 CSS3 로 이뤄진 템플릿을 무료로 약 200여개를 제공해 주는 사이트 입니다. 정확히 퀄리티가 어느정도인지는 모르겠지만, 가볍게 HTML5 사이트를 만들거나 구조를 참조할 때 좋을 것 같네요. ^^ 회원 가입 안해도 다운로드 가능하고, 데모를 보는 것도 쉽습니다!   URL : http://freehtml5templates.com/

Ryan Delaney * Design and Web

Ryan Delaney * Design and Web

Ryan 이라는 뉴질랜드의 웹디자인과 웹개발을 함께 하는 분의 개인 홈페이지 입니다. 전체적으로 색감도 훌륭하고, 사이트 구성도 좋습니다. 메인 화면에 떨어지는 볼이 정말 볼만 하더군요. 아마 대표적인 노 플래시의 형태가 아닐까 싶은데, 앞으로 개인 포트폴리오 홈페이지도 저런 식으로 바뀌어가지 않을까 싶습니다. (참고로 메인화면의 떨어지는 원은 클릭하면 따라옵니다 🙂   다만 컨텐츠가 많이 없고, 소스를 보기 힘든(…)

HTML5 Rocks

HTML5 Rocks

  HTML5 Rocks 는 HTML5와 관련된 다양한 튜토리얼이 올라오는 곳입니다. 구글 IO에서 본 사이트를 통해 HTML5를 소개하는 PT를 할 정도로 다양한 컨텐츠가 존재하는 곳입니다. 이미 이곳 html5 한국 사이트 에서도 이곳의 튜토리얼을 번역하려고 많이 노력하고 있습니다. 여타 사이트 보다 가장 빠르게 컨텐츠가 올라오는 곳이라 생각되며, 특히 구글 IO에서 소개된 HTML5 의 PT자료(http://slides.html5rocks.com/#landing-slide) 는 상당히 유명합니다.(…)

Cultural Solutions UK

Cultural Solutions UK

영국의 리서치, 플래닝, 이벤트 관리 전문 회사입니다. 우리나라에는 이런 개념의 회사가 없어서 저도 정확히 무얼 하는지는 모르겠지만, 사이트 하나는 정말 멋있습니다. 세로로 긴 페이지 구성에 각 프레임 간의 스크롤 이동 애니메이션, 웹 폰트의 적절한 사용 등, html5 사이트로써 의미하는 게 많은 것 같습니다. 보니깐 정말 갑자기 사이트 하나 만들고 싶어지네요.. ^^ URL : http://culturalsolutions.co.uk/

Essen : a Taste Magazine

Essen : a Taste Magazine

  Essen 은 음식, 맛과 관련된 잡지입니다. 전체적으로 jQuery를 많이 사용했으며, 메인화면은 bxslider를 사용한 슬라이더 효과를 보실 수 있습니다. 최적화를 잘 해 두어서 테스트 해본 결과 아이패드, 아이폰에서도 딱 맞게 잘 나오네요.   WAI-ARIA(웹 접근성 주도 – 접근가능한 리치 인터넷 어플리케이션) 을 사용해 접근성을 넓혔으며, header, nav, section, article,footer 와 같은 HTML5 의 테그를 사용하였습니다. 새로운(…)

Luca Vercellio Web Design

Luca Vercellio Web Design

Luca Vercellio 라는 이탈리아의 웹 디자이너의 개인 사이트 입니다.   modernizr 1.7 을 사용하였고, Google 의 Web Font 를 사용하였습니다. 이 사이트에서 구글 코드의 Web Font API(http://code.google.com/intl/ko-KR/apis/webfonts/) 를 처음보게 되었네요. 꽤 괜찮은 기술 같은데, 국내엔 많이 알려지지 않은 것 같습니다.   이외에도 section을 잘 나누고 네비게이션을 활용하였으며, html5 gallery, 101 best html5 sites 등에 소개되었습니다.(…)

Apple – HTML5 쇼케이스

Apple – HTML5 쇼케이스

  애플에서 운영하는 HTML5 쇼케이스 입니다. HTML5를 사용하여 비디오, 타이포그라피, 갤러리, 회전/투명, 오디오, 3D, VR 등을 보여주고 있습니다.   다만 사파리가 아니면 사파리를 설치하라고 나오는데요, 크롬에서는 잘 되는걸 봐서는 아마 WebKit에 최적화된 사이트가 아닌가 싶습니다.   참고로 애플은 WebKit 오픈소스를 이끌고 있습니다.