머터리얼 디자인 테마 적용하기(Color, TypoGraph, Shape)

Implementing your theme

 

아래 기술을 사용하여 색상, 타이포그래피 및 모양을 사용자 지정하고 적용할 수 있습니다.

Iconography는 선택할 수 있는 5가지 고유한 세트와 함께 제공됩니다.

Color

Color System은

component, text, icon 및 surface에 적용할 수 있는 12가지 색상 범주를 지원합니다.

 

Theming with color

색상과 함께 머티리얼 테마를 사용하려면 먼저 UI에 적용할 적절한 색상을 선택

 

색상은 여러 가지 방법으로 선택할 수 있습니다.

색상 섹션에서 인라인 도구로 색상 생성
Material Palettes의 조화로운 색상 구성표에서 색상 선택

https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors

Material Design

 

Primary and secondary colors

Primary 및 Secondary 색상은 UI의 전략적 부분에는 드물게 적용됩니다. 대신에 일반적으로 제품 브랜드를 대표할 수 있는 능력으로 사용됨.

 

Primary 색상은 앱 바와 버튼과 같은 구성 요소 및 요소에 매핑됩니다.

Secondary 색상은 FABS 및 선택 컨트롤과 같은 구성 요소의 액센트로 가장 자주 사용됩니다.

Varient 색상을 사용하여 Primary 및 Secondary 색상에 대한 액세스 가능한 옵션을 보완하고 제공할 수도 있습니다.

 

Surface, background, and error colors

표면, 배경 및 오류 색상은 일반적으로 제품 브랜드를 나타내지 않습니다.

 

-  surface 색상은 카드, 시트 및 메뉴와 같은 구성 요소에 매핑됩니다.
-  background은 스크롤 가능한 콘텐츠 뒤에 있습니다.
-  error 색상은 textField/  구성 요소의 오류

 

“On” colors (대비/ 보색)

앱의 요소는 Primary 색상과 같은 색상 팔레트의 특정 범주에 있는 색상을 사용합니다. 

 

텍스트나 아이콘이 특정 화면 Component에 보여질때,  텍스트나 아이콘은 뒤에 있는 색상에 대해 명확하고 읽기 쉽게 나타나도록 특별히 설계된 색상을 사용해야 합니다.

 

이러한 색상 범주는 primary 색상, secondary 색상, surface 색상, background 색상 또는 error 색상을 사용하는 주요 표면의 "위에" 배치되는 요소에 색상을 지정한다는 사실을 참조하여 "On" 색상이라고 합니다.

 

원래 카테고리 이름(예: 기본 색상)을 사용하여 "on" 접두사를 사용하여 레이블이 지정됩니다.

"On" 색상은 주로 Text, Icon 및 Stroke에 적용됩니다. 때로는 Surface 에도 적용됩니다.

 

"On" 범주의 색상은 primary 색상, secondary 색상, surface 색상, background 색상 또는 error 색상을 사용하여,  색상이 지정된 영역 앞에 나타나는 텍스트 및 아이콘(때로는 표면)에 적용됩니다.

 

Typography

 Typography 시스템은 결합될 때 유형 척도를 형성하는 13개의 범주를 지원합니다.

 

이 활자 크기는 본문에서 버튼에 이르기까지 화면에 나타나는 다양한 텍스트 스타일과 크기에서 분명합니다.

유형은 UI 전체, 구성 요소 및 표면과 같은 위치에 나타납니다.

 

Typography 속성은 유형 패밀리, 글꼴, 대소문자, 크기 및 자간을 사용자 정의할 수 있는 값으로 제어됩니다.

 

Theming methods

타이포그래피를 선택하는 방법에는 여러 가지가 있습니다.

Customize and apply typography

타이포그래피를 선택하는 방법에는 여러 가지가 있습니다.

 - Typography 생성기를 사용하여 헤드라인 및 본문 텍스트의 스타일을 선택하고 자동으로 크기가 조정되고 가독성을 위해 최적화된 것을 확인하십시오. 그런 다음 플랫폼에 대한 코드를 복사합니다.

https://m2.material.io/design/typography/the-type-system.html#type-scale

 -  제품을 반영하는 서체를 Google 글꼴에서 선택하기

https://fonts.google.com/  

 

 

Headings

Headlines

헤드라인 1-6은 typescale에서 가장 큰 크기입니다.

짧지만 임팩트 있는 텍스트의 순간을 위해 사용된다. 숫자에도 사용됩니다.

 

 

Subtitles

헤드라인보다 작습니다.

일반적으로 짧은 텍스트 문자열에 사용되는 중간 강조 텍스트용으로 사용된다

 

 

Body and smaller text

body text 1-2

일반적으로 긴 형식의 쓰기에 사용됩니다.

작은 텍스트 크기에 최적화되어야 합니다.

Caption and overline text

가장 작은 글꼴 크기입니다.

이미지에 주석을 달거나 헤드라인에 대한 간략한 소개를 제공하기 위해 드물게 사용됩니다.

ButtonText

일반적으로 Text Button,  outlined buttons, contained buttons에서 사용된다. 

 

Shape

 

shape 시스템은 현재 브랜드와 앱에 맞게 구성 요소 모서리에 적용할 수 있는 두 가지 유형의 모양(둥근 모양 및 절단 모양)을 지원합니다.

 

- 둥근 모양에는 곡선 모서리
- 절단 모양에는 각진 모서리

 

shape는 구성 요소의 모서리에 적용하여 대칭 또는 비대칭 효과를 생성할 수 있습니다.

모서리는 크기와 모양 유형을 사용자 지정할 수 있습니다.

1. Rounded(0dp), 2. Rounded(4dp), 3. Rounded(16dp), 4. Rounded(24dp)  500%로 조정되었습니다. 

이미지 1-3의 모양 높이는 36dp입니다. 이미지 4의 모양 높이는 64dp입니다.

 

1. Cut(0dp), 2. Cut(2dp), 3. Cut(8dp), 3. Cut(12dp) 500%로 조정되었습니다.

 이미지 1-3의 모양 높이는 36dp입니다. 이미지 4의 모양 높이는 64dp입니다.

Theming with shape

Shape  커스텀 도구를 사용하여 소형, 중형 및 대형 구성 요소의 모양을 가지고 만들수  있습니다.

https://m2.material.io/design/shape/about-shape.html#shape-customization-tool 

Material Design

Shape categories and overrides

component는 크기에 따라 범주로 그룹화됩니다.

 

특정 component에 대한 변경이 아닌 범주(크기에 따라) 값에 대한 변경 사항은 해당 범주의 모든 구성 요소에 적용됩니다.
특정 component의 값에 대한 변경 사항은 해당 모양의 범주에서 상속된 값을 재정의하므로, 개별 component에서 범주의 값과 다른 모양을 사용할 수 있습니다.

 

Rounded shapes

 

카드, 메뉴, 스낵바, tooltips, dialog 및 버튼과 같은 구성 요소는 모두 4dp 둥근 모서리를 기준 element 테마의 일부로 사용합니다.

 

 

알약 모양의 칩 및 원형 FAB 과 같이 가장 둥근 구성 요소의 기준 radius 50%입니다.

 

chip

FAB

Square shapes

정사각형 모양의 구성 요소에는 정사각형 또는 90도 각도 모서리가 있는 전체 화면 BottomSheet 와 같이 기준 재료 테마에서 0dp 둥근 모서리가 있습니다.

Cut shapes

component 모서리는 항상 45도 각도인 직선 절단 모양일 수 있습니다.

모서리는 Shape의 윤곽선을 따라서,  0dp 둥근 모서리부터 측정된 길이는 다를 수 있습니다.

CardView 와 같은 더 큰 표면은 더 큰 절단을 가질 수 있는 반면 버튼은 더 작은 절단을 가질 수 있습니다.

브랜드, 구성 요소 크기 및 필요한 가독성 영역의 양을 고려하여 각 구성 요소에 가장 적합한 크기를 결정합니다.