📌
버튼 (Button)
플로팅 액션 버튼 (FAB)
🔗참고 : https://m3.material.io/components/buttons/overview
버튼 (Button)
버튼은 사용자가 취할 수 있는 모든 행동과 연결되어있다.
일반적으로 버튼은 UI 전반에 위치한다.
(다이얼로그, 모달창, Form, 카드, 툴바 등)
📐주의
가장 중요한 행동에 대해서는 시각적으로 눈에 띄도록 완전히 채워진 버튼을 사용한다.
버튼 하나에 한가지 행동만 표시해야하고 너무 많은 버튼은 시각적 위계를 해친다.
추가적인 기능들의 위치를 고려하여 버튼을 배치하여야 한다.
종류
- Elevated buttons
그림자를 사용하여 위로 올라온 것처럼 보이는 버튼
배경이 이미지 혹은 패턴으로 채워졌을 때 배경에 묻히지 않고 시각적으로 분리시킬 수 있다.
더 높게 올라간 것처럼 보이도록 하면 버튼의 중요도를 더 높인다.
- Filled buttons
FAB에 시각적으로 가장 크게 영향을 미치기 때문에 가장 중요하고 사용자 흐름을 종료시키는 마지막 행동 (저장, 확인 등)을 위한 버튼에 사용해야한다.
텍스트 라벨 + 양쪽 패딩 을 고려하여 컨테이너 너비 지정
반응형에 맞도록 컨테이너 너비 지정
- Filled tonal buttons
솔리드 버튼 (Filled button) 보다는 덜 강조하고 싶고 아웃라인 버튼보다는 더 강조하고 싶을 때 사용
솔리드 버튼보다 연한 색으로 색상 지정
- Outlined buttons
중요하지만 앱의 가장 주요한 기능은 아닌 액션에 해당하는 버튼
솔리드 버튼과 짝지어서 대안 혹은 두번째 액션을 유도하는데 사용 ex. 이전, 다음
컨테이너 내부에 색을 채우지는 않고 외부 선(stroke)만 적용
그라디언트 등 다양한 배경에 위치할 수 있다. (이미지일 경우에는 고려해서 사용)
- Text buttons
여러가지 선택지가 있을 때 가장 중요도가 낮은 행동에 대하여 사용
텍스트 버튼은 시각적인 컨테이너가 없고 주변의 컨텐츠에 방해를 받지 않기 때문에 카드, 다이얼로그, 스낵바와 같은 컴포넌트에서 사용
눈에 띌 있도록 일반 텍스트나 요소와 스타일 혹은 색상이 달라야한다.
이미지 배경에는 사용하지 않는다.
다이얼로그에서 텍스트 버튼을 사용할 때, ltr 언어 일 경우 우측 하단에 위치, rtl 언어 일 경우에는 그 반대에 위치
구성
- 라벨 텍스트
라벨 텍스트는 버튼의 요소들 중 가장 중요하다.
사용자가 버튼을 클릭했을 때 어떤 액션이 발생할지 알려줘야한다.
첫번째 단어의 첫번째 글자는 대문자여야하고 간결하고 적절한 내용이 들어가야한다.
읽기 쉽도록 하기 위해, 라벨 텍스트는 한줄에 다 들어와야 한다.
텍스트 버튼은 다른 텍스트나 요소들보다 눈에 잘 띄어야하므로 라벨 텍스트의 색상과 스타일에 대한 의존도가 높다
- 컨테이너
버튼 컨테이너는 라벨 텍스트와 추가적인 아이콘을 포함한다.
버튼 컨테이너의 너비는 버튼 라벨보다 좁으면 안 되고 반응형 레이아웃 그리드를 고려하여 정해져야한다.
40dp 보다 세로 크기가 커야하고 모든 꼭짓점이 완전히 둥글어야한다.
- 아이콘
아이콘은 버튼의 액션과 관련이 있고 사용자의 주의를 끄는데 도움이 된다.
버튼의 리딩 사이드 즉, 라벨 텍스트 이전에 위치해야한다. (ltr, rtl 고려)
꼭 수평 정렬이 되어야하고 한 버튼에 한가지 아이콘만 사용한다.
반응형 레이아웃
반응형 레이아웃에서 버튼의 위치와 크기는 해당 요소의 부모 컨테이너에 따라 달라진다.
텍스트 라벨과 아이콘과 같은 버튼의 요소들의 위치와 정렬은 버튼 컨테이너의 크기에 따라 바뀐다.
만약 버튼 크기가 반응형 레이아웃에 따라 더 커진다면 텍스트 라벨과 아이콘은 간격을 유지하며 중앙에 위치한다.
그 외 참고
행동을 수행하기 위해 버튼을 사용한다.
보조 기술과 함께 버튼에 집중시키고 활성화 시킬 수 있다.
비슷하게 생긴 컴포넌트들을 사용할 경우 각각 3:1 비율이 아니라면 함께 사용해서는 안 된다.
보여지는 라벨 텍스트는 동일하게 접근성 라벨 (accessibility label) 에도 적용된다. 웹 접근성을 고려하여 라벨 텍스트를 정해야한다.
만약 아이콘만 있는 버튼일 경우에는 접근성 라벨에 그 기능을 명시해야한다.
플로팅 액션 버튼 (FAB)
화면에서 가장 흔하거나 기본적인 행동을 위해 사용
버튼의 가장 중요한 타입
텍스트 라벨과 아이콘을 포함하기 때문에 중요한 행동에 대한 더 강한 강조와 명확성을 제공할 수 있다.
확장된 플로팅 액션 버튼은 스크롤되는 화면에서 행동에 대한 지속적인 접근을 제공하기 위해 사용
(스크롤 되지 않는 화면일 경우 버튼을 사용)
📐주의
다수의 FAB를 사용할 경우 레이아웃을 해치지 않고 시각적 요소들의 중요도를 망치지 않게 하기 위해 중요도에 따라 크기를 다르게 한다.
행동들이 짝지어 있을 경우 (ex. 취소, 확인) FAB가 아닌 그냥 일반 버튼 사용
구성
- 컨테이너
둥근 직사각형 모양
아이콘 + 텍스트 라벨 + 패딩 = 고정 너비
화면이나 레이아웃 그리드에 맞춰 너비가 변하기도 한다.
- 아이콘
FAB의 아이콘은 행동을 직관적으로 나타내야한다.
리딩 엘리먼트 (텍스트 라벨 앞에 위치)
아이콘이 없어도 되지만 아이콘만 있어서는 안 된다.
- 라벨 텍스트
라벨은 행동을 설명해줘야한다.
한 줄 안에 들어와야하며 말 줄임은 추가 가능
위치
UI를 읽는데 방해가 되므로 스크린의 절반의 위쪽에 위치하지 않는다.
카드나 다른 컨테이너 내부에 위치하지 않는다.
앱 바와 겹쳐서 위치하지 않는다.
UI 여백 위에 위치하고 앱바에서는 약간 떨어져서 위치시킨다.
반응형 레이아웃
화면이 제한적일 경우 확장된 FAB는 일반 FAB로 변경될 수 있다.
모바일 기기 (compact) 혹은 중간 크기에서 FAB는 화면 하단의 중간 혹은 가장자리에 위치한다. (LTR 언어일 경우 오른쪽, RTL 언어일 경우 왼쪽에 위치)
더 큰 사이즈의 화면에서는 확장된 FAB는 LTR,RTL 언어 둘 다 오른쪽에 위치
더 큰 사이즈의 화면에서는 좌측 상단에 위치
효과
- 등장
들어오고 나가는 트랜지션을 활용하여 보여질 수 있다.
- 확장
컨테이너 크기 변경 트랜지션을 활용하여 어떠한 모양으로 확장되거나 변경될 수 있다.
- 변형
스크롤할 때는 없어지거나 크기가 작아지고 스크롤이 화면의 하단에 도달하면 크기가 커진다.
- 스크롤
스크롤을 내릴 때 크기가 작아지고 스크롤을 올릴 때 크기가 커짐
그 외 참고
FAB는 앱바와 내비게이션 뒤에, 다른 컨텐츠의 앞에서 포커스를 받는다.
사용자가 나갈 때 FAB에 대한 포커스가 유지된다.
행동이 명확할 수 있도록 아이콘과 텍스트 라벨을 적절히 사용한다.
라벨 텍스트와 아이콘이 함께 있는 경우 툴팁이 필요없다.
접근성 라벨은 시각적 라벨과 같은 글자를 포함해야한다.
실습
📍만드는 방법
- 텍스트레이어 혹은 아이콘 레이어 생성 후 오토 레이아웃으로 변경
- 패딩 설정, 필요하다면 아이콘 추가
- 컴포넌트로 변경
- 프로퍼티 생성 (텍스트, 토글, 인스턴스 스왑)
- 사이즈, 컬러별로 베리언트 추가
