'2013/06'에 해당되는 글 13건
What time is it now...?
Design portfolio/Daily illust


What time is it now....??






도대체 지금 시간이 몇시당가...?


낮인가 새벽인가...


내가 작업하다 몇시에 잔거지....






저작자 표시 비영리 변경 금지
신고
Creative Commons License

'Design portfolio > Daily illust' 카테고리의 다른 글

What time is it now...?  (0) 2013.06.20
What the hell HTML!!  (0) 2013.06.10
I'm hungry :(  (0) 2013.03.20
Story start  (0) 2013.03.20
Name
Password
Homepage
Secret
[Flat design series ③] 플랫 디자인 앱 - iOS 아이폰 기반
Design portfolio/Design interest
이전 포스팅들에서 플랫디자인에 대해 알아보고
안드로이드 앱 중에서는 플랫 디자인이 어떤 것들이 있는지 알아보았다.




포스팅 시리즈 보기





이번에는 아이폰 앱중에서 플랫디자인으로 된 것들을 알아보자.

대부분의 아이폰앱들은 스큐어모피즘 스타일로 디자인 된것들이 많다.







<Dribbble app icon 검색 화면 캡쳐>


드리블에서 app icon을 검색하고 이전페이지로 몇장 돌아가면
스큐어모피즘 스타일의 디자인을 볼 수 있다.


그러나 이런 디자인들 사이에서도
최근 플랫 디자인 형식의 앱이 늘어나고 있다.




City guides National geographic







내가 좋아하는 내셔널 지오그래픽
시티가이드 앱으로 기본적으로 제공하는 정보 이외
자세한 정보를 위해서는 유료 결제를 해야한다.

물론 런던, 파리, 뉴욕, 로마 네 도시밖에 없어서
내가 아직 쓸일은 없지만.

언젠가 쓸일이 생길거라 본다.....

얼른 서울도 생겼으면 좋겠다

이 앱에서 재미있는건 8, 9째 화면 페이지에서 나타나는 인터랙션이다.

음...동영상은 없기에 다운받아서 실행해보면 알 수 있다.





Feedly








음...이건...뭔가 명확하게 어떤 앱인지 모르겠다....

디자인 때문에 다운받은 앱이고,
영어앱이라...활용도도 낮고....

디자인만 참고하자..

앱 디자인에 비해 로고는 좀..개인적으로는 별로긴하지만
상단바 디자인이 마음에 드는 앱이다 ㅋㅋ




Flava








플라바는 오래전에 다운받았지만,
에버노트 프리미엄계정을 이용하게 된 후로
거의 이용을 하지 않았다.

물론 에버노트와 플라바는 조금 다른 목적이긴 하지만
에버노트는 다 가능하니깐....

처음 받았을때는 이런 디자인이 아니었는데
어느 순간 업데이트되면서 플랫디자인으로 바뀌었다.
아이콘들도 많이 추가 되기도했다

써보려고 노력은 하지만...
요새는 하도 이런 앱들이 많아...여러개 쓰기가 힘들다...







Jetsetter







부킹이나 아고다처럼 숙소를 예약할 수 있는 앱이다

전체적으로 화이트 톤과 그레이, 블랙 그리고 타입만을 이용하여
제공하는 정보에 시선이 잘 갈 수 있도록 구성된 것이
좋은 디자인인 것 같다.

개인적으로 나는 요런것이 참 마음에 드는 편이다.

이 앱을 아직 쓰지는 않지만...
숙소사진 구경하는 재미도 쏠쏠하다





Krop circle










요건 플랫 디자인의 진수를 보여주는 앱...?

카메라 앱이다 
정말 심플하다

동그라미 외에도 별모양 등 다양한 모양으로 카메라를 촬영할 수 있는 앱

궁금한 사람은 다운받아보긔





Mavansay







이 앱 참 이쁘다

메인 컬러는 유지하되, 포인트 컬러를 이용해서
카테고리별 정보를 쉽게 알 수 있도록 했다.

비디오기반인 앱인데
많이 써보진않았다.




Timehop







완전 내스타일 

이 앱에서 포인트는 저 공룡이다 공룡!!!

너무 완소 캐릭터다

전체적으로 심플한 디자인에서 화면을 아래로 잡아당겨
새로고침할때마다 나타나는 공룡을 보다보면...

나도 모르게 계속 화면을 잡아당기게 된다 

이건 뭐 앱 켜놓고 다른 페이지는 후다닥 살펴만 보고 각 페이지마다
화면 당겨보면서 공룡 나타나는지 살펴보고
저 공룡만 수십번 쳐다본거 같다





Vine








이것도 비디오 기반앱이다.


음.....








Yahoo weather






예전에는 오늘어때 날씨앱만 썼었는데
앱스토어에 올라와있길래 다운받아본 야후 날씨앱!

이게 웬걸 
길걷다 돈주은 기분 ??? 

도시를 등록하면 각 도시 대표사진들과 현재 시간과 날씨 상태에 맞는 사진들을 보여준다.

새벽에 켜보니깐 안개낀 사진이 뜨더라

세번째 화면에서 아래로 스크롤을 내리면 바로 정보들을 확인할 수 있다.

정보들도 백그라운드가 블러처리되면서 눈에 잘 들어올 수 있게 되어있고,
해와 달 정보도 알려준다


날씨 앱들이 예쁜 디자인이 많이 나오는 편인데
야후 날씨앱은 플리커 서비스의 사진들을 이용하여
잘 만든 것 같다.
서비스 콘텐츠를 잘 활용한 사례랄까.


그리고 내 폰은 아이폰 4라 화면이 좀 작은 편인데
앱을 키면 전체화면이 되면서
맨 상단의 핸드폰 정보도 사라져서 그게 제일 좋다!





iOS기반의 플랫디자인 앱을 몇가지 찾아봤다.
 
앞의 안드로이드 기반 앱에서 소개했듯이
아이폰에서도 구글 앱들은 대부분 플랫디자인들이다.

그러나 구글앱 말고도 다른 플랫디자인앱들을 찾았기에 그것들을 소개해봤고,

다음 포스팅에서 안드로이드 기반과 아이폰 기반의 구글앱 비교를 해볼 생각이다.





<위 앱 사진들은 모두 본인 폰에서 캡쳐한 화면들이다>





저작자 표시 비영리 변경 금지
신고
Creative Commons License
눈보라소년 2013.07.03 11:18 신고 URL EDIT REPLY
feedly는 rss 구독 앱입니다. 구글이 구글리더를 접는다고 한 이후로 엄청 주목받았죠 ㅎㅎ 아니나다를까 7월1일(구글리더 닫은날) feedly 서버가 다운되었다고 하더군요
Basix 2014.07.31 22:51 신고 URL EDIT REPLY
http://lab.rayps.com/lsg/
이런 포토샵 플러그인도 있네요 :)
Name
Password
Homepage
Secret
[Flat Design series ②] 플랫 디자인 앱 - Android 안드로이드 기반
Design portfolio/Design interest



앞의 포스팅에서 플랫디자인에 대해 알아보았다.




포스팅 시리즈 보기


[Flat Design series ①] 플랫 디자인이란?

[Flat Design series ②] 플랫 디자인 앱 - Android 안드로이드 기반

[Flat Design series ③] 플랫 디자인 앱 - iOS 아이폰 기반 



그럼 안드로이드 앱 중에서 플랫디자인은

어떤 것들이 있는지 알아보자




요즘 멋진 디자인의 앱들을 제공하는 구글 앱




Google +






구글 컬러들을 이용하여 별다른 효과없이 디자인 된 구글 플러스이다.


자칫 잘못하면 없어보일수도 있는걸 컬러를 이용하여 포인트를 준것이

적절하게 사용된 앱이다.

세번째 이미지의 캐릭터들은 ...아, 귀여워 죽겠다 ㅋㅋㅋ




http://bit.ly/10ZSROq


위 링크를 가보면 새롭게 디자인 된 Google visual assets guidelines 을 볼 수 있다.

구글 디자인의 가이드라인으로 스타일과 컬러 등 자세하게 나와있다.








Google keep





구글 킵은 입력을 하면 컬러별로 메모지가 붙는데 

심플하면서도 깔끔하고 예쁘게 페이지들이 완성된다.







Runkeeper







운동앱인데 전체적으로 그레이와 포인트 컬러 블루를 이용하여 

심플한 디자인이다.


중간중간 벡터 그래픽들을 삽입하여 

지루하지 않게 해주고 있다.


물론 두번째 이미지에서 사람모양 그래픽이

머리사이즈가 조금씩 바껴서 아래쪽은 대두가 되버려

좀 통일감이 부족하기도 하지만

그래도 뭐..깔끔한 디자인이다.







Expense manager






가계부 앱인데 컬러로 포인트를 주고

카테고리별로 정보를 잘 파악할 수 있다.






Xero





써보진 않고 디자인때문에 받아보기만 한 앱이라 무슨앱인지 잘 모르겠지만..

네비게이션 탭 상태라던가, 현재 페이지의 글 하이어라키등이

잘 짜여져 있는 앱이다.








안드로이드 앱들을 보면 위와 같은 플랫 디자인이 많은 편이고, 

저 상태에서 그라데이션 혹은 스트로크가 들어가는 정도도 있다.



iOS의 경우, 고정 해상도이기 때문에

화면구성과 요소등에 많은 효과들을 넣어도

디자이너가 원하는 대로 모바일에서 구현이 된다.



그러나,

안드로이드의 경우 기기마다 해상도가 달라지는 경우가 많아

개발쪽에서 해결할 수 있는 플랫 디자인이 더 유용하다고도 볼 수 있다.


iOS앱들처럼 Gradient, bevel 등 

정해진 해상도에서 효과가 들어간 디자인은

기기가 변경되면 초기 디자이너가 원하던 디자인이

제대로 구현되지 않는 경우가 생기기 때문이다. 


세로로 길어지거나 가로로 늘어나거나

앱이 깨진다거나 그런 현상이 생길 수도 있다.





그럼 다음 포스팅엔 아이폰 앱들 중에 플랫 디자인을 살펴봐야겠다.







저작자 표시 비영리 변경 금지
신고
Creative Commons License
Name
Password
Homepage
Secret
[Brand Design] Bird protection society 조류보호협회 Logo design
Design portfolio/Design work



Bird protection society

조류 보호 협회


When

2011.12


What

조류 보호 협회의 로고를 디자인하고

그에 따른 어플리케이션 제작.

SOKI 로고디자인 부문 수상작.






새집에 조류 보호 협회 로고의 심볼 목업






로고 디자인을 먼저 하고

전체적인 브랜드 어플리케이션 제작.

멸종위기 새들을 소개하는 인포메이션 모바일 앱 디자인 중.


마무리되는대로 업데이트!






저작자 표시 비영리 변경 금지
신고
Creative Commons License
Name
Password
Homepage
Secret
[Flat Design series ①] 플랫 디자인이란?
Design portfolio/Design interest


포스팅 시리즈 보기






Flat Design 이란?




얼마 전 iOS7 이 공개되면서 화제를 일으키고 있다.


기존 애플의 아이덴티티와도 같았던 디자인 스타일을 버리고

더 심플해진 디자인으로 나타났다.





<apple.com>






리얼메타포 스타일을 지양하고 플랫 디자인 스타일을 지향하는 iOS7 이 발표되었다.


이 디자인 스타일이 대체 뭐길래

애플이 대 변신을 하였을까?





Flat 의 사전적 정의 

 평평한, 편평한



Flat design이란 쉽게 말하자면 

여성들의 바닥이 평평한 신발을 플랫슈즈를 일컫듯이

디자인에서도 입체감을 주는 디자인이 아니라

평평한 느낌을 주는 것들이 Flat design 이라고 보면 된다.





구글에 flat design 이라고 검색해보자




<flat design 구글 검색 캡쳐 이미지>



검색결과를 보다보면 전체적으로 기존 모바일 디자인에 비해 심플한 것을 알 수 있다.

플랫 디자인은 디자인의 입체적인 기능을 빼고 drop shadow, bevel, gradient 등 

여러가지 효과들을 빼고 기본적인 요소들을 레이아웃, 대비 등을 이용하여 디자인한 것이다.



대표적인 flat design으로 윈도우8을 떠올리면 쉽게 알 수 있다.


윈도우 8의 UI디자인을 Metro UI 라고 하는데 

위키피디아에서 설명하는 걸 보면

Metro는 MS사가 타이포그래피 기반 디자인 언어의 내부 코드명이라고 한다.



Modern ui, Metro ui, simple ui,  Flat ui 등 다양한 이름이 있지만

늘 그렇듯 분류가 체계화 되지않은 상황에서

명칭에 대해 따지기 보단 디자인을 공부하는 입장으로서

다 비슷한 것을 지칭하므로 그래픽 스타일을 파악하는데 중점을 두는게 좋을 것 같다.





windows 8 Metro ui 이다.





<windows8 구글링 이미지>





아래 사진들은 윈도우폰이다.





<윈도우 폰 구글링 이미지>



이처럼 MS사에서 컬러, 타이포, 크기 등 조형요소들을 이용하여 디자인을 제공했었다.


그러나 국내에선 윈도폰이 출시가 되지 않아, 사용하는 사람들이 적었고,

스마트폰이 도입되면서부터는 비교적 아이폰 유저들이 늘어나면서 

플랫 디자인 보다는 실제 모습을 연상할 수 있는 스큐어모피즘에 더 익숙해졌다.




(* 스큐어모피즘이란?

리얼메타포라고도 불리우는데 실제 모습 또는 재질감 등을

 다른 매체에 그대로 구현하는 방식을 말한다.

ex) iOS app 디자인)




아이폰으로 인해 다양한 앱들이 쏟아지면서

디자이너들 또한 실제 사진과 흡사하거나 

또는 3D 모델링 한 것과 같은 앱 디자인을 계속 만들어냈다.


(behance 또는 dribbble 참조)




그러나 구글이 안드로이드 os를 계속 업데이트하면서

구글 서비스와 앱을 통해 디자인 트렌드를 바꿔가고 있다.




안드로이드의 구글플레이를 가보면

구글에서 제공하는 앱들의 멋진 디자인들을 볼 수 있다.


한마디로 디자인 포텐 터졌달까?





<구글 플레이 앱 캡쳐화면 제공이미지>



구글 서치 앱의 화면이다.

보면 알겠지만 기존의 아이폰 앱과는 달리

그라데이션 효과를 찾아볼 수 없고, 타이포와 컬러 등을 이용하여

딱딱 맞아떨어지는 듯한 느낌을 볼 수 있다.



처음엔 뭔가 허전해보이는 느낌이지만

필요한 요소들만 이용하여 정보를 전달하는 면에서

많은 정보들이 오가는 소셜 서비스 등에서 채택하면 좋은 디자인스타일이다.



다양한 효과들이 없어져서 스큐어모피즘보다 디자인이 쉬워보이지만 

오히려 디자이너들의 기본적인 타이포와 컬러, 레이아웃 등의

능력을 요구하는 비교적 어려운 디자인이라고 볼 수 있다.



한마디로 감각이 없으면 진짜 없어보일 수 있다는거? 



앱스토어에도 플랫 디자인 앱이 많이 등장하고 있지만,

비교적 안드로이드 마켓에서 플랫 디자인 앱 더 많이 찾아볼 수 있다.




플랫 디자인 중에서도 다양한 디자인 스타일들을 볼 수 있다.


오로지 컬러와 형태, 레이아웃, 타입만을 이용한 real flat 케이스도 있고,

컬러, 형태, 레이아웃, 타입을 이용하지만 외곽라인이나 약간의 텍스쳐 혹은 그림자 효과를 준 almost flat 케이스도 존재한다.




플랫 디자인의 문제점으로 시각적 어포던스가 제기되기도 한다.

물론 사람마다 색깔, 사이즈, 타이포로 표현이 가능하다는 사람도 있고,

버튼에 한해서는 버튼같이 제공해야된다는 등 

다양한 의견들이 존재한다.



이러한 점은 다양한 플랫 디자인이 시도되면서 해결될 수 있으리라고 본다.






다음 포스팅에서는 Flat design 이 적용된 iOS앱과 Android 앱들을 살펴보자.





저작자 표시 비영리 동일 조건 변경 허락
신고
Creative Commons License
Name
Password
Homepage
Secret
[Graphic design] Fairtrade coffee Webzine 공정무역커피 웹진
Design portfolio/Design work




Personal work

Fairtrade coffee Webzine


When

2011.06


What

공정무역커피의 대표 브랜드 5개를 선정하여

각 브랜드를 설명하고, 생산되는 커피와 원두를 

소개해주는 웹진









추가 업데이트 예정




저작자 표시 비영리 변경 금지
신고
Creative Commons License
Name
Password
Homepage
Secret
[Graphic design] Life style _infographic poster & book 인포그래피 포스터 & 책 디자인
Design portfolio/Design work

Personal work

Life style infographic poster & book


When

2011.06


What

나의 일주일동안의 생활패턴 중 소비 패턴을 선택하여

이를 수집하고 통계를 낸 후, 그래픽화 하는

인포그래픽 포스터와 책을 디자인하였다.







포스터디자인













책 디자인









타과 수업 들으면서 진행했던 수업 프로젝트.

포스터때는 재밌었는데 책은 일주일간의 생활소비패턴이라

많은 페이지가 필요한 책에서 그래픽화하기엔 정보가 부족하여 

조금 난감하기도 하고 힘들었다.

그래도 재밌었음!




저작자 표시 비영리 변경 금지
신고
Creative Commons License
Name
Password
Homepage
Secret
[Web Project] Hanok noil'Teo 노닐'터
Design portfolio/Design work


Personal work

Hanok Nonil' Teo Wed design


When

2012.10


What

현대인들은 바쁜 삶 속에서 살아가고 있다.

이러한 현대인들에게 느림의 미학인 한옥을

쉼터로서 제안하며 우리나라의 한옥을 

소개하는 인포그라피 웹을 디자인.


Parallax Scrolling 기법을 이용하여

남북으로 긴 우리 나라를 자동차를 타고 여행하며

각 지역별로 한옥의 특징을 살펴본다.


전체적인 기본 그래픽 구조를 위에서 바라본 Bird view 시점으로 디자인.

구름과 Type들을 이용하여 시차효과를 부여.















같은 주제로 영상, 인터랙티브 까지 총 세명의 팀원이 제작한 프로젝트.

나는 그중 웹을 담당.

인포그래픽 웹이라 그래픽적으로 많이 표현한 웹디자인작품.





저작자 표시 비영리 변경 금지
신고
Creative Commons License
Name
Password
Homepage
Secret
[자취셀프쿠킹] 밤에 출출할땐 비빔국수를 먹자
Daily/Self cooking

 

 

 

요즘 생활패턴이 바껴서 첫 끼니를 오후 늦게 먹다보니

늦은 저녁이 되면 출출해진다.

 

냉장고에 있는건 별로 없고...

 

재료를 뒤적거리던 찰나, 아니 이건..!!

국수면이 아니던가

 

좋아 비빔국수를 해먹는거야!

 

 

옆에 슈퍼에서 오이랑 깻잎, 콩나물만 사오고

집에있던 김치, 국수면, 양파, 계란 이용.

  

비빔국수 더 간단하게 먹을 수도 있지만

좀더 맛있게 먹으려고 이것저것 준비를 더 했다.

 

 

필요한 재료

 

재료 _ 양파 1/4개, 오이 1/2개, 깻잎 10장, 김치 적당량, 콩나물 1/2봉지, 계란 2알, 소면 500원 동전크기량

 

양념장 _ 고추장 1.5큰술, 간장 1큰술, 물엿 1큰술, 설탕 1큰술, 연두 1작은술, 식초 1큰술

 

양은 2인분 분량!

김치를 볶아서 고명으로 얹을 예정이라 양념장은 조금 적게 준비했다.

원래 설탕은 잘안녹아 물엿을 자주이용하는데

물엿이 다떨어져서....

설탕을 넣은다음 미친듯이 저어주어야했다.....

 

연두는 어쩌다 마트에서 구매한 일종의 천연액상조미료? 인데

있길래 맛좀 내려고 넣었다 ㅋㅋㅋ

 


 

자취생이라 우리집은 가스렌지도 없고

전기냄비 하나밖에 없는지라

제일 먼저 면을 삶아 준비했다.


 



 

국수면은 삶으면서 물이 끓어오를때 찬물을 부어주며,

이것을 3번정도 하면 OK

 

체에 담아 면이 덜 불도록 시원하게 얼음이랑 같이 넣어서 옆에 준비해둠 




 

이제 재료 준비를 해보자

 

 

재료를 각자 깨끗이 씻고

 

오이는 사선으로 썬다음 채썰어서 준비

깻잎 역시 잘게 썰어서 준비

 

 

계란은 지단을 만들어 준비


지단은 도마위에 얹어 식을동안 김치를 볶는다!

김치도 적당량 덜어서 적당한 크기로 잘라준다.

그리고 올리브유를 살짝 두르고 같이 볶아주다가
설탕 1작은술을 넣어 마저 볶는다.


면을 익히고 난뒤, 콩나물 역시 소금을 약간 넣고

끓는 물에 3분정도 익혀준다.

 


양파는 얇게 채썰어 물에 담가 매운맛을 좀 제거.







그럼 비빔국수에 필요한 재료는 다 준비!



자취생집이라 큰 볼도 없다....
그래서 위에서 계속 이용한 냄비 또 깨끗이 씻어서 식힌다음
면 넣고 콩나물 넣고 양파 넣고 양념장 넣은 다음 손으로 막 비벼줬다.
왼손으로 비비고~ 오른손으로 비비고~








그런 다음 그릇에 적당량 담아 예쁘게 고명을 올려준다.


그런데 오이가 너무 길고....
계란은 너무 짧고.....
비빔국수면이 보이지 않아.....



그래도 내눈엔 맛있어 보임 ㅋㅋ






가운데 큰 그릇은 어제 먹다 남은 치키텐더에 매콤양념을 같이 버무려준것 ㅋㅋ
아까 재료 준비하다 남은 오이 반개도 마저 썰고

마지막에 깨도 살짝!

당신을 위한 요리야 라는 뜻의 깨까지 뿌려주고

테이블에 안착!








짠, 디테일뷰

아이폰이라 아쉽지만...
그래도 꽤 맛있는 비빔국수였다!









 

저작자 표시 비영리 동일 조건 변경 허락
신고
Creative Commons License

'Daily > Self cooking' 카테고리의 다른 글

[자취셀프쿠킹] 밤에 출출할땐 비빔국수를 먹자  (0) 2013.06.10
Name
Password
Homepage
Secret
[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

티스토리 툴바