표지

쉽고 간단하게 풀어 쓴 2014년 웹디자인 트렌드

스마트폰 등장 이후 웹디자인에서도 많은 변화들이 일어났습니다.
불과 4~5년 사이에 많은 것들이 바뀌었고
또 그것에 금새 익숙해져가는 과정을 반복했죠.
그래서 2014년을 마무리하면서 그 동안의 디자인 ‘변화’에 대해 살펴보고
다가올 2015년을 준비하는 시간을 가져보기 위해 생각을 글로 옮겨 봅니다.

최근 2년간 UX 디자인 업계에 가장 큰 변화는
‘스큐어모피즘’에서 ‘플랫 디자인’으로의 변화로 보여집니다.
완벽한 것 같았던 애플도 변화에 동참하며 플랫 디자인은 거대한 트랜드로 자리잡게 되었죠.

‘스큐어모피즘’과 ‘플랫 디자인’은 단순히 비주얼 스타일만으로는 설명이 부족합니다.
그 이면에는 기술의 발전과 사용자 환경의 변화가 내포되어 있죠.

 

스큐어모피즘을 넘어선 플랫 디자인의 등장

아이폰 등장 이후 다양한 스마트 기기가 등장하였습니다.
스마트폰 즉 ‘터치’만으로 모든 것을 제어할 수 있는 새로운 UI 환경이 탄생하게 됩니다.
예전에는 당연히 사용자들이 학습을 통해 새로운 UI 환경에 적응해야 했지만,
스큐어모피즘은 새로운 환경에 대한 거부감을 줄여주고
시각적으로도 빠르게 인지할 수 있게 도와주는 역할을 했습니다.

스큐어모피즘은 쉽게 ‘정밀묘사’ 정도로 표현할 수 있을 것 같습니다.
눈에 보이는 그대로를 표현하고
이전의 아날로그적 사용성을 디지털 환경에 그대로 적용해
사람들이 별다른 학습 없이도 익숙한 느낌으로 사용할 수 있도록 하는 디자인 방법입니다.
아래 예와 같이, 종이 재질의 패턴과 책장을 넘기는 인터랙션을 통해
사용자는 기존에 종이책을 펼쳐들 듯 전자책을 편안하게 그리고 당연하게 받아들이게 됩니다.

ipad-apps-009_medium

 

하지만, 급변하는 디지털 환경 속에서 디바이스는 점점 더 다양해지고,
사용의 복잡함도 늘어남에 따라,
이러한 환경에 빠르고 효율적으로 대응하기 위해 ‘사용자 중심’의 디자인에서
‘인간-컴퓨터 상호작용’ 중심의 디자인으로 변화가 일어납니다.
이러한 과정 중 표현의 한계에 부딪히게 된 ‘스큐어모피즘’ 대신 ‘플랫 디자인’이라는
새로운 컨셉이 등장하게 되죠.

제약된 공간과 다양한 해상도에 대응하기 위해
많은 정보를 표현하는 것은 오히려 정보 전달에 역효과를 불러오고 디자인 퀄리티를
보장 할 수 없게 된다는 단점이 있습니다.
다양한 해상도에서 유기적으로 반응하고 같은 사용성을 제공하기 위해 핵심 요소에
집중할 수 있는 디자인 표현방식이 ‘플랫 디자인’이라고 할 수 있습니다.

출처 – https://dribbble.com/shots/1002487-Flat-UI

03_03
플랫 디자인의 가장 중요한 요소로서 반응형 웹은 이제 필수적인 디자인 요건으로
자리잡았습니다.
다양한 디바이스에 하나의 소스로 디스플레이 규격과 상관없이 최적화된 화면을 제공하는 것.
사용환경과 행통패턴에 유기적으로 적절하게 반응하는 웹 요소들에 대한
총체적인 디자인입니다.
이런 반응형 웹을 잘 적용하기 위해서는 ‘타이포그래피’와 ‘그리드 시스템’ 역시
매우 중요합니다.


출처 – https://dribbble.com/shots/977830-Apple-devices-Flat-icons-PSD

 

이제는 다양한 디바이스에 가독성을 고려해 폰트를 이미지로 넣기 보다는
웹폰트(시스템폰트)의 활용으로 가독성과 접근성을 높이고 이전처럼 멋있게 보이기 위해
폰트를 작게 쓰는 방식은 사라졌습니다.
현재는 다양한 웹폰트가 제공되고 있고 미학적인 측면에서 더 발전하고 있습니다.

반응형 웹에서 가장 중요한 것으로 그리드 시스템이 빠질 수 없습니다.
그리드 시스템으로 인해 유동적으로 다양한 해상도에 맞게 조절되어 최적화된 화면을
볼 수 있습니다.

 

플랫 디자인 고도화

‘스큐어모피즘’에서 ‘플랫 디자인’으로의 변화에 우리가 크게 당황하지 않고
적응할 수 있었던 이유는 이미 몇 년간 새로운 UI 환경에 적응을 마쳤고
스마트 기기를 사용하는데 어려움이 없을 만큼의 사용 패턴을
이미 학습한 상태이기 때문이겠죠.

디지털 환경의 변화에 플랫 디자인은 스큐어모피즘을 대체 할 수는 있었지만
완벽하다고는 할 수 없었습니다.
그림자와 그라데이션이라는 막강한 효과를 앞세워 정보의 시각적 흐름을 만들어
어포던스를 쉽게 표현할 수 있었지만, 여러 가지 표현의 제약으로 인해 정보의 흐름과
어포던스를 제공하기가 더 까다로워졌습니다.
그래서 패턴화된 레이아웃큰 이미지 그리고 폰트에 집중하는 결과물들이 나오는 것이겠죠.

얼마 전 구글에서 발표한 ‘Material design’을 통해 알 수 있듯이
2015년에는 플랫 디자인이 점점 더 고도화되고 진화해 나갈 것입니다.

참고 – 구글의 머트리얼 디자인 가이드 함께 보기

a

w

출처 – 구글의 머트리얼 디자인

 

애플은 os X 요세미티를 통해 이제 맥에도 아이폰과 통일된 UI 디자인을 선보였죠.
반투명 효과를 통해 어포던스를 강조하고 있습니다.

 

맥 OS X 요세미티 vs OS X 매버릭스, UI 디자인 변화 비교해보니 : LiveREX's Break a Com.

출처 – http://liverex.net/2484

 

스토리텔링의 변화

플래시가 유행하던 시절에는 화려한 모션과 마우스 포인터에 반응하는 버튼을 활용했지만
HTML5의 등장으로 플래시를 대체하면서 스크롤을 활용한 패럴럭스(Parallax) 기법과
다양한 디바이스에 대응하기 위한 반응형 웹이 등장하게 됩니다.

비주얼을 통한 이야기를 전달하는 방식도 플래시를 쓰던 시절과 바뀌게 되었는데
가장 큰 차이점이라고 한다면 플래시에서는 이미지에 스토리를 결합했고,
패럴럭스는 콘텐츠에 스토리를 결합한 것이라고 할 수 있겠습니다.

 

 

Vertical Narratives

스크롤링을 통해 위에서 아래로 혹은 아래에서 위로 사용자의 의식이 이어지면서 펼쳐지는 구성요소들로
하나의 스토리를 만들어 나가는 구조입니다.

  • Parallax

스크롤을 이동할 때마다 배경화면이나 오브젝트들이 각각 시간차를 두고 시각적으로 변화하면서
입체감과 깊이감을 주고 마치 영상을 보듯 콘텐츠를 볼 수 있습니다.
패럴럭스를 이용하여 화면을 구성하면 전달하고자 하는 컨텐츠들에 스토리를 불어 넣을 수 있게 됩니다.

 

  • 고정네비게이션

반응형 웹과 패럴럭스 기법 등 현재는 어떤 형태로든 스크롤의 역할이 중요해졌습니다.
플래시를 활용한 디자인을 했을때는 스크롤 영역을 최대한 배제하면서 디자인을 했다면
이제는 다양한 디바이스의 접근을 고려해 스크롤을 적극적으로 활용하여 콘텐츠를 정렬해야 합니다.
이로 인해 페이지 전환과 UI의 편의성을 제공해 주기 위한 고정영역을 가진 네비게이션의 활용도가 높아졌습니다.

 

인터랙티브 스토리리텔링

인터랙티브 스토리텔링(interactive storytelling)이란, 게임 디자이너 크리스 크로포드가 제안한
인터랙티브 엔터테인먼트의 한 종류로, 컴퓨터의 상호작용을 이용한 서사의 한 형태입니다.
(참조– 위키백과 )

간략히 표현하자면 ‘사용자 참여형 이야기 구조’입니다.
이미 웹에서도 프로모션이나 광고 등에 종종 쓰이고 있지만 그 방식은 조금 달라질것 같습니다.

출처 – 보해소주 한가인 광고

이전에는 단순히 참여를 유도해 직접 ‘yes’ or ‘no’를 선택해야 했지만
소셜미디어와 빅데이터의 활용으로 이제는 사용자가 원하는 것들을 먼저 제공하고 제안해
이야기의 주인공이 되도록 만드는 형태로 발전할 것 같습니다. (개인화를 너무 어렵게 푼 것 같네요. ^^)

 

간단하게 실무에 임하면서 피부로 느끼게 되었던 내용들을 정리했습니다.
아마 다들 느끼고 계셨던 표면적으로 드러난 현상에 제 개인적인 단상과 메모를 더했습니다. ^^
다른 분들은 올 한해 어떻게 느끼셨는지 궁금하네요.

새해, 오늘보다 더한 가치의 내일!
늘 함께 하시기 바랍니다.

 

– 가치디자인그룹 홍혁준

 

Share this:

Leave a comment