아이콘디자인이론

일관성 있는 아이콘 세트를 만들기 위한 7가지 규칙과 아이콘 제작 가이드를 알아봅니다

코드 블록의 Try it Yourself 버튼으로 직접 실행할 수 있다.

구문

아이콘 디자인 이론

1. 한 가지 스타일을 고수하기

아이콘을 디자인하기 전에 스타일 방향을 생각해보세요. 스타일 방향은 모든 아이콘의 특정한 굵기, 색상, 아름다움을 유지하게 하는 것 그 이상입니다. 스타일 방향은 또한 아이콘이 있을 곳 및 사람들이 어떻게 이 아이콘을 마주하게 될지를 고려하는 것도 포함합니다. 애플리케이션 인터페이스 아이콘 디자인은 큰 포스터용 아이콘 디자인과는 다릅니다.

아이콘 스타일 방향을 결정했다면 일관성을 유지하세요. 변화가 많고 굵기가 다양한 아이콘 세트는 내부에서 충돌이 발생할 수 있습니다. 아이콘들이 잘 어울리는지 모르겠다면 아이콘을 나란히 놓고 어떤 아이콘이 겉도는지 살펴보세요.

2. 특정 테마 유지하기

아이콘 세트를 보았을 때 깨닫게 되는 중요한 것은 특정하고 일관된 테마입니다. 아이콘 세트는 음악 애플리케이션 또는 은행 웹사이트든 일반적으로 정해진 주제에 맞게 되어있습니다.

Warning: 한 가지 원칙 이상의 아이콘을 혼합한다면 아이콘 세트 혼란을 야기할 수 있고 디자인 메시지 전달을 방해할 수 있습니다.

3. 격자 활용하기

완벽한 픽셀 아이콘 선을 유지하는 비법은 정사각형 모양의 격자무늬입니다. 격자무늬는 아이콘의 경계 역할을 하여 제한된 공간에서 디자인할 수 있도록 도와줍니다. 격자무늬를 사용하는 디자이너들은 특정한 디자인 스타일을 취하거나 아이콘 세트 전반에서 일정한 크기를 유지할 수 있습니다.

4. 전체적으로 동일한 색상 팔레트 사용하기

세트 내에서 일관된 색상 팔레트를 유지하면 다양한 아이콘을 일관되게 묶을 수 있습니다. 색상 팔레트를 선택할 때는 아이콘 세트의 테마와 어울리는지 확인하세요.

Tip: 아이콘에 너무 많은 색상을 사용하지 마세요. 아이콘 세트에 세 가지 이하의 색상만 사용하고 보색 또는 유사색 같은 서로 잘 어울리는 색상을 선택하세요.

5. 동일한 굵기와 크기 유지하기

아이콘 세트에 동일한 색상 팔레트를 유지하는 것과 더불어 일관된 비주얼 굵기 및 크기를 사용하는 것도 중요합니다. 아이콘 세트에 너무 많은 변화를 주는 것은 전체적인 디자인 메시지에 영향을 미치고 아이콘이 어울리지 않는 것처럼 보입니다.

6. 엄격한 아이콘 가이드라인 설정하기

아이콘 세트에서 일관성을 유지하려면 가이드라인을 설정하세요. 각 디자인에 둥근 사각형을 입히거나, 각 아이콘에 4픽셀 윤곽선, 15픽셀 격자무늬 경계, 원과 X를 일관적으로 통합하여 사용할 수 있습니다. 규칙이 무엇이든 그 규칙을 고수하세요.

7. 모든 크기에서 선명한지 확인하기

대부분의 아이콘은 온라인 또는 상대적으로 작은 크기로 앱 인터페이스에 사용됩니다. 아이콘을 디자인할 때는 크기를 조정하여 각 아이콘이 가장 작은 크기에서도 선명도를 유지하는지 확인해보세요.

Info: 아이콘을 다양하게 변형해보세요. 디자인의 어떤 요소가 필수적이고 어떤 부분은 장식에 지나지 않는지 확인할 수 있습니다.

8. 아이콘 제작 가이드

다양한 사이즈로 아이콘을 만들어야 할 때, 가장 큰 사이즈에서 시작해 점점 작은 사이즈를 만듭니다. 그래픽에서 디테일을 줄이고 심플하게 만드는 것이 그 반대 케이스보다 더 쉽기 때문입니다.

색상

서비스 디자인을 위한 아이콘은 우선 검정색으로만 디자인합니다. 색상이 많아질수록 복잡해지며 다른 디자이너와 협업하기 어렵습니다. 마케팅용 아이콘은 브랜드에 중요한 요소일 때 2가지 이상을 쓸 수 있습니다.

Warning: 3가지 이상 색상을 사용하면 아이콘이 아닌 일러스트레이션으로 인식합니다.

그리드

픽셀 그리드는 가장 기본이 되는 수치적 토대입니다. 아이콘을 만들 때 픽셀 그리드에 정렬하면 잘 렌더링 될 뿐만 아니라 작업을 편리하게 합니다. 위치에 통일성을 주고 전체적으로 균형을 맞추기 쉽습니다.

스케치에서 작업시 Grid Setting에서 Grid Block Size를 1px로 만듭니다.

시각적 그리드

시각적 그리드는 사람 눈으로 봤을 때 아이콘간 균형을 파악하는 걸 도와줍니다. 원형이나 커브가 있는 오브젝트는 사각형보다 시각적 공간을 덜 차지합니다. 아이콘을 같은 사이즈의 공간에 넣고 아이콘 별로 적절한 패딩을 적용해야 합니다.

시스템 아이콘의 기본 사이즈는 24x24로 만듭니다.
데스크탑의 경우 마우스와 키보드가 기본 입력장치일 때 기본 아이콘 사이즈는 20x20으로 줄어듭니다.

머티리얼에서 오브젝트가 들어가는 영역을 패딩과 구분하기 위해 Live Area라고 부릅니다. 기본 사이즈에서 패딩은 2dp입니다.

패딩 영역은 꼭 비워놓는 부분이 아니라 아이콘의 밸런스에 따라 조절합니다.

선과 채우기

선 아이콘은 작은 디테일이 가능하고 채워진(filled) 아이콘은 형태를 인지하기가 쉽습니다. 적절한 스타일을 선택하려면 전체적인 브랜드를 고려해야 합니다.

선 아이콘을 만든다면 기본적으로 선은 같은 굵기가 되도록 합니다.
선 사이의 공간은 선보다 더 얇지 않도록 주의합니다.

디자인할 때 고려할 사항

프로덕트 아이콘을 위한 머티리얼 디자인의 가이드라인은 여전히 매우 많은 부분에서 그대로 적용됩니다. 특히 아이콘의 뼈대, 그림자와 마감 같은 부분은 변하지 않습니다. 하지만 구성 요소들을 배경에 배치할지, 전경에 배치할지 선택하여 다양한 효과를 만들어 낼 수 있습니다.

Clipping(클리핑)

어댑티브 아이콘의 동적인 특성 때문에, 테두리가 어떻게 잘려질지 알 수 없습니다. 브랜드 마크처럼 잘려나가서는 안 될 중요한 것들은 66dp의 세이프 존 안에 배치시키고 가장자리로부터 떨어트려야 합니다.

Background Anchoring(배경 앵커링)

전경처럼 보이는 요소를 배경에 배치하면, 실제로 두 요소가 독립적으로 이동하게 할 수 있습니다.

전경으로 감추고 배경을 보이게 하기

아래를 덮는 색면을 전경에 배치시키고 구멍을 내 배경을 보이게 하는 방법으로 재미난 상황들을 연출할 수 있습니다.

빛과 그림자

광원 효과와 그림자 효과를 각기 다른 레이어에 배치시켜 재미난 결과를 만들 수 있습니다. 전경에 Long-shadow 요소를 배치하면 그림자가 함께 움직이는 효과를 연출할 수 있습니다.

뒤에 숨겨두기

전경에 완벽히 가려지도록 배경에 요소를 배치하여 평소에는 숨겨져 있다가 애니메이션이 발생할 때만 보이게 만들 수 있습니다.

Resources and tools(리소스와 도구)

어댑티브 아이콘을 만들 때 스케치 파일을 템플릿으로 사용할 수 있습니다. 파일은 아이콘 그리드, 키라인, 안전 영역을 보여주며, 스케치 심볼로 작성되어있기 때문에 마스터 아트보드만 편집하면 크롭된 다양한 형태를 미리 볼 수 있습니다.

어댑티브 아이콘 실험실

어댑티브 아이콘에 적용되는 효과를 테스트해보고 아이콘 디자인을 도울 수 있는 앱을 활용할 수 있습니다.