요즘 스마트폰과 웹 사이트 디자인의 트랜드는 플랫 디자인 즉 평면 디자인입니다. 구글 메터리얼 디자인, MS사의 플랫 디자인과 같이 IT회사마다 부르는 이름은 조금씩 다르지만 애플, MS사, 구글 모두 평면 디자인을 사용하고 있습니다. '평면 디자인'은 3차원으로 표현하던 각종 디자인 요소들을 3차원이 아닌 단순하고 대비를 이용한 2차원과 같은 평평한 느낌이 들게 하는 디자인입니다.
대표적인 것이 윈도우8, 윈도우10입니다. 또한 최근에 나오는 대부분의 앱들이 이 평면 디자인을 따르고 있습니다. 특히 구글이 직접 만든 앱들이 이 평면 디자인들입니다. 그런데 전 이 평면 디자인을 별로 좋아하지 않습니다. 깔끔하기는 한데 입체감이 없다 보니 너무 밋밋합니다.
또 하나의 불만은 IT업계를 보면 한 기업이 어떤 디자인을 추구하면 너도나도 다 따라합니다. 그것도 거대 기업 몇 개가 하면 많은 IT기업들이 따라갑니다. 물론 구글 같이 메터리얼 디자인 가이드를 배포해서 이렇게 디자인하라고 권고하는 것도 영향이 있지만 그렇다고 평면 디자인이 과연 소비자들에게 도움이 되고 유용하고 칭찬 받는 디자인인지 제대로 따져 봤냐는 것입니다.
아래에 소개할 글을 보면 평면 디자인은 웹 사이트 체류 시간을 늘리긴 하지만 브랜드에 대한 부정적인 생각을 심어 놓는다는 연구 조사 결과가 있네요.
평면 디자인은 주목도를 떨어트리고 덜 클릭하게 만든다
원문 : Flat UI Elements Attract Less Attention and Cause Uncertainty
컨설팅 회사인 닐슨 노먼 그룹이 평면 디자인에 대한 조사를 담은 글을 바탕으로 제 의견을 넣어서 소개합니다.
평면 디자인에 대한 조사를 위해서 일반 웹 사용자 71명을 모아서 각각의 사용자에게 9개 중 하나의 웹 사이트에 접속을 요청했습니다. 웹 사이트에 접속을 하면 눈의 움직임을 추적하거나 페이지에 머무는 시간을 측정해서 웹 사이트에서 어떤 작업을 하는 지 살펴봤습니다.
9개의 사이트는 버튼에 그림자가 있는 입체감을 느낄 수 있는 예전에 많이 사용하던 3D 스타일의 디자인과 버튼에 그림자가 없는 평면 디자인 디자인을 적용했습니다. 이 2개 버전의 디자인은 버튼, 메뉴바 등 웹 페이지 전체에 적용했습니다.
<3D 스타일 디자인 (왼쪽), 평면 디자인 (오른쪽)>
그 결과 버튼에 그림자가 있는 3D 스타일 디자인보다 버튼에 그림자가 없는 평면 디자인이 적용된 웹 페이지에 머무는 시간이 22%나 길었습니다. 또한, 사용자가 시선을 고정 할 때 까지의 걸리는 시간도 25%나 길었습니다. 얼핏 보면 머무는 시간이 22%나 길어져서 평면 디자인이 효과가 좋은 것으로 보일 수 있으나 이 머무는 시간이 긴 이유는 버튼이 어디에 있는 지 몰라서 헤매는 시간이 길어져서 머무는 시간이 길어진 것입니다.
저도 평면 디자인에서 가장 마음에 안드는 것이 가독성은 좋을 수 있으나 어디에 버튼이 있는지 찾은데 많은 시간이 걸립니다. 이게 정말 짜증이 납니다. 단순하고 단촐한 것은 좋은데 문제는 로그인 창이나 확인 버튼, 메뉴 버튼 등등이 어디에 있는 지 한 눈에 들어오지 않습니다. 이러다 보니 원하지 않게 길게 머물게 됩니다.
위 이미지는 사용자가 웹 사이트에서 어디를 봤는지를 담은 데이터입니다. 왼쪽인 3D 스타일 디자인은 왼쪽 상단과 중간에 집중적으로 몰려 있습니다. 사람들이 여기를 가장 많이 봤다는 소리죠. 반면 평면 디자인은 왼쪽 상단 중단에도 많이 봤지만 상단 중간과 가운데 부분도 많은 봤습니다. 3D 스타일 디자인보다 평면 디자인이 사람들의 시선을 분산시키는 것을 알 수 있습니다.
<3D 스타일 디자인 (왼쪽), 평면 디자인 (오른쪽)
위 이미지는 Herz 렌터카 웹 사이트를 3D 스타일 디자인(왼쪽)과 평면 디자인(오른쪽)입니다. 두 디자인의 차이를 보면 상단 Book a Car 상단 메뉴가 한쪽은 회색, 한쪽은 노란색으로 되어 있습니다. 또한, 하단 Book a car 파란 버튼이 3D 스타일 디자인은 버튼에 그림자가 있고 평면 디자인은 그림자가 없습니다.
<3D 스타일 디자인>
3D 스타일 디자인을 적용한 웹 사이트에서 사용자의 시선을 추적해보니 왼쪽 상단과 중간 부분에 있는 View / Modify / Cancel a Reservation 탭에 집중적으로 머문 것을 볼 수 있습니다.
<평면 디자인 (오른쪽)>
반면 평면 디자인은 메뉴 탭뿐 아니라 오른쪽 상단과 하단까지 전체적으로 시선이 분산된 것을 볼 수 있습니다.
이번엔 사용자에게 Brilliant Earth라는 보석점 웹사이트에서 보석 진주를 찾을 것을 지시했습니다.
디자인의 차이는 3D 스타일 디자인은 문장 아래에 SHOP PEARL이라는 텍스트 링크가 있고 밑줄과 녹색으로 채색이 되어 있습니다. 반면 플랫 디자인은 밑줄도 채색도 되어 있지 않습니다.
<3D 스타일 디자인 (왼쪽), 평면 디자인 (오른쪽)>
사용자들에게 테스트를 해보니 밑줄 및 색으로 SHOP PEARL을 구분을 한 3D 스타일 디자인은 29명 중에 25명이 SHOP PEARL으로 시선을 움직였습니다. 반면 SHOP PEARL에 밑줄도 색도 칠해지지 않는 평면 디자인는 24명 중에서 12명만 SHOP PEARL에 시선을 줬습니다. 이 24명 중 9명은 텍스트 문장을 훑어 봤지만 텍스트 링크는 눈길도 주지 않았습니다.
이 조사 결과에 따르면 콘텐츠와 버튼과 같은 액션을 취하는 메뉴가 비슷한 모습으로 비추어지는 평면 디자인은 사용자가 빠르게 이동 메뉴나 버튼을 찾기 어려운 디자인이라고 지적하고 있습니다. 이는 사용자의 시간을 낭비하게 되고 사용자에게 그 웹 사이트나 브랜드 또는 서비스에 대한 안 좋은 감정만 낳게 합니다.
그럼에도 평면 디자인을 고집한다면 정보량이 적은 웹 사이트나 메뉴 버튼이나 버튼이 다른 메뉴로 부터 멀리 떨어진 곳에서는 평면 디자인에서도 버튼을 쉽게 찾을 수 있다고 말하고 있습니다. 평면 디자인을 잘 사용하려면 시각적으로 간단 명료하고 일관성이 있고 시각적으로 확실히 계층 구조를 담고 있다면 좋은 효과를 낼 수 있다고 합니다.
평면 디자인이 무조건 나쁘다는 것은 아니고 평면 디자인을 잘 활용하지 못하면 오히려 이전의 3D 스타일의 디자인보다 못함을 넘어 짜증 유발 디자인이 될 수 있습니다.
