Android Button
Android Button (버튼)
버튼은 단일 동작이나 이벤트를 트리거하는 컴포넌트예요. Android용 Fluent 버튼의 유형, 동작, 레이아웃, 접근성 원칙을 정리했어요.
출처: 문서
본문
버튼은 단일 동작이나 이벤트를 트리거해요.
응답 제출, 변경 확정, 다음 단계로 이동 같은 중요한 동작에는 버튼을 사용하세요. 다른 곳으로 이동해야 한다면 링크를 사용하는 게 좋아요.
Resources (리소스)
- Button code
- Android guidance
Types (유형)
Button
표준 버튼은 페이지 본문 콘텐츠와 같은 고도를 유지하며 단일 동작이나 이벤트를 시작해요.
Floating action button (FAB)
플로팅 액션 버튼(FAB)은 화면의 기본 동작을 강조해요. 다른 모든 레이아웃 요소 위에 떠 있고, 화면 오른쪽 하단, 내비게이션 바 바로 위에 지속적으로 위치해요.
Behavior (동작)
Extended FABs (확장 FAB)
아이콘 외에 텍스트 라벨을 추가하는 게 유용한 경우 확장 FAB를 선택하세요. 이렇게 하면 아이콘만으로는 불명확할 수 있는 동작을 사용자가 더 쉽게 해석할 수 있어요. 스크롤이 필요한 긴 화면에서 사용하면 문맥이 항상 명확하게 드러나요.
확장 FAB는 스크롤을 내릴 때 접혀서 페이지 콘텐츠에 더 많은 공간을 만들어 줘요. 화면 하단에 도달하거나 위로 스크롤하면 확장 FAB가 다시 펼쳐져 FAB 라벨을 보여 줘요.
정보가 많은 레이아웃에서는 확장 FAB가 스크롤 시 FAB로 접혀 콘텐츠를 볼 수 있는 공간을 확보해 줘요. 화면 하단에서 다시 펼쳐질 수 있어요.
확장 FAB는 기본 동작을 계속 보이게 유지해 줘요.
스크롤되지 않는 화면에서는 확장 FAB를 사용하지 마세요. 스크롤되지 않는 뷰에서 기본 동작을 보여 주려면 채워진(filled) 버튼을 사용하세요.
Menu FABs (메뉴 FAB)
때로는 빠른 접근을 위해 여러 동작을 묶는 것이 유용할 수 있어요. 메뉴 FAB를 사용하면 구별되지만 관련된 소수의 옵션을 제공할 수 있어요. 예를 들어 사용자가 OneNote에서 새 메모를 추가하는 것만큼 사진을 찍거나 음성 메모를 기록하는 일도 자주 있을 수 있죠.
이 경우 메뉴 FAB 아이콘이 추가 아이콘을 사용해 이 화면에서 빠르게 추가할 수 있음을 나타낼 수 있어요.
메뉴 FAB는 추가하기처럼 하나의 카테고리 아래에서 구별되면서도 관련된 옵션을 제공해요.
누군가 메뉴 FAB와 상호작용하면 기본 동작 아이콘이 새 메모 작성처럼 가장 논리적인 동작을 나타내도록 바뀌어야 해요. 시각적 무게가 덜한 작은 FAB도 나타나서 사용자가 다른 미디어를 메모로 쉽게 추가할 수 있게 해 줘요.
메뉴 FAB에는 항상 텍스트 라벨을 사용해 동작이 명확하도록 하세요.
메뉴가 열리면 사용자는 필요한 특정 동작을 취할 수 있어요.
Moving across tabs (탭 이동)
탭을 이동할 때 FAB는 잠시 사라졌다가 다시 나타나야 해요. 이렇게 하면 FAB와 화면의 콘텐츠 사이에 문맥적 관계를 만들어 줘요.
Layout (레이아웃)
Hierarchy and prominence (계층과 중요도)
플로우에서 동작의 중요도에 따라 버튼을 선택하세요. 모든 버튼 유형은 높음, 중간, 낮음 중 하나의 중요도를 가져요. 레이아웃에 버튼을 과하게 배치하지 마세요. 집중된 시각적 흐름을 유지하려면 다른 동작 컴포넌트도 골고루 섞어 사용하세요.
레이아웃에서 버튼을 선택하고 배치하는 방법은 Material의 가이드라인을 따르세요.
Make primary buttons stand out (기본 버튼을 두드러지게)
가장 중요한 동작을 위해 레이아웃에 기본 버튼 하나만 사용하고, 항상 다른 동작의 위쪽이나 왼쪽 같은 두드러진 위치에 배치하세요. 동일한 우선순위의 버튼이 둘 이상 있다면, 복잡한 레이아웃을 피하기 위해 outline, outline accent, subtle 버튼을 사용하세요.
Avoid high emphasis buttons in lists and modals (목록과 모달에서 높은 강조 버튼 피하기)
어센트(accent) 버튼과 FAB는 로그인이나 업셀처럼 전체 UI가 동작을 요구하는 히어로 시나리오에 사용해야 해요. 정보가 많은 시나리오에서 사용하면 경험이 집중력을 잃고, 기본 버튼이 화면의 다른 정보에서 중요도를 빼앗아가요.
Accessibility (접근성)
Button spacing (버튼 간격)
버튼 그룹은 서로 구분될 수 있도록 주변에 충분한 공간이 있는지 확인하세요. 특히 중성(neutral) 배경의 버튼에서 중요해요.
FAB focus order (FAB 포커스 순서)
FAB는 시각적으로 가장 두드러지는 버튼이에요. 보조 기술을 사용하는 사용자에게도 같은 수준의 중요도를 전달하려면 포커스 순서에서 높은 위치에 배치하세요.
예를 들어 Outlook 모바일에서는 앱 바를 읽은 직후 FAB를 읽는 것이 유용할 수 있어요. 이렇게 하면 긴 이메일 목록을 스크롤하지 않고도 사용자가 빠르게 동작을 취할 수 있어요.
Accessible button labels (접근 가능한 버튼 라벨)
모든 버튼에는 화면 판독기가 접근할 수 있는 라벨이 있어야 해요. 텍스트가 있는 버튼의 경우 접근 가능한 라벨은 보이는 라벨과 첫 단어가 같아야 해요. 아이콘만 있는 FAB의 경우 접근 가능한 라벨은 FAB가 취할 수 있게 해 주는 동작을 간략히 설명해야 해요.
Content (콘텐츠)
다음에 일어날 일을 반영하는 능동적인 언어를 사용하세요. 간결하게 하세요. 보통 단일 동사가 가장 좋지만, 명확성을 높인다면 명사를 포함하세요.