[컴포넌트]

버튼

 

 

 

1. 1. 텍스트 레이블: 버튼을 눌렀을 때 실행되는 기능에 대한 설명. 기본적으로 모든 버튼은 텍스트 레이블을 제공해야 하지만 아이콘만으로 표현되는 버튼인 경우에는 텍스트 레이블을 시각적으로 숨긴 상태로 사용할 수 있음
2.  
3. 2. 테이너(선택): 버튼을 배경과 구분하는 시각적인 수단으로 면 또는 선으로 표현됨
   
   
4. 3.아이콘(선택): 버튼을 눌렀을 때 실행되는 기능을 텍스트 대신 시각적인 상징으로 표현한 것

 

버튼은 유저가 클릭 할 수 있는 요소를 제공하며 하나의 탭을 눌러 액션 또는 선택을 할 수 있다.

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

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

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

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

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

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

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

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

가시성 높음 (우선순위 높음)

가장 필요로 하거나 눌렀으면 하는 버튼

사용자가 쉽게 누르도록 눈에 띄게 디자인한다.

강조색(Primary, Secondary, Tertiary)과 브랜드 색을 주로 사용한다.

예: 로그인, 제출, 작성, 전송, 구매, 팔로우, 확인 등

 

가시성 보통 (우선순위 보통)

눌렀을 때 영향이 작은 평범한 버튼

잘 보이지만 튀지 않도록 디자인한다.

예: 공유, 도움말, 설정, 이전으로, 취소 등

 

가시성 낮음 (우선순위 낮음)

누르지 않았으면 하는 버튼

사용자가 분명한 목적을 가지고 접근했을 때 보이는 강도로 디자인한다.

예: 서비스 탈퇴, 멤버십 해지, 로그아웃 등