UI디자인을 위한 실용적인 버튼디자인

 

 

 

1. 버튼 디자인 실수들

버튼디자인 실수들은 사용자의 혼란을 유발하거나 접근성 기준을 위반할 수 있기 때문에, 가능하다면 피하는 것이 가장 안전합니다.

 

 

예시1.

 

 

사용자 인터페이스 구성 요소(예: 입력 필드, 버튼, 탭 등)는 최소 3:1의 색상 대비 비율을 가져야 합니다. 이는 시각 장애가 있는 사용자가 서로 다른 구성 요소를 구별하는 데 도움이 됩니다. 구성 요소를 구별하는 데 필요하지 않은 장식적인 스타일은 더 낮은 대비를 가져도 괜찮습니다.

이 예시에서는, 세컨더리 버튼의 배경 대비 비율이 배경색과 3:1 미만으로, 시각 장애인에게는 버튼의 형태가 명확하게 인식되지 않습니다.

일부 사람들은 세컨더리 버튼의 배경이 장식적 요소에 불과하므로 접근성을 위해 3:1 대비 비율을 가질 필요는 없다고 주장할 수 있습니다. 하지만 이 배경은 세컨더리 버튼이 버튼이라는 것을 식별하는 데 필요합니다. 배경이 없다면, 단지 파란색 텍스트처럼 보일 뿐이며, 상호작용 가능한 요소라는 표시가 색상 외에는 없습니다. 이 문제를 해결하려면 세컨더리 버튼에 고대비 테두리를 추가하는 것이 좋습니다.

 

 

 

예시2.

 

 

- 세컨더리 버튼이 비활성(disabled)된 상태로 오인될 수 있습니다.

연한 회색 계열은 일반적으로 비활성 상태를 나타내는 데 자주 사용되므로, 이 색상은 혼란을 줄 수 있습니다. 사용자의 오해를 줄이기 위해 연한 회색 버튼은 피하는 것이 안전합니다.

- 세컨더리 버튼의 텍스트 대비 비율이 WCAG 기준(4.5:1) 미만입니다.
이로 인해 일부 사용자에게는 텍스트가 읽기 어렵게 느껴질 수 있습니다.

- 세컨더리 버튼의 테두리(border) 대비 비율도 3:1 기준에 미치지 못합니다.
이는 버튼의 윤곽이 시각적으로 명확하게 인식되지 않아 버튼인지조차 알아보기 어려울 수 있습니다.

 

 

 

예시3. 

 

 

- Primary 버튼과 Secondary 버튼이 너무 비슷해서 시각적 계층이 모호해집니다.
두 버튼 간의 구분이 불명확하여, 어떤 버튼이 더 중요한지 쉽게 알 수 없습니다.

- 스타일이 거의 동일하여 색상만으로만 구분이 가능합니다.
이는 색약이 있는 사용자에게 두 버튼이 똑같아 보일 수 있다는 뜻이며, 사용성에 문제가 발생할 수 있습니다.

- 두 버튼 간의 색상 대비 비율이 WCAG 권장 기준인 3:1보다 낮습니다.
이로 인해 저시력 사용자가 두 버튼을 명확하게 구별하기 어렵게 됩니다.

 

 

 

예시4. 

 

 

 

- Primary 버튼과 Secondary 버튼이 너무 비슷한 스타일과 낮은 대비로 인해 서로 충돌합니다.
이로 인해 시각적 계층이 모호해지고, 사용자가 어떤 버튼이 더 중요한지 쉽게 판단하기 어렵습니다.

- Secondary 버튼의 텍스트 대비 비율이 너무 낮습니다.
텍스트는 최소 4.5:1의 대비 비율을 가져야 접근성을 보장할 수 있으며, 현재 상태로는 일부 사용자가 내용을 읽기 어렵습니다.

 

 

 

예시5.

 

 

이 버튼 스타일은 시각 장애가 있는 사용자가 구분하기엔 너무 유사합니다.
두 버튼의 유일한 차이점이 색상 대비인데, 그 대비 비율도 너무 낮아(최소 3:1 미만) 뚜렷한 구분이 어렵습니다.

버튼은 반드시 색상 외의 시각적 요소들(예: 테두리, 배경, 굵기, 그림자, 크기 등)을 통해 명확한 시각적 계층 구조(visual hierarchy)를 제공해야 합니다.
색상에만 의존한 구분은 색약이나 저시력 사용자에게 치명적인 접근성 문제를 일으킬 수 있습니다.

 

 

 

예시6. 

 

 

- 버튼들의 대비와 스타일이 너무 비슷해 시각 장애가 있는 사용자가 구분하기 어렵습니다.
명확한 시각적 차별성이 부족하여, 각 버튼의 역할과 우선순위가 분명하게 전달되지 않습니다.

- Tertiary 버튼의 테두리(border) 대비 비율이 3:1 이상이어야 하지만, 현재는 그 기준을 충족하지 못합니다.
이로 인해 해당 요소가 상호작용 가능한 버튼이라는 점이 명확하게 드러나지 않으며, 접근성 측면에서도 문제가 됩니다.

 

 

 

예시7.

 

 

접근성을 고려할 때, 인터페이스 요소를 구분하는 수단으로 색상만 사용하는 것은 피해야 합니다.
색약이 있는 사용자는 색상의 차이만으로는 요소를 구별하기 어려울 수 있기 때문입니다.

이 예시에서는 Tertiary 버튼이 오직 색상만으로 상호작용 가능함을 나타내고 있어 접근성이 부족합니다.
즉, 색약 사용자에게는 일반 텍스트와 버튼을 구분할 수 없는 상황이 발생할 수 있습니다.

버튼의 위치나 주변 맥락, 혹은 다른 버튼과의 근접성 덕분에 일부 사용자에게는 버튼처럼 보일 수 있지만, 여전히 혼란을 줄 수 있는 위험이 존재합니다.
따라서 버튼임을 인식할 수 있도록 밑줄, 테두리, 아이콘, 굵기 등 추가적인 시각적 단서를 제공하는 것이 필요합니다.

 

 

 

예시8.

 

 

인터페이스 디자인의 모든 요소는 논리적인 목적을 가지고 있어야 합니다.
예시 8에서는 Primary 버튼과 Secondary 버튼의 형태가 서로 다르게 디자인되어 있는데, 정말 기능이 다르기 때문에 그렇게 만든 걸까요?

만약 두 버튼이 기능적으로 동일한 방식으로 작동한다면, 시각적으로도 동일하게 보여야 합니다.
동일한 역할을 가진 요소는 동일한 외형을 가져야 사용자가 쉽게 이해하고 예측할 수 있습니다.

버튼 형태의 불일치는 시각적 일관성을 해치고, 사용자에게 "이 버튼은 다른 기능일까?"라는 불필요한 혼란을 줄 수 있으므로
일관되지 않은 버튼 모양은 피해야 합니다.

 

 

 

예시9.

 

시각적 계층 구조(Visual Hierarchy)는 인터페이스 요소 간의 상대적인 중요도를 사용자에게 전달하는 방식입니다.
3가지 버튼 스타일(Primary, Secondary, Tertiary)의 목적도 각각의 행동 중요도를 구분해 사용자가 빠르고 정확하게 판단할 수 있도록 돕는 데 있습니다.

이 예시의 버튼 스타일에는 다음과 같은 문제가 있습니다.

- Primary 버튼과 Secondary 버튼의 시각적 무게감(Visual Weight)이 유사하여 어떤 버튼이 더 중요한지 구분하기 어렵습니다. 

시각적 계층이 명확하지 않으면 사용자는 혼란을 겪고 올바른 선택을 하기 어려워집니다.

- Secondary 버튼의 배경 대비 비율이 3:1 미만으로 낮습니다.
이로 인해 시각 장애가 있는 사용자에게 버튼의 형태 자체가 제대로 인식되지 않을 수 있으며,
접근성 기준(WCAG)을 충족하지 못하는 상태입니다.

버튼의 중요도를 명확하게 시각적으로 전달하면서, 접근성 기준을 함께 충족하는 디자인이 필요합니다.

 

 

 

2. 버튼 디자인 팁

 

 

 

1. 색상에만 의존하지 마세요.
버튼은 **시각적 계층 구조(중요도)**가 분명해야 하며,
그 구분이 색상만으로 이뤄지지 않도록 해야 합니다.
(예: 크기, 굵기, 테두리 등도 함께 활용)

2. 버튼 형태 대비는 최소 3:1 이상
버튼의 배경(또는 테두리)과 주변 배경 간 명도 대비가 3:1 이상이어야
저시력 사용자도 상호작용 가능한 요소임을 인식할 수 있습니다.

3. 버튼 텍스트 대비는 최소 4.5:1 이상
버튼 내부 텍스트는 배경 대비가 4.5:1 이상이어야
WCAG 2.1 AA 접근성 기준을 충족합니다.

4. 버튼 스타일이 동일할 경우, 버튼 간 대비도 3:1 이상
Primary와 Secondary처럼 스타일이 비슷하다면
둘 사이의 색상 대비도 최소 3:1 이상이어야
시각 장애가 있는 사용자도 구분할 수 있습니다.

5. 터치 영역은 충분히 크게 (최소 48pt × 48pt)
모바일이나 터치 환경을 고려해
누르기 쉬운 크기의 버튼을 설계해야 합니다.

6. 버튼 간 간격 확보 (권장: 16pt 이상)
버튼들이 너무 가까우면 오작동 위험이 높아집니다.
최소 16pt 정도의 여백을 확보하면 실수를 줄일 수 있습니다.

 

 

 

 

출처:

https://medium.com/ux-planet/ive-been-doing-buttons-wrong-have-you-2117c0066613