{3줄 요약}

아이콘은 짧은 시간 안에 의미를 압축해 명확하게 전달하는 시각 언어예요.
형태가 복잡하거나 일관되지 않으면 작은 화면에서 기능 이해가 바로 깨져요.
좋은 아이콘 원리를 알면 개별 그림이 아니라 일관된 시스템으로 설계하게 돼요.

아이콘이 빠른 이유

텍스트는 읽어야 해요. 아이콘은 그냥 봐요.

"검색" 글자를 읽는 것보다 돋보기 아이콘을 인식하는 게 더 빨라요.
특히 공간이 제한된 모바일 화면에서 아이콘은 텍스트보다 훨씬 효율적인 방식으로 정보를 전달해요.

하지만 빠른 인식은 "이미 알고 있는 아이콘"일 때만 적용돼요.
처음 보는 아이콘은 텍스트보다 오히려 더 오래 걸려요.

그래서 좋은 아이콘은 두 가지를 동시에 만족해야 해요.
사람들이 이미 아는 관례를 따르면서, 동시에 명확하게 형태가 구분되어야 해요.

단순함이 핵심이에요

아이콘은 보통 16px에서 48px 사이에서 사용돼요.
이 작은 크기에서 복잡한 디테일은 보이지 않아요.
오히려 형태가 뭉개져서 알아보기 어렵게 돼요.

좋은 아이콘은 가장 핵심적인 특징만 남기고 나머지를 다 제거한 결과예요.

카메라 아이콘이 좋은 예예요.
실제 카메라는 복잡하지만, 아이콘에는 렌즈와 본체 외곽선만 있어요.
그것만으로 "카메라"라는 걸 충분히 알 수 있어요.

실루엣 테스트 - 아이콘을 검은 실루엣으로 만들었을 때 여전히 알아볼 수 있으면 잘 만든 아이콘이에요.
색이나 선 두께 없이 형태만으로 의미가 전달되어야 해요.

아이콘 스타일의 종류

인터페이스에서 자주 쓰는 아이콘 스타일이 있어요.

Outline (선 형태) - 얇은 선으로만 이루어진 스타일이에요.
가볍고 현대적인 느낌이에요.
Google Material Design의 기본 아이콘 스타일이에요.

Filled (채운 형태) - 내부가 채워진 스타일이에요.
더 강하고 무거운 느낌이에요.
선택 상태, 활성 상태를 나타낼 때 써요.

Duotone (두 가지 색) - 아이콘의 일부에만 다른 색이나 투명도를 적용하는 스타일이에요.
최근 많이 쓰는 현대적인 방식이에요.

Flat (평면) - 입체감 없이 단순한 색과 형태만 사용해요.

어느 스타일이 맞는지보다, 제품 안에서 일관된 스타일을 유지하는 게 더 중요해요.

일관성이 아이콘을 시스템으로 만들어요

아이콘 하나를 잘 만드는 것보다 아이콘 세트를 일관되게 만드는 게 더 어려워요.

선 두께 (Stroke Weight) - 모든 아이콘의 선 두께가 같아야 해요.
어떤 건 두껍고 어떤 건 얇으면 한 세트처럼 안 보여요.

모서리 처리 - 모서리가 날카로운지, 둥근지 일관성이 있어야 해요.

크기 규칙 - 아이콘이 그려지는 캔버스 크기와 실제 아이콘의 여백 비율을 통일해야 해요.

시각적 무게 - 디테일한 아이콘과 단순한 아이콘을 같이 쓰면 시각적 무게가 달라 보여요.
전체적으로 비슷한 밀도를 유지해야 해요.

삼성 One UI 아이콘 시스템, 카카오 아이콘, Google Material Icons - 이런 대형 시스템은 수천 개의 아이콘이 있어도 하나의 스타일 언어로 통일되어 있어요.

아이콘만으로는 부족할 때

아이콘은 보조 수단이에요.
모든 기능이 아이콘만으로 이해되길 기대하면 안 돼요.

특히 익숙하지 않은 기능일수록 텍스트 레이블을 함께 써야 해요.
"이 아이콘이 뭘 하는 건지 모르겠어요"라는 말이 나오면, 텍스트를 추가하는 게 답이에요.

탭 내비게이션에서 아이콘만 쓸지, 아이콘+텍스트를 쓸지 결정할 때 - 사용자가 해당 아이콘을 알고 있는지를 기준으로 판단해야 해요.

형태와 도형의 원리가 아이콘 설계에 어떻게 연결되는지는 형태와 도형을 보세요.

관련 아티클

참고 문헌

  • Google, Material Design (2021) - 아이콘 시스템 설계 원칙과 실무 가이드예요.
  • Philip B. Meggs, 《Meggs' History of Graphic Design》(1983) - 심볼과 아이콘 디자인의 역사적 맥락이에요.