아이콘 디자인과 타이포그래피

디자인 시스템 내 아이콘은 브랜드의 시각적 DNA를 담는 핵심 자산이다. 아이콘이 폰트와 일체감 있는 룩을 가지면 서비스 전반의 일관성이 높아지고, 아이콘-텍스트가 함께 노출되는 모바일 환경에서 가독성이 향상된다. 폰트와 아이콘의 디자인 컨셉이 충돌하면 시각적 산만함과 가독성 저하를 유발하기 때문이다.

폰트 기반 아이콘 디자인의 2단계 프로세스 (Noto Sans 예시):

1. Grid Design — 큰 골격 잡기 타이포그래피의 구성 요소 중 구조적 특징을 차용한다:

  • Ascender Line / Capital Line / X-Line / Base Line / Descender Line: 아이콘 높이를 알파벳 대문자 기준으로 잡고, 소문자 높이(x-line)에 해당하는 라인을 Key Line으로 설정. 이 라인이 개별 아이콘의 비례감을 폰트와 닮게 만든다.
  • Set Width / Counter / Aperture: 폰트의 장평과 알파벳 O의 속 공간 인상에서 '세로로 길쭉한 형태'를 파악해 아이콘에도 반영.
2. Icon Detail — 디테일 표현 폰트의 세부 요소를 선택적으로 적용:
  • Spur(돌기): 획과 획이 만나는 부분의 작은 돌기를 아이콘에 표현
  • Ear(귀): 특정 글자에 나타나는 돌출 형태
  • Apex(꼭지): 대각선이 만나는 지점(대문자 A 상단 등). 아이콘은 작으므로 픽셀 깨짐에 주의해 부분적으로만 적용
  • Angle: 폰트 특유의 사선 각도(Noto Sans는 6의 배수). 일반적인 15° 그리드 대신 폰트 고유 각도를 사용
Family Look의 원리. 디자인 룰을 모든 아이콘에 기계적으로 적용하면 오히려 완성도가 떨어진다. 아이콘을 Core Identity(폰트 특징이 강하게 드러나는 것) → General Style(햄버거 메뉴처럼 디자인 요소가 거의 없는 것)의 스펙트럼에 골고루 분포시켜야 자연스러운 패밀리 룩이 된다. 활자에서도 개성이 강한 글자와 일반적인 글자가 조화롭게 공존하는 것과 같은 원리다. 중요한 것은 기계적 룰 적용이 아니라 전반적 디자인 밀도의 균형이다.

핵심 내용

  • 폰트와 아이콘의 일체감 있는 룩이 가독성·일관성을 동시에 개선
  • 2단계 프로세스: Grid(큰 골격) → Detail(세밀 표현)
  • Grid 구성: Ascender/Capital/X/Base/Descender Line + Key Line
  • Detail 요소: Spur · Ear · Apex · Angle
  • Apex는 픽셀 깨짐 방지를 위해 선택적 적용
  • Family Look: Core Identity ↔ General Style 스펙트럼의 균형
  • 기계적 룰 적용이 아닌 디자인 밀도의 균형이 핵심

관련 개념

출처

최종 업데이트: 2026-04-07 | 출처 1개