본문 바로가기 메인메뉴 바로가기
이 누리집은 대한민국 공식 전자정부 누리집입니다.

버튼

버튼은 어떤 기능이나 동작을 실행하거나 기능을 사용하기 위한 상태로 변경하는 요소이다. 사용자가 서비스를 이용하는 과정에서 어떤 행동이 중요한지에 따라 관련된 버튼이 다양한 스타일로 표현된다.

컴포넌트명

버튼 (Button)

버튼 (Button) 스타일 예시

  1. 1.버튼 (Button)

    버튼을 배경과 구분하는 시각적인 수단으로 면 또는 선으로 표현됨
  2. 2.텍스트 레이블

    버튼을 눌렀을 때 실행되는 기능에 대한 설명. 기본적으로 모든 버튼은 텍스트 레이블을 제공해야 하지만 아이콘만으로 표현되는 버튼인 경우에는 텍스트 레이블을 시각적으로 숨긴 상태로 사용할 수 있음
  3. 3.아이콘(선택)

    버튼을 눌렀을 때 실행되는 기능을 텍스트 대신 시각적인 상징으로 표현한 것

유형

Button

Type사용자 과업, 플로우의 중요도에 따라 버튼 간 위계를 구분하여 사용한다.

Primary

Secondary

Tertiary

Quaternary

Warning

코드 보기

Size콘텐츠 내에서 적합한 계층을 가진 크기로 사용한다.

Large

Small

코드 보기

State사용자의 상호작용 시 컬러가 변경된다.

Default

Active

Disabled

Icon버튼 내에 시각적인 상징이 필요하다면 사용한다.

코드 보기

가이드

  • 버튼이 그룹으로 제공될 때 모든 버튼의 크기를 동일하게 제공한다. 버튼의 크기가 동일하다는 것은 그룹 내 선택지가 동질적임을 암시한다. 특정 버튼을 강조해야 할 필요가 있다면 크기가 아닌 다른 스타일을 통해 정보의 위계를 구분해야 한다.
  • 버튼의 텍스트 레이블은 버튼을 통해 실행되는 기능을 예측할 수 있는 명확한 내용을 동사형으로 제공한다. 버튼은 어떤 기능이나 동작을 실행시키는 요소이므로 사용자가 수행하는 작업을 동사로 표현하는 것이 적절하다. 명사나 형용사 레이블은 버튼의 용도나 목적을 명확하게 전달하지 못할 수 있으므로 ‘완료’, ‘닫기’, ‘취소’, ‘추가’, ‘삭제’와 같은 일반적인 작업인 경우와 동사를 사용했을 때 버튼 길이에 문제가 발생하거나 해석이 모호해지는 경우를 제외하고 항상 동사형 레이블을 제공해야 한다.
  • 아이콘은 중요한 작업에 그리고 반드시 필요한 경우에 사용한다. 아이콘은 가장 핵심적인 동작을 수행하는 버튼에 사용해야 하며, 아이콘은 버튼의 텍스트 레이블과 의미적으로 높은 관련성이 있어야 한다. 텍스트 레이블이 없는 아이콘 버튼은 대부분의 사용자가 다른 서비스/시스템에서의 학습을 통해 의미를 명확하게 이해하고 있는 경우 (예 - 설정, 닫기, 공감 등)가 아니라면 사용하지 않는 것이 바람직하다.
    아이콘이 있는 버튼은 아이콘이 없는 버튼보다 강조 수준이 높아야 한다. 버튼 그룹에서 가장 중요한 작업에 아이콘이 없으면 나머지 하위 수준 작업에서 아이콘을 사용해서는 안 된다.