고정 헤더 영역
상세 컨텐츠
본문
오늘은 아주 근사한 사용자와 상호작용이 뛰어난 30개의 웹사이트를 소개하려고 합니다. HTML5, CSS3, 그리고 자바스크립트가 많은 가능성들을 열어준 덕분에 요즈음의 웹 디자인은 아주 인터렉티브하고, 레이아웃은 더 이상 정적인 것에 국한되지 않습니다. 지금부터 소개드릴 30개의 사이트들은 패럴랙스 스크롤 기법을 멋지게 구현하기 위해서 필요한 기본적인 트랜지션 효과에서부터 오디오와 비디오들과 같은 리치미디어 프레젠테이션까지 이르기까지 인터랙티브 웹 디자인의 굉장히 좋은 사례들입니다. 즐겁게 감상해 보시길 바랍니다.
비엔빌캐피탈 매니지먼트 (Bienville Capital Management)
비엔빌캐피탈 매니지먼트 사이트는 아주 원활하게 페이지 전환이 이루어 지고 있습니다. 사이트를 여기저기 클릭해 보세요. 페이지 전환시에 어떤 리다이렉션도 없이 페이딩과 슬라이딩 애니메이션에 의해 부드럽게 전환된다는 것을 발견하실 것 입니다.
툴 오브 노스아메리카 (Tool of North America)
얼핏 보면, 툴 오브 노스아메리카 사이트는 플래시로 구축된 것 같아 보이지만, 굉장히 매끄러운 애니메이션은 사실 자바스크립크와 HTML5 그리고 CSS3에 의해서 오롯이 구현되고 있습니다. 유일한 단점은 컨텐츠가 검색엔진에 부합하지 않는 Ajax에 의해 구현되었기 때문에 검색엔진에 노출되지 않는다는 점과 만약 자바스크립트를 허용하지 않으면, 빈 페이지(Blank Page)가 나타난다는 것입니다. 이와 같은 검색엔진 최적화(SEO)와 웹 접근성 이슈에도 불구하고, 인터랙션은 놀랄 만하며, 모바일에서도 아주 훌륭하게 동작 합니다.
화이트보드 사이트의 백그라운드 블러(Blur) 효과는 감탄사가 절로 나올 정도 입니다. 브라우저를 모바일 환경과 유사하게 좁게 만들거나, 모바일 환경에서 확인해 보는 것을 권해드리겠습니다. 메뉴 아이콘을 클릭하면 배경이 블러(Blur) 효과를 이용해 전환되는 것을 확인 하실 수 있습니다.
두말할 것 없이, 아름다운 일러스트들이 패럴랙스 스크롤 기법에 의해 구현된 사이트!
Mahedine의 사이트의 메인 백그라운드는 191개의 이미지(470*264px, 56kb)가 사용자의 스크롤링에 따라 프레임 기법을 통해 애니메이션 됩니다.
The Life of Pi jorney 사이트는 패럴랙스 스크롤링과 프레임 애니메이션을 한 차원 높은 레벨로 끌어올렸습니다. 영화를 좋아하신다면, 이 웹사이트를 스크롤링 해보는 것은 아주 즐거운 경험이 될 것 입니다. 스크롤링에 따라서 프레임기법 애니매이션 속의 장면들을 보게 되실 텐데요. 100개 이상의 이미지들이 공들인 자바스크립트와 CSS3 작업을 통해 만들어 내는 결과물을 보시면 어쩌면 숨이 막히실지도 모릅니다.
Teehan+Lax의 모든 스토리들은 각기 아름답고도 정교한 디테일로 충실하게 구현되었습니다. 컨텐츠는 아름다운 글꼴의 구성과 그리고 미묘한 애니메이션 효과에 의해 표현되었습니다. 페이지의 중간에서 사용자가 스크롤을 위쪽으로 조작하면, 탑네이게이션 바가 아래쪽으로 슬라이딩 되고, 스크롤을 아래쪽으로 움직이면 다시 위쪽으로 슬라이딩 되는 섬세한 UX 디테일 또한 놓치지 말고 확인해 보세요. 이 디테일은 완벽히 논리적인데요. 아래로 스크롤 한다는 것은, 계속 읽기를 원한다는 것이니, 네비게이션 바의 방해를 받고 싶지 않을 것이고, 위쪽으로 스크롤링 하다면, 다른 페이지로 이동하고 싶어하는 경우일 수 있으니, 네비게이션 바를 제공해 줍니다.
커피서핑 일리 사이트의 페이지 전환은 위에서 언급한 비엔빌캐피탈 매니지먼트 사이트와 같이 완벽히 매끈하지는 않지만, 페이지를 스크롤링 하면, 페이지는 반으로 나누어 각기 반대 방향으로 스크롤링하는 반 페이지 스크롤은 흥미롭습니다.
사토리산은 아주 좋은 쇼핑몰 디자인입니다. 메인 페이지에서 스크롤과 드래그가 가능한 수평 리스트를 통해서 모든 제품을 볼 수 있고, 제품을 클릭하면 패럴랙스 스크롤을 통해 상세 페이지로 전환 됩니다.
윙크 TTD는 반응형 인터랙티브 웹사이트를 탁월하게 구축했습니다. 아이맥의 대 화면이던, 아이폰 작은 화면이던, 어떤 화면에서 접속하던지 간에 디자인과 애니메이션은 매우 일관적입니다.
디자인과 인터랙션의 관점에서, 솔라시에 사이트는 단연 최고의 찬사를 받을 만 합니다. 리치미디어 컨텐츠(갤러리 이미지, 음악 그리고 비디오)를 즐길 수 있는 사이트를 브라우징 하는 것은 즐거운 경험이 되어줍니다. 유일한 문제라면, Ajax로 구현되었기 때문에 컨텐츠가 검색되지 않으며, 페이지 URL을 공유하기 어렵다는 검색엔진 비최적화와 웹 접근성 이슈입니다. Ajax로 구현된 사이트의 일반적인 문제이긴 하지만 공유 페이지의 URL 표시 줄에 앵커 태그를 제공하는 경우도 종종 볼 수 있습니다.
REI 1440 프로젝트 사이트의 타임라인 프레젠테이션은 "minute-by-minute" 타임라인으로 24시간을 구성한다는 그들의 컨셉에 매우 적합합니다. 화살표키를 이용해서 타임라인을 탐색하면 마우스 조작 시간을 절약할 수 있습니다. 디자인 컨셉은 물론 기술적으로도 뛰어나게 구현된 클락 타임 셀렉터도 체험해 보세요.
네비게이션 메뉴의 텍스트 마스킹은 사이트에 활력을 불어넣어 주고 있습니다.
에이전시 어노니머스는 고객에게 좋은 디자인을 제공할 뿐 아니라, 자신들의 포트폴리오도 근사하게 꾸며놓았습니다. 얼굴 실루엣으로 마스크 처리된 이미지들은 아주 기발합니다. 이 포트폴리오는 Ajax로 구현되는 것 같아 보일 수도 있지만 실제로는 별도의 페이지들입니다. 아이템들을 스코롤링 할 때 나타나는 the year bubble tooltip의 작은 디테일을 놓치진 않으셨죠?
비트 박스 아카데미는 키보드를 이용해서 드럼 비트를 만들어 볼 수 있습니다. 저장하거나 비트를 내보낼 수 없기 때문에 다른 목적으로 활용할 순 없지만, 패럴랙스 스크롤링이 아주 잘 구현되었고 그냥 만들어 보는 것 만으로도 충분히 재미있으실 겁니다.
콰르츠는 콘텐츠를 가장 우선시 합니다. 대부분의 뉴스나 사설을 제공하는 사이트들이 전체 기사를 읽기 위해서는 클릭을 해야 하는 것과 달리, 코르츠는 한 페이지에 전체 내용과 모든 기사를 표시하고 있습니다. 주소 표시 줄에는 공유의 편리성을 위해 사용자가 스크롤 하는 해당 기사의 URL이 자동으로 업데이트 됩니다. 모바일 환경에서도 동일한 경험을 제공하고 있습니다.
페럴랙스 스크롤링 기법을 좋아한다면, 이반스 할쇼의 본드 자동차 사이트를 놓칠 순 없겠죠.
페럴랙스 스크롤링 사이트의 다른 예
만일 지금까지 살펴본 패럴랙스 스크롤 기법의 사이트들이 단언컨대, 최고라고요? 아래의 푸조 하이브리드4 사이트를 살펴볼 때까지는 최고의 찬사는 이른 것 같습니다. 좋은 일러스트레이션, 키 프레임 애니메이션, 멋진 사운드 효과 그리고 훌륭한 트랜지션 효과까지. 사이트에 접속 하기 전에 스피커를 켜는 것을 잊지 마세요.
크라이슬러: 테스트 오브 오너쉽 (Chrysler: Test of Ownership)
크라이슬러의 테스트 오브 오너쉽 사이트는 페이지 전환의 또 하나의 좋은 본보기 입니다. 페이지 전환시에 레이아웃과 컨텐츠들이 멋지게 전환되는데요. 푸르프 페이지의 아름다운 애니메이션은 언급할 필요도 없을 것 같습니다. 아래쪽으로 스크롤링 하면 숫자, 차트 및 그래프들이 애니메이션 되고, 위쪽으로 스크롤링하면 반대로 애니메이션 됩니다. 간단하지만, 아주 멋지게 말이죠.
팅크 사이트에서는 스크롤링을 통해서 모든 제품의 전체 모습을 손쉽게 살펴볼 수 있습니다. 사용자 반응형이 아니라는 것은 아쉽네요.
경찰 사이트 중에서 Ajax와 페럴렉스 스크롤링 되는 이런 간지나는 사이트를 본 적이 있으신가요?
2am 미디어 사이트의 나무 가지 스타일 메뉴를 보면, 플래시로 구축된 올드 스쿨 스타일을 떠올리시겠지만, 플래시가 아니라 자바스크립트로 구현된 것이라면 얘기가 다르겠죠!
뛰어난 사용자 경험을 제공해주고 있는 스티븐 버게스가 제작한 미니멀 몽키는 심플한 사이트 같지만, 레이아웃, 페이지전환, 네비게이션등의 모든 요소들이 사용자 반응형에 적합하도록 세심하게 고려되어 있습니다.
아테노스는 디자인 디테일 및 페이지 전환 효과가 많은 사랑스러운 사이트입니다. 이 사이트의 2.5mb의 가벼운 GIF 애니메이션은 요즘 많은 사이트들이 ‘멋지니까’ 라는 미명 아래 무거운 파일들로 불필요한 과부하를 주고 있다는 것을 꼬집기라도 하는 것 같습니다. 아름다움이 파일사이즈와 비례하는 것은 아니니까요.
Meng To는 대담한 이미지와 플라이 인 애니메이션을 이용해서 자신의 작품을 아주 멋지게 표현했습니다.
에이전시 레드의 사이트는 놓쳐서는 안될 디자인 디테일과 애니메이션 효과들로 가득 차 있습니다.
드래그 앤 드립 방식으로 네비게이션 하는 올드 스쿨 스타일의 플래시 사이트의 추억에 젖어 보고 싶으셨다면, 카본스튜디오가 딱 입니다.
오클리 에어 브레이크 MX 사이트는 패럴랙스 스크롤의 말도 안되게 멋진 예입니다. 제품 투어는 보고도 못 믿을 정도로 근사하네요.
닉 존스의 사이트는 좀 구식같이 보일 수도 있겠지만, 인터랙션 디자인에 있어서는 여전히 아주 뛰어납니다.
더 많은 사이트를 보시려면,
소개 드린 대부분의 사이트들은 베스트 웹 갤러리에서 소개된 것으로, 영감을 불러일으키는 사이트들을 선정해 주시는 차드 뮬러씨에게 감사 말씀 드립니다. 베스트 웹 갤러리에서 더 많은 사이트들을 확인해 보세요.
원문 링크) 30 Great Interactive Sites
<번역>
Staff Editor : Eunice Chung | http://www.facebook.com/unee.chung
※ 본 기사는 웹진 '디자인로그(designlog.org)' 독자와 페이스북 'Design' 페이지 팬들이 디자인 인사이트를 넓히는데 도움을 드리기 위해 해외 디자인 트렌드 매거진과 블로그 기사를 바탕으로 세 분의 Staff Editor가 한국어로 번역하여 제공되고 있습니다.
콘텐츠의 모든 저작권은 원문 링크의 해당 블로그에 있음을 밝혀 둡니다.
댓글 영역