안드로이드 가이드 라인 2

앱 바와 시트 

1. 하단 앱 바 App Bar
앱 바는 자주 사용하는 여러 가지 액션 아이콘과 컨트롤을 모아 앱의 상단이나 하단에 배치한 툴바 형태의 UI이다. 하단 앱 바에는 현재 화면에 적용되는 액션 아이콘과 내비게이션 드로어 컨트롤 등이 포함된다. 오버플로 메뉴가 있다면 가장 오른쪽에 배치한다. 하단 앱 바는 모바일 전용 UI로, 태블릿이나 데스크톱에는 적용할 수 없다.

하단 앱 바의 구성

1. 컨테이너 Container 
2. 내비게이션 드로어 컨트롤 Navigation Drawer Control
3. 플로팅 액션 버튼 Floating Action Button (FAB)
4. 액션 아이콘 Action icon
5. 오버플로 메뉴 컨트롤 Overflow Menu Control

2. 상단 앱 바 
상단 앱 바에는 현재 화면과 관련된 브랜딩, 화면 제목, 탐색 항목, 액션 항목 등이 표시된다. 햄버거 메뉸 아이콘과 같은 내비게이션 컨트롤은 왼쪽에 배치하고, 바로 옆에 제목을 배치한다. 오른쪽에는 상황에 따른 액션 항목을 배치하고, 오버플로 메뉴가 있다면 가장 오른쪽에 배치한다. 
상단 앱 바의 높이는 제목의 길이에 따라 조절할 수 있으며, 제목에는 사용자가 현재 머무는 화면의 제목이나 사용 중인 앱 이름을 표시할 수 있다. 표준 앱 바에서는 제목을 두 줄로 쓸 수 없고 텍스트의 길이가 길어서 앱 바를 넘어갈 수도 없다. 
액션 바는 상황에 맞게 변형될 수 있다. 예를 들어 갤러리에서 사진을 하나 선택하면 상단 앱 바의 제목은 선택한 사진과 관련된 문맥으로 변경된다. 이때는 앱 바의 색상이 바뀌고 햄버거 메뉴 아이콘이 닫기 아이콘으로 변경된다.

상단 앱 바의 구성

1. 컨테이너 Container 
2. 내비게이션 드로어 컨트롤 Navigation Drawer Control
3. 제목 Title
4. 액션 항목 Action items
5. 오버플로 메뉴 컨트롤 Overflow Menu Control

3. 하단 시트
하단 시트는 기본 콘텐츠를 보완하는 보조 콘텐츠가 표시되는 화면 하단의 고정 공간으로, 주로 모바일에서 사용된다. 하단 시트는 사용자가 기본 콘텐츠와 상호작용하는 동안 계속 표시되며, 표준 하단 시트, 모달 하단 시트, 하단 확장 시트 등의 형태로 구현된다.
표준 하단 시트는 화면의 기본 UI 영역에 함께 배치되며, 두 영역을 동시에 보면서 상호작용할 수 있다. 기본 UI 영역의 내용을 자주 스크롤 하거나 팬 할 때, 또는 보조 콘텐츠를 화면에 표시할 때 주로 사용된다. 기본 높이는 8dp이며, 기본 UI 영역의 내용을 스크롤 하거나 이동할 때 일시적으로 확장되어 기본 UI 영역을 덮을 수 있다. 
모달 하단 시트는 인라인 메뉴와 모바일상에 열리는 간단한 대화상자의 대안으로, 나머지 화면과의 상호작용을 차단하고 추가 공간에 일련의 선택 항목을 제공한다. 모달 하단 시트의 기본 높이는 16dp이며, 대부분의 UI 요소 위에 나타날 수 있고, 더 많은 옵션을 표시하기 위해 UI 전체를 덮을 수도 있다.
하단 확장 시트는 하단에 고정된 상태로 배치되며, 장바구니와 같은 앱 기능을 지속해서 표시해 사용자가 작업을 수행할 수 있도록 지원한다. 또한, 채팅이나 댓글 기능, 재생 목록과 동영상 항목 간의 간접 탐색 등을 지원한다.

 

 

---

탭과 버튼

1. 탭 Tab
탭 메뉴는 화면 상단에 배치되며, 탭 하는 동작만으로 화면을 쉽게 전환하고 탐색할 수 있다. 안드로이드에서는 보기, 데이터 세트, 앱 기능 간 전환 등의 상위 콘텐츠로 탭을 구성할 것을 권장한다. 안드로이드에서는 탭이 상단에 고정되며, 스크롤 가능한 아이콘과 텍스트가 포함될 수 있고, 탭에 관련된 다양한 옵션이 제시된다. 내용을 간결하게 표현한 레이블링을 사용하고, 화면과 관련된 탭에는 선으로 현재 페이지를 나타내야 한다. 탭을 전환할 때 스와이프 동작을 이용할 수 있으므로 탭으로 분류된 화면 안에는 스와이프를 지원하는 내용이 있으면 안 된다.
고정 탭은 모든 탭이 한 화면에 표시된다. 한 번에 네 개 이상의 탭은 사용하지 않고 각 탭의 너비는 화면 너비를 탭 수로 나누어 결정하며, 더 많은 탭을 표시하기 위해 스크롤 하지 않는다. 고정 탭은 텍스트 레이블을 사용하거나 아이콘을 사용해 내용을 전달할 수 있다. 
탭이 네 개 이상이라면 스크롤 탭을 사용한다. 스크롤 가능한 탭에는 긴 텍스트 레이블과 많은 수의 탭을 배치할 수 있다. 스크롤 탭은 터치 인터페이스에서의 브라우징에 적합하다. 
탭은 비활성화된 상태에서 마우스 오버, 포커스, 클릭 상태 등을 상속할 수 있으며, 활성 상태에서도 마찬가지이다. 기본적으로 탭은 하나의 활성 상태로, 활성화된 상태를 상속한다.

2. 버튼 Button
버튼을 사용하면 한 번의 탭으로 작업을 선택하거나 수행할 수 있다. 버튼은 UI 전체에 걸쳐 대화상자, 모달 창, 카드, 도구 모음 등과 같은 위치에 배치할 수 있다. 버튼의 종류에는 중요도가 낮은 동작에 사용하는 텍스트 버튼, 중간 강조를 위해 사용하는 윤곽선 버튼, 높은 강조를 위해 그림자나 색을 사용한 채우기 버튼, 토글 버튼 등이 있다. 버튼을 여러 개 사용하는 경우, 채우기 버튼 옆에 텍스트 버튼이나 윤곽선 버튼을 사용하면 채우기 버튼을 더 강조하는 효과가 있다. 
텍스트 버튼은 다양한 배경에 배치할 수 있으며, 버튼이 상호작용할 때 컨테이너가 나타난다. 접근성을 유지하기 위해 머티리얼 디자인에서 사용되는 컬러 오버레이는 불투명도를 적용해 사용한다. 이는 윤곽선 버튼이나 채우기 버튼에도 마찬가지로 사용된다. 

3. 플로팅 액션 버튼 Floating Action Button (FAB)
플로팅 액션 버튼은 화면의 내용 위에 표시되어 기본적인 동작이나 일반적인 동작을 수행한다. 일반적으로 중앙에 아이콘이 있는 원형 형태이며, 배지나 텍스트는 넣을 수 없고, 3개 미만 또는 6개 이상의 옵션은 사용할 수 없다. 일반, 소형, 확장의 세 가지 유형 중에서 화면의 기본 작업을 표시하기에 가장 적합한 유형을 사용한다. 확장 FAB의 너비는 고정될 수도 있고 유동적일 수도 있다.

2023.04.14 - [UXUI 디자인] - 안드로이드 가이드 라인 3

안드로이드 가이드 라인 3

2023.04.12 - [UXUI 디자인] - 안드로이드 가이드 라인 1

안드로이드 가이드 라인 1