[UI/UX 원칙 #8] 버튼 UI 디자인의 스타일 진화와 가이드

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

닉 바비치의 [버튼 UI 디자인의 스타일 진화와 가이드] 소개하고자 합니다.

버튼은 우리가 매일 사용하는 상호작용 디자인의 기본 요소입니다. 겉보기에는 매우 간단한 UI 요소처럼 보이지만, 버튼 디자인은 지난 수십 년 동안 크게 변화해왔습니다. 그럼에도 불구하고 버튼의 UX 디자인은 여전히 인식과 명확성이 중요한 주제입니다.

이 글에서는 버튼 디자인의 발전 과정을 살펴보고, 효과적인 버튼을 만들기 위한 핵심 모범 사례를 소개하겠습니다

스타일의 진화

1) 3차원 버튼

초기 운영 체제의 버튼은 주변과 구별하기 위해 입체감과 그림자를 사용했습니다. 이 디자인 방식은 간단한 원칙에 기반하고 있습니다. 즉, 테두리, 그라데이션 등 활용하면 버튼이 배경과 콘텐츠에서 돋보여 클릭할 수 있는 요소로 쉽게 인식될 수 있습니다.

Windows 95에 대화 상자는 강한 그림자와 하이라이트를 활용해 3D 효과를 만들었습니다. 이는 사용자가 시각적 계층 구조를 이해하고 어떤 요소가 클릭할 수 있는지를 쉽게 파악하도록 돕기 위해 사용되었습니다.

2) 스큐어모픽 버튼

디지털 디자인에서 스큐어모픽은 UI 요소가 실제 물체처럼 보이게 만드는 것을 말합니다. 이는 실제 질감을 그대로 재현하거나 버튼을 실제 버튼처럼 디자인하는 방식입니다. 스큐어모픽 디자인은 사용자가 새로운 인터페이스를 이해하는 데 도움을 주기 위해, 이미 알고 있는 객체의 지식을 활용할 수 있도록 합니다. 아래의 계산기 예시는 사용자가 물리적 계산기에 대한 지식을 디지털 환경으로 쉽게 옮길 수 있도록 돕기 위해 만들어졌습니다.

3) 플랫 디자인 버튼

최근 UI 디자인에서 큰 변화 중 하나는 스큐어모픽 요소에서 3D 효과가 없는 평면적인 요소로의 전환입니다. 스큐어모픽 디자인이 물리적 세계의 모습을 재현하려는 반면, 플랫 디자인은 디지털 매체를 탐구하는 방법으로 인식됩니다. 이로 인해 사용자가 클릭 가능성이나 터치 가능성을 이해하는 데 전통적으로 사용되던 복잡한 시각적 신호가 사라졌습니다.

모든 것이 평면적으로 디자인되었을 때, 사용자는 어떤 요소가 버튼인지 어떻게 알까요?

사용자는 페이지에서 클릭하거나 터치할 수 있는 위치를 파악하기 위해 시각적 신호(시그니 파이어)가 필요합니다. 이러한 신호는 사용자가 인터페이스를 이해하는 데 도움을 줍니다. 그래서 플랫 디자인에서는 색상이 특히 중요합니다. 플랫 버튼에서 색상이 사용자가 버튼을 인식하는 데 중요한 역할을 하기 때문입니다.

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

플랫에 가까운 디자인은 플랫 디자인에서 발전한 형태로, 대부분 평면적이지만 약간의 그림자와 하이라이트, 레이어를 통해 UI에 깊이를 제공합니다. 구글의 머티리얼 디자인에서는 이런 플랫에 가까운 디자인과 함께 플로팅 액션 버튼이 등장합니다. 플로팅 액션 버튼은 화면에서 주요 사용자 행동에 주목하게 만드는 역할을 합니다.

구글 맵은 플로팅 액션 버튼 활용의 좋은 예입니다. 지도에서 사용자가 가장 자주 사용하는 ‘길 찾기’ 기능을 플로팅 액션 버튼으로 디자인하여 쉽게 접근할 수 있도록 했습니다.

또 다른 좋은 사례로 에버노트를 들 수 있습니다. 에버노트는 주로 플랫 디자인을 사용하지만, 상단 내비게이션 바에 미세한 그림자 효과를 추가했습니다. 또한, + 버튼을 플로팅 액션 버튼으로 디자인하여 사용자에게 더 눈에 띄게 만들었습니다.

5) 고스트 버튼

2014년, UI 디자인 분야에서 가장 유행했던 트렌드는 고스트 버튼이었습니다. 고스트 버튼은 기본적인 버튼 형태를 가지고 있지만, 배경이 투명하고 매우 얇은 테두리를 가진 버튼입니다.

고스트 버튼은 플랫 디자인에서 등장한 요소로, 애플이 iOS 7을 출시하면서 이 트렌드가 시작되었습니다.

고스트 버튼은 주로 행동 유도 버튼(Call to Action Button)과 함께 많이 사용됩니다. 이 버튼은 투명한 배경과 얇은 테두리로 디자인되어 있어 다른 버튼보다 덜 눈에 띌 수 있습니다. 그래서 고스트 버튼을 사용할 때는 주목성을 잘 고려해야 합니다. CTA 버튼으로서 효과를 극대화하려면 디자인 요소와 위치에 신중하게 접근해야 합니다.

버튼 디자인 모범 사례

버튼을 디자인하기 전에 어포던스(affordance)를 고려하는 것이 중요합니다. 즉, 사용자가 어떻게 특정 요소를 버튼으로 인식하는지를 이해해야 한다는 것입니다. 사람들은 버튼을 인식할 때 주로 네 가지 요소. 1) 모양, 2) 사이즈와 간격, 3) 레이블, 4) 색상을 바탕으로 판단합니다.

따라서 버튼은 버튼처럼 보여야 하고(모양), 사용자가 쉽게 상호작용할 수 있도록 크기와 간격을 적절히 조정해야 하며(사이즈와 간격), 버튼이 어떤 기능을 하는지 알 수 있도록 레이블을 달아야 합니다(레이블). 마지막으로, 사용자에게 행동을 유도하기 위해 대비되는 색상을 사용하는 것이 중요합니다(색상).

또한, 인터페이스 전반에서 일관성을 유지해야 각 페이지에서 사용자가 UI 요소를 버튼으로 쉽게 인식할 수 있습니다.

1) 모양

버튼의 모양은 사각형이나 모서리가 둥근 사각형으로 디자인하는 것이 안전합니다. 사각형 버튼은 오랫동안 디지털 환경에서 사용되어 왔기 때문에 사용자에게 익숙합니다. 연구에 따르면, 모서리가 둥근 사각형 버튼을 사용하면 정보 처리 능력이 향상되고 버튼 중심으로 시선이 더 잘 끌리게 합니다.

동그라미나 세모와 같은 다른 모양도 버튼으로 사용할 수 있지만, 이 경우 사용자가 버튼으로 인식하지 못할 위험이 있으므로 주의해야 합니다.

2) 사이즈 및 간격

사이즈: MIT 터치 랩의 연구 결과를 바탕으로 적절한 버튼 크기를 정할 수 있습니다. MIT 연구에 따르면, 터치 타깃은 최소한 10mm x 10mm 크기로 만드는 것이 좋습니다.

물론, 이렇게 한다고 해서 오류를 완전히 없앨 수는 없지만, 현실적인 수준에서 오류를 최소화하는 데 도움이 됩니다.

간격: 버튼 사이의 간격은 각 버튼을 서로 분리해 주며, 사용자 인터페이스에 여유 공간을 만들어 줍니다.

3) 레이블

버튼에 적합한 레이블을 선택할 때는 사용자가 놀라거나 당황할 수 있는 요소가 포함되지 않도록 해야 합니다. 이를 위해 '놀람 최소화 원칙(principle of least astonishment)'에 따라 레이블을 정해야 합니다. 무엇보다도 버튼을 눌렀을 때 어떤 일이 일어나는지를 명확하게 전달하는 레이블을 사용하는 것이 중요합니다. 예를 들어, 아래의 드롭박스 사례에서 'Awesome!' 버튼은 일반 사용자가 이해하기 어려운 좋지 않은 사례입니다.

4) 색상

색상 팔레트를 선택할 때는 사용자가 해당 행동을 이해하고 쉽게 찾을 수 있도록 도와주는지를 고려해야 합니다.

앱의 내용을 잘 해석하고, 사용자가 액션을 이해할 수 있도록 적절한 색상을 선택하는 것이 중요합니다.

가장 중요한 버튼, 특히 사용자의 행동을 유도하는 버튼은 눈에 잘 띄게 디자인해야 합니다.

결론

모든 버튼(전통적인 버튼, 고스트 버튼, 플로팅 액션 버튼 등)은 사용자가 원하는 행동을 하도록 유도하는 역할을 합니다. 웹이나 앱은 바쁜 사용자가 시작한 대화라고 볼 수 있습니다. 버튼은 이 대화에서 매우 중요한 역할을 합니다. 원활한 상호작용은 대화를 계속 이어가게 하지만, 버튼을 찾지 못하는 등의 오류는 방해가 될 수 있고, 최악의 경우 대화가 끊길 수 있습니다.