Last Updated:

모바일 : 2015 – UI/UX 트렌드

카테고리: 블로그 글

앱 화면이나 웹 브라우저 혹은 웨어러블 와치 화면이든 디자인은 사용자의 행동을 이끄는 가장 중요한 원동력이다. 필자는 플랫 디자인부터 머티리얼 디자인까지 진화해온 트렌드를 분석했고 거기서 이해한 내용을 여러분과 함께 나누고자 한다. 다시 말해 어떤 트렌드가 있는지, 그 트렌드가 사용자에게 왜 유용한지, 어떻게 만들어졌는지를 이야기하겠다.

플랫 디자인과 머티리얼 디자인이 어떻게 실제로 화면에 적용되고 다듬어져서 오늘날 우리가 아는 트렌드가 되었는지 살펴보자.

 

가벼워진 디자인

이미지 제공: Ghani Pradita

설명

그래디언트와 그림자를 더이상 넣지 않는 ‘플랫 디자인’으로 이동하니 앱에서 좀 더 가벼운 느낌이 든다. 그래디언트와 그림자 대신에 여백을 활용하면 인터페이스는 단순해지고, 사용자는 핵심 정보에만 집중하며, 무익한 디자인 요소는 빠진다.

이유

단순해진 디자인은 화면에서 산만함을 없애주므로 사용자의 눈은 중요한 콘텐츠를 바라보며 화면 전체를 재빨리 둘러볼 수 있다. 브랜드 역시 세련되고 모던하게 느껴진다.

 

한 가지 서체를 전체에 적용하기

이미지 제공: Brian Plemons

설명

화면에 보이는 폰트 수를 줄이면 타이포그래피 효과가 높아진다. 여러 가지 서체를 사용하지 않고, (기울임, 굵게, 약간 굵게 같은) 다양한 속성과 폰트 크기로 시각 효과를 높이면 콘텐츠의 각 영역이 뚜렷하게 구별되어 보인다.

이유

단일 서체를 모든 앱에서 쓰도록 하면 브랜딩 뿐만 아니라 (앱, 모바일 웹사이트, 웹사이트와 같은) 여러 채널에서도 일관성이 지켜진다. 고로 모든 채널에서 모바일 요소를 능률적으로 활용할 수 있다. 중요한 콘텐츠를 찾으려고 화면을 스크롤해서 보는 사용자도 마찬가지로 한 가지 서체만 쓰인 디자인을 선호한다.

 

공간과 블록, 사라진 선

이미지 제공: Eric Atwell

설명

이전에는 화면에 들어간 특정 영역이나 카테고리를 명확히 그어주기 위해 선과 디바이더를 사용하곤 했다. 그런데 이런 요소를 넣으니 인터페이스는 조밀해지고 복잡해져 버렸다. 선이 없는 대신, 여백으로 콘텐츠 블록들을 분리한 인터페이스는 공간이 자유롭고 화면이 깔끔하다는 것이 장점이다.

이유

디자인에서 명시된 선과 디바이더를 빼면 기능에 중점을 둔 모던한 디자인이 된다. 예를 들어 이미지와 폰트를 키우면 시각적으로 명쾌해지고 사용성이 더 좋아진다. 선을 긋지 않고 공간을 활용한 디자인은 사용자의 눈에 거슬리지 않으면서 영역이 서로 다름을 확실히 보여준다.

 

눈에 띄는 데이터

이미지 제공: Morgan Allan Knutson

설명

사용자들이 단순한 인터페이스를 좋아하게 되니, 특정한 데이터에 시선을 두도록 폰트를 키우고 눈에 띄는 색상을 쓰는 일이 흔해졌다. 당신은 이 방식을 응용해서 목표가 되는 고객에 따라 다양한 방식으로 데이터를 강조할 수 있다.

이유

화면에서 눈에 거슬리거나 강제로 시선을 유도하거나 사용자에게 지시하지 않고도, 데이터에 돋보이는 컬러를 입히고 폰트를 키우면 사용자의 시선은 자연스레 그곳에 꽂힌다. 그 결과, 사용자는 신속히 정보에 도달하고 화면을 둘러보며 정보를 모으는 경험을 하게 된다.

 

마이크로 인터랙션

이미지 제공: Kirill

설명

마이크로 인터랙션은 사용 사례(use case)를 중심으로 발생하는, 미세하게 향상된 변화(예로, 애니메이션, 사운드 등)를 말한다. 이런 유형의 시나리오에는 결제 완료하기, 아이템에 ‘좋아요’ 표시하기, 팝업 메시지 띄우기가 있다. 이 인터랙션은 잘 감지되지 않지만, 시선을 정확한 요소에 두게 해서 제품을 차별화시킨다.

이유

마이크로 인터랙션은 사용자가 과업(예로, 설정 변경하기)을 완료하는 동안, 팝업 메시지 같은 작은 콘텐츠를 넣어줌으로써 효율성을 높인다. 사용자를 유도하는 일종의 신호가 되는 셈이다. 사람들은 마이크로 인터랙션이 잘 구현된 앱을 더 편하고 재미있으며 매력적이라고 생각한다.

 

색상 수가 줄어든 컬러 팔레트

이미지 제공: Ari

설명

플랫 디자인이 2013년에 소개된 후로 명료함과 단순함을 아우르는 색채의 단순 배합이 트렌드가 되었다. 디자인이 산뜻하게 보이도록 디자이너와 사용자 둘 다 색상을 적게 쓰는 것을 선호한다.

이유

특정한 분위기를 조성하고, 시선을 둘 부분으로 사용자를 유인하며, 브랜드를 알리는 데는 반드시 색상이 필요하다. 색상을 더 적게 사용하면 할수록 브랜드 아이덴티티는 더 명확히 전달된다. 그리고 색상 과다로 생기는 산만함을 없애고, 핵심 기능을 잘 표시하며, 앱의 흐름에서 내비게이션을 향상하기 때문에 사용자들은 이런 디자인을 좋아할 수 있다.

 

레이어를 겹겹이 쌓은 인터페이스

이미지 제공: Roman Nurik

설명

이전에는 스큐어모피즘 원칙대로 인터페이스를 디자인했다. 스큐어모피즘은 실존하는 원형 구조나 물건에서 힌트를 얻는 디자인이다. 그 예로 탁상용 종이 달력과 닮은 디지털 캘린더, 앱 아이콘에 있는 삼차원 ‘입체감’, 모바일 폰에서 나는 ‘찰칵(카메라 셔터를 누르는 소리)’ 소리가 있다. 이 원칙을 떠나 플랫 디자인으로 트렌드가 옮겨가면서 새로운 방식으로 입체감을 보여줄 기회가 열렸다. 먼저 레이어를 이용해 깊이와 차원을 느끼게 하고 ‘터치해서 알 수 있는’ 경험을 하게 하면 된다.

이유

플랫 디자인의 이면에는 ‘너무 편평하다’는 우려가 도사리고 있었다. 편평해서 감지하기도 어려운데, 3차원의 물리적인(이전에는 디지털인) 세계로 표현한다면 어떻게 사용자가 화면을 보고 관심을 두도록 할 수 있을까? 레이어에는 Z축을 이용해서 하나의 아이템을 다른 아이템 위에 얹어 보이게 하는 능력이 있다. 그래서 레이어를 사용하고 그림자 농도를 적절히 조절하면 사용자로 하여금 아이템의 계층 관계를 이해하고 시선을 특정한 아이템으로 가게 할 수 있다.

 

고스트 버튼

이미지 제공: Gleb Kuznetsov

설명

고스트 버튼이란 바탕색이 채워지지 않아서 투명한 버튼이다. 버튼의 가장자리는 매우 얇은 선으로 둘려있다. 그리고 그 모양은 직사각형이나 정사각형의 기본형으로 모서리는 직각이거나 둥글다. 버튼에 들어간 텍스트는 간결하고 단순하다.

이유

이 버튼은 깔끔하고 세련되며 눈에 띄지 않은 듯 보이면서도 사용자의 시선을 끈다. 한 페이지에(한 화면에) 서로 다른 버튼이 있다고 가정해보자. 우선순위 대로 버튼을 디자인하고 화면에 배치해서 사용자에게 계층 구조를 알려줄 수 있다(예로, 고스트 버튼을 선택 과정이나 중간 단계에 사용하기). 머티리얼 디자인의 일부 사례에서는 버튼에 그림자를 살짝 넣어 사용자가 그 계층 구조를 인지하게 한다.

 

제스처

이미지 제공: Javi Pérez

설명

자이로스코프와 모션 센서가 통합되면서 사용자의 기기에서 움직임을 감지하는 게 가능해졌다. 이로써 사용자와 기기의 상호작용이 클릭을 벗어나 실생활에서 하는 제스처를 화면에 담을 정도까지 확장되었다.

이유

사용자는 직관적으로 제스처를 한다. 아이템 하나를 어떻게 삭제하는지 물어보니 나이와 성별에 상관없이 누구나 그 아이템을 화면 밖으로 빼려고 했다. 탭 수를 줄이고 화면을 스크롤하게 해서 사용자 경험을 향상하라. 즉 터치하는 대상뿐만 아니라 화면을 특정한 위치로 설정해 놓으면 애플리케이션은 사용자와 더 활발히 상호작용할 수 있다.

 

모션

이미지 제공: Eddie Lobanovskiy

설명

소프트웨어의 혁신으로 이제 디자이너들은 스타일시트에서 움직임을 제어할 수 있다. 모션을 기반으로 한 디자인 요소들은 트랜지션, 애니메이션, 심지어 3차원 입체처럼 보이는 텍스처 위에서 다양한 형태로 보일 수 있다. 디자인에 모션을 사용하면 사용자는 움직이는 콘텐츠에 관심를 갖고 관련 정보를 습득하려고 한다. 이는 동작하는 요소나 데이터/오브젝트가 다른 요소와 차별화되어 중요하게 부각되기 때문이다.

이유

모션은 사용자의 시선을 특정 영역으로 이끌거나 아예 다른 데로 돌릴 수 있다. 반응을 눈에 보여주고 와우 팩터(wow factor)로 사용자의 흥을 돋우어 행동을 활발히 유도할 수 있다.

 

단축된 사용자의 작업 흐름

이미지 제공: Jan Losert

설명

매매나 업무를 처리하기 위해 여러 페이지를 이동하는 것보다 그 중간 과정들을 한 화면에 몽땅 넣는다면, 사용자는 웹에서 들여야 하는 시간과 노력을 많이 아끼게 된다. 예를 들어 (같은 페이지에서 버튼을 클릭하면 바로 아래서) 폼이 스스로 펼쳐지거나 이전 필드에 정보가 입력됐으면 그다음 입력할 부분을 표시하는 것처럼 말이다.

이유

모바일 사용자들은 바쁘게 일하는 와중에도 앱에서 다른 일를 쉽고 빠르게 처리하고 싶어한다. 이러한 사용자 이해를 기초로 애플리케이션 경험을 디자인하면, 사용자는 노력을 아끼게 되고 앱을 실행하는 빈도와 전환율은 증가할 것이다.

 

디자인 가이드

이미지 제공: Bill S Kenney

설명

컬러, 아이콘, 글로벌 패딩 속성과 같은 기준 요소를 정해서 프로젝트 초기에 시각언어 자료로 만드는 프로세스를 디자인 가이드라고 한다.

이유

디자인 가이드를 제작하면 애플리케이션과 여러 플랫폼 간에 일관성이 유지된다. 또한 프로젝트에 생명을 불어넣는 동안, 발생 가능한 에러를 최대한 줄이고 나중에 개발자와 디자이너는 수정 작업을 좀 더 쉽고 편하게 할 수 있다.

 

프로토타이핑

이미지 제공: Ramil Derogongun

설명

프로토타입이란 제품의 모형 혹은 동작이 가능한 제품의 초기 버전이다. 프로토타입을 이용해 디자인의 기능성을 이해하고 가늠해 볼 수 있다. 그리고 디자이너의 시간과 노력에 따른 손실 비용 없이도 수정할 부분을 간단하게 표시해서 사용자 경험을 개선할 수 있다.

이유

이렇게 저비용으로 ‘실험’을 진행해보면 프로토타입 제작을 통해서 프로젝트의 기능 범위와 요구사항 그리고 핵심 구성요소가 명확해진다는 사실을 알게 된다. 통찰력으로 주도하는 개발 과정에서 가장 중요한 시간과 자원은 실험을 통해 학습하고 이해하며 제품을 반복해서 수정하는 데 쓰인다.

 

오누르 오랄 Onur Oral

Onur Oral 오누르 오랄은 모니타이즈(Monitise) 사의 UX / 비주얼 디자이너이다. 그는 디자인 프로세스 전략가이며 대중 연설가이기도 하다.
Medium에 게재한 오누르 오랄의 다른 기사 보기

이 글은 Medium.com에 실린 기사를 번역한 것입니다. 필자인 Onur Oral씨로부터 허락를 받고 번역했습니다. 기사의 원본은 ‘Mobile:2015 UI / UX Trends’에서 확인할 수 있습니다.

 

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다