2010년 유행할 웹디자인 트렌드

미래를 예측한다는 것은 상당히 힘든일이다.

이 분야 일을 시작한지 어언 십수년이 지나가지만 자신만의 스타일을 고수하기 보다는 매년 트렌드를 따라 작업하다 보니 이런 것을 챙기지 않으면 트렌드를 따라가지 못한다는 강박관념(?)이 생겨버렸다.  트렌드를 쫓다보면 트렌드를 따라가지 못한다는 느낌이 많이 든다. 

각설하고.... 일년전 이맘때 2009년 유행할 웹디자인 트렌드를 포스팅한 적이 있었다. 물론 웹디자인 카테고리에서 가장 많은 트래픽을 가져온 포스팅이기도 했다.

이미 2010년 웹디자인 트렌드에 대해   카페글에 포스팅되어 있는 내용들을 사부작 꼬불쳐 본다.

• 2008년 웹통계
• 2008년 웹디자인 트렌드
• 2009년 웹디자인 트렌드
• 2009년 웹트렌드
• 2010년 웹디자인 트렌드 (웹디자인)
• 2010년 10대 웹트렌드 (IT트렌드)
• 2010년 기술레이다(rhio님 블로그)
  
  

아래 내용은 2010년 웹디자인 트렌드라는 제목으로 14가지 항목으로 정리되어 있다.

번역본에 데꾸벅만의 생각들을 살포시 얹어보았다 

대부분 2009년 웹디자인 트렌드에서 이미 언급되었거나 국내 환경에서는 유행이 지난 내용들이 많으며 오히려 2008년 트렌드와도 흡사하다. 이제는 해외 사이트트렌드와 국내웹사이트들의 트렌드가 이제는 조금씩 바라보는 뷰가 틀려지기 시작하는 듯 싶다. 

2009년의 트렌드와 비교하자면 조금 객관적이지 못해 작성자만의 지극히 주관적인 생각이며 잘못 설정된 표본집단 조사, 즉 넓은 시각이 아닌 좁은 시각에서 웹디자인 트렌드를 바라본 것 같다. 

데꾸벅이 가장 좋아하는 스티브잡스형님이 이런 얘길 한적이 있다. 

"Design is not just what it looks like and feels like.  

  Design is how it works"

단지 데꾸벅's 생각일뿐~ 오해하지 말자

오래되고 닳은 웹 디자인은 정리를 할 시간이고, 내일을 위한 과감하고 새로운 얼굴들을 맞이할 시간이다.  물론 트렌드라는 것이 1월 1일에 시작이 되고 끝나는것은 아니지만, 새해에는 새로운것을 갈망을 하고, 연말에는 지난간 한해에 교본(tutorial)을 찾게되는 욕구에는 분명 뚜려한 움직임이 있다.  대부분의 경우, 이러한 변화는 미묘하다.  이러한 변화는 현재 트렌드를 완벽하게 만들거나 새롭게 해석을 하는 것이다.  트랜드들은 우리가 디자이너로서 진화를 하는데 도움을 준다.  미적 디자인 스킬을 습득하게 됨에 따라, 우리는 다음에 무엇이 있는지, 우리가 원하는 것이 무엇인지를 추구하게 된다.

 

이러한 트랜드 뒤에 있는 아이디어들은 당신이 이미 알고 있는 것들도 있음에 오해를 하지 말기바란다.  아래의 트렌드들이 2009년에 인기가 있었던 것들로부터 굉장한 차이가 있는 것은 아니지만, 앞으로 펼쳐지는 트렌드들이 전개가 되고 또한 좋은 결과들로 남게 될 것이다.  당신들이 이러한 트렌드들을 당신의 디자인에 어떻게 이용을 할 것인가를 고민을 할때, 각 트렌드의 주요 아이디어가 무엇인가에 초점을 맞추기를 바란다.

 

1. 대형로고와 헤더

데꾸벅 : 최근 3년동안의 트렌드와 같은 내용이다.  대형 타이포를 이용하여 사용자시선을 유도한다. 다만 디자인적인 면이 다분이 많으며 사용성에는 그다지 중점을 두지 않은 듯 보인다.

사이트의 스플래쉬 페이지는 너무도 낡은 기법이다.  방문자들에게 잊혀지지 않는 느낌을 주기 위한 2010년의 트랜드는 특대형의 로고와 그와 걸맞는 특대형의 헤더이다.  이러한 류의 헤더는 전체 스크린을 차지하되, 하나의 중용한 메세지를 가지고 있다.  방문자는 아무것도 클릭을 할 필요가 없고, 그냥 스크롤 다운을 하면 된다.  방문자들은 (과거의 나쁜 네비게이션 경험으로 생긴) 종종 마우스클릭에 대한 공포를 가지고 있다. 그래서, 대형 헤더는 당신 사이트의 방문자들 이 무엇인가를 클릭하도록 강요하지 않으면서, 스플래쉬 페이지의 역할을 수행한다.

 

주요 아이디어: 커다란 헤더는 방문자들이 당신을 기억하게 만든다. 

http://ma.tt/

 

 

2. 스케치/손그림

데꾸벅 : 이미 국내에서는 몇년전 부터 웹디자인 템플릿 사이트에 유행이 지난 것으로 주요 프로모션 성격의 사이트에서 많이 사용되고 있다. 

손으로 그린 디자인은 새로운 것은 아니다. 하지만, 웹 디자인에서는 아직은 가장자리를 차지하고 있음을 알고 있다.  많은 디자이너들이 이러한 스타일에 감탄을 하면서도, "나는 잘 그리지 못해"라는 투의 태도때문에 이 스타일을 사용하기를 두려워하고 있다.  이러한 스타일의 디자인들은 미술박물관에 걸만한것은 아니라고 해도, 일탈의 감성적인 면을 전달을 할 수 있고, 차거운 웹 사이트와 친근한 인터랙션의 경계를 흐리게 할 수 있다 - 그게 인터넷의 궁극적 목적이 아니겠는가?  만약 그림을 끄적거릴 수 있다면, 당신은 이미 웹 디자인을 스케치 할 수 있다.

 

2010년에는 스케치는 웹 디자인상의 요소로 자리를 할 것이고, 웹 디자인의 주 초점이 되지는 않을 것이다.  또한 스케치는 표준적인 웹을 새롭고 흥미있는 것으로 개인화 시키는 데 사용이 될 것이다.

 

주요 아이디어: 스케치는 기업 웹 사이트 디자인의 "요소"가 될 것이다.

 
http://www.biola.edu/undergrad/

 

 

 

3. 굵고 두꺼운(Slab) 글꼴

데꾸벅 : 최근3년 트렌드에서도 언급되었던 내용이다.  전통적인 인쇄매체에서 많이 사용되던 Press Letter형태를 웹형태로 옮겨온 것으로 영문폰트를 이용하여  적용한 예가 많다. 한글폰트에서도 두꺼운 글꼴은 글쎄다~. 

 폭이 넓은 글자체는 지난 200년 동안 전통적인 미디어에서는 사용이 되어왔지만, 웹 디자인에서는 비교적 새로운 것이다.  폭넓은 글자체의 좋은 "감"을 얻으려면, 옛날 옛날 서부 개척시대의 "현상금" 포스터를 생각을 하면 될 것이다.  이때 사용이 된 굵은 글자체들이 "Slab" 타이프이다.  폭이 넓은 글자체들은 보통 모두 대문자에, 볼드로 처리가 되어있고, 그리고 눈을 끌어당기는 당당하게 보인다.  많은 디자이너들이 과거에는 슬랩 타이프를 멀리 해왔는데, 슬랩 타이프가 사용이 되면 로고나 헤더들이 저평가 되게 보일 수 있기 때문이다.  하지만, 대형 헤더라는 트렌드와 같이 사용이 되면, 슬랩 타이프를 사용할 때 독자들의 시선을 끌수가 있다.

 

주요 아이디어: 슬랩 타이프는 당신 누구인지 과감하게 표현하기 위해 사용이 된다.

 

http://www.edgepointchurch.com/

 

 

4. 타이포

데꾸벅 : 타이포그라피와 관련된 내용은 당근 이전부터 쭈욱~ 언급되었던 내용이다. 굳이 무엇을 더 언급할것인가 

타이포그라피는 적용하기에 가장 어려운 트렌드 중에 하나이기때문에, 2010년에도 싱싱하게 존재를 할 것이다.  사용성관련된 모든 걱정들 때문에, 웹 디자이너들은 새롭고 색다른 폰트를 사용하기를 꺼려한다.  다른 폰트사이즈들을 섞는 다는 생각은 절대로 할 수도 없는 것이 였다. 하지만, 폰트들은 탐구의 대상이고, 비틀고, 우리의 목적에 적합하도록 사용이 되어야 한다.  정확한 위치선정을 한다면, 타이포그라피를 주요 디자인 요로 사용을 하는 웹 사이트들은 수많은 사진들로 부담이 되는 사이트들 보다는 독자들에게 더 흥미로와 보일 것이다.

 

주요 아이디어: 타이포그라피의 사용은 아직 충분한 성장을 하지 못했지만, 웹 디자인의 한 부분으로 남아있을 것이다.

 

http://www.elysiumburns.com/

 

 

 

 

5. 한 페이지 레이아웃

데꾸벅 : 이미 Interaction한 Rich UI Layout ( Web Application 혹은 Ajax Application) 이 자리잡은 요즘에 비하면 2010년 트렌드라 말하기에는 조금 오래된 내용이다. 

한 페이지 레이아웃은 필요하지 않는 부분을 제거를 하게끔 하는 과제를 준다.  2010년에는 이 스타일이 특이한 네비게이션을 버리고 미니멀리즘 접근방식을 택할 것이다.  이러한 웹 사이트들을 비즈니스 카드라고 생각을 하라.  이러한 웹 사이트들은 당신과 다양한 사이트들에 퍼져있는 당신의 작업물들을 어떻게 찾을까를 알려주는 one-stop-shop이 될 것이다.

 

주요 아이디어: 한 페이지 레이아웃은 기업 사이트가 보다는 개인 프로파일에 더 적합하다.

 http://www.zachklein.com/

 

 

6. 큰이미지

데꾸벅 : 큰 이미지뿐만 아니라 이제는 화면전체를 이미지로 깔고 덮고 플래쉬로 도배를 하기도 한다. 

대형 로고/헤더와 가까운 친척인 대형 이미지는 거의 같은 기능을 제공한다.  대형 이미지들은 방문자들이 쉽게 잊지 못할 효과를 준다.  위에서 이야기를 한 대형 헤더와는 달리, 대형 이미지는 사이트의 브랜딩과 관련이 있는 것은 아니다.  대신에, 이러한 이미지들은 방문자들을 사이트의 컨텐츠가 아니라면 이미지를 이용해서라도 방문자들을 사이트로 끌어들인다. 2010년에는, 웹 디자이너들은 사이트의 느낌을 전달하기 위해서, 대형 이미지를 사용하는 것을 더욱 편안하게 느낄것이다. 

 

주요 아이디어: 대형 이미지들은 방문자들을 초대하기 위해서 사용이 된다.

 

http://digitalmash.com/ 

 

7. 시각의 변화

데꾸벅: 좀 더 비주얼한 면을 강조하기 위해 2D에서 3D형태 뷰포인트의 전환등 이러한 시도는 항상 있어왔다. Flex/Flash, 혹은 Silverlight,  SVG, VML 등 이미 수없이 많은 디자인 사이트에서 봐왔던 내용이다. 

이미 위에서 이야기를 한것과 같이, 데스크 탑 형태의 디자인은 지겹도록 사용이 되어왔다. 2010년에는  좀더 현실감있는 시각으로 변화가 될 것이다. 공간에서 옆을 보는 것과 같은 시각으로 이동도 있을 수 있다.

 

주요 아이디어: 2010년 여러가지 다른 시각/시점이 시도가 될 것이다.

 

http://downsign.deviantart.com/art/Book-Store-136542851

http://kpucu.deviantart.com/art/Pastorant-Restaurant-71565329

 

 

 

 

 

8.인터렉티브/직관적 디자인

데꾸벅 : 웹디자인이나 UI/UX에 대한 입문서에 나올만한 내용이다. 인터렉티브하고 직관적인것인 이미 디폴트인 시대에 살고 있다.

Flash는 지금보다는 더 인기가 있었던 적이 있었다.  한때는 짜증스러운 Flash 인터페이스가 없는 사이트들을 피할 수 없었던 적도 있었다.  최근에는, Flash는 좀더 편안하고 좀더 전문스러워 졌다.  어떤 디자이너들은 폼이나 팝업을 위해서 jQuery를 더 선호할 수도 있지만, Flash는 적당하게 사용이 되었을때면 아직도 웹 디자인의 중요한 부분이다.  Flash은 인터랙티브한 면에서는 아직도 적수가 없다.  2010년에는 웹 디자인너들은 Flash를 좀더 보완할 수 있는 요소들로 이동을 할 것이다.  최근의 방문자들은 웹에 대해서 대부분 잘 알고 있기 때문에, 디자이너들은 과거의 사이트들 보다는 좀더 직관적인 사이트를 제작을 할 것이다.

 

주요 아이디어: 인터랙티브 디자인이 컴백을 할 것이다.

 

 http://www.crowleywebb.com/

 

 

9. 모달창

데꾸벅 : 최근 3년동안의 웹트렌드에서도 언급되었던 내용이며 2010년에도 계속 유행될듯 싶다. 워낙 막강한 javascript library나 Framework들과 RICH Tool들이 많다 보니 이제는 구현하기도 쉬워졌다.

모달 윈도우는 2010년에는 말 그대로 사방에서 볼 수 있는 트랜드가 될 것이다.  모달 윈도우는 팝업하고는 달리 부드럽고, 모양도 좋고 더 인기가 많다. 모달 윈도우는 디자인과 사용이 너무 쉽게 때문에, 사용성을 염두에 두는 디자이너들에게는 최적의 해법이 될 것이다.

 

주요 아이디어: 모달윈도우는 2010년에도 지속적으로 사용이 될 것이다.

 

 http://digg.com/

 

 

10. 미니멀리즘

데꾸벅 : 모노톤이나 명조대비만으로 여백의 미를 강조하는 동양적인 디자인 컨셉에서 부터 시작된다. 과거 해외사이트를 살펴보면 대부분 여백에 텍스쳐나 바탕이미지를 사용하였으나 이제는 "오리엔탈 이즈 베스트 ~~~"

과거의 미니멀리즘 웹 사이트는 잊어도 좋다.  2010년의 웹 사이들은 많은 여백을 사용을 하되, 과감한 타이포그라피와 놀라운 컬러 스킴을 이용을 할 것이다.  모든 미니멀 웹 사이트들이 명확한 간결성 개념과 일치 하지는 않을 것이다. 미니멀리즘은 그 본연이 강도가 떨어지기는 하지만, 새로운 색상들이 채용이 될 것이다.  미니멀리즘은 차가운 것이 아니고, 따듯하고 핵심을 찌르는 것이다.

 

주요 아이디어: 미니멀리즘은 타이포그라피로 모험을 시도할 것이다.

 

 http://www.kylestanding.com/

 

11. 대형푸터

데꾸벅 : 일전에 데꾸벅의 블로그에서도 한번 포스팅 되었던 내용이기도 하다. 메인기능이 아니라 부가기능이나 정보, 혹은 메타성 데이타를 한곳에 몰아둔다는 느낌이 없지 않아 있다. 국내의 현실은 대부분 숨겼다/보여주는 형태로 많이 구현되고 있다.

대형 푸터는 이미 여기저기에서 볼 수가 있지만, 2010년에는 좀더 과장되게 사용이 될 것이다. 앞으로의 푸터는 미약한 존재가 아닌 디자인의 중요한 부분이 될 것이다.  앞으로는 다양한 소셜미디어 사이트의 부터의 피드, 투표기능, 트위터 피드와 같은 무작위적인 정보를 포함을 하고 있는 푸터도 보게 될 것이다.

 

주요 아이디어: 대형 푸터는 중요도는 떨어지지만, 좀더 퍼스널한 정보를 제공을 할 것이다.

http://www.duirwaigh.com/

 

 http://oldloft.com/

 

 

 

12. 복고

복고풍의 디자인은 당분간 남아있을 것이다.  많은 수의 디자이너들이 복고풍의 디자인에 감탄을 하기는 하지만, "마무리"를 제대로 짓지 않는 느낌을 제대로 소화하는 것은 쉽지 않다.  복고풍 디자인의 디자인의 톤과 저변에 깔린 재미요소를 통한 영감을 받아야 한다.  2010년의 레트로 디자인은 구식예술을 존중하는 새로운 방법을 찾아갈 것이다.

 

주요 아이디어: 복고는 "새롭다"

 

 http://www.level2d.com/

 

 

13.  인트로 상자

데꾸벅 : 2009년 웹디자인트렌트 맨 마지막 아이템으로 소개되었던 내용이다. 2010년에도 계속 쭈욱~ 될 듯 싶다.

2010년 디자이너들은 "안녕, 내이름.. " 하는 식의 자신을 방문자에게 소개하는 아름답기까지한 간결함을 알게될 것이다.  만일 당신이 창의적인 "About" 페이지 구성에 고민을 하고 있다면, 인트로 박스가 아마 최적의 답이 될 것이다.  인트로 박스는 당신이 누구인지를 제한된 면적을 통해 알려야 하기 때문에, 정보를 농축시키도록 강요할 것이다.  2010년의 인트로 박스는 그 사용영역을 단순 소개를 넘어서게 될 것이다.  지루한 "Hello"가 아닌 좀더 새로운 "인사법"을 디자이너들은 찾게 될 것이다.  그리고, 왼쪽에 치우쳐서 놓이는 인트로 박스가 아닌, 특이한 자리에 놓이는 - 예를 들면 페이지의 중간 같은 - 인트로 박스를 보게 될 것이다.

 

주요 아이디어: "Hello"를 하는 새로운 방법들

 

http://www.alessandro-cavallo.de/ 

 

14. 잡지형식의 레이아웃

데꾸벅 : 2009년 웹디자인트렌트 맨 처음 아이템으로 이미 소개되었던 내용이고 웹도 인쇄매체와 마찬가지로 2D라는 측면에서 접근하는 경향이 많다.  대부분의 레이아웃 설계나 정보설계(IA)시 인쇄매체의 레이아웃을 많이 참조하는 경향이 있다. 

사람들이 점점 더 전통적 인쇄물의 편안함에서 온라인으로 이동을 함에 따라, 디자이너들은 그들의 이동을 부드럽게 하는, 새로운 "환영 방법"을 찾고 있다.  한장의 홈페이지에 잘 정돈이 된 정보들을 가진, 잡지포맷의 디자인을 제공하여, 방문자들이 원하는 정보를 찾아보도록 하는, 이동이 생기고 있다.  잡지나 신문을 읽어본 사람이라면, 제공이 되는 익숙한 디자인에 호감을 갖을 것이고, 사용에 편안함을 느낄 것이다.  2010년에는 잡지포맷은 블로그에서 특히 인기가 있을 것이다.

 

주요 아이디어: 잡지 형태가 인포테인먼트 사이트에서 사용이 될 것이다.

 

 http://www.bmivoyager.com/