brunch

매거진 UX 디자인의 모든 것

라이킷 69 댓글 1

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by UX 컨설턴트 전민수 Aug 26. 2016

#29. 버튼 UI 디자인의 스타일 진화와 가이드

UX 디자인 배우기 #18

Today UX 아티클

UX Planet에 게재된 Nick Babich의 글 Buttonsin UI Design: The Evolution of Style and Best Practices를 소개하고자 합니다.

지난 수십 년 동안 버튼 디자인이 많이 변화하였지만, 여전히 버튼의 UX에 대한 담론은 ‘인식’과 ‘명료성’에 머물러 있다고 합니다. 이 글에서는 버튼 스타일의 진화와 효과적인 버튼을 만들기 위해 따르면 좋을 모범 사례를 소개합니다.

버튼 스타일의 진화

3차원 버튼

초창기부터 시스템 조작 버튼은 입체 모양에 그림자를 넣어 주변 맥락으로부터 버튼을 구분하는 식으로 디자인되었다고 합니다. 배경과 콘텐츠로부터 눈에 확 띄게 만들어서 클릭할 수 있는 요소라는 걸 알기 쉽게 만들기 위함이었다고 합니다.

버튼이 튀어나와 보입니다.

윈도우 95의 다이얼로그 박스는 진한 그림자와 하이라이트를 써서 3D 효과를 주었다고 합니다. 튀어나와 보이는 덕분에 유저가 시각적 계층구조를 파악하여 클릭 영역임을 알게 해주었다고 합니다.

튀어나와 있어서 누를 수 있을 것 같은인상을 준다고 합니다.

슈크모픽 버튼

디지털 디자인에서 슈크모피즘이란 UI를 실제 사물처럼 보이게 디자인하는 것이라고 합니다. 유저가 대상에 대해 이전에 갖고 있던 지식을 활용하여 새로운 인터페이스를 이용하는 방법을 이해할 수 있게 도와준다고 합니다. 아래 계산기 메타포는 물리적 계산기에 대해 이전에 가지고 있던 지식을 디지털 환경으로 옮길 수 있도록 도와준다고 합니다.

플랫 디자인 버튼

최근 UI 디자인에서 가장 크게 바뀌고 있는 것 중 하나가 바로 슈크모픽 디자인을 플랫 디자인으로 바꾸는 것이라고 합니다. 슈프모픽 디자인과 다르게 플랫 디자인은 물리적 세계의 모습을 재생산하지 않아 전통적으로 클릭가능성(clickability)을 전했던 강압적인 시각적 단서를 제거하였다고 합니다.

일반 버튼과 플랫 버튼

애플 iOS의 계산기 앱

그럼 모든 것을 평평하게 디자인하면 유저는 버튼이 무엇인지 어떻게 알 수 있을까요?

여전히 유저에겐 인터페이스를 사용하는 방법을 이해하도록 도움을 주는 예측가능한 단서, 즉 시각적 기표(signifier)가 필요하다고 합니다. 플랫 디자인에서는 색상이 단서를 제공하는 매우 중요한 역할을 한다고 합니다.

플랫에 가까운 디자인(almost flat design)과 플로팅 액션 버튼(floatingaction button)

플랫에 가까운 디자인은 플랫 디자인에서 진화한 것으로 거의 평평하지만 약간의 그림자와 하이라이트, 레이어가 있어서 UI의 뎁스를 표현해준다고 합니다. 구글의 머티리얼 디자인에 보면 플랫에 가까운 디자인과 함께 플로팅 액션 버튼이 나온다고 합니다. 플로팅 액션 버튼은 화면에서 주요 유저 액션으로 주의를 끄는 역할을 한다고 합니다.

아래 구글 맵이 플로팅 액션 버튼 활용의 모범 사례라 고합니다. 맵에서 유저가 가장 주로 사용하는 ‘길 찾기’ 기능을 플로팅 액션 버튼으로 만들었다고 합니다.

또 다른 좋은 사례는 아래의 에버노트라고 합니다. 에버노트는 대부분 플랫디자인을 사용하지만, 상단 내비게이션 바에 미묘한 그림자 효과를 주었고, + 버튼을 플로팅 액션 버튼으로 만들었다고 합니다.

고스트 버튼

2014년도, UI 디자인 세상에서 가장 유행했던 디자인 트렌드는 고스트 버튼이라고 합니다. 고스트 버튼은 기본적인 버튼 모양에 투명한 배경을 가졌고, 매우 얇은 테두리를 가진 버튼이라고 합니다.

노멀 상태(좌)와 포커스 상태(우)

고스트 버튼은 플랫 디자인 혁명에서 나온 것으로 애플이 iOS7을 내놓으면서 트렌드가 되었다고 합니다.

Name’과 ‘ReleaseDate’ 과 ‘Featured’버튼이 유사 고스트 버튼이고, ‘GET’ 버튼이 고스트 버튼이라고 합니다.

고스트 버튼은 주로 행동 유도 버튼(Callto action button)으로 많이 사용된다고 합니다.

Specular는 ‘Purchase Now’라는 주요 버튼을 플랫 버튼으로 만들고, ‘Take Tour’라는 부차적인 버튼을 고스트 버튼으로 만들었다고 합니다.

버튼 디자인 모범 사례

버튼을 디자인하기 전에 어포던스(affordance)를 소통하는 방법, 즉 유저가 어떻게 특정 요소를 버튼이라고 인식하는지 알아야 한다고 합니다. 사람들은 버튼을 크게 모양, 사이즈 및 간격, 레이블, 색상 등 4가지 요소를 통해 버튼임을 인지한다고 합니다. 그렇기 때문에 버튼을 버튼처럼 보이게 만들어야 하고(모양), 버튼과 상호작용하기 쉽게 만들어야 하고(사이즈와 간격), 무엇을 해주지는 인지할 수 있도록 버튼에 레이블을 달아야 하고(레이블), 유저가 액션을 취할 수 있게 가이드하기 위해 대비되는 색을 이용(색상)해야 한다고 합니다.

또한 인터페이스 전반에 걸쳐 일관성을 유지하여 각 페이지에서 해당 UI 요소를 버튼으로 인지할 수 있게 해야 한다고 합니다.

모양

버튼의 모양은 사각형 혹은 모서리가 둥근 사각형으로 만들면 안전하다고 합니다. 사각형 모양의 버튼은 오래전부터 디지털 세상에서 버튼으로 이용되어 유저에게 익숙하기 때문이라고 합니다. 어떤 연구 결과에 따르면 모서리가 둥근 사각형 버튼을 이용하면 정보 프로세싱을 더 향상시켜주고 버튼 중심으로 눈길을 더 끌어준다고 합니다.

모서리가 둥근 사각형 버튼

동그라미나 세모 등 다른 모양을 버튼으로 사용할 수도 있지만, 좀 더 위험할 수 있다는 점을 염두에 둬야 한다고 합니다.

플로팅 액션 버튼 사례

사이즈 및 간격

사이즈: 탭(tap)이 앱의 주요 정보 입력 방법이라면 MIT 터치 랩의 연구 결과를 적용하여 적절한 버튼 크기를 구하면 된다고 합니다. MIT 연구 결과에 따르면, 터치 타깃은 최소한 10mm*10mm로 만드는 것이 좋다고 합니다.

물론 이것이 오류를 완벽하게 없앨 수 있는 방법은 아니지만, 현실적인 수준으로 오류를 최소화할 수 있는 방법이라고 합니다.

간격: 버튼 사이의 간격은 컨트롤을 서로 분리하는 역할을 해주며 유저 인터페이스에 숨 쉴 공간을 마련해준다고 합니다.

머티리얼 디자인 다이얼로그에 나오는 플랫버튼 사이의 간격

레이블

버튼에 적합한 레이블을 선택할 때는 유저가 놀라 당황할만한 요소가 레이블에 있다면 레이블을 바꾸는 ‘놀람 최소화 원칙(principleof least astonishment)’ 을 기반으로 레이블을 정해야 한다고 합니다. 무엇보다도 버튼을 눌렀을 때 어떤 일이 벌어지는지 충분히 보여주는 레이블을 사용해야 한다고 합니다. 아래의 드롭박스 사례에 나오는 ‘Awesome!’ 버튼은 일반 유저가 명확히 이해하기 힘든 좋지 않은 사례라 고합니다.