2012년 웹디자인 트렌드 10가지

2012년 웹디자인 트렌드 10가지

 

다가오는 해의 웹디자인 트랜드를 전망해야할 시간이 또다시 돌아왔다. 트랜드가 생성되고 소멸되는 것은 어제 오늘의 이야기가 아니다.
또한 어떤 트랜드들은 생각보다 오랜 시간동안 머물러 있기도 한다. 그러나 트랜드는 우리의 직업을 발전 및 성장시키는데 꼭 필요한 것이다.

트랜드는 생성되고, 발전하며 때로는 또 다른 트랜드를 낳기도 한다. 웹디자이너로서 트랜드를 업무에 접목시키고자 할 때는 트랜드를 발전시키고 자신의 것으로 만들기 위해 도전해야 한다.

 

이 글을 통해 해가 바뀜에 따라 변화하는 트랜드를 파악하기란 쉽지 않음을 명심하기 바라며 어쩌면 당신은 이미 눈치 챘을 수도 있겠다. 하지만 후설 할 개념들은 2012년에 더 큰 트랜드로 성장할 것이다.
 
 
1. Responsive Web Design (반응형 웹디자인)

반응형 웹디자인(사용자의 사용환경과 행동패턴에 유기적이고 적절하게 반응하는 웹요소들에 대한 총체적 디자인을 말하는 것)에 대한 논의는 결국 끝이 날 것이라 생각한다. 반응형 웹디자인이 사라져서가 아니라 예상대로 될 것이기 때문이다. 다만 이것이 2012년에 발생할 것이라 생각하지는 않는다.

 

이것은 아직 너무 급진적이며 이것에 친숙하지 못한 웹디자이너 들이 많기 때문이다. 더 많은 모바일기기의 소개와 도입은 2012년을 반응형 웹사이트의 해로 만들 것이다. 웹 디자이너와 개발자들은 정형화된 틀 대신 다양한 레이아웃을 사용하게 될 것이다. 또한 media queries는 더 다양한 스타일 시트를 사용하여 더 많은 사이트들이 다양한 단말기와 스크린 사이즈를 통해 쉽게 접근될 수 있도록 할 것이다.

 

2. Fixed-Position Navigation (고정 네비게이션 영역)

 

우리는 대부분 개인 사이트등을 통하여 이러한 기술에 도달했다. 2010년과 2011년을 통해 이런 트랜드의 큰 흐름을 확인했지만 또 하나의 문제 제기가 지난 몇 달간 떠올랐다. 만약 당신의 웹사이트를 사용함에 있어서 주요 사이트 멥이 없다면 몇 가지 작은 링크들이 필요하다.

 

그렇다면 그 링크들을 통해 보이는 화면을 항상 유지하는 것은 어떠할까? 이러한 방법은 웹사이트의 기능을 크게 향상 시킬 것이며 전반적인 페이지를 쉽게 바꿀 수도 있다. 이러한 발상은 내비게이션바, 링크, 로고들을 당신의 웹페이지 안에 둘 것이며 방문자는 한 페이지 안에서 단지 스크롤을 내리는 것만으로 볼 수 있을 것이다.

jQuery는 이 효과의 급진적인 시제품을 허용해 왔다. 자바스크립트 없이도 어려운 내비게이션 효과 대신 멋진 css코드를 사용할 수 있게 되었다. 2011년의 네비게이션바는 유저의 페이지 이동을 따라다녔다.

 

 

Simon Wuyts의 사례에서 새로운 수준의 고정 네비게이션을 얻었다.
당신은 절대 웹페이지의 내용을 쉽게 볼 수있는 패널과 같이 슬라이드 쇼안에 배치하고 싶어하지 않는다. 이는 화면이 고립되지 않게 할 뿐 아니라 네비게이션 시스템을 쉽게 작업할 수 있고, 모바일 브라우저를 통해 쉽게 전달될 수 있게 한다. 당신은 2012년을 위한 re-디자인의 과정에서 이러한 기술과 이점을 심도있게 고려해 볼 수 있다.  

 

 

3. Circles (원형 이미지)

몇 년간은 잠잠했으나 이러한 트랜드는 괄목할 만 해 왔다. 웹 2.0 붐 디자이너들이 drop shadows 와 rounded corners와 같은 데스크탑을 상대로 하는 것에 더 초점을 맞추어 왔다. 그러나 CSS3로 인하여 화려한 박스효과를 내는 것은 기존에 비해 훨씬 쉬워 졌다. 또한 원이나 도형들을 어떤 이미지 없이도 만들 수 있다.

이러한 효과들은 디자이너들이 완전히 다른 시각에서 이미지 접근 할 수 있게 하였다. 나는 지속적으로 웹디자이너를 위한 포트폴리오를 검토 했으며 그 과정에서 원형 모양 요소에 큰 향상이 있었음을 알 수 있었다. 이러한 원본은 네비게이션링크,  footer icon 또는 중요한 포트폴리오 작업을 밑에 표기함으로서 형성될 수 있다.

 

 

둥근 모양은 부드럽고 사이트 방문자의 시선을 끈다. 이러한 것들을 유용한 리소스나 페이지와 같은 특정 부분을 발탁하는데 사용하라.
모양 그 자체로서 배경에 쓰일 정도로 좋으며 좋은 효과를 낸다.

 

 

 

4. Big Vector Art (벡터 일러스트)

 

당신이 웹 사이트를 통해 알아볼 수 있는 구피라는 대형 마스코트는 그 브랜드를 주장하기 시작했다. 몇 년 전만 해도 당신은

웹 브랜딩 관련 일러스트 레이션 작업을 충분히 찾을 수 없었을것이다.  그러나 최근 개인 디자이너의 역량이 크게 향상되었으며
나는 사랑스러운 요소를 기반으로 한 마케팅 이상의 것을 찾을 수 있게 되었다.

 

 

Mozilla and Firefox의 결과물로 여겨지는 많은 면면들은 빙산의 일각에 불과하다. MailChimp은 목표치를 높게 잡은 좋은 예이다.
악명높은 mailman monkey는 웹사이트와 IOS, Android apps 모두에 걸쳐 서비스된다는 것을 특징으로 삼았다. 

 

 

또한 한 작은 사업가는 프리랜서로의 전환이라는 발상이 내 가슴속에 강하게 남아있음을 발견했다. 그들의 레이아웃에서 발견되는 고유의 방향들이 많다. 이런한 연습은 웹사이트 미학의 영역에 적응해 왔다. 그리고 만약 2011년에 뭔가 성과가 있었다면 2012년은 사랑스러운 벡터로 가득찰 것이다.

 

 

 5. Multi-Column Menus (다중 열 메뉴)

우리는 대부분 개인 사이트등을 통하여 이러한 기술에 도달했다. 2010년과 2011년을 통해 이런 트랜드의 큰 흐름을 확인했지만 또 하나의 문제 제기가 지난 몇 달간 떠올랐다.

 

만약 당신의 웹사이트를 사용함에 있어서 주요 사이트 맵이 없다면 몇 가지 작은 링크들이 필요하다. 그렇다면 그 링크들을 통해 보이는 화면을 항상 유지하는 것은 어떠할까? 이러한 방법은 웹사이트의 기능을 크게 향상 시킬 것이며 전반적인 페이지를 쉽게 바꿀 수도 있다. 이러한 발상은 내비게이션바, 링크, 로고들을 당신의 웹페이지 안에 둘 것이며 방문자는 한 페이지 안에서 단지 스크롤을 내리는 것만으로 볼 수 있을 것이다.

 

 

예전에 비해, 너무 많은 링크로 구성된 웹사이트들이 넘쳐난다. 사이드바의 링크로 이동하지 않는 한, 합리적인 네비게이션 표준 타입은 사용자를 너무 혼란스럽게 한다. 하지만 사용자 경험 테스팅은 페이지 최상단에 핵심 링크를 유지하는 것이 매우 좋은 결과를 나타낸다는 것을 보여준다. 당신은 사이트 방문자에게 쉽게 많은 링크를 보여줄 수 있고, 로고 주변 섹션에 맞춰 유지할 있다. 

 

 

6. jQuery/CSS3/HTML5 Animation 

 

작은 부분에 적용하는 경우 나는 항상 jQuery 효과를 추천해 왔다. 웹디자이너는 유저의 경험 뿐 아니라 화려한 미학과 추가적인 에니메이션 또한 아울러야 한다.

운좋게도 jQuery 도서관과 CSS3의 사양에 있어서의 발전은 더 적어진 라인으로써 뛰어난 효과를 낼 수 있게 하였다. 올해에만도, 나는 웹상에서 몇몇 교육자습서를 발견했다. jQuery는 착수 준비중인 브라우저 효과의 주류이나 불행히도 100%의 지원을 하지는 않는다. 따라서 CSS3 안에서 대체 방안을 사용한다는 것은 당신의 웹사이트가 대부분의 방문자들과 호환이 가능하여 예외적인 경험을 제공한다고 볼 수 있다.

 

나는 단지 개발자들이 2012년이 다가옴에 따라 어떤 확장 가능한 생각들을 하는지 상상할 수 있을 뿐이다. 
 

7. Ribbons & Banner Graphics 

  
이것은 내가 2011년 들어 훨씬 더 눈치채온 하나의 디자인 요소이다. 디자이너들은 페이지 리본, 배너, 북마크 또는 다른 형태의 표지 배지를 만들기위해 간략화된 자습서를 저술하기 시작했다. 거대한 자유 정보의 출현으로 인하여 디자이너들 역시 트랜드에 뛰어들기 시작했다.

 

얼마나 많은 웹사이트 들이 단 6개월 동안 이런 스타일의 디자인을 사용했는지 알면 놀랄 것이다. 베타 테스터들은 종종 이러한 리본들을 최근 발표된 소트트웨어 및 모바일 엡을 분류하기 위해 사용 한다.

 

Corner Ribbon

Dark Slider with Featured Ribbon

Colorful Ribbons

Green Corner Ribbon Templates

Simple Product Box

 

 

8. Custom Font Faces (사용자 정의 글꼴)

 

무료 온라인 폰트 라이브러리 Typekit는 관심있는 웹디자이너를 위한 무료 평가판을 제공한다. 이를 통해 자바 스크립트를 읽고 CSS를 추가하면 즐겨찾기 글꼴 스타일을 자유롭게 사용할 수 있게 된다. 2011년의 이런 경향은 독특한 블로그를 유지하는 워드프레스 디자이너들에게 인기가 많았다.

 

 

최근 구글의 웹 글꼴은 풍부한 글꼴 숫자뿐만 아니라 구글이 지원하는 글꼴 라이브러리를 통해 HTML 요소에 CSS Font-Family 속성을 복사하기만 하면 간단하게 설정된다. 심지어 사용자 정의 글꼴을 플러그인으로 만들어 무료로 설치할 수 있게 제공해 개발자가 잘못된 업로드 등으로 인한 스트레스가 거의 없어졌다.

 

 

9. Infographics (인포그래픽스)

 

인포그래픽스는 정보 그래픽, 데이터, 지식을 시각적으로 표현한 것으로 정보를 보다 빠르고 쉽게 표현할 수 있다. 이러한 경향은 전반적인 웹디자인에 영향을 미치지 않지만 사용자 경험 및 프레젠테이션 인포그래픽스는 신세대 미디어와 맞아 떨어질 것이다. 인포그래픽스 데이터, 차트의 기술적 부분을 당신이 거의 이해하더라도 5세의 자녀가 함께 따라갈 수 있도록 형상화해 제공한다.

 

 

웹사이트의 유형에 따라 모두에 유용하지 않지만 이러한 경향을 찾을 수 있다. 많은 연습과 시간이 걸리지만 그렇게 만들어야 한다. 인터넷은 이전 어느 때보다 우리 모두가 함께 정보를 공유할 수 있는 장소가 되었다.

 

 

10. Focus on Simplicity (단순함에 집중하라)

 

궁극적으로 모든 웹사이트의 목표는 가능한 빠르게 방문자를 A에서 B까지 유도하는 것이다. 간단하고 직관적인 인터페이스는 우리가 지향해야 할 목표이다. 지난 5년 동안 인기 사이트의 대부분의 디자인을 살펴보면 minimalisim에서 트렌드를 찾을 수 있었다.

 

 

많은 예제 중에서 가장 완벽한 예로서 fine gallery of minimalist websites를 들 수 있다. 당신의 웹사이트를 단순 함축하기 위해 수많은 인터페이스를 조정해야 할 지도 모른다. 그러나 클린 셋업을 통해 레이아웃을 재정렬하면 모든 것을 minimalism할 필요는 없다. 웹사이트를 제작하기 전에 사전 계획을 수립하여 네비게이션, 콘텐츠 영역, 머리글, 페이지 계층구조 등에 대한 업데이트 방향을 생각을 정리하여 간소화할 수 있다.

 

 

* 원문 출처 : Web Design Trends in 2012, 2011.12.13

 

 

=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=

 

# 관련 링크

- Web Design Trends 2011 / 2012, 2011-06-06

  (번역 참고 : http://blog.naver.com/lattene/30131977226)

- Symptoms of An Epidemic : Web Design Trends, 2012-03-15

  (번역 참고 : http://webu.tistory.com/130)

- The State of Web Design Trends: 2012 Annual Edition, 2012-01-12 

  (번역 참고 : http://blog.naver.com/sej1989/60159133338)