버튼

버튼을 사용하면 사용자가 작업 또는 흐름을 시작하는 데 도움이 됩니다. 다양한 유형의 버튼 중에서 선택하여 강조할 수 있습니다.

리소스

유형	링크	상태
디자인	디자인 소스 (Figma)	사용 가능
구현	Jetpack Compose	사용 가능

하이라이트

• 작업의 중요도에 따라 버튼 유형을 선택합니다. 작업이 중요할수록 버튼이 더 강조됩니다.
• 버튼에는 수행하는 작업을 나타내는 명확한 라벨이 있어야 합니다.
• 사용자가 버튼을 찾을 것으로 예상되는 위치에 버튼을 논리적으로 배치합니다.
• 버튼을 과도하게 사용하지 마세요. 화면에 버튼이 너무 많으면 시각적 계층 구조를 방해합니다.

변형

버튼에는 6가지 유형이 있습니다.

1. 채워진 버튼
2. 개요 버튼
3. 아이콘 버튼
4. 윤곽선 아이콘 버튼
5. 긴 버튼
6. 이미지 버튼

작업의 중요도에 따라 버튼 유형을 선택합니다. 작업이 중요할수록 버튼이 더 강조됩니다.

채우기 및 윤곽선 버튼

채워진 버튼은 시각적으로 가장 큰 영향을 주며 저장, 지금 참여, 확인 또는 다운로드와 같이 흐름을 완료하는 중요한 최종 작업에 사용해야 합니다.

윤곽선이 있는 버튼은 중간 강조 버튼입니다. 여기에는 중요한 작업이 있지만 앱의 기본 작업은 아닙니다. 윤곽선이 있는 버튼은 대체 작업이나 보조 작업을 나타내기 위해 채워진 버튼과 잘 페어링됩니다.

분석

1. 컨테이너
2. 라벨 텍스트
3. 아이콘(선택사항)

상태

구성요소의 상태를 시각적으로 표현

1. 기본 계정
2. 집중력이 높아진
3. 누름

사양

아이콘 및 윤곽선 아이콘 버튼

아이콘 버튼을 사용하여 간단한 레이아웃으로 작업을 표시합니다. 아이콘 버튼은 더보기 메뉴나 검색 열기와 같은 열기 작업을 나타내거나 즐겨찾기 또는 북마크와 같이 켜고 끌 수 있는 바이너리 작업을 나타낼 수 있습니다. 미디어를 재생하거나 일시중지하는 데도 사용됩니다.

아이콘 버튼은 작게, 보통, 크게의 세 가지 크기로 정의할 수 있습니다.

분석

1. 컨테이너
2. 아이콘

상태

1. 기본 계정
2. 집중력이 높아진
3. 누름

상태는 구성요소나 상호작용 요소의 상태를 전달하는 데 사용되는 시각적 표현입니다.

사양

넓은 버튼

넓은 버튼은 일반 버튼보다 강조하는 데 사용됩니다. 여기에는 중요한 작업이 포함되어 있습니다. 관련 옵션을 나타내는 버튼은 함께 그룹화됩니다. 그룹은 공통의 영역을 공유해야 합니다.

분석

1. 컨테이너
2. 선행 아이콘
3. 제목
4. 부제

상태

1. 기본 계정
2. 집중력이 높아진
3. 누름

상태는 구성요소나 상호작용 요소의 상태를 전달하는 데 사용되는 시각적 표현입니다.

사양

이미지 버튼

이미지 버튼은 일반적으로 다음 수준의 탐색에서 사용할 수 있는 콘텐츠의 썸네일을 표시하는 데 사용됩니다. 일반적으로 관련 작업으로 그룹화되며 그룹은 공통의 노출 영역을 공유해야 합니다.

분석

1. 컨테이너
2. 선행 아이콘
3. 제목
4. 부제
5. 이미지 레이어: 다음으로 구성됩니다.
   1. 스크림 (상태 오버레이)
   2. 그라데이션 (표면 색상 기준)
   3. 이미지

상태

1. 기본 계정
2. 집중력이 높아진
3. 누름

상태는 구성요소나 상호작용 요소의 상태를 전달하는 데 사용되는 시각적 표현입니다.

사양

사용

버튼은 일반적으로 사용자가 실행할 수 있는 작업을 전달하는 데 사용됩니다. 일반적으로 대화상자, 모달 창, 양식, 카드, 툴바와 같은 UI 요소에 표시됩니다.

버튼은 UI에서 작업을 나타내는 한 가지 옵션일 뿐입니다. 과도하게 사용하지 마세요. 화면에 버튼이 너무 많으면 시각적 계층구조를 방해합니다.

1. 컨테이너
2. 아이콘
3. 라벨 텍스트
4. 제목
5. 부제
6. 이미지

컨테이너

버튼은 콘텐츠 주위에 컨테이너를 표시합니다. 컨테이너는 초점에 따라 1.1배로 확장되며 내부 패딩을 유지합니다. 다음은 컨테이너에 대한 몇 가지 고려사항입니다.

• 일관된 패딩이 있는 콘텐츠를 기반으로 컨테이너 너비를 설정합니다.
• 반응형 레이아웃 그리드에 대한 컨테이너의 상대적 위치를 설정합니다.
• 채워진 버튼에는 단색 컨테이너를 사용합니다.
• 윤곽선이 표시된 버튼에는 포커스에 획 및 채우기 색상을 사용합니다. 포커스가 있으면 컨테이너에 윤곽선과 함께 채우기 색상이 적용됩니다.
• 넓은 버튼과 이미지 버튼의 경우 레이아웃 그리드에 따라 컨테이너 너비가 설정됩니다.
• 컨테이너 크기, 위치, 정렬은 상위 컨테이너의 확장에 따라 변경될 수 있습니다.

텍스트 및 아이콘 버튼 컨테이너는 완전히 둥근 모서리를 사용합니다. 와이드 및 이미지 버튼 컨테이너에는 12dp의 둥근 컨테이너가 있습니다.

아이콘

아이콘은 버튼의 작업을 시각적으로 전달하여 관심을 끄는 데 도움이 됩니다. 버튼 앞부분에 배치해야 합니다. 아이콘은 항상 컨테이너 내에서 세로로 중앙에 배치됩니다.

라벨 텍스트

라벨 텍스트는 버튼의 가장 중요한 요소입니다. 사용자가 버튼을 탭하면 발생하는 작업을 설명합니다.

버튼 라벨 텍스트에는 첫 단어와 고유 명사를 대문자로 표기하여 문장 첫 글자를 대문자로 표기합니다. 텍스트 줄바꿈을 피하세요. 가독성을 최대화하려면 라벨 텍스트를 한 줄에 유지해야 합니다.

이미지

이미지 버튼에는 항상 배경의 이미지 위에 그라데이션 오버레이와 스크림이 있습니다. 그라데이션 오버레이는 컨테이너 색상에 따라 설정됩니다. 스크림은 상태에 따라 변경됩니다.

버튼 그룹

버튼은 작업 간에 일관된 탐색을 유지하기 위해 행 또는 열에 함께 표시됩니다. 다음 섹션에서는 고려사항을 설명합니다.

계층 구조 알림

각 화면에는 눈에 띄는(일반적으로 넓은) 버튼으로 표시되는 하나의 기본 작업이 있어야 합니다. 버튼은 쉽게 보고 이해할 수 있어야 합니다. 다른 버튼은 눈에 잘 띄지 않아야 하며 사용자의 기본 작업에 방해가 되어서는 안 됩니다.

그룹의 첫 번째 버튼은 포커스가 먼저 배치되므로 기본 작업 역할을 합니다.

선형 레이아웃 유지

1. 행 레이아웃
2. 열 레이아웃

대안을 논리적으로 사용

열 레이아웃에서는 단일 버튼 변형을 유지해야 합니다. 행 레이아웃에서는 다양한 변형을 버튼 그룹으로 클러스터링할 수 있지만 로직은 명확해야 합니다. 채워진 버튼과 윤곽선 버튼을 동일한 그룹에서 사용할 수 있지만 작업의 계층 구조가 명확해야 합니다.