Iconography

아이콘은 명령 (action), 상태 (status), 특정 기능과 정보를 상징적으로 단순화하여 시각화한 그래픽 요소입니다. 사용자가 의미를 이해하는 데 시간이 걸리지 않도록, 명확하고 직관적인 메타포를 활용하여 디자인해야 합니다.

Icon grid

Padding

표준 아이콘은 24 x 24px 크기로 표시됩니다. 아이콘은 상하좌우 4px의 Padding을 제외한 공간에 배치되며, 모든 아이콘이 시각적으로 일관된 비율을 유지할 수 있도록 Keyline shape을 참고하여 제작해야 합니다.

Keyline shape

이 기본 그리드는 새로운 아이콘을 디자인할 때 통일된 시각적 모양을 보장하고, 모든 아이콘이 시각적으로 일관된 비율을 유지하도록 합니다. 아이콘의 어떤 부분도 Trim area 밖으로 확장되어서는 안 되며, 이는 디자인의 일관성과 가독성을 유지하는 데 중요한 요소입니다.

Stroke

아이콘의 크기, 위치 및 목적에 따라 아이콘의 디자인은 변경될 수 있습니다. 하지만, Stroke의 outline은 픽셀에 물리도록 제작하는 것이 권장됩니다. 또한, 선의 정렬 옵션은 Center로 설정하여 디자인의 균형과 일관성을 유지해야 합니다.

Usage

Don’t

선 끝을 뾰족하거나 각지게 표현하지 않습니다.

Do

선 끝(Endcaps)과 꺾임(Join)을 둥글게 설정하여 사용합니다.

Don't

다양한 선 굵기를 사용하지 않습니다.

Do

일관된 선 굵기를 사용합니다.