내가 만든 아이콘이 어색한 이유
구글이 좋은 아이콘을 만드는 원칙
좋은 아이콘과 그렇지 않은 아이콘을 알아본 후, 다음 글에서는 실제 적용 방법을 알아보겠습니다.좋은 아이콘을 만드는 방법
아이콘은 어떤 인터페이스에서든 필수적인 요소로, 작은 형태 안에 많은 정보를 담습니다. 아이콘은 단순하고 현대적이며 친근하고, 때로는 약간의 개성을 지니도록 설계됩니다.
그러나 크기가 제한되어 있기 때문에, 일관성과 가독성을 유지하기 위해 각 아이콘은 반드시 가이드라인을 엄격히 준수하면서도 필요한 특징을 명확히 표현해야 합니다. 본 글에서는 구글이 아이콘을 만드는 원칙과 그 예시에 대해서 알아보도록 하겠습니다.
아이콘 디자인 원칙
아이콘은 단순해야 합니다.정면에서 본 보트 아이콘의 예시입니다. 아이콘은 단순한 형태로 표현하여 명확성과 가독성을 높입니다. 돛, 돛대, 깃발 등 세부 요소가 모두 포함된 복잡한 보트 이미지는 피해야 합니다. 지나치게 사실적인 표현은 아이콘의 인식 속도를 떨어뜨리고 시각적 일관성을 해칠 수 있습니다.
✅ 아이콘을 단순하게 만들어 더 높은 명확성과 가독성을 확보합니다.
❌ 지나치게 사실적으로 표현하지 않습니다. 복잡한 형태의 아이콘은 피합니다.
기하학적인 형태를 사용합니다.기하학적이고 일관된 형태를 사용해 아이콘을 그래픽적이고 대담한 인상으로 만듭니다. 이는 단순한 구조 안에서도 명확한 형태감을 유지하게 하며, 작은 크기에서도 식별력을 높입니다. 반대로, 섬세하거나 느슨한 유기적 형태는 피해야 합니다. 이런 형태는 선의 일관성을 해치고, 시스템 전반의 시각적 통일성을 약화시킬 수 있습니다.
✅ 기하학적이며 일관된 형태를 사용해 그래픽적이고 대담한 인상을 줍니다.
❌ 섬세하거나 불규칙한 유기적 형태를 사용하지 않습니다.
일관된 스타일을 유지합니다.네 개의 아이콘이 동일한 스타일로 구성된 예시입니다. 하나의 아이콘 세트 안에서는 시각적 스타일을 일관되게 유지해야 합니다. 이는 브랜드 인식과 시스템의 통합감을 높이는 핵심 요소입니다. 반대로, 서로 다른 스타일을 섞으면 일관성이 무너지고 사용자가 각 아이콘을 동일한 체계로 인식하기 어렵게 됩니다. 하나의 세트에서는 형태, 선 두께, 비율, 모서리 처리 등 모든 요소가 동일한 기준 아래 유지되어야 합니다.
✅ 하나의 아이콘 세트 안에서는 일관된 시각적 스타일을 유지합니다.
❌ 서로 다른 스타일을 섞어 사용하지 않습니다.
아이콘 크기 및 레이아웃
100% 크기의 24dp 그리드(좌)와 1000% 크기의 24dp 그리드(우)표준(기준) 아이콘 크기
표준 아이콘은 24dp × 24dp 크기로 표시됩니다. 픽셀 단위의 정확도를 위해 100% 배율로 디자인해야 합니다.
20dp, 24dp, 40dp, 48dp의 아이콘 크기추가 아이콘 크기
아이콘은 20dp, 40dp, 48dp 크기도 지원합니다. 20dp는 데스크톱 환경이나 밀집된 레이아웃, 작은 규모의 시각 요소에 적합하며, 40dp와 48dp는 디스플레이용이나 큰 화면, 제목용에 최적화되어 있습니다.
표준 아이콘 레이아웃
아이콘의 콘텐츠는 라이브 영역(live area) 안에 있어야 합니다. 이 영역은 스크롤 시 숨겨지지 않는 안전한 시각적 범위를 의미합니다.
추가적인 시각적 강조가 필요할 경우, 콘텐츠를 라이브 영역과 트림 영역(trim area) 사이의 패딩 범위까지 확장할 수 있습니다. 단, 아이콘이 트림 영역 바깥으로 벗어나서는 안 됩니다.
라이브 영역(좌)과 패딩(우)라이브 영역(Live area)
아이콘 콘텐츠는 20dp × 20dp의 라이브 영역 안에 배치되어야 하며, 가장자리에는 2dp의 패딩이 있습니다.
패딩(Padding)
라이브 영역을 둘러싸는 2dp의 여백으로, 아이콘이 주변 요소와 시각적으로 분리되고 균형을 이루도록 합니다.
시각적 강조가 필요할 경우 패딩 영역까지 확장할 수 있으나, 트림 영역을 넘어서는 안됩니다.왼쪽부터 차례대로 라이브 영역, 라이브 영역과 트림 영역, 트림 영역을 넘어 제작된 아이콘의 예시입니다.
✅ 아이콘 콘텐츠는 20dp × 20dp 라이브 영역 내에 있어야 하며, 주변에는 2dp의 패딩이 유지되어야 합니다.
⚠️ 시각적 무게가 더 필요할 경우, 콘텐츠를 패딩 영역까지 확장할 수 있습니다.
❌ 아이콘의 어떤 부분도 트림 영역 밖으로 나가서는 안 됩니다
.
그리드와 키라인(Keyline) 형태
아이콘 그리드와 키라인
아이콘 그리드는 시각적 요소를 명확하고 유연하게 배치하기 위한 규칙을 제공합니다. 키라인은 그리드의 기본 형태로, 이 기본 도형들을 기준 삼아 아이콘을 디자인하면 일관된 비율을 유지할 수 있습니다.
그리드(좌)와 1000% 크기의 24dp 그리드(우)그리드
24dp × 24dp 아이콘 그리드는 기본 키라인 형태(정사각형, 원, 세로 직사각형, 가로 직사각형)로 구성되어 있습니다. 이러한 기본 도형들은 아이콘 디자인의 비율과 정렬을 유지하기 위한 기준 역할을 합니다.
이 그리드는 1000% 확대된 상태에서도 명확한 구조를 유지하도록 설계되어 있으며, 모든 아이콘이 동일한 시각적 리듬 안에서 정렬되도록 돕습니다.
정사각형 키라인(Square keyline)
24dp × 24dp 그리드에서 정사각형 키라인이 강조된 형태입니다. 정사각형의 높이와 너비는 18dp로 설정되어 있으며, 이 비율은 아이콘의 기본적인 균형감을 제공합니다.
차트 추가(Add chart) 아이콘은 이 정사각형 키라인을 기준으로 그려져, 일관된 비율과 시각적 안정성을 유지합니다.
원형 키라인이 강조된 형태의 지구 아이콘원형 키라인(Circle keyline)
24dp × 24dp 그리드에서 원형 키라인이 강조된 형태입니다. 원의 지름은 20dp로 설정되어 있으며, 이 비율은 부드럽고 균형 잡힌 형태의 아이콘을 만드는 데 사용됩니다.
지구(Globe) 아이콘은 이 원형 키라인을 기준으로 제작되어, 다른 아이콘과의 시각적 일관성과 조화를 유지합니다.
세로 직사각형 키라인이 강조된 형태의 문서 아이콘세로 직사각형 키라인(Vertical rectangle keyline)
24dp × 24dp 그리드에서 세로 직사각형 키라인이 강조된 형태입니다. 세로 직사각형의 높이는 20dp, 너비는 16dp로 설정되어 있으며, 세로 비율이 강조된 아이콘 디자인에 사용됩니다.
문서(Paper) 아이콘은 이 세로 직사각형 키라인을 기준으로 제작되어, 명확한 비율과 균형을 유지합니다.
거로 직사각형 키라인이 강조된 형태의 메일 아이콘가로 직사각형 키라인(Horizontal rectangle keyline)
24dp × 24dp 그리드에서 가로 직사각형 키라인이 강조된 형태입니다. 가로 직사각형의 높이는 16dp, 너비는 20dp로 설정되어 있으며, 가로 비율이 강조된 아이콘 디자인에 사용됩니다.
메일(Mail) 아이콘은 이 가로 직사각형 키라인을 기준으로 제작되어, 균형 잡힌 형태와 시각적 일관성을 유지합니다.
소수 좌표에 아이콘이 정렬될 경우, 명확하게 보이지 않을 수 있으므로 지양합니다.아이콘 그리드에 폴더 아이콘이 그리드에 맞춰 정렬된 모습입니다. X와 Y 좌표가 정수 단위로 표시되어 있으며, 이는 아이콘이 픽셀 단위로 정확히 맞춰져 있다는 것을 의미합니다.
✅ 아이콘은 그리드 위의 정수 좌표(On Pixel)에 정확히 정렬해야 합니다.
❌ 소수 좌표(비정렬 상태)에 배치하지 않습니다.
아이콘 구조
구성 요소(Anatomy)
아이콘은 모서리(corner), 선 끝단(stroke terminal), 내부선(counter stroke), 스트로크(stroke), 내부 공간(counter area), 외곽 영역(bounding area) 등으로 구성됩니다.
1️⃣ 모서리(corner)
2️⃣ 선 끝단(stroke terminal)
3️⃣ 내부선(counter stroke)
4️⃣ 스트로크(stroke)
5️⃣ 내부 공간(counter area)
6️⃣ 외곽 영역(bounding area)
모서리(Corners)
기본 모서리 반경은 2dp입니다. Outlined 스타일의 심볼에서는 내부 모서리가 둥글지 않고 각지게 처리됩니다. 또한, 너비가 2dp 이하인 형태에서는 스트로크 모서리를 둥글게 하지 않습니다.
Rounded 스타일의 심볼은 외부와 내부 모두 둥근 반경을 적용하며, Sharp 스타일의 심볼은 외부와 내부 모서리 반경을 2dp에서 0dp로 줄입니다.
외부 모서리에는 2dp의 둥근 반경이 적용됩니다. 내부 모서리는 둥글게 하지 않아야 합니다.그리드 위에 배치된 신용카드 아이콘의 외곽 모서리가 강조된 모습입니다. 외곽 모서리는 2dp의 둥근 반경을 적용하여 부드럽게 처리합니다.
오른쪽은 같은 신용카드 아이콘의 내부 모서리가 강조된 모습입니다. 내부 모서리는 직선 형태로 유지하며, 둥글게 처리하지 않습니다.
과도하게 둥근 모서리(좌)와 일관되지 않은 모서리 반경(우)그리드 위에 배치된 문서 아이콘의 과도하게 둥근 모서리가 강조된 모습입니다.
⚠️ 모서리를 과도하게 둥글게 하면 가독성이 떨어집니다.
❌ 서로 다른 반경을 혼용하지 않습니다.
두께(Weight)와 스트로크(Stroke)
권장 스트로크 두께는 2dp 또는 Regular(400) 굵기입니다. Material Symbols는 100(Thin)부터 700(Bold)까지의 굵기를 제공합니다.
보통 두께의 아이콘과 다양한 굵기의 아이콘 예시왼쪽 이미지는 그리드 위에 배치된 타이머 아이콘이 보통 두께(Regular, 400)로 표시된 모습입니다. 이 두께는 기본 권장 스트로크 두께로, 명확하고 안정적인 시각적 균형을 제공합니다.
오른쪽 이미지는 100부터 700까지 다양한 굵기로 표현된 타이머 아이콘의 예시입니다. 이처럼 아이콘의 굵기는 디자인 맥락에 따라 조정할 수 있으며, 얇은(100) 스타일부터 두꺼운(700) 스타일까지 다양한 시각적 무게감을 표현할 수 있습니다.
아이콘 끝단이 강조된 모습과 내부 선이 강조된 모습왼쪽 이미지는 그리드 위에 배치된 화살표 아이콘의 끝단이 강조된 모습입니다. 화살촉의 끝단은 45도로 절단되어 있으며, 이는 선 끝단(stroke terminal)의 형태를 명확하게 정의합니다.
오른쪽 이미지는 그리드 위에 배치된 ‘추가(Add)’ 원형 아이콘은 내부 선이 강조되어 있습니다. 이 내부 선(counter stroke)은 2dp의 직선 형태로 유지되어, 전체 아이콘의 균형과 두께 일관성을 제공합니다.
일정한 선 두께와 끝단(좌)과 불균형한 두께(우)왼쪽의 ‘차트 추가(Add chart)’ 아이콘과 같이 일정한 선 두께와 직각 형태의 끝단을 유지해야 합니다. 이처럼 스트로크 두께를 일관되게 적용하고 선 끝단을 직각으로 처리하면 명확하고 균형 잡힌 인상을 줍니다. 반면 오른쪽 예시와 같은 불균형은 아이콘의 형태를 흐리게 만들고 시각적 일관성을 저하시킵니다.
✅ 일관된 두께와 직각 스트로크 단말을 유지합니다.
❌ 스트로크 굵기를 불균일하게 하거나 둥근 단말을 사용하지 않습니다.
복잡한 아이콘 형태(Complex Shapes)
복잡한 디테일이 필요한 경우, 가독성을 높이기 위해 미세한 조정(시각 보정, optical correction)을 적용할 수 있습니다. 단, 기하학적 기본 형태를 왜곡하거나 비율을 깨서는 안 됩니다.
시각 보정을 위해 1.5dp로 스트로크가 강조된 클립과 그릇 아이콘그리드 위에 배치된 종이클립 아이콘에서 조정된 1.5dp 스트로크가 강조되어 있습니다. 이 종이클립 아이콘은 24dp × 24dp 아이콘 공간 안에서 여러 곡선을 수용하기 위해 가능한 2dp 스트로크 폭 중 1.5dp를 사용합니다.
그리드 위에 배치된 라면 그릇 아이콘에서 조정된 1.5dp 스트로크가 강조되어 있습니다. 이 라면 그릇 아이콘은 24dp × 24dp 아이콘 공간 안에서 1.5dp 스트로크와 2dp 스트로크를 함께 사용합니다.
평면 형태의 아이콘(좌)과 입체 아이소매트릭 형태의 아이콘(우)평면 형태로 구성된 건물 아이콘의 예시입니다. 아이콘은 정면을 향하도록 디자인하여 단순하고 명확한 형태를 유지합니다. 반면, 아이소메트릭(입체) 시점으로 표현된 건물 아이콘은 기울이거나 회전된 형태로 인해 불필요한 입체감이 생깁니다.
✅ 아이콘은 정면을 향하게 디자인합니다.
❌ 기울이거나 회전시키거나 입체적으로 표현하지 않습니다.
마치며
아이콘은 짧은 시선 안에 많은 의미를 담아내는 효율적인 시각 언어입니다. 텍스트보다 빠르게 인식되며, 언어 장벽 없이 직관적으로 정보를 전달할 수 있어 인터페이스 디자인의 핵심 요소로 활용됩니다.
하지만 이러한 장점은 명확한 구조와 일관된 규칙 속에서만 유지됩니다. 형태가 복잡하거나 크기·두께·모서리 반경이 제각각이면 오히려 혼란을 줄 수 있습니다. 따라서 아이콘은 그리드와 키라인을 기준으로 균형 잡힌 비율과 일관된 시각적 무게를 지켜야 합니다.
좋은 아이콘은 눈에 띄지 않지만, 사용자 경험의 완성도를 높이는 조용한 질서로 작동합니다. 이러한 아이콘을 어떻게 UI에 잘 적용할 수 있는지에 대한 내용은 다음 글에서 이어집니다. 아이콘에 대한 더 자세한 내용은 아래 글에서 확인하실 수 있습니다.
