Google Material Design

Seongho·2021년 10월 30일

앱 개발

목록 보기

2/4

Surfaces

Properties

Material은 x, y, depth를 가지며, depth는 무조건 1dp여야 한다.
material을 z방향으로 띄우지 않고 shadow를 보여주면 안된다.
material은 무한한 resolution을 가진다. ??
content는 material 내에서 보여줄 수 있고, material을 두껍게 만든다거나 하지 않는다.
- material에 뭔 내용을 추가한다고 해서 thick layer가 쌓인다거나 하면 안된다고 함
content behavior는 material 표면 크기의 변화에 종속적일수도, 독립적일수도 있다. (화면 크기 변하면 따라 변하게 해도 되고, 아니어도 됨)
material은 solid로 생각하자. 유저의 입력이나 상호작용이 material사이를 뚫고 지나간다거나 할 수 없다.
material이 공간상의 같은 포인트를 점유하고 있으면 안 된다. x, y 공간이 겹치면 한 material에 높이를 주는방법(z가 겹치지 않게)으로 분리해야 한다. => 띄워놓은 material의 그림자가 생김
material이 gas, liquid처럼 동작하는 등의 모션은 하지말자.
material은 shape를 변화시켜도 된다.
material의 투명도를 전체, 혹은 일부 조절할 수 있다.
material은 접지 말자. depth를 넘어서는 짓은 하지 말자.
multiple material이 하나로 합쳐질 수 있다.
material은 나눠졌다가 합쳐질 수 있다.
material은 즉시 생성되거나 사라질 수 있다.
material은 x, y, z 어떤 축이든 따라 움직일 수 있다.
material 표면의 움직임을 조정할 수 있다?
사용자와의 interaction으로 z-axis축 모션이 실행될 수 있다. (누르면 그림자 생기고...)

Attributes

기본적인 Materail Surface는 불투명한 화이트, 1dp thickness, 그림자가 있음. 모든 UI 요소들은 이 surface에서 일어나는 변경으로 만들어진다.

Behavior

Rigid surfaces - 모든 상호작용 과정에서 사이즈가 동일
- 지도가 담긴 틀은 Rigid surface 로 고정인데, 그 content인 지도는 상하좌우 이동 + 스크롤이 가능할 수 있음. map 앱들 처럼
- 하나의 surface에 여러 pannable surfaces가 있을 수 있다.
Stretchable surfaces - 늘어들거나 줄어들 수 있다. limit 크기가 되면 rigid surface처럼 행동한다.
- card는 늘려서 그 안에 별도로 내용을 스크롤 가능하게 적을 수 있다.
- stretch는 여러 방향으로 일어날 수 있다.
surface는 고정된 채로 놔둘 수도(상단의 바), 컨텐츠를 보여주기 위해 스크롤 하는 등으로 움직일 수도 있다.
surface는 움직일 수 있다. ex) 작성한 쪽지의 위치를 바꾼다던지..
surface는 서로 상관 않고 움직일 수 있다.
혹은 다른 surface의 움직임에 영향을 줄 수 있다.
surface에 투명도를 줄 수 있다.
- 투명, 반투명, 불투명 가능
- 투명, 반투명 상태에서는 경계가 모호하므로 추가적인 조치를 하든지..
- 권장하지는 않는 듯?
Scrim 이라고 해서, 여러 surfaces가 한 화면에 있을 때 어떤 것에 주목해야 할 지 보여주기 위해 각 요소의 밝기를 조절하는 방법이 있음

Elevation

두 surface 사이의 z축 거리

Measuring elevation

surface가 만약 어떤 surface 위에 존재하면, 그 surface에서 얼마나 떨어져 있느냐에 따라 그림자의 정도가 달라진다.
surface 색을 달리하거나, 투명도를 주는 등으로 elevation(혹은 분리되어 있음을)을 표현할 수 있지만 권장하지 않는다.
Resting elevation이라고 해서, 기본적으로 각 요소에 아무것도 하지 않을 때 정해진 높이가 있다.

유저 입력이나 시스템 이벤트에 의해 컴포넌트들은 elevation을 변경할 수 있다.

예를 들어 버튼을 클릭하면 버튼이 2dp 위치에서 8dp 위치로 이동하며 그림자 범위가 넓어질 수 있다.
elevation 변화에 의해 컴포넌트간 충돌이 일어날 수 있다. 카드 위에 놔뒀던 버튼이 사라진다던지.. 이를 방지하기 위해 elevation based interface의 사용을 최소화한다. (버튼을 다른 컴포넌트와 겹치지 않는 위치에 두는 등)

elevation 묘사

elevation을 잘 묘사하려면 다음이 잘 표시되어야 한다.

surface 가장자리가 주변과 대비되어야 함
- 색깔 대비, 그림자, 불투명도...
정지 상태이거나 이동중일 때 다른 surface와의 겹침
- shadow로 경계선, 겹친다는 것, 고도까지 모두 표현해줄 수 있다.
- 색깔로 구분할 수 있다.
- 반투명하게 하여 구분할 수 있다.
다른 surface와의 거리(z축)
- Scrimmed background로 표현할 수 있다. 예를 들어, 어떤 확인 문구가 뜨면 문구가 아닌 부분은 어둡게 처리하는 등..
- 그림자로 표현할 수 있다.
- 별 의미 없이 그림자를 사용하지 말자.

Motion으로 elevation을 묘사할 수도 있다. 다음 다섯 가지 방법으로 표현 가능!

Changes in shadows - 그림자의 변화로 elevation 표현
Displaying overlap - 다른 surface 위에 겹치는 애니메이션을 보여주기
pushing(밀어내기) - 다른 요소와 같은 위치에 있음을 보여줄 때, 현재 요소를 선택하면 나머지는 아래로 밀어내고 자세한 설명이 나오는 형식
Scaling - 선택하면 해당 요소의 크기를 키워서 elevation을 표현할 수도 있음
Parallax - 두 surface의 이동 속도에 차이를 두면 다른 elevation에 있음을 표현할 수 있다. 그냥 예시를 보자.

https://material.io/design/environment/elevation.html#depicting-elevation

++ 모션으로 어쨋든 elevation 표현 가능

Elevation hierarchy

어떤 요소가 앞부분에, 어떤 요소가 뒷부분에 위치하는가?

앞부분에 있는 surfaces는 주로

더 중요한 내용을 가진 것
대화상자처럼 주의를 끄는 것
뒷 부분에 있는 surface를 control하는 것

같은 위치에 있는 요소라면 동일한 계급(중요도?)을 가진다고 할 수 있다.

보통 사용하는 기본적인 elevation은 아래와 같다.

Table of default elevation values

Component	Default elevation values (dp)
Dialog	24
Modal bottom sheet Modal side sheet	16
Navigation drawer	16
Floating action button (FAB - pressed)	12
Standard bottom sheet Standard side sheet	8
Bottom navigation bar	8
Bottom app bar	8
Menus and sub menus	8
Card (when picked up)	8
Contained button (pressed state)	8
Floating action button (FAB - resting elevation) Snackbar	6
Top app bar (scrolled state)	4
Top app bar (resting elevation)	0 or 4
Refresh indicator Search bar (scrolled state)	3
Contained button (resting elevation)	2
Search bar (resting elevation)	1
Card (resting elevation)	1
Switch	1
Text button	0
Standard side sheet	0

Light and Shadows

key light - 물체를 앞 쪽에서 비춤 (정면에서 비춤)

ambient light - 물체 주변에서 비춤

key light와 ambient light 모두 비춰진다고 생각하고 만들어진 combined shadow를 주로 사용하자.

dp에 따라 그림자는 다음과 같이 차이가 난다.

어떤 움직이는 모션이 있을 때, 그림자를 명확하게 줘서 어떤 컴포넌트 위에 어떤 컴포넌트가 이동하고 있는지 표현해주는게 좋다.

Layout

large screen layout은 세 가지 region으로 나뉜다.

App bars
Navigation
Body

이 중 body는 세 가지 파라미터를 스케일링을 위해 사용한다.

수직, 수평 dimensions
컬럼의 개수
마진

마진은 가장 작은 breakpoint에서 16dp이고(핸드폰), body 부분은 screen의 너비가 커질수록 그에 맞게 늘어난다. 첫 번째 breakpoint인 600dp에 도달하면 마진이 32dp(태블릿)로 커진다.

... 이런 식이고 그냥 표를 보는게 나을듯

Screen size	Margin	Body	Layout columns
Extra-small (phone)
0-599dp	16dp	Fluid	4
Small (tablet)
600-904	32dp	Fluid	8
905-1239	Fluid	840dp	12
Medium (laptop)
1240-1439	200dp	Fluid	12
Large (desktop)
1440+	Fluid	1040	12

navigation은 데스크탑이면 72dp로 감춰져 있다가 펼치면 256dp로 늘어나고, 우측 마진은 32dp

만약 핸드폰이면, https://material.io/components/navigation-drawer#modal-drawer

위 링크에서처럼 Modal drawer를 적용할 수 있을 것. 화면을 대부분 가리며, 뒷부분은 scrim 처리되어 사용할 수 없는 상태가 됨.

반응형 레이아웃 그리드

columns, gutters and margins

column

360dp - 4개의 컬럼 (핸드폰)

600dp - 8개의 컬럼 (태블릿)

...

이런 식으로 적절한 컬럼 개수가 있다.

gutter

gutter는 column을 구분하는 사이사이의 마진으로 보면 될 듯. 볼링장 레인 따라 나있는 것 처럼..

브레이크포인트에 도달할 때마다 달라지면 된다. 예를 들어 360dp ~ 600dp 에서는 16dp, 600dp 이상에서는 24dp, ...

margin

마진은 그냥 가장 바깥쪽 컬럼의 좌측, 우측에 나 있는 여백으로 생각하면 된다. 컨텐츠가 화면에 꽉 차게 나오는게 아니라 조금마진을 두고 나오는 것

Grid customization

gutter는 상황에 따라 마음대로 변경할 수 있으나, 너무 컨텐츠의 간격이 크지 않도록 하자.

Breakpoints

Screen size	Margin	Body	Layout columns
Extra-small (phone)
0-599dp	16dp	Scaling	4
Small (tablet)
600-904	32dp	Scaling	8
905-1239	Scaling	840dp	12
Medium (laptop)
1240-1439	200dp	Scaling	12
Large (desktop)
1440+	Scaling	1040	12

navigation은 앱의 화면 사이를 이동하는 행위를 말하며, Lateral(횡방향), Forward(전방), Reverse(역방향) 이동 등이 있다.

동일한 계층 수준에서 화면 간의 이동을 할 수 있음. 앱의 기본 navigation 요소는 최상위 수준에 있는 모든 대상에 대한 액세스를 제공해야 한다.

제공 방법에는 navigation drawer, Bottom navigation bar, Tabs 가 있으며, 각각 다음의 환경에 적절하다.

Component	Use for	# destinations	Devices
Navigation drawer	Top-level destinations	5+	Mobile, Tablet, Desktop
Bottom navigation bar	Top-level destinations	3-5	Mobile
Tabs	Any level of hierarchy	2+	Mobile, Tablet, Desktop