Material Design, “2018년 새롭게 발표한  Material Design의 구성 요소들을 알아보고 디자인가이드에 따라 디자인 제작 방법을 살펴보겠습니다.”

Material Design의 하단 App Bar 가이드 알아보기

1.용법

모바일 화면에서 하단 앱바에는 Navigation drawer와 주요 기능을 실행하는 아이콘들이 노출됩니다. 플로팅 액션 버튼을 포함하여 최대 4개의 액션 버튼 그리고 Navigation drawer를 배치할 수 있습니다. 이번 material design 은 하단 영역 앱바에 많은 변화가 있었습니다.

모바일 디바이스가 세로로 길어지면서 한손으로 손쉽게 작동하고 조작하기 위해 하단 앱바가 많이 중요해 진 것 같습니다.

“모바일 디바이스에서만 사용하고 화면에 하단 Navigation drawer와 함께 두 개에서 최대 다섯 개까지 액션이 필요한 경우에만 사용합니다”

“하단에 네비게이션 기능을 사용하지 않고 한 개 이하의 기능만 있을 경우 사용하면 안됩니다”

하단 앱 바를 사용하면 액션에 쉽게 접근할 수 있습니다. 플로팅 액션바 외에 기능이 하나밖에 없다면  사용하지 않습니다.

2.구성

Material Design 의 하단 앱바에는 현재 화면의 맥락에 사용할 기능 버튼들이 포함됩니다. 맨 왼쪽에는 Navigation drawer가 위치하고 다음에 플로팅 액션 버튼(있는경우)이 위치합니다. 오버플로우 메뉴가 있을 경우 다른 액션 버튼들 맨 끝에 위치합니다.

1.Container
2.Navigation drawer control
3.Floating action button (FAB)
4.Action icon
5.Overflow menu control

01.위치

하단 앱바는 플로팅 액션 버튼(FAB)의 존재 여부와 위치에 따라 3가지의 레이아웃이 있습니다. 레이아웃에 따라 바에 포함 될 수 있는 액션 수가 지정되어 있습니다.

중심에 위치한 FAB

Navigation drawer와 FAB가 있는 화면에서는 하단 앱 바를 사용합니다. 반대 쪽에는 최소 1개 최대 2개의 추가 액션 버튼을 사용할 수 있습니다.

끝에 위치한 FAB

FAB와 3~4개의 액션이 필요한 화면에서만 사용합니다.

FAB가 없을 때

FAB가 없는 경우 Navigation drawer와 반대편에 최대 네 개의 액션 버튼을 위치 시킬 수 있습니다.

02.플로팅 액션 버튼(FAB)

FAB는 두 가지 방법으로 앱 바에 위치합니다.

겹쳐진 상태

FAB는 앱바 보다 위에 있으며 앱바에 영향을 주지 않습니다.

삽입된 상태

FAB는 앱바와 동일한 위치에 놓이며, 하단 앱바의 모양은 FAB의 형태에 따라 변경이 가능합니다. 삽입 형태로 FAB의 시각적 중요성을 높이거나 원하는 형태로 만들어 강조할 수 있습니다.

FAB는 앱바 외부에 두면 안됩니다. 접근을 더 어렵게 만듭니다.

3.움직임

01.레이아웃

Material Design은 하나의 앱에서 화면마다 성격이나 의도하는 바가 다를 때 앱바의 레이아웃과 동작을 각 화면에 맞게 변경할 수 있습니다. 화면 내용에 적합하게 액션 버튼들을 노출 할 수 있습니다.

중심에 FAB가 위치한 화면에서 메세지를 볼때는 공간을 위해서 끝에 FAB가 위치한 레이아웃으로 변경될 수 있습니다.

02.스크롤

스크롤하면 하단 앱 표시 줄이 나타나거나 사라질 수 있습니다. 아래로 스크롤하면 앱바가 숨겨집니다. FAB가 있을 경우 그 자리에 그대로 위치합니다.

위로 스크롤하면 앱바가 다시 나타납니다. 아래 그림은 FAB가 화면에서 분리될 때 앱바는 기본 모양으로 변하며 사라지고 FAB가 다시 붙으면 FAB의 모양을 반영하여 변경됩니다.

FAB버튼은 하단 앱바가 숨겨지더라도 화면에 노출될 수 있습니다.

03.높이

하단 앱바의 높이는 8dp입니다. FAB버튼은 앱바 위에 보일 수 있도록 4dp의 거리를 둡니다.

1.Content (0dp)
2.Snackbar (6dp)
3.Bottom app bar (8dp)
4.Floating action button (12dp resting)
5.Bottom navigation drawer (16dp)

하단 앱바의 Navigation Drawer 또는 오버플로우 같은 메뉴들은 앱바보다 더 높은 위치에서 화면이 오픈 되어야합니다.

탐색 창은 하단 앱바에서 열립니다. 탐색 창은 하단 앱바 보다 앞에서 열리고, 꼭대기까지 올라가면 탐색 창을 닫을 수 있는 상단 앱바를 보여줍니다.

04.배치

네비게이션

하단 앱바에 Navigation bar를 두어 탐색창을 열 수 있지만, 이전 버튼이나 닫기 버튼 같은 네비게이션 동작 자체를 하는 아이콘은 표시 할 수 없습니다. 네비게이션 버튼은 상단 앱바 또는 다른 구성요소에 배치해야 합니다.

상단 앱바와 페어링하기

하단 앱바와 상단 앱바를 동시에 사용하면 상단 앱바에 네비게이션 및 추가 기능 버튼들을 제공할 수 있습니다. 앱 전체에 걸쳐, 기능들은 두 앱바를 구분하고 나누어서 적용해야합니다. 다음 항목들은 특정 위치에 놓았을때 이점을 얻습니다.

-하단앱바에 단일 기능의 버튼을 놓았을때 접근성이 좋아집니다.
-오버 플로우 메뉴를 후속 기능들을 위해 배치 합니다.
-검색과 같은 기능들은 일관된 위치에 둡니다.
-상단 앱바에는 삭제 기능과 같은 제거 동작들을 위치 시킵니다.

오버 플로우 메뉴는 마지막에 배치합니다. 하단 앱바는 Navigation drawer와 검색 같은 일관된 접근을 위한 메뉴들로 사용하고 상단 앱바는 화면의 문맥에 맞는 기능 버튼들을 둡니다.

Snack Bar

하단 앱바가 가려지는 것을 피하기 위해 스낵바와 토스트는 하단 앱바 위에 둡니다.

05.하단 앱 바를 덮는 요소들

하단 앱바는 키보드 및 기타 일시적인 표면들로 덮여질 수 있습니다. 앱바가 자주 방해받는다면 다른 구성요소들로 고민이 필요합니다.

키보드가 일시적으로 하단 앱바를 가릴수 있지만 키보드 위에 하단 앱바를 위치시키면 안됩니다.

4.스펙

01.모바일 Portrait 모드

하단 앱바는 모바일 전용 구성요소 입니다. 태블릿이나 데스크톱에는 적용할 수 없습니다. 최소1개, 최대 2개의 기능들을 양쪽 가장자리에 정렬합니다.

FAB Center

FAB Center cut

FAB End

최소2개, 최대 4개의 기능들을 FAB버튼과 반대되는 영역에 정렬합니다.

No FAB

최소2개, 최대 4개의 기능들을 Navigation drawer와 반대되는 영역에 정렬합니다.

02.모바일 Landscape 모드

하단 앱바는 모바일 전용 구성요소 입니다. 태블릿이나 데스크톱에는 적용할 수 없습니다. 최소1개, 최대 2개의 기능들을 양쪽 가장자리에 정렬합니다.