버튼 컴포넌트란
컴포넌트의 종류 중 액션에 해당되는 것으로 유저가 이것을 누름으로써 중요한 동작을 수행하는 요소이다.
버튼 설계 시 유의점
행동 유도성(Affordance)
상호작용이 가능한 물체는, 상호작용이 가능하다는 시각적 단서를 제공해야 한다는 뜻으로, 버튼을 설계할 때는 누를 수 있다는 시각적인 힌트가 충분히 드러나야 한다.
| 좋은 예 | 나쁜 예 |
|---|---|
 |  |
이것을 보고 행동을 유도하는 속성이라 하여 행동유도성, 어포던스라 부르는 것이다. 때문에 디자인 시에 심미적인 완성도보다 버튼의 목적을 우선 생각해서 설계해야 한다.
(이는 모든 UI 설계 시에도 필요하다. 개념과 목적을 최우선으로 할 것!)
버튼의 구조
1. 컨테이너(Container)
안에 있는 요소를 감싸고 있는 프레임
(버튼의 높이는 컨테이너 안 상하 여백 + 안에 있는 요소의 높이로 정해짐)
2.라벨/레이블(Label)
버튼의 행동을 안내하는 글자
(UI에서 사용자가 입력하는 글자는 텍스트, 안내하는 글자는 라벨로 불림)
3. 리딩 엘리먼트(Leading Element)
버튼 라벨보다 더 앞쪽에 있기에 이끈다는 뜻으로 리딩 엘리먼트라 불림
4. 트레일링 엘리먼트(Trailing Element)
버튼 라벨보다 더 뒤쪽에 있기에 뒤따른다는 뜻으로 트레일링 엘리먼트라 불림
버튼의 종류
박스 버튼
일반적인 버튼 형태로 박스처럼 생겼다. 색상이 안에 꽉 차있어서 솔리드(Solid)버튼이라고도 불린다.
아웃라인 버튼
테두리가 있고 속이 빈 형태의 버튼으로, 말 그대로 아웃라인 버튼이라 부르며 이외에도 유령처럼 속이 비어있어서 고스트(Ghost) 또는 엠티(Empty) 버튼이라고도 불린다.
스플릿 버튼
 |  |
|---|
주요 액션과 관련된 보조 액션을 제공해야 할 때 사용하는 형태이며, 액션의 중요도에 따라 나뉘어져 있어서 스플릿(Split, 쪼개진) 버튼이라 불린다.
텍스트 버튼
배경색, 테두리 없이 글자로만 이뤄진 버튼으로 주요 액션보다 비중이 낮고 중요하지 않은 기능을 수행할 때 사용된다.
버튼은 목적에 따라 다양한 형태로 사용되는 컴포넌트로 오늘 다뤄본 것보다 더 다양한 버튼이 존재하니 발견하게 된다면 꼭! 메모하고 어떤 목적을 가졌는지 생각해보는 습관을 기르는 것이 좋다.
