버튼은 이벤트를 호출하거나 액션을 수행하기 위해 트리거 역할을 하는 요소입니다.
Usage
버튼은 사용자의 클릭을 통해 이벤트나 액션을 작동시킵니다. 주로 폼(form)이나 대화상자(dialog)와 같은 구성요소와 함께 사용합니다.
•
다른 화면으로 이동하거나 현재 화면을 전환할 때 사용합니다.
•
CTA(call to action) 용도로 사용합니다.
•
작업의 저장, 진행, 취소, 삭제 등 기본적인 액션을 수행할 때 사용합니다.
•
모달창 호출, 파일 다운로드 등 시스템의 피드백을 받기 위한 트리거로 사용합니다.
•
상태에 따라 디자인 스타일을 변경하여 사용합니다.
Anatomy
1.
Signifier
버튼의 행위지원성을 더 쉽게 알리기 위해 아이콘이나 기호를 사용할 수 있습니다.
2.
Label
버튼을 클릭하면 어떤 결과가 발생하는지 명확히 알려줄 수 있도록 표시합니다.
Variants
Contained Button
•
컨테이너에 흰색이 아닌 색상을 배경색으로 지정한 버튼입니다.
•
시각적 표현 의도에 따라 불투명도(opacity)를 적용하여 사용할 수 있습니다.
•
화면 전환이나 이동이 발생하는 경우를 비롯하여 사용자의 작업에 중요한 영향을 미치는 경우에 사용합니다.
•
주로 CTA 용도의 주(Primary) 버튼으로 사용합니다.
Outlined Button
•
컨테이너 영역에 borderline 색상만 지정한 버튼입니다.
•
화면 이동을 하지 않고 인터페이스 내에서 액션이 발생할 때 사용합니다.
Ghost Button
•
텍스트 레이블만 표시하여 사용하는 버튼입니다.
•
데이터 표시 영역에서 링크를 제공할 때 사용합니다.
Icon Button
•
아이콘과 텍스트 레이블을 함께 표시하여 사용하는 버튼입니다.
•
사용자의 작업에 큰 영향을 미치지 않는 경우에 사용합니다.
•
텍스트 레이블과 함께 사용하는 것을 원칙으로 하지만, 네비게이션에서 사용할 경우에는 아이콘 단독으로 사용할 수 있습니다.
•
아이콘 단독으로 사용하는 경우에는 보편적으로 의미를 인지할 수 있는 아이콘을 사용합니다.
States
Guidelines
Common
•
사용자의 작업 속도를 개선하기 위해 버튼은 최대한 연관 영역과 가깝게 배치해야 합니다.
•
버튼의 크기는 클릭 또는 탭을 하기에 충분하도록 만들어야 합니다.
•
클릭을 할 수 있다는 버튼 고유의 행위지원성을 시각적으로 표현해야 합니다.
•
버튼 레이블은 2줄 이상이거나 줄임으로 표시할 수 없습니다. 버튼 레이블에 따라 버튼의 너비를 유연하게 적용하여 사용합니다.
Primary Button
•
주 버튼은 가급적 한 화면에 한 개만 사용합니다.
•
두 개 이상 사용해야 하는 경우에는 각 버튼의 기능에 대해 사용자에게 분명히 인지를 시킬 수 있도록 순서와 배치를 정합니다.
Ghost Button
•
텍스트 색상은 디자인 스타일에서 정의한 alink 색상을 적용하고 반드시 밑 줄(U)을 함께 표시합니다.
Button Group
•
여러 버튼 사이에 밀접한 관계가 있는 경우에는 그룹화 하여 사용할 수 있습니다.
•
버튼의 중요도와 논리적인 흐름에 따라 순서를 정하여 표시합니다.
•
버튼 그룹 내에서 가장 중요한 액션의 버튼은 주 버튼으로 사용할 수 있습니다.
•
여러 종류의 버튼을 섞어 사용할 수 없습니다.
•
버튼과 버튼 사이의 간격은 클릭이나 탭 실수를 방지하기 위해 최소한의 너비를 확보해야 합니다.
•
버튼 그룹은 수평으로만 정렬하여 사용할 수 있습니다.
Accessibility
•
모든 버튼에는 aria-label을 사용하여 대체 텍스트를 표시해야 합니다.
•
아이콘 버튼을 사용할 때는 아이콘 내에 텍스트 레이블을 추가할 수 없습니다.
•
비활성화(disable) 상태 버튼은 피드백을 제공하지 않기 때문에 스크린 리더 사용자들에게 왜 버튼을 사용하지 못하는지 알릴 수가 없습니다. 가급적 사용을 지양합니다.
