버튼 디자인의 원칙: UX/UI에서 위상과 서열을 정하는 법

현재 저는 프로덕트 리드(Product Lead)로서 UX/UI 디자이너 두 명과 함께 제품을 개발하고 있습니다. 팀을 운영하며 디자인 방향을 정하고, 사용자 경험을 최적화하는 과정에서 디자인의 위상과 서열을 정하는 일이 얼마나 중요한지를 실감하고 있습니다.

과거 UX/UI 디자인 프로그램에서 강사로 활동하며, 디자인을 처음 배우는 수강생들을 가르친 적이 있습니다. 그때 수강생들이 가장 어려워했던 개념 중 하나가 디자인 요소의 위상과 서열을 정하는 방법이었습니다. 현업에서는 당연하게 여겨지는 원칙이지만, 처음 디자인을 배우는 입장에서는 쉽지 않은 개념일 수 있습니다.

실무에서도 이러한 개념이 중요한 이유는 사용자 경험(UX)에 직접적인 영향을 미치기 때문입니다. 잘못 배치된 버튼 하나가 사용자에게 혼란을 주거나, 잘못된 액션을 유도할 수도 있습니다. 반대로, 시각적 계층 구조가 잘 설계된 버튼 디자인은 사용자의 행동을 직관적으로 이끌고, 효율적인 인터페이스를 제공합니다.

이 글에서는 디자인에서 위상과 서열을 정하는 방법에 대해 이야기하려고 합니다. 특히 UX/UI 디자인에서 버튼의 계층 구조가 왜 중요한지, 그리고 어떤 방식으로 버튼을 디자인해야 사용자 경험을 극대화할 수 있는지를 다루겠습니다.

제가 이 글을 작성하기 전에 UX플래닛에서 유용한 글을 발견했는데요, Adham Dannaway의 "I’ve been doing buttons wrong! Have you?"라는 글입니다. 이 글에서 다룬 개념을 참고하여, 실무에서 적용할 수 있는 사례와 함께 버튼 디자인의 원칙을 정리해보겠습니다.

‍

시각적 무게

대부분의 프로젝트에서는 액션의 중요성을 나타내기 위해 프라이머리(Primary), 세컨더리(Secondary), 터셔리(Tertiary), 세 가지 버튼 유형이 필요로 합니다. 사실 UI디자인의 원리는 간단합니다. 눈에 더 잘 띄는 정보가 더 많이 누른다는 것이죠. 그래서 중요한 정보는 크고, 강렬하게 보여야합니다. 버튼도 마찬가지죠. 아래에 첨부된 사진처럼 사용자가 하길 바라는 액션은 버튼이 더 눈에 띄도록 합니다.

‍

일반적인 버튼 디자인 실수

아래에는 앞서 언급한 Adham Dannaway가 글에서 언급한 몇 가지 사례를 인용했습니다. 이러한 문제는 사용성에 잠재적인 위험을 초래할 수 있으니 가능한 피하는 것이 가장 안전합니다. 우리는 적어도 WCAG 2.0 레벨 AA 접근성 요구 사항을 충족시키는 것을 목표로 해야합니다.

WCAG란? Web Content Accessibility Guidelines의 약자로 웹접근성에 대한 가이드라인 중 하나입니다. 미국에서는 가장 보편적으로 사용되는 가이드라인으로서 장애인 역시 웹서비스를 불편함 없이 사용할 수 있도록 돕고 있습니다.

‍

‍

1. 첫 번째 버튼 그룹

프라이머리 버튼은 높은 대비의 배경색, 세컨더리 버튼은 낮은 대비의 배경색, 터셔리 버튼은 밑줄이 있는 텍스트 스타일을 사용하는 경우입니다.

텍스트필드, 버튼, 탭과 같은 UI 요소들은 강한 색상 대비가 있어야 합니다. 이는 시각 장애가 있는 사람들이 다양한 구성 요소를 구별할 수 있도록 돕죠. 인터페이스 구성 요소를 구별하는 데 필요하지 않은 장식적인 스타일은 더 낮은 대비를 가질 수 있어요.

이 예에서 세컨더리 버튼의 채우기 대비 비율은 배경에 비해 3:1보다 낮아서 시각 장애인에게 버튼 모양을 명확하게 나타내기에 너무 낮답니다. 배경색은 세컨더리 버튼이 버튼처럼 보이는 데에 필요해요. 버튼에 배경색이 없으면 상호 작용을 나타내는 표시가 없는 평범한 파란색 텍스트일 뿐이죠. 이 문제를 해결하려면 세컨더리 버튼에 높은 대비의 테두리를 추가할 수 있답니다.

‍

2. 두 번째 버튼 그룹

프라이머리 버튼은 높은 대비의 채우기, 세컨더리 버튼은 채우기 없는 회색 테두리, 터셔리 버튼은 밑줄이 있는 텍스트 스타일을 사용하는 경우입니다.

이 경우, 세컨더리 버튼의 스타일은 다음과 같은 문제가 있습니다:

• 연한 회색 때문에 사용 불가 상태나 비활성 상태로 보일 수 있습니다. 혼란을 줄이기 위해 연한 회색 버튼을 피하는 것이 가장 안전합니다.
• 배경 대비 텍스트와 테두리의 진하기가 WCAG 지침에서 요구하는 수준보다 낮아 시각 장애가 있는 사용자들이 읽기 어렵습니다.

‍

3. 세 번째 버튼 그룹

프라이머리 버튼은 높은 대비의 배경색, 세컨더리 버튼은 다른 색상의 높은 대비 채우기, 터셔리 버튼은 밑줄이 있는 텍스트 스타일을 사용하는 경우입니다.

• 프라이머리 버튼과 세컨더리 버튼은 비슷한 스타일 때문에 충돌해요. 이는 시각적 계층을 혼란스럽게 하여 어느 것이 더 중요한지 불분명하게 만듭니다.
• 두 버튼이 동일한 스타일이기 때문에 차이를 구별할 수 있는 유일한 방법은 색상입니다. 이로 인해 색맹인 사람들은 버튼을 구별하지 못할 수 있습니다.
• 색상은 위계를 의미하지 않습니다. 어떤 사람에게는 프라이머리 버튼보다 세컨더리 버튼이 더 눈에 띌 거에요.

‍

4. 일곱 번째 버튼 그룹

프라이머리 버튼은 높은 대비의 배경색, 세컨더리 버튼은 채우기 없는 외곽선, 터셔리 버튼은 색상 텍스트를 사용하는 버튼 스타일입니다.

접근성에 관해서는 인터페이스 요소를 구별하기 위해 색상에만 의존하지 않는 것이 중요하답니다. 색맹인 사람들은 요소 간의 차이를 알 수 없거든요. 이 예에서 터셔리 버튼은 상호작용적이라는 것을 나타내는 유일한 요소가 색상이기 때문에 접근성이 좋지 않습니다. 이는 색맹인 사람들이 일반 텍스트와 구별하지 못할 수 있음을 의미하죠. 터셔리 버튼이 다른 버튼과의 맥락, 위치, 근접성이 일반 텍스트와 구별하는 데 도움이 될 수 있지만, 여전히 혼란을 초래할 위험이 있어요.

‍

버튼 디자인 팁

이전의 버튼 디자인 실수에 기반하여, 사용자 친화적이고 접근 가능한 버튼을 디자인할 때 유념해야 할 몇 가지 간단하고 실용적인 팁을 소개할게요:

• 버튼은 색상에만 의존하지 않는 명확한 시각적 계층을 가져야 해요.
• 버튼 모양의 대비 비율은 최소 3:1이어야 시각 장애인이 상호작용 요소로 인식할 수 있습니다.
• 버튼 텍스트의 대비 비율은 WCAG 2.1 레벨 AA 접근성 요구 사항을 충족하기 위해 최소 4.5:1이어야 합니다.
• 버튼이 동일한 스타일을 가질 경우, 시각 장애인이 구별할 수 있도록 버튼 간의 대비 비율은 최소 3:1이어야 해요.
• 사람들 쉽게 버튼을 선택할 수 있도록 넓은 목표 영역(최소 48px x 48px)을 사용하세요.
• 사람들이 실수로 잘못된 버튼을 선택하지 않도록 버튼 간에 충분한 간격을 두세요. 저는 보통 안전하게 16px를 사용합니다.

‍

직관적인 버튼 디자인이 사용자 경험을 결정한다

버튼 디자인은 단순해 보이지만, 사용자 경험을 결정짓는 중요한 요소 중 하나입니다.

잘못된 버튼 디자인은 사용자의 혼란을 유발하고, 클릭을 망설이게 만들며, 심지어 잘못된 행동을 유도할 수도 있습니다. 반면, 시각적 계층 구조와 접근성을 고려한 버튼 디자인은 사용자의 행동을 자연스럽게 이끌어낼 수 있습니다.

이 글에서 다룬 것처럼, 버튼을 디자인할 때는 몇 가지 원칙을 기억해야 합니다.

1. 프라이머리(Primary), 세컨더리(Secondary), 터셔리(Tertiary) 버튼의 역할을 명확히 구분해야 합니다.
2. 색상과 대비는 버튼의 위계를 나타내는 중요한 요소이지만, 색상만으로 구별하려 해서는 안 됩니다.
3. 사용자가 원하는 행동을 직관적으로 선택할 수 있도록 버튼 배치를 신중하게 결정해야 합니다.
4. 접근성을 고려하여 WCAG 기준을 충족하는 디자인을 적용하는 것이 중요합니다.

많은 UX/UI 디자이너들이 디자인을 할 때 "예쁘게 보이는 버튼"을 고민합니다. 하지만 사용자 경험에서 가장 중요한 것은 '디자인이 얼마나 예쁜가'가 아니라 '얼마나 직관적인가'입니다.

결국 좋은 버튼 디자인이란,

• 사용자가 고민 없이 원하는 작업을 수행할 수 있도록 돕고,
• 실수를 최소화하며,
• 접근성과 사용성을 고려하여 누구에게나 이해하기 쉬운 인터페이스를 제공하는 것입니다.

UX/UI 디자인의 핵심은 사용자가 원하는 행동을 더 쉽게 하도록 돕는 것입니다.

버튼 하나를 디자인하더라도, 단순히 ‘잘 보이게’가 아니라 ‘잘 눌리게’ 디자인하고 있는지 다시 한번 고민해보는 것이 중요합니다.

"이 버튼이 사용자에게 올바른 선택을 안내하고 있는가?"

이 질문을 스스로에게 던지면서 디자인한다면, 보다 나은 사용자 경험을 제공할 수 있을 것입니다. 🚀