그리드 및 키라인

아이콘 그리드는 그래픽 요소의 일관성 있고 유연한 위치 지정을 위한 명확한 규칙을 설정합니다. 키라인 모양은 그리드를 기반으로 합니다. 이러한 핵심 모양을 기준으로 사용하면 아이콘 전체에서 일관된 시각적 비율을 유지할 수 있습니다.

아이콘을 제작할 때 화면을 400%로 확대하여 보기 및 편집하면 작업을 한결 수월하게 할 수 있습니다. 또한 400%의 화면에서 작업을 하면, 원본에 대한 모든 변경 사항이 비례적으로 확대 또는 축소되어 100% 화면으로 돌려졌을 때에도 올바른 정렬과 선명도(픽셀 완성도:Pixel perfection)가 유지됩니다.

아이콘을 왜곡시키지 않으려면 X 및 Y 좌표를 소수가 아닌 정수로 아이콘을 배치하고, 아이콘의 크기 또한 정수로 맞추어줍니다.

아이콘 크기별 그리드

아이콘 영역은 실제 아이콘이 들어가는 라이브 영역과 아이콘 주위의 여유 공간을 두기 위한 패딩으로 구성되어 있습니다. 터치를 해야 하는 환경에서는 터치를 위한 아이콘의 최소 사이즈를 만족시키기 위해 패딩 영역이 필요한데, 패딩 영역을 포함한 아이콘의 최소 사이즈는 48px입니다.

18px 아이콘은 아이콘 영역 18px을 가지고, 아이콘 영역 안에서는 상, 하, 좌, 우 1px의 여백과 16x16 px의 라이브 영역으로 구성되어 있습니다. 아이콘 영역 바깥으로는 상, 하, 좌, 우 15px의 패딩 영역을 가집니다.

24px 아이콘은 아이콘 영역 24px을 가지고, 아이콘 영역 안에서는 상, 하, 좌, 우 2px의 여백과 20x20px의 라이브 영역으로 구성되어 있습니다. 아이콘 영역 바깥으로는 상, 하, 좌, 우 12px의 패딩 영역을 가집니다.

36px 아이콘은 아이콘 영역 36px을 가지고, 아이콘 영역 안에서는 상, 하, 좌, 우 3px의 여백과 30x30px의 라이브 영역으로 구성되어 있습니다. 아이콘 영역 바깥으로는 상, 하, 좌, 우 6px의 패딩 영역을 가집니다.

48px 아이콘은 아이콘 영역 48px을 가지고, 아이콘 영역 안에서는 상, 하, 좌, 우 4px의 여백과 40x40px의 라이브 영역으로 구성되어 있습니다. 48px 아이콘은 터치에 필요한 최소 사이즈를 충족시키기 때문에 아이콘 영역 바깥으로 별도의 패딩 영역을 필수로 가지지 않습니다.

아이콘 크기별 그리드 예시

아이콘 사이의 간격

터치 타깃 사이의 공간도 중요합니다. 터치 타깃 사이의 최소 간격을 유지하는 이유는 사용자가 다른 아이콘을 터치해서 다른 액션을 유발하는 것을 방지하기 위해서입니다. 특히, ‘저장’과 ‘취소’ 같은 아이콘이 같이 있을 때 매우 중요합니다. 이러한 경우에는 최소한 2mm의 여백이 있어야 합니다. 2mm를 픽셀로 환산하면 mdpi 기준 약 8px입니다.