웹 디자인 시스템 - 버튼 컴포넌트

 

 

 

이 게시글은 공부하면서 정리한 내용입니다.
잘못된 정보는 제보해주시면 매우 감사드리겠습니다.

 

---

 

 

 

디자인 시스템 구축 과정에서 필요한 컴포넌트.
그 중 버튼 컴포넌트에 대해 정리해보았다.

 

버튼의 구성 요소

 

기본 버튼(Text), 응용 버튼(Text & Icon, Icon)

 

 

기본적으로 버튼은 텍스트로 구성하지만,

아이콘을 추가하여 더 빠르고 명확하게 대상을 인식시킬 수 있다.

 

 

버튼의 크기 종류

 

버튼의 크기 종류(Small, Medium, Large)

 

 

버튼의 크기는 흔히 Small, Medium, Large의 3단계로 정할 수 있다.

필요하다면 4~5가지로 확장할 수 있다.

더 적게 줄일 수도 있다.

 

💡 크기를 나누는 이유는 무엇일까?

디자이너가 그리는 버튼의 크기가 모두 다르다고 생각해보자.

일관성이 떨어지고 유지보수하기 힘들어질 것이다.

 

디자이너가 한 가지의 버튼만 사용한다면 어떨까?

역시 쉽지 않다.

한 가지의 크기로 모든 케이스에 대응할 수 없기 때문이다.

 

따라서 몇 가지 크기의 버튼을 정의하고 사용하는 것이다.

이렇게 유지보수와 작업의 효율성을 높일 수 있다.

 

 

누르기 편한 크기

 

버튼의 존재 이유는 무엇일까?

누르는 것이다.

누르기 불편하다면 쓸모없는 버튼 아닐까?

 

 

 

1. 데스크탑 기준

 

터치 타겟의 사용성 차이 예시

 

 

웹접근성 지침 2.1(WCAG 2.1)에 따르면

타겟의 크기는 최소 44 × 44 CSS 픽셀 이상이어야 한다.

 

위 예시처럼 터치 영역을 넓게 잡으면 클릭하기 수월해진다.

배경이 투명한 버튼은 호버(Hover)했을 때 배경 색을 지정하면

사용자가 바로 터치 영역을 인지할 수 있다.

 

 

 

2. 모바일/태블릿 기준

 

플랫폼별 터치 타겟 예시

 

 

사용자가 빠르고 정확하게 타겟을 터치하려면

최소 1cm × 1cm의 크기로 디자인해야 한다.

 

참고:

터치스크린에서의 터치 타겟 (닐슨 노먼 그룹)

HIG 접근성 - 버튼 & 컨트롤 (애플)

안드로이드 터치 타겟 (구글)

 

다만, 프로젝트의 성격에 따라 달라질 수 있음을 명심하자.

그러면 구체적으로 버튼의 크기를 어떻게 정해야 할까?

 

 

버튼의 높이

 

고정 높이 버튼, 가변 높이 버튼 비교 예시

 

 

높이는 고정하는 것을 권장한다.

높이를 지정하지 않는다면 어떻게 될까?

 

위 예시 처럼 높이가 가변적으로 변할 것이다.

(높이 = 컨텐츠 크기 + 상하 패딩)

 

 

버튼의 너비

 

가변 너비 버튼 예시

 

 

버튼 크기에 통일성을 부여하고 싶다면 너비를 고정하면 된다.

고정하지 않고 좌우 패딩만 지정하면 컨텐츠 크기에 따라 너비가 가변적으로 변한다.

(너비 = 컨텐츠 크기 + 좌우 패딩)

 

 

버튼에 최소 너비(Min-Width)를 적용한 예시

 

 

버튼에 좌우 패딩만 지정한 경우를 보자.
컨텐츠가 짧으면 버튼 너비도 줄어든다.
지나치게 짧아지는 것을 막고 싶다면 최소 너비(min-width)를 적용한다.

버튼 안의 텍스트가 너무 길어질 경우는 어떨까? (지양해야 함)
버튼 너비도 같이 길어질 것이다.

 

특정 너비 이상 커지면 더 커지지 않도록 말줄임표 처리(line-clamp)를 하기도 한다.
버튼의 텍스트는 생략되면 문제가 생길 수 있다. 따라서 말줄임표 처리를 하는 경우는 드물다.

 

 

전체 너비 버튼(Full-Width Button) 예시

 

 

모바일의 경우 상위 요소의 너비에 맞게 버튼의 너비가 늘어나는

전체 너비 버튼(Full-Width Button, a.k.a. Block Button)을 설정하기도 한다.

 

 

버튼의 레이아웃

 

아이콘 & 텍스트 버튼의 패딩 예시

 

 

위 예시처럼 아이콘과 텍스트를 나란히 버튼에 배치한다고 생각해보자.

좌우 패딩을 동일하게 적용했는데도 왼쪽 여백이 더 많아보인다.

이유가 무엇일까?

 

아이콘 영역에도 자체 여백이 있고, 텍스트에도 자체 여백이 있기 때문이다.

그렇기 때문에 시각적인 균형이 깨져 보인다.

참고: 패딩을 포함한 아이콘 영역 디자인 (머터리얼 가이드 3)

 

 

버튼 좌우 패딩을 조정한 예시

 

 

이럴 경우 버튼에 좌우 패딩을 다르게 줘 균형을 맞춘다.

아이콘과 텍스트 사이 간격도 많이 벌어지지 않도록 유의한다.

참고: 버튼 정렬 예시 (머터리얼 가이드 3)

 

많이 벌어지면 하나의 그룹으로 보이지도 않을 뿐더러

컨텐츠를 인지하는 데 시간이 걸리기 때문이다.

 

 

 

 

 

지금까지 버튼 컴포넌트에 대해 알아보았다.

버튼 스타일을 어떻게 디자인할지 모르겠다면, 다음 글을 참고해보자.

 

 

https://mesign.tistory.com/48

웹 디자인 시스템 - 버튼 컴포넌트 스타일