'패러럴스'에 해당되는 글 1건
[Web design, 웹디자인] 스크롤 인터랙션의 웹사이트 디자인
Design portfolio/Design interest



요즘 웹사이트의 디자인이 다양한 형태로 변화하고 있다.

새로 생겨나는 웹 사이트 디자인 구조를 살펴보면 

기존 기본적인 클릭해서 페이지가 넘어가는 디자인구조에서

마우스 휠 스크롤 방식을 이용하여 웹사이트 디자인을 제작하는 경우가 많다.


이러한 방식은 포털 사이트나 많은 카테고리가 존재하는 웹사이트보다는

어떠한 정보를 보여주는 인포그래피 디자인을 하는데 꽤 유용하게 쓰인다.


아무래도 클릭해서 넘어가는 웹사이트들 보다는 그래픽적 효과가 꽤 큰 것들이 많다.


이 스크롤 인터랙션을 이용한 웹사이트 디자인 유형을 크게 2가지 정도로 나눠볼 수 있다.


1. One Page Design 원페이지 디자인


2. Parallax Scrolling Design 패러럴스 스크롤링 디자인



첫번째원페이지 디자인은 말그대로 웹사이트 자체가 길게 디자인 된것으로

스크롤을 내려가면서 카테고리가 구분되는 것이다.


요즘엔 해외 스튜디오나 소규모 회사에서 자신들을 소개하고, 포트폴리오를 보여주는데

종종 쓰이는 것을 볼 수 있다.




이러한 원페이지 디자인들을 모아놓은 디자인 사이트도 존재한다.





http://onepagelove.com


위 사이트를 들어가면 원페이지도 디자인된 사이트들을 모아 소개해주는 것을 볼 수 있다.




그 외에도 참고할 만한 사이트 몇가지





http://nasaprospect.com/


나사 프로젝트를 그래픽으로 만들어놓은 사이트다.

기본적으로 스크롤을 내리면 중앙의 인물의 행동이 변화하면서

화면에 정보들과 그 이외의 그래픽들이 나타난다.


패러럴스처럼 시차를 많이 이용하지 않았지만 그래픽이 다양한 모습으로 변화하고

나타나는 걸 보면서 사용자가 지루하지 않게

웹사이트의 내용을 구경할 수 있다.







http://www.rememberum.com/steve-jobs-tribute/


스티브잡스 추모 사이트.

컴퓨터의 Pixel을 이용한 전체적인 디자인이 스티브잡스와

딱 맞아 떨어지는 콘셉의 사이트이다.

좋은 콘셉인듯.

스티브잡스의 일대기를 길게 원페이지로 디자인하여

스크롤을 내리며 그 내용을 볼 수 있다.






http://www.dangersoffracking.com/


나사 사이트처럼 인포그래피 사이트인데 스크롤링 기법을 잘 이용한 경우이다.

사실 마우스 휠을 내리는 웹사이트를 디자인 하려면 

사이트의 내용과 스크롤링의 컨셉이 가장 잘 일치해야 효과적이라고 생각한다.


그런면에서 위사이트의 경우, 화면 중앙의 물방울을 기준으로

주위의 여러 요소들이 바뀌면서 다양한 그래픽이 변화하는 걸 볼 수 있다.

점점 스크롤이 내려갈수록 그에 맞는 정보를 얻는다는 면에서

스크롤 기법을 적절하게 잘 활용한것 같다.









http://carlespalacio.com/


포토그래퍼의 웹사이트이다.

크게 13장의 사진이 현재 나오고 있는 상태며,

마우스 휠을 내리거나 키보드 상하버튼을 이용하여 

사진이 반으로 나눠지며 위아래로 움직이면서 다음장으로 넘어가는 인터랙션이 일어난다.







http://scytale.pt/


음, 요즘 많이 이용되고 있는 회사 소개 원페이지 디자인이다.

스크롤을 내리다보면 약간의 패러럴스 기능이 보이긴하지만 미미한 정도.

behance사이트에서 웹사이트 디자인을 보면

이런식으로 개인이나 회사의 소개와 포트폴리오 사이트로

이 원페이지 디자인 형식을 많이 이용하는걸 볼 수 있다.






다음은 Parallax Scrolling 기능이 도드라지는 사이트들이다.





http://www.nike.com/jumpman23/aj2012/


Parallax 기능의 다양함을 볼 수 있는 대표적인 나이키 웹사이트.

나이키는 이전에도 나이키의 Nike better world 사이트를 통해

패러럴스 웹디자인을 이용했고, 나 또한 이를 통해 패러럴스 기능을 알게 됐다.


Nike better world는 몇 년전, 사이트 디자인이 바뀌면서 지금 현재는 패러럴스 기능이 빠지고 

일반적인 원페이지 디자인을 갖추고 있다.






http://www.iutopi.com/


위 사이트는 그래픽을 이용하여 패러럴스 기능을 잘 활용한 사이트라고 생각한다.

그래픽을 이용한 패러럴스 인포그래피 사이트.

사실 그래픽이 많길래 별 기대를 안했는데 

스크롤을 내리면서 여러 정보들과 그래픽들이 

재미있게 움직이는 것을 볼 수 있다.


오른쪽 상단에 보면 잘만든 웹사이트를 소개하는 사이트들에서

베스트 디자인으로 많이 선정된 걸 볼 수 있다.





사실 스크롤 인터랙션이 일어나는 웹사이트들을 정확하게 분류하기는 힘들다고 생각한다.

더군다나 아직 디자인을 공부하는 단계이고,

웹 인터랙션이 다양해지고 있는 시점에서 

내가 그걸 분류한다는건 말이 안된다고 생각한다. 


그래도 스크롤 웹사이트의 개념과 다양한 사이트를 소개하고자 글을 남긴다.



이외에도 스크롤을 내리기는 하지만 화면상에서 위아래로 이동하는 것이 아니라

옆으로 이동하거나 이미지가 변화하는 다양한 인터랙션을 지닌 사이트들도 많다.






http://www.bagigia.com/


가방 사이트인데 스크롤을 내리면서 가방이 여러각도로 돌아가면서

가방의 모습을 볼 수 있다.








http://www.echurrascobbq.com.au/


스크롤을 내리는 사이트는 아니지만

화면의 버튼을 누르면 콘텐츠의 화면이 위아래로 이동하는 인터랙션을 볼 수 있다.





기본적인 원페이지 디자인부터 시작하여 

다양한 인터랙션을 추가한 사이트들이 점점 늘어나면서

사용자들을 즐겁게 해준다.






세상엔 다양한 사람들이 존재하고 창의적인 디자이너와 개발자들이 많다.

존경스럽다.





참고 _ 다양한 스크롤링 사이트를 소개한 글


http://designbeep.com/2012/11/24/showcase-of-one-page-websites-with-animationswhile-scrolling-down/







저작자 표시 비영리 변경 금지
신고
Creative Commons License
Website Designing Company 2013.06.14 17:21 신고 URL EDIT REPLY
나는 당신의 모든 기사를 읽고 아주 좋은 도움이 될 것입니다
SEO India 2013.06.14 17:22 신고 URL EDIT REPLY
나는 귀하의 SEO 관련 기사를 읽고 아주 좋은 도움이 될 것입니다
qq 2014.07.10 10:42 신고 URL EDIT REPLY
소개한 사이트 들어가보고싶은데 주소 클릭이 안되어서 불가능합니다 주소가 길면 외워서 치기 힘듭니다
훈의 2016.11.23 13:53 신고 URL EDIT REPLY
드래그가 막혀있고 링크도 안걸려있어서 볼수가 없습니다.
Name
Password
Homepage
Secret

티스토리 툴바