Google Material Style Guide (고도)

스타일이란?

스타일은 UI에 고유한 분위기와 인상을 부여하는 시각적 요소입니다. 

색상, 고도, 아이콘, 운동, 형태, 타이포그래피 같은 것들.

• 색상: 스타일을 표현하고 의미를 전달하는 데 사용됩니다. 
• 고도: z축을 기준으로 두 표면 간의 상대적인 거리입니다. 모든 표면과 컴포넌트는 고유한 elevation 값을 가집니다.
• 아이콘: 일반적인 동작을 시각적으로 나타내는 데 사용됩니다. 
• 운동: UI를 더 직관적이고 표현력 있게 만드는 데 사용됩니다. Material 전환 애니메이션은 사용자가 앱을 탐색할 때 자연스럽게 흐름을 안내합니다.
• 형태: 컨테이너 모서리의 스타일을 정의하며, 각진 형태부터 완전히 둥근 형태까지 다양한 둥글기 옵션을 제공합니다.
• 타이포그래피: 텍스트를 읽기 쉽고 아름답게 만드는 데 사용됩니다.

---

2. 고도

Material은 6개의 고도 단계를 사용하며, 각 레벨마다 DP 값이 있습니다. 이 값들은 UI 표면에서 상대적인 거리로 명명됩니다: 0, +1, +2, +3, +4, +5. 원소의 휴식 상태는 0부터 +3까지일 수 있으며, +4와 +5는 호버 및 드래그와 같은 사용자 상호작용 상태에 할당됩니다.

 

휴식 단계	구성 요소	DP높이
5	(휴식 수준으로 지정되지 않음)	12dp
4	(휴식 수준으로 지정되지 않음)	8dp
3	Date pickers - 날짜 선택기 Dialogs (modal) - 다이얼로그 (모달) Extended FAB - 확장형 FAB FAB - 플로팅 액션 버튼 (FAB) FAB menu (close button) - FAB 메뉴 (닫기 버튼) Search - 검색 Time pickers - 시간 선택기	6dp
2	App bar (scrolled) - 앱 바 (스크롤 상태) Menu - 메뉴 Navigation bar - 내비게이션 바 Rich tooltip - 리치 툴팁 Toolbar - 툴바	3dp
1	Banner - 배너 Bottom sheet (modal) - 바텀 시트 (모달) Button (elevated) - 버튼 (elevated) Card (elevated) - 카드 (elevated) Chips (elevated) - 칩 (elevated) Navigation drawer (modal) - 내비게이션 드로어 (모달) Side sheet (modal) - 사이드 시트 (모달)	1dp
0	App bar (not scrolled) → 앱 바 (비스크롤 상태) Buttons (filled, tonal, outlined) - 버튼 (filled, tonal, outlined) Button groups - 버튼 그룹 Cards (filled, outlined) - 카드 (filled, outlined) Carousel - 캐러셀 Chips - 칩 Dialog (full-screen) - 다이얼로그 (전체 화면) Extended FAB (in navigation rail) - 확장형 FAB (내비게이션 레일 내) FAB (in navigation rail) - FAB (내비게이션 레일 내) FAB menu (list items) - FAB 메뉴 (리스트 항목) Icon buttons - 아이콘 버튼 List - 리스트 Navigation rail - 내비게이션 레일 Segmented button - 세그먼트 버튼 Side sheet (docked) - 사이드 시트 (도킹형) Slider - 슬라이더 Split button - 스플릿 버튼 Tabs - 탭	0dp

 

고도는 그림자나 표면 채우기와 톤 차이, 스크림 같은 시각적 단서를 사용해 표현할 수 있습니다.

1. 서로 다른 음조 값이 있는 두 겹치는 표면
2. 같은 톤 값을 가진 두 겹치는 표면이 그림자로 분리되어 있습니다
3. 동일한 톤 값을 가진 두 겹치는 표면이 스크림으로 분리되어 있습니다 **스크림은 스크림을 사용합니다. 색상 역할 불투명도는 32%

1. FAB의 높이는 차체 내용물과 구분하는 데 도움이 됩니다
2. 중요도를 알리기 위해 모달 아래에 스크림이 나타납니다
3. 내비게이션 바와 몸체 내용 간의 톤 차이는 별도의 표면을 나타냅니다

 

그림자

그림자는 다른 기법으로는 표현할 수 없는 방식으로 표면 사이의 고도 정도를 표현할 수 있습니다. 그림자의 크기와 부드러움 또는 확산의 양은 두 표면 사이의 거리 정도를 나타냅니다. 예를 들어, 그림자가 작고 날카로운 표면은 그 표면이 뒤의 표면과 가까워 있음을 나타냅니다. 더 크고 부드러운 그림자는 더 많은 거리를 표현합니다. 

 

그림자를 칠할 때는 적을수록 더 좋습니다. UI에 레벨이 적을수록 플레이어가 주의와 행동을 이끌 수 있는 힘이 커집니다.

 

(좌)더 작고 선명한 그림자는 표면이 뒤쪽 표면과 가까이 있음을 나타냅니다. (우)더 크고 부드러운 그림자는 표면과 그 뒤의 표면 사이의 거리를 더 크게 표현합니다

 

가시적 그림자를 사용할 때
보호 요소

배경이 무늬가 있거나 시각적으로 복잡할 때는 헤어라인 스타일이 충분한 보호를 제공하지 못할 수 있습니다. 이 경우 높이를 사용해 카드, 칩, 버튼 등의 요소를 구분하고 강조하세요.

상호작용 요소는 입면 상승으로 강조됩니다

 

포커스, 선택 또는 스와이프 같은 다른 상호작용 시 요소들이 일시적으로 해제될 수 있습니다. 더 높은 원소가 나타날 때 상승한 원소도 낮출 수 있습니다.

 

 

스크림

스크림은 넓은 층층 표면의 시각적 대비를 높여 특정 요소에 초점을 맞출 수 있습니다. 모달이나 확장된 내비게이션 메뉴 같은 요소 아래에 있는 스크림을 활용하세요. 스크림은 스크림을 사용합니다 색상 역할 불투명도는 32%입니다.

 

스크림은 내비게이션 레일과 같은 중요한 요소에 집중하는 데 도움을 줍니다

 

 

출처: 구글 Material Desgin