아이콘 세트가 어수선해 보이는 이유, 일관성의 기준

아이콘이 어수선해 보이는 가장 흔한 이유는 서로 다른 출처의 아이콘을 섞어 써서 선의 굵기, 모서리 모양, 크기 기준이 제각각이기 때문입니다. 아이콘 하나하나는 예뻐도 함께 놓이면 통일감이 깨집니다. 아이콘 세트는 같은 규칙으로 그려진 아이콘들의 묶음이며, 일관성이 있어야 사용자가 기능을 빠르게 알아봅니다.

무엇이 일관성을 깨뜨릴까요?

선으로만 그린 아이콘과 면을 채운 아이콘이 섞이면 무게감이 달라 보입니다. 선 굵기가 아이콘마다 다르면 어떤 것은 진하고 어떤 것은 흐려 보입니다. 모서리를 둥글게 처리한 아이콘과 각진 아이콘이 함께 있어도 어색합니다. 이런 차이는 작게 보여도 화면 전체의 인상을 정돈되지 않게 만듭니다.

일관성을 위해 무엇을 맞춰야 하나요?

기준	맞출 것
스타일	선형, 면형 가운데 하나로 통일
선 굵기	같은 두께로
모서리	둥글게 또는 각지게 통일
크기	같은 격자 안에 맞춤
시각적 무게	눈으로 볼 때 비슷한 크기감

특히 시각적 무게는 수치만으로 맞추기 어렵습니다. 같은 크기의 상자 안에 그려도 원형 아이콘은 사각형 아이콘보다 작아 보입니다. 그래서 원형은 조금 더 크게 그려 눈으로 보았을 때 비슷하게 맞춥니다.

격자는 어떻게 쓰나요?

아이콘은 보통 정해진 크기의 정사각형 격자 위에 그립니다. 격자 안에 안전 여백을 두고, 그 안에서 모양을 그리면 아이콘마다 크기가 들쭉날쭉해지지 않습니다. 격자를 기준으로 정사각형, 원형, 가로형, 세로형 모양이 차지하는 기본 영역을 정해 두면 새 아이콘을 추가할 때도 세트와 잘 어울립니다.

아이콘에는 꼭 글자를 붙여야 할까요?

집이나 검색처럼 누구나 아는 아이콘은 혼자 써도 되지만, 의미가 모호한 아이콘은 글자를 함께 붙이는 것이 좋습니다. 디자이너에게는 분명한 아이콘도 사용자에게는 무엇을 뜻하는지 헷갈릴 수 있습니다. 특히 중요한 기능일수록 아이콘과 글자를 함께 써서 오해를 줄여야 합니다. 화면 낭독기를 쓰는 사용자를 위해 아이콘 버튼에는 대체 텍스트도 넣어야 합니다.

직접 그리지 않고 일관성을 지키려면 어떻게 하나요?

처음부터 하나의 아이콘 세트를 정해 그 안에서만 고르는 것이 가장 쉬운 방법입니다. 많은 무료·유료 아이콘 세트는 같은 규칙으로 수백 개의 아이콘을 제공합니다. 필요한 아이콘이 세트에 없을 때만 세트의 규칙에 맞춰 직접 그리면 통일감을 지킬 수 있습니다. UI 요소 정리 방법은 에서 볼 수 있습니다.

자주 묻는 질문

선형과 면형 아이콘을 함께 쓰면 안 되나요?

선택된 상태를 면형으로, 기본 상태를 선형으로 나타내는 것처럼 규칙을 정해 쓰면 괜찮습니다.

아이콘 크기는 얼마로 정하나요?

화면과 용도에 따라 다르지만, 한 화면 안에서는 몇 가지 크기만 정해 반복해 쓰는 것이 좋습니다.

아이콘 색은 몇 가지가 적당한가요?

기본 색 하나와 강조나 상태를 나타내는 색 몇 가지로 제한하면 정돈되어 보입니다.