2013년의 웹디자인 트렌드를 정리해 보자.

안녕하세요. 키다리디자이너입니다.

올해도 이제 며칠 남지 않았네요. 정말 한해가 빨리 갑니다.. 덤으로 이제 나이도 한 살 더 먹게 되었네요....

 

아뭏든 이제 한해를 마감하는 시점에서 지난 한해동안 가장 유행했던 디자인들을 되짚어보고 넘어가도록 할게요.

 

 

2012년의 웹디자인 주요 이슈

 

2013년의 웹디자인 주요 이슈를 말하기 전에 먼저 2012년의 이슈들을 간략하게 짚고 넘어가도록 하겠습니다.

1. 모바일기기의 인터넷 사용량 증가
모바일기기의 트래픽 증가는 2009년 이후 꾸준히 진행되어 왔으며, 웹개발 환경은 모바일 환경에 맞추어 디자인하는 것이 중요하게 부각되었습니다.

2. 높은 픽셀 밀도
아이패드의 레티나 디스플레이와 같은 고밀도 디스플레이의 출시에 따라 이에 맞춘 디자인/코딩이 필요하였습니다.

3. HTML/CSS의 발전
HTML5, CSS3의 발전/표준화와 함께 브라우저에서 웹폰트의 표현이 개선되었습니다.

4. 윈도우8 발표
새로운 윈도우 운영체제의 발표로 인한 메트로 인터페이스는 소프트웨어의 인터페이스와 UI에 대해 생각하는 방식에 변화를 주게 됩니다. 또한 윈도우8은 플랫스타일 디자인의 시대를 알리는 시발점이 되었습니다.

5. 한 페이지내 동적 이동
전통적 방식의 네비게이션을 이용한 페이지이동 방식을 탈피한 사이트가 많아졌습니다.
예를 들어 페이스북의 타임라인의 경우 무한 스크롤과 함께 시간을 거슬러 이동하는 듯한 느낌으로 디자인되었습니다.

 

 

 

 

2013년의 웹디자인 주요 이슈

 

1. 반응형 웹디자인(RWD)
모바일기기의 사용이 전례없는 폭발적인 성장으로 인해 웹사이트를 설계할 때 모바일 기기에서의 작동을 항상 고려하게 되었습니다.
이 현상은 PC를 위한 웹사이트를 먼저 디자인하는 것이 아닌 모바일을 먼저 설계하고 PC로 확장해 가는 ‘Mobile First’ 설계를 하는 추세로 이어지고 있습니다.
모바일기기와 네트워크, 그리고 모바일 사용 패턴의 제약 사항은 모바일 경험을 집중화하고 단순화시키는 데 오히려 도움이 됩니다.
모바일 기기를 위한 디자인은 이러한 한계를 받아들여 안고 가는 과정일 뿐 아니라 변화에 대한 시험이 되고 있습니다.

참고사이트
아모레프로페셔널 http://www.amosprofessional.com
Nokia http://www.nokia.com/global/

 

2. HTML5의 CANVAS
자바애플릿(Java Applet), AJAX(Asynchronous JavaScript and XML), 플래시(Flash), 실버라이트(Silverlight) 등 기존 웹의 한계에 도전하고자 나온 여러 가지 기술을 통칭하는 RIA(리치 인터넷 애플리케이션)는 2001년 매크로미디어에서 MX개발툴을 발표하면서 정의한 개념으로 이후 플래시등을 사용한 화려하고 인터렉티브한 사이트들이 쏟아져 나왔습니다. 그러나 플래시의 가장 큰 단점은 플래시구동을 위한 플러그인을 설치해야 한다는 것입니다.
그러나 2005년 애플의 스티브잡스는 공식적으로 플래시를 지원하지 않겠다고 발표하며 플래시는 서서히 쇄락하게 되었습니다.
이후 많은 웹디자이너들은 플래시를 이용해 만들 수 있었던 화려한 웹사이트를 대체할 새로운 방법에 접근하기 시작했습니다. 그것은 HTML5의 CANVAS태그와 CSS, 자바스크립트를 이용한 방법입니다. 구글은 이것을 이용한 최신 기술에 투자하고 있으며, 우리는 이것들에서 앞으로의 변화를 예측할 수 있습니다.

참고사이트
Bs Stone http://www.bstones.co.kr/
Meet your MX http://meetyourmx.com/

 

3. 스토리텔링 느낌의 디자인과 고해상도 이미지 사용
반응형웹사이트 중에서는 고해상도 이미지와 동영상에 약간의 텍스트를 이용한 디자인을 쉽게 볼 수 있습니다.
이런 웹사이트들은 모든 크기의 화면에 대응할 수 있도록 구성해야 하기 때문에 대화면에서는 영화화면과 같은 큼직한 구성의 디자인이 많이 사용되고 있습니다.

National Geographic Serengeti Lion http://ngm.nationalgeographic.com/serengeti-lion/index.html
Vertu Constellation http://constellation.vertu.com/#the-finest-leather

 

4. 시차 효과(Parallax scrolling)
스토리텔링 효과를 위한 웹사이트 등에서 흔히 사용되는 방법이 시차 효과(Parallax scrolling)입니다.
이것은 카메라의 움직임을 모방하여 보는 사람으로 하여금 웹페이지의 층(layer)을 느끼게 하고 화면이 마우스 스크롤 위치에 따라 반응하여 즐거운 사용경험을 제공하게 됩니다.
이 효과는 예전에 개발되어 있었지만 모바일 환경을 위한 세로로 긴 사이트가 부각되며 자주 사용되고 있습니다.

참고사이트
Heinz http://www.heinz.co.kr/
Soundscape http://www.soundscape.nl/

 

5. 플랫 디자인(Flat style design)과 미니멀리즘(Minimalism)
플랫디자인은 스위스의 디자인 스타일, 또는 국제 표준 타이포그래피 스타일에서 시작되었습니다. 스위스의 디자인 스타일은 활판인쇄를 위한 디자인 스타일이 특징으로, sans-serif typefaces, 그리드 및 비대칭 레이아웃이 주로 사용됩니다.
웹에서의 플랫디자인의 시작이라고 볼 수 있는 마이크로소프트의 윈도우8은 앞서 말한 스위스의 UI디자인 스타일을 기반으로 하고 있습니다. 그리드를 기반으로 한 평면적인 구성과 색상에 큰 글자들은 단순하면서 가독성이 좋으며 미니멀리즘(최소한으로 절제된 표현만을 나타냄)에 따르는 객관적인 디자인에 초점을 맞추고 있습니다.
또한 이러한 디자인의 특징은 공백이 많습니다. 이러한 공백들은 각 컨텐츠가 강조하고자 하는 내용을 쉽게 전달할 수 있습니다.

참고사이트
윤디자인 http://www.font.co.kr/
현대카드 프리비아 http://taschen.hyundaicard.com/

 

6. 그리드만을 이용한 웹사이트
2013년에는 그리드만을 이용한 웹사이트를 많이 보았을 것입니다.
이러한 사이트들은 다양한 크기의 사각형 컨텐츠가 각각 다른 정보를 담아 격자의 형태로 나열되어 있습니다. 이것은 사진을 전시하는 것처럼 화면의 너비에 맞추어 최대한 많은 정보를 보여주는데 적합하며 특히 태블릿PC처럼 터치환경에서 편리하게 이용할 수 있습니다.
참고사이트

참고사이트
Banana Cafe http://bananacafe.com.br/
Fendi http://fendilife.fendi.com/#/home

 

2014년에는?

이제 2014년의 웹디자인의 동향을 예측해 볼 차례입니다.
아직 오지 않은 미래에 대한 예측은 쉽지 않으나 가장 기대되는 변화는 역시 HTML5, CSS3, Java script를 이용한 기술의 향상으로 더욱 인터렉티브한 사이트들이 선보여질 것으로 보입니다.
플래시가 거의 사용되지 않는 현재 웹디자이너들에게 인터렉티브한 사이트에 대한 갈증은 여전히 남아있지만 아직 그것을 충족할 수 있는 기술은 부족한 상태입니다. 2014년에는 그 ‘갈증’이 어느정도 해소되는 것을 기대하고 있습니다.
2013년에 웹사이트 구현 방식은 고전적인 방식을 탈피하여 네비게이션이 없거나 특이한 형태로 제공되는 것을 자주 보았고 단순 페이지 이동에 의한 정보의 나열을 벗어나 반응형 웹사이트기법을 통해 더욱 진보된 스토리텔링 기법이 나타날 것으로 생각됩니다.

 

 

참고 문서

Web design trends for 2013 By Joanna Krenz-Kurowska - 99designs.com/