brunch

You can make anything
by writing

C.S.Lewis

by 정윤선 Jan 02. 2017

우리가 알아야 할 버튼 UI의 모든 것

버튼 스타일의 변천사, 모범 사례, 유형 및 그에 따른 용도, 상태값

(출처 : [Button UX Design: Best Practices, Types and States – UX Planet]와[Buttons in UI Design: The Evolution of Style and Best Practices]의 기사를 번역 및 가공한 컨텐츠 입니다.)

버튼은 인터렉션에서 우리가 매일 사용하는 요소입니다. 이는 매우 간단한 UI 요소처럼 보이지만, 지난 수십 년 동안 디자인이 많이 바뀌었습니다.
하지만 디자인은 변했을지 몰라도, 여전히 버튼 UX에서 중요한 요소는 명시성과 선명도에 관한 것입니다.

버튼은 웹 및 앱에서 부드러운 흐름을 생성하는 데 필수적인 요소이므로 버튼에 대한 모범 사례를 항상 알고 있어야 합니다.

이 기사에서는 버튼 디자인의 발전 과정을 개괄적으로 살펴보고 효과적인 버튼을 만들기 위해 따라야 할 중요한 모범 사례를 알아봅니다.

버튼 스타일의 변천사

3차원 버튼

초기 운영 체제 버튼은 주변 컨텍스트와 구별하기 위해 양각 및 그림자의 모양에 의존했습니다.

이 디자인 솔루션은 버튼에 테두리, 그라디언트 및 그림자를 사용하여 버튼요소를 배경 및 내용에 비해 눈에 띄게 만들었습니다.

이 디자인에서 우리는 어떤 요소를 클릭해야 하는 지 쉽게 인지할 수 있습니다.

버튼이 어떻게 돌출되어 있는지 쉽게 볼 수 있습니다

이 Windows 95 대화 상자는 짙은 그림자와 하이라이트를 사용하였습니다.

이는 사용자가 시각적 계층 구조를 해석하고 인터렉션 요소를 이해하는 데 도움이 되는 3D 효과입니다.

마우스를 클릭하면 누를 수 있는 것처럼 보이는 모양의 버튼들

스큐어모피즘 버튼

디지털 디자인에서 skeuomorphism은 컴포넌트를 복사하거나 실제 버튼처럼 보이게 만들어서 UI 요소를 실제 오브젝트처럼 보이게 만들 때 사용됩니다.
스큐어모피즘 버튼은 디지털 환경이 익숙하지 않은 유저에게 유저가 가지고 있는 오브젝트에 대한 사전 지식을 적용하여 새 인터페이스의 사용법을 이해하도록 도우려고 만들어졌습니다.
아래의 계산기 메타포는 유저가 가지고 있는 실제 계산기에 대한 지식을 디지털 환경으로 적용하는 것을 도와줍니다.

이미지 출처 : Image credit: theultralinx

플랫 디자인 버튼

UI 디자인에서 최근에 일어난 주요 변화 중 하나는 3D 효과를 제거하고 디자인이 더욱 평평한 요소로 이동하는 것입니다.

스큐어모피즘 디자인과 달리 플랫 디자인은 물리적 세계의 외관을 재현하지 않고 이제는 어느 정도 익숙해진 디지털 매체를 탐색하는 새로운 방법으로 간주되었습니다.
결과적으로, 유저에게 클릭성과 탭(누를 수 있는) 기능을 전달하는 데 전통적으로 사용되어 온 무거운 시각적인 신호들이 제거되었습니다.

기존 디자인 vs 플랫 디자인

iOS에서 플랫해진 계산기 앱

모든 것이 편평하다면, 유저는 어떤 부분이 버튼인지 어떻게 알 수 있을까?

유저는 페이지에서 클릭 / 탭할 수 있는 위치를 알기 위해 시각적 기호가 필요합니다.

디자이너들은 유저가 인터페이스를 사용하는 방법을 이해하는 데 도움이 되는 단서를 제공해 주어야 합니다.

플랫 디자인에서는 색상이 클릭과 탭을 인식하는 데 도움이 되는 주된 식별자 중 하나이기 때문에, 올바른 색상의 사용이 아주 중요합니다.

거의 플랫한 디자인과 플로팅 액션 버튼

거의 플랫한 디자인은 원래 플랫 / 울트라 플랫 디자인의 발전이었습니다.
이 스타일은 대부분 평평하지만, UI에 일부 깊이를 만들기 위해 미묘한 그림자, 하이라이트 및 레이어를 사용합니다.

Google의 머티리얼 디자인은 올바른 우선 순위를 적용한 거의 플랫한 디자인의 한 예이며, 새로운 유형의 버튼인 플로팅 액션 버튼을 제공합니다.
이 버튼은 인터페이스 맨 위에 겹쳐져 있으며 기본 동작에 주의를 유지시킵니다.
그것들은 액션 버튼 (많이 사용되어야 할 행동)으로 사용되며, 유저가 특정 화면에서 가장 많이 수행하는 단일 액션을 나타내기 위한 것입니다.

구글 맵스 (Google Maps by Maps)는 FAB(플로팅 액션 버튼)의 좋은 예입니다. 지도에서 유저가 수행하는 주요 작업은 길을 찾는 것입니다. 그래서 그 일을 바로 수행할 수 있는 FAB를 사용함으로써 완벽한 UX를 제공합니다.

안드로이드에서의 구글맵스

UI 디자인에 FAB을 사용하는 또 다른 좋은 예는 Evernote입니다.

거의 평평한 UI를 가졌음에도 불구하고, 이 앱은 네비이션바와 플로팅 액션 버튼(`새 항목 추가`)에 약간의 그림자를 제공합니다.

안드로이드에서의 에버노트

고스트 버튼

2014년 UI 디자인 세계를 관통하는 지배적인 디자인 트렌드 중 하나가 고스트 버튼이었습니다.

고스트 버튼은 사각형 또는 사각형과 같은 기본 모양 양식을 가진 투명하고 빈 버튼입니다.

일반적으로 매우 가는 선으로 경계 지어지며, 내부 섹션은 일반 텍스트로 구성됩니다.

노말 (왼쪽) 및 포커스 (오른쪽)

고스트 버튼의 기원은 플랫 디자인의 혁명에서 나왔습니다.
Apple이 iOS 7을 출시했을 때 고스트 버튼이 유행이 되었습니다.
iOS의 UI에 있는 많은 버튼은 고스트 버튼이라고 합니다. 프레임 안의 깔끔한 글꼴과 결합 된 단순하고 평범한 직사각형 모양은 평면 UI 내에서 완벽하게 보입니다.

'이름', '출시일'및 '기능'은 고스트 탭 버튼입니다. 'Get'또한 고스트 버튼입니다.

고스트 버튼은 가장 자주 콜투액션 (CTA) 버튼의 보조로 표시되며 깔끔하게 보입니다.

Specular 사이트는 고스트버튼이 CTA버튼의 보조로 사용된 예입니다.

기본 버튼(CTA)은 '지금 구입'이고 고스트 버튼은 보조 버튼입니다.

버튼에 대한 모범 사례

버튼 디자인을 시작하기 전에 어떻게 어포던스를 전달할지를 생각해야 합니다.
유저는 이 컴포넌트가 버튼인 걸 어떻게 알 수 있을까요?

-버튼을 버튼 모양으로 만듭니다. (모양(shape) 참고).
-유저가 버튼과 쉽게 인터렉션 할 수 있도록 만듭니다. (크기 및 여백(Size and Padding) 참조).
-버튼에 있는 라벨을 통해 이 버튼으로 인해 뭘 할 수 있는지 알려줍니다. (라벨(label) 참조).
-색상 대비를 사용하여 유저의 행동을 유도합니다. (색상(color) 참조)

-쉽게 찾을 수 있거나 볼 수 있는 곳에 버튼을 위치시킵니다 (위치 및 순서(Location and Order) 참조)

또한, 인터페이스 전체에서 일관성을 유지해야 유저가 앱 또는 사이트에서 버튼을 식별하고 인식할 수 있습니다.

모양(shape)

가장 안전한 방법은 사이트나 앱의 스타일에 따라 둥근 모서리가 있는 사각형 또는 정사각형 버튼을 만드는 것입니다.
사각형 모양의 버튼이 디지털 세계에 도입된 지 오래되어서 유저는 이 사각형이 버튼이라는 것을 잘 알고 있습니다.

일부 연구에 따르면 둥근 모서리는 정보 처리를 향상시키고 요소의 중심에 눈을 끈다는 것을 보여줍니다.

Rounded rectangular 버튼

원, 삼각형 또는 임의로 정의한 모양 등과 같은 더 창조적인 다른 모양을 사용할 수 있지만, 이 방식은 기존 스테레오 타입의 버튼들에 비해 인지가 어려울 수 있습니다.

머티리얼 디자인의 FAB버튼

크기 및 여백(Size and Padding)

버튼의 크기는 유저가 버튼을 인지할 수 있도록 도와줍니다.
클릭이 가능하도록 버튼 사이의 패딩뿐만 아니라 버튼의 자체적인 크기도 고려해야 합니다.

크기(Size).

탭을 앱이나 사이트의 기본 입력 방법으로 사용하는 경우 MIT 터치 랩 스터디를 사용하여 버튼에 맞는 크기를 선택할 수 있습니다.

MIT의 연구에 따르면 손가락 패드의 평균 길이는 10-14mm이며 손가락 끝은 8-10mm이므로 10mm x 10mm가 최소 터치 대상 크기로 적합합니다.

이미지 출처 : Image Source: uxmag

이 연구 결과는 완벽한 터치 타깃의 가이드는 아니며 화면의 밀도와 같은 다른 중요한 특성의 균형을 맞추면서 오류의 수를 최소화할 수 있는 값입니다.

이미지 출처: ux.stackexchange.com

마우스 및 키보드가 기본 입력 방법인 경우 고밀도 UI를 수용하기 위해 버튼여백값을 약간 줄일 수 있습니다.

패딩(Padding).

버튼들 사이의 패딩은 컨트롤영역을 분리하는 데 도움이 되며 UI에 숨 쉴 수 있는 공간을 제공합니다.

머티리얼 디자인 대화 상자에서 플랫 버튼 사이 패딩

레이블(label)

버튼에 적합한 레이블을 선택해야 합니다.

엄지 손가락의 규칙 - 레이블은 버튼을 클릭하거나 탭한 뒤에 일어나는 일에 대해 명확하게 알려주거나, 동사를 사용하여 버튼이 무엇을 하는지 나타내야 합니다.

아래 예제에서 유저가 웹 애플리케이션을 사용하여 Dropbox에 파일을 올리려고 할 때 나타나는 대화 상자를 볼 수 있습니다. 이 메시지는 `Awesome!` 레이블이있는 하나의 버튼을 제공합니다. 이 레이블은 일반 유저가 버튼을 클릭하면 어떻게 될지 알려주지 않기 때문에 혼란스러울 수 있습니다.

Image 출처 : uxmatters

색(Color)

색상표를 선택할 때 색상이 유저에게 작업을 탐색하고 이해하는 데 도움을 줄 수 있는 방법에 대해 생각해 봐야 합니다.
색상 및 대비를 사용하여 유저가 앱의 콘텐츠를 보고 해석하고, 컴포넌트와 인터렉션 할 수 있도록 합니다.

아래 예제에서는 파괴적인 동작을 수행하는 버튼에 빨간색을 사용합니다.

'Uninstall'동작이 색상 및 대비가 더 강해 사용자에게 주의를 줍니다. 이미지 출처 : 머티리얼 디자인

가장 중요한 버튼을 가장 중요한 버튼인 것처럼 보이게 만들어야 합니다. (특히 콜투액션 버튼일 때).

예를 들어 Amazon은 '카트에 담기'같은 중요한 버튼에 대조적인 노란색을 사용하여 유저의 주의를 끌어당깁니다.

Amazon은 CTA 버튼인 '카트에 담기'에 대조 색상을 사용합니다.

위치 및 순서(Location and Order)

유저가 쉽게 찾을 수 있거나 볼 것으로 예상되는 곳에 버튼을 위치시켜야 합니다.

예를 들어, iOS UI 가이드 라인은 버튼의 위치를 어디에 두어야 할지를 알려줍니다.

버튼의 순서와 위치에 유의해야 합니다.

특히 `이전`,`다음`과 같이 한 쌍을 이루는 버튼인 경우 버튼들의 순서가 중요합니다.
버튼 위치의 설계가 가장 중요한 행동에 중점을 두는지 주의를 기울여야 합니다.

아래 예제에서는 위의 색상 예제와 동일하게 파괴적인 동작을 수행하는 버튼에 빨간색을 사용합니다.
이 외에도 강조해야 할 액션의 버튼이 대화 상자의 오른쪽에 있는지 확인하십시오.

버튼의 유형 및 그에 따른 용도

1. 레이즈드 버튼 (Raised Button)

레이즈드 버튼은 주로 평평한 레이아웃에 차원(Dimension)을 추가합니다.

복잡하거나 넓은 공간에서 기능을 강조합니다.

이미지 출처 : 머티리얼 디자인

용도

많은 다양한 콘텐츠가 있는 레이아웃에서 액션에 더 중요성을 두기 위해서 레이즈드 버튼을 사용합니다.

또한, 페이지에서 콘텐츠를 설명하는 것도 도와줄 수 있습니다.

이미지 출처 : 머티리얼 디자인

액션

레이즈드 버튼은 보통 들어 올려지며 누를 때 색이 채워집니다.

2. 플랫 버튼 (Flat Button)

플랫 버튼은 머티리얼 위에 뿌려지고, 콘텐츠에 대한 집중을 방해하는 것을 최소화합니다.

이것은 들어 올려지지는 않지만, 누를 때 색이 채워집니다.

이미지 출처 : 머티리얼 디자인

용도

대화 상자 (대화 상자 내용과 버튼 동작을 통합하기 위해)

안드로이드 대화상자에서 플랫버튼 / 이미지 출처 : 머티리얼 디자인

툴바에서

툴바에서 플랫버튼 / 이미지 출처 : 머티리얼 디자인

패딩을 가진 인라인으로, 사용자가 쉽게 찾을 수 있습니다.

이미지 출처 : 머티리얼 디자인

액션

3. 토글 버튼 (Raised Button)

토글 버튼을 사용하여 두 가지 이상의 상태로 설정을 변경할 수 있습니다.

iOS의 토글버튼

용도

가장 일반적인 토글 버튼은 환경 설정에서 On / Off 버튼으로 사용됩니다.

또한 특정 토글 버튼이 그룹의 일부임을 전달하는 방식을 사용하여 서로 연관된 옵션을 그룹화할 수 있습니다.

특정 토글 버튼이 그룹의 일부임을 전달하려면 다음과 같은 두 가지 조건이 필요합니다.

1. 한 그룹에 적어도 세 개의 토글 버튼이 있어야 합니다.

2. 텍스트, 아이콘 또는 이 둘 모두가 포함 된 레이블 버튼

선택된 하나의 옵션이있는 토글 버튼. 출처 : Material Design.

아이콘을 사용한 토글버튼은 은 선택 항목을 선택하거나 선택 취소 할 수 있을 때 (예 : 항목에 별표를 추가 또는 제거)에 적합합니다.

트위터의 "좋아요"토글 버튼. 출처 : Ryan Duffy

버튼에 맞는 아이콘을 선택하는 것은 매우 중요합니다.

예시

Apple iOS는 설정 섹션에 토글 버튼을 사용합니다.

4. 고스트 버튼

고스트 버튼은 직사각형과 같은 기본 모양을 가진 투명하고 빈 버튼입니다.

내부 섹션은 일반 텍스트로 구성되어 있지만 매우 가는 선으로 경계가 지정됩니다.

서로 다른 고스트 버튼. 출처 : Dadapixel

용도

고스트 버튼이 CTA버튼으로 로 많이 사용되기는 하지만 이는 대개 좋은 생각이 아닙니다.

아래 예제에서 부트 스트랩 사이트에서 고스트 버튼이 사용된 것을 보면, 고스트 버튼을 메인 로고와 같은 모양으로 사용하고 있어 유저를 혼란스럽게 한다는 것을 알 수 있습니다.

부트스트랩 다운로드 버튼과 메인로고

고스트 버튼은 기본 CTA버튼과 경쟁하지 않아야 하므로 2차 또는 3차 콘텐츠에 가장 적합합니다.
유저가 기본 CTA버튼을 볼 수 있게 하고 관련성이 없는 경우 보조 버튼으로 고스트 버튼을 사용하는 것이 가장 이상적입니다.
이는 훨씬 더 높은 대조를 가지며 유저는 명확하게 행동할 수 있게 됩니다.

기본 버튼(CTA)은 '지금 구입'이고 고스트 버튼은 보조 버튼입니다.

액션

노말 상태 (왼쪽) 및 포커스 상태 (오른쪽) 출처 : Dadapixel

예시

AirBnB 웹 사이트에는 "호스트 되기 (Become a Host)"를 위한 고스트 버튼이 있습니다.

AirBnB 웹사이트

5. 플로팅 액션 버튼 (FAB)

플로팅 액션 버튼은 Google Material Design의 일부입니다.

누른상태에서 잉크 반응을 일으키는 동그란 머티리얼 버튼입니다.

용도

플로팅 액션 버튼은 강조되거나 자주 사용되는 동작에 사용됩니다.

액션

UI 위를 떠다니는 동그라미 모양의 아이콘으로 구별되며, 모핑 (morphing), 런칭 (launching), 트랜스퍼링 앵커 포인트 (transferring anchor point)를 포함하는 동작을 갖습니다.

버튼 유형 선택하기

버튼 스타일을 선택하는 것은 버튼의 우선순위, 화면상의 컨테이너 수 및 화면 레이아웃에 따라 다릅니다.

Google 머테리얼 디자인에서 제안한 버튼 유형 선택.

Z-depth.

기능 : 버튼이 플로팅 액션 버튼으로 구현될 만큼 중요하고 자주 사용됩니까?
차원 : 들어가는 컨테이너와 화면에 있는 z- 공간 레이어 수에 따라 버튼 유형을 선택해야 합니다.
레이아웃 : 컨테이너 당 주로 한 가지 유형의 버튼을 사용하고, 중요한 기능을 강조하는 등 좋은 이유가 있을 때만 버튼 스타일을 섞어서 사용해야 합니다.