Google Material Style Guide (아이콘)

스타일이란?

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

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

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

---

3. 아이콘

아이콘은 모든 인터페이스의 필수 요소로, 작은 폼팩터에 유익한 메시지를 담아냅니다. 단순하고 현대적이며 친근하고 때로는 독특하게 디자인되었습니다. 일관성과 가독성을 보장하기 위해 제한된 크기 때문에 각 아이콘은 가이드라인을 엄격히 준수하면서도 본질적인 특징을 표현해야 합니다.

①개요 ②둥근 형태 ③날카롭다

 

설계 원칙

(좌)아이콘 단순화하여 더 명확하고 가독성 있게 하세요 (우)너무 문자 그대로 받아들이지 마세요. 복잡한 아이콘을 피하세요.

(좌)아이콘을 그래픽적이고 굵게 만드세요 (우)섬세하거나 느슨한 유기물 형태는 사용하지 마세요

(좌)한 아이콘 세트 전체에서 일관된 시각적 스타일을 사용하고 유지하세요 (우)한 아이콘 세트에서 스타일을 섞지 마세요

 

아이콘 크기 및 레이아웃

표준(기준)아이콘 크기 24dp

표준 아이콘은 24dp x 24dp 형태로 표시됩니다. 픽셀 단위의 정확도를 위해 100% 축소로 볼 수 있는 아이콘을 만드세요.

 

추가 광학 아이콘 크기 20dp, 40dp, 48dp

20dp는 주로 데스크톱, 밀도 높은 레이아웃, 소규모 시각 화면에 적합하고, 40dp와 48dp는 디스플레이 또는 헤드라인 유형에 최적화되어 있으며, 더 큰 화면 크기도 지원합니다.

 

표준(기본) 아이콘 배치

아이콘 콘텐츠는 라이브 영역 내에 머물러야 하는데, 라이브 영역은 이미지에서 숨겨질 가능성이 낮은 영역(예: 스크롤 시 사이드바가 나타나는 영역)입니다. 추가적인 시각적 무게가 필요할 경우, 콘텐츠가 라이브 영역과 트림 영역(그래픽의 전체 크기) 사이의 패딩까지 확장될 수 있습니다. 아이콘의 어떤 부분도 트림 영역 밖으로 확장되어서는 안 됩니다.

(좌)라이브 에어리어: 아이콘 콘텐츠는 20dp x 20dp 라이브 영역으로 제한되며, 둘레에는 2dp의 패딩이 있습니다 (우)패딩: 라이브 구역을 둘러싼 2dp 패딩이 있습니다

 

격자 및 키라인 형태

아이콘 그리드와 키라인

아이콘 격자는 그래픽 요소의 일관되면서도 유연한 위치 배치에 대한 명확한 규칙을 설정합니다. 키라인 형태는 격자의 기초입니다. 이 코어 도형을 가이드라인으로 사용하면 시스템 아이콘 전반에 걸쳐 시각적 비율을 일관되게 유지할 수 있습니다.

gm_icon_template.ai

0.22MB

 

 

아이콘 메트릭

1. Corner
2. Stroke terminal
3. Counter stroke
4. Stroke
5. Counter area
6. Bounding area

코너

모서리 반경은 기본적으로 2dp입니다. 윤곽이 있는 스타일 기호의 내부 모서리는 둥글지 않고 정사각형입니다. 2dp 이하 크기의 도형에서는 획 모서리를 둥글게 만들어서는 안 됩니다. 둥근 스타일 심볼의 경우, 외부와 내부 모서리 반경이 모두 둥근 형태이고, 날카로운 스타일 기호의 경우 외관과 내부 모서리 반경이 2dp에서 0dp로 줄어듭니다.

 

(좌)2dp 모서리 반경을 가진 외부 모서리 (우)내부 모서리는 둥글게 다듬어져서는 안 됩니다

 

무게와 스트로크

아이콘에 권장되는 획 굵기는 2dp 또는 일반 굵기(400)로, 곡선, 각도, 내부 및 외부 획을 모두 포함합니다. 재질 기호는 얇은(100)부터 굵기(700)까지 다양한 무게 범위를 제공할 수 있습니다.

 

복잡한 아이콘 모양

아이콘이 복잡한 세부 사항을 요구한다면, 가독성을 높이기 위해 미묘한 조정을 할 수 있습니다. 이러한 조정을 광학 보정이라고 합니다. 모든 광학 보정은 다른 모든 아이콘의 기반이 되는 기하학적 형태를 사용해야 하며, 그 도형들을 왜곡하거나 왜곡하지 않아야 합니다.

 

(좌)종이클립 아이콘은 가능한 2dp 획 면적의 1.5dp를 사용해 24dp x 24dp 아이콘 공간 내에 여러 곡선을 맞추고 있습니다 (우)라면 볼 아이콘은 24 x 24dp 아이콘 공간 내에서 1.5dp 스트로크와 2dp 스트로크를 함께 사용합니다

 

출처: 구글 Material Desgin