UI/UX

[Special Issue] Part 2 – 05. 디자이너, 트렌드를 이해하다

2017년 8월 10일

01. 디자이너, 모바일을 이해하다
02. 디자이너, 브랜딩을 이해하다
03. 디자이너, 모바일 UX 사용성을 이해하다
04. 디자이너, 자신만의 색을 갖다
05. 디자이너, 트렌드를 이해하다

트렌드를 지속적으로 서비스에 반영한다는 것은 사용자들을 만족시키는 면에서 매우 중요하다. 실제로 모바일의 빠른 발전 속도만큼이나 모바일 앱 디자인을 바라보는 사용자의 눈은 빠르게 높아지며 전문화되고 있다. 때문에 그들 수준에 맞춰 빠르게 트렌드를 반영함으로써 서비스가 살아있음을 보여주는 것은 사용자를 그만큼 배려한다는 뜻으로 풀이할 수 있다.

한 사람의 스마트폰에 깔린 앱은 그 사람의 성향(취미, 좋아하는 것, 유행에 민감한지 등)을 상징한다. 사용자는 트렌드에 뒤처지는 앱을 결코 사용하려 하지 않는다. 우리는 트렌드 분석을 통해 모바일 디자 인이 어떻게 발전하는지를 알 수 있으며, 그 흐름을 분석하면 편리한 UX에 대한 해답을 얻을 수 있다. 누구보다 발 빠르게 최신 트렌드를 습득하는 것은 모바일 UX 디자이너가 갖춰야 할 기본적인 행동양식 일 것이다.

1 스큐어모피즘(Skeuomorphism)에서 플랫 디자인 (Flat Design) 으로의 진화

현재 모바일이나 웹에서 핫한 디자인 트렌드를 꼽자면 두말할 필요 없이 플랫 디자인이다. 플랫 디자인이란 무엇인가?

Flat + Design
flat의 사전적 의미는 ‘평평한’, ‘고른’, ‘납작한’ 등이다. 즉, 추가적 효과(Drop shadows, bevels, embossing, gradients 등) 없이 평면적인 스타일을 적용한 디자인을 뜻한다.

이에 앞서 스마트폰 출시 이후 가장 뜨거웠던 모바일 UI 스타일은 애플의 ‘스큐어모피즘’이다. 초기 스마트폰 발전을 이끌었던 아이폰 UI 스타일은 모바일 앱에 큰 영향을 미쳤고, 모바일 앱 디자인의 가 이드 역할을 했다. 이러한 애플의 UI에는 기본적으로 스큐어모피즘 이라는 콘셉트가 내포돼 있다. 애플은 80년대부터 30년이나 이 콘 셉트를 유지해 왔다. 스큐어모피즘은 실제 존재하는 메타포(Real- LifeMetaphor)로부터 형태를 따와서 디자인하는 것을 말한다. 이 디자인 패러다임은 스마트폰 출시 초기 터치스크린 기반의 UI에 익숙지 않은 사용자에게 유용하다. 오프라인 제품 사용법 그대로를 터치스 크린에서도 가능하게 해 처음 사용하는 누구라도 쉽게 사용법을 인 지할 수 있도록 했다. 현실에서 느낀 아날로그적 감정을 디지털 기기 인 스마트폰에서 그대로 느낄 수 있도록 하고, 직관적이기 때문에 사 용법을 미리 짐작할 수 있다. 어떤 기능이나 서비스인지 알 수 있게끔 도와주는 사용 유도 역할을 하는 것이다.

예를 들자면, iOS에서 제공하는 iBooks는 실제 책의 형태를 UI에 도 입해 스마트폰에 친숙하지 않은 사용자도 어떤 방식으로 사용해야 하는지 직감으로 알 수 있게 했고, iCal에 있는 스티치 무늬와 상단에 찢긴 달력 형태는 실제 달력의 아날로그적 감정을 디지털로 가져올 수 있도록 한다. 편리한 디지털의 이성과, 따뜻함이 느껴지는 아날로 그적 감성의 조화. 새롭지만 익숙한 것이 함께 조화롭게 표현되는 익 숙한 새로움을 표현했다고 볼 수 있다.

Special Issue, UX - 디아이 매거진 — 스큐어모피즘의 애플 iBooks – 실제 책 형태를 차용해 직감적으로 사용법을 알 수 있게 했다.

그러나 스마트폰 출시 후 몇 년의 시간이 흐른 지금,사용자는터치스 크린 기반 디지털 기기에 익숙해졌고 스큐어모피즘의 필요성 또한 약 해지기 시작했다. 이것은 스큐어모피즘이 옳고 틀리고의 문제가 아니 다. 디지털에 대한 사람들의 익숙해짐의 문제고, 이미 알고 있는 기능 에 대해 추가적인 설명을 해주려 현실의 메타포를 너무나 디테일하게 표현하는 스큐어모피즘 디자인에 사용자들이 부담을 느끼고 식상해 하기 시작했다는 것이 관건이다.

공식적인 발표는 아니지만, 최근 스큐어모피즘을 과하게 적용한다는 비판으로 인해 애플이 iOS7에서 그 요소 상당 부분 걷어낼 것이라는 소식도 들리고 있다. 기능과는 상관없는 장식적 요소로서의 과도한 스큐어모피즘을 줄이고 새로운 플랫 디자인을 채워 넣겠다는 것. 즉, 5년이 넘게 유지한 iOS 의 UI에 전체적인 변화를 준다는 말인데, 사 실 스큐어모피즘은 애플의 아이덴티티와 같은 것이기 때문에 새로운 트렌드의 흐름을 얼마나 수용하며 어떤 새로운 가이드를 제시할지에 대해 업계 이목이 집중되고 있다.

이제 모바일 UI 디자인은 2007년 MS가 ‘Zune’을 출시하며 선보인 미려한 타이포의 UI로 돌아가고 있다. 이는 심플하고 평면적인 플랫 디자인 적용 사례다. 제품 출시 당시 Zune의 심플한 UI가 큰 이슈가 됐는데, 터치스크린 기반 UI 디자인에 새로운 방향을 제시하는 느낌 이었다. 제품의 실패에도 불구하고 Zune의 UI는 윈도폰의 UI로 향상 및 발전했고, MS 윈도우8의 인터페이스에 고스란히 적용했다.

플랫 디자인은 트렌드임에는 분명하지만 새로운 개념은 아니며, 윈도우8의 UI와 구글 서비스들이 플랫 디자인을 본격적으로 적용하면서 인기가 상승하고 있다. 이제 본격적으로 모바일 서비스도 플랫 디자 인의 시대가 열릴 것으로 보인다.

1-1 플랫 디자인은 어떤 장점을 가지고 있을까?

1-1-1 확장성

플랫 디자인의 주요 장점은 바로 반응형 디자인에 최적화돼 있다는 점이다. 심플하고 솔리드한 디자인을 채택하는 이유는 많지만, 다양 한 디바이스 및 해상도에 따라 변화하는 반응형(Responsive) 디자인 을 적용할 때 탁월한 확장성을 보여준다. 이미지 버튼 대신 컬러 링크를, 패턴화 배경 대신 단순한 배경처리로 다양한 디바이스에 쉽게 적용할 수 있다.

보통 하나의 이미지를 다양한 해상도에 맞게 변화시키려면 각 상황에 맞는 이미지를 전부 만들어야 한다. 하지만 단순한 플랫 디자인 형태 로 제작하면 이미지를 쓰지 않고 CSS만으로도 디자인을 구현하는 것 이 가능하기 때문에, 모든 이미지를 만들 필요가 없고, 용량 역시 최소화시킬 수 있다. 모든 해상도에 대응 가능해 아무리 큰 해상도라고 해도 이미지가 흐려지는 현상이 없다.

1-1-2 콘텐츠 집중성

플랫 디자인에는 시각적 부담이 없기 때문에 콘텐츠 집중력을 향상시킨다. 메모앱은 콘텐츠 특성상 PC 메모장처럼 단순한 것이 좋다. 굳이 현실의 노란색 메모패드를 그대로 옮겨올 필요는 없다. 오히려 너무 스큐어모피즘에 치중하고, 현실의 메타포를 그대로 구현하기 위해 초사실주의적 디자인에 집착하면 간단하게 사용해야 할 앱이 무겁고 부담스러우며 결국 콘텐츠에 집중할 수 없게 된다. 이때 간단한 사용자 인터페이스와 UI 요소를 구현해 콘텐츠에 집중할 수 있도록 하자. 개인적으로 애플의 게임센터(Game Center) 앱은 스큐어모피즘의 잘 못된 사례 중 하나다. 상·하단 바에서부터 과도한 텍스처가 들어가 있고, 카지노에 들어선 느낌을 주기 위해 과도하게 디자인한 UI 요소는 앱을 실행 전부터 사용자를 부담스럽게 만들기 때문.

1-1-3 사용성

플랫 디자인은 목적 지향적 디자인으로 기능과 콘텐츠, 사용자 최종 행동에 포커스가 맞춰 있다. 모든 산만한 디자인 요소를 제거하고 꼭 필요한 내용과 사용자 목표에 집중하도록 설계되기 때문에 사용자로 하여금 목표를 쉽게 이루게 한다.

1-1-4 모던함

플랫 디자인은 심플함으로 인해 장식적 요소가 없고 간결한 레이아웃을 가지고 있다. 때문에 부담스럽지 않고 깔끔하며, 타이포그래피와 여백, 컬러를 더욱 강조한다. 이는 모던하고 세련된 느낌을 주는 가장 큰 이유다.

1-2 플랫 디자인의 기법

1-2-1 모든 장식적 요소를 배제하라

플랫 디자인은 스큐어모피즘이 아니다. 현실의 메타포를 UI에 반영할 필요가 없다. 이제 장식으로 사용하는 현실의 메타포 요소를 배제하고 본연의 기능에 충실한 디자인이 필요한 때다.

1-2-2 효과를 걷어내라

플랫 디자인은 다른 추가 효과(Drop shadows, bevels, embossing, gradients등) 없이 평면적인 스타일을 지향하므로 최대한 효과를 걷어내는 방식으로 작업한다. 주의할 점이 있는데, 평면적 디자인이라 해서 아무 효과가 없는 것은 아니다. 플랫 디자인은 최대한 평면적으로 보이는 것을 지향하는 스타일을 말하는 것이지 완벽한 평면 디자인은 아니다. 평면적 디자인은 그 자체로는 완벽할 수 없다. 실제로 약간의 효과와 기법을 가미하면 더욱 강력한 효과를 낼 수 있다. 실제로 효과가 전혀 없을 경우 미완성 같은 느낌을 준다. 구글은 이러한 이유 로 완벽한 플랫보다 약간의 텍스처와 그림자 효과를 준 플랫 디자인 (almost flat)을 지향하고 있다.

1-2-3 컬러에 집중하라

스큐어모피즘에서 버튼을 버튼답게 보이기 위해 볼록하고 입체적인 디자인을 적용한 반면 플랫 디자인에서의 버튼은 색상과 명도 차이로 해결할 수 있다.

1-2-4 타이포그래피에 집중해라

플랫 디자인에서 타이포그래피는 큰 비중을 차지한다. 사용자에게 메시지를 전달하거나, 사용자의 행동을 유도하는 힌트도 타이포그래피를 이용하는 경우가 많다. 때문에 어떠한 글꼴을 사용하는지, 어떤 메시지를 표현하는지가 상당히 중요해졌다. 이것은 사용자가 느끼는 서비스에 대한 인상에 큰 영향을 끼친다.

2 줄어드는 터치(탭), 늘어나는 제스처

이전에는 모바일에서 어떤 결과를 만들기 위해서는 버튼을 터치하는 것이 필수 요소로 알려졌다. 버튼을 버튼답게 만들어 사용자가 쉽게 인지할 수 있도록 하고 그것을 터치해 특정 목적을 완수하는 것은 사 용성의 측면에서도 중요한 부분이라고 생각했다. 하지만 모바일 UX 디자인이 다양한 시도와 실험에 의해 빠르게 발전하고 있고 사용자 들이 터치스크린 UI를 이해하는 지금 시점에서는 터치 수를 줄이고, 대신 스와이프, 스크롤 등 다양한 제스처를 활용하는 경우가 많아지 고 있다.

예를 들어 우리가 생각하는 화면의 ‘새로 고침’이나 콘텐츠 리스트 ‘더 보기’ 기능을 이제까지 버튼을 터치로 호출했다면, 이제는 화면을 위· 아래로 당겨 호출하는 형태로 전환하고 있다. 윈도폰 피벗 기능처럼 화면을 좌·우로 스와이프해 다른 메뉴로의 내비게이션 역할을 수행하 도록 바뀌고 있기도 하다.

3 다양한 재미를 포함한 애니메이션과 트랜지션 효과의 증가

이후의 모바일 앱에는 다양한 애니메이션 및 트랜지션(화면 전환) 효 과가 포함될 것이라 기대한다.

초창기 웹사이트가 단방향 정보만을 전달하는 텍스트 베이스 디자인 이었던 것을 기억하는지 모르겠다. 지금 웹에서는 상상하기 어려울 정도로 정적인 모습이었지만 당시에는 그런 웹을 훌륭한 프로젝트라고 평가했다. 이는 좋은 하드웨어 보급과 함께 플래시, CSS를 이용한 기술이 발전한 뒤 다양한 레이아웃이 등장함에 따라 보다 더 동적인 형태로 변화하고 있다.

모바일 앱도 그 발전 양상을 그대로 따른다. 초기 스마트폰 하드웨어 성능이 좋지 않고, 데이터 전송 속도와 비용 또한 만만치 않았을 때의 모바일 앱 디자인은 단순함을 모토로 했다. 최소한의 이미지와 애니 메이션, OS가 제공하는 기본 트랜지션 효과가 전제였다. 하드웨어가 급속도로 발전하고 3G에서 LTE로 통신 시스템이 전환되고 있는 이 시점에 이미지 용량과 전송 속도는 큰 문제가 되지 않는다. 이에 따라 최근 서비스에 재미를 더하는 애니메이션과 창의적 트랜지션을 사용하는 앱이 늘고 있다. 이제는 사용자가 버튼을 터치하고 콘텐츠가 로딩되는 동안 기다려줄 것을 기대하면 안된다.그순간에우리는사용 자가 지루하지 않도록 다양한 재미 요소를 표현해야 하고, 이 역시 서비스 사용성을 높이는 중요한 부분이 됐다.

4 네이티브 앱으로의 복귀

모바일 앱의 흐름은 네이티브 앱으로 되돌아가고 있다. 이전까지는 업 데이트의 불편함과 관리의 어려움으로 인해 네이티브 안에 웹을 결합 시키는 하이브리드 앱이 발전 중이었다. 더 나아가 실행할 때는 네이티브 앱의 형태, 실행 후의 모든 부분은 하이브리드 앱으로 구현하는 흐름도 있었다. 그러나 모바일 웹은 아직 완벽하지 않은 HTML5에 의해 속도와 퍼포먼스면에서 네이티브와 성능 차이를 드러냈으며 웹을 이용한 하이브리드 형태는 앱을 불완전하게 만들고 매끄럽지 않은 화면 간 트랜지션을 촉발했다. 이는 디자인을 표현함에 있어 고려할 부 분들이 많아지게 했고 여러 한계를 드러낸다. 물론 가까운 머지않아 HTML5 기술이 빠르게 발전해 많은 소비자가 혜택을 볼 것이다. 그러 나안 정화 등 여러 측면에서 볼때 아직은 시기상조로 보인다.이에 많은 앱이 서비스 고도화를 위해 다시 네이티브로 전향하는 중이다.

5 트렌드 수용은 서비스에 맞게!

이전에도 강조했듯 트렌드를 무분별하게 받아들이면 자신만의 색을 잃어버리고 개성이 사라진다. 수많은 앱이 존재하는 시장에서 강력한 이미지를 구축하려면 다른 서비스와 차별화되는 특별함이 필요하다. 그렇기 때문에 자사의 서비스에 맞게, 그리고 자사 서비스만의 색깔을 명확하게 표현할 수 있는 정도의 트렌드 반영이 가장 중요하다. 트렌드에서 핵심 요소가 무엇인지, 그것을 서비스의 핵심 철학 및 콘셉트에 어떻게 맞추고 적용할지 깊이 고민해야 한다.

2017 August, Special Issue

디지털 인사이트

디지털 인사이트님의 아티클 더 보기

[Special Issue] Part 2 – 05. 디자이너, 트렌드를 이해하다