Google Material Style Guide (모션, 형태, 타이포그래피)

스타일이란?

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

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

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

---

4. 모션(운동)

Motion – Material Design 3

 

5. 형태

 

6. 타이포그래피

1. 줄 높이: 한 줄의 텍스트 베이스라인에서 다음 라인의 텍스트 베이스라인까지의 거리를 측정합니다
2. 중심 맞추기: 텍스트 기준선까지의 거리를 측정하는 대신 중심 정렬을 참조로 지정합니다
3. 간격 기준점에서 텍스트 기준선까지의 거리를 사용하세요

가독성 보장

제목, 제목, 디스플레이 스타일을 사용해 더 큰 글자 가독성을 위해 글자 크기의 1.2배 줄 높이 비율을 권장합니다

본문과 라벨 같은 스타일을 사용하는 작은 본문 사본의 경우, 글자 크기의 약 1.5배 정도의 줄 높이 비율을 권장합니다. 줄 높이가 너무 좁으면 텍스트의 흐름이 방해됩니다. 너무 느슨하면 선들이 일관성이 없게 느껴집니다.

 

표 형식 숫자

시계처럼 자주 바뀔 수 있는 테이블이나 장소에서는 비례 숫자 대신 표 형식의 숫자(단공간 숫자라고도 함)를 사용하세요.

스캐십을 더 잘 하기 위해 광학적으로 정렬되도록 단공간 표 숫자를 사용하세요.

(좌)1번 비례 수치 2번 등공간 표 숫자시계 (우)UI처럼 값이 변할 때 레이아웃 이동을 방지하기 위해 표 숫자를 사용하세요

 

접근성

색상 및 대비

제품의 텍스트와 배경 사이에 적절한 색상 대비를 선택하여 시각적 접근성을 지원하세요. 대비는 두 색상의 밝거나 어두운 차이로 인식되며, 대비 비율로 수치됩니다.

라벨 스타일은 버튼 같은 작은 크기에서 빠르게 읽을 수 있어야 합니다

명암비

색상 대비는 사용자가 다양한 텍스트 요소와 비텍스트 요소를 구분하는 데 중요합니다. 대비가 높을수록 이미지가 더 잘 보이지만, 대비가 낮은 이미지는 매우 맑은 날이나 밤과 같은 밝거나 어두운 환경에서 일부 사용자에게 구분이 어려울 수 있습니다.

 

명암비는 한 색상과 다른 색상의 차이를 나타내며, 일반적으로 1:1 또는 21:1로 표기됩니다. 두 숫자 간의 차이가 클수록 색상 간 상대 휘도 차이가 커집니다.

• 큰 글씨(굵은 글씨 14포인트/일반 이상 18포인트) 및 그래픽: 배경에서 최소 3:1
• 작은 글: 배경에서 최소 4.5:1 비율

출처: 구글 Material Desgin