아이코노그래피(Iconography)는 시각적 기호를 활용하여 정보를 전달하는 디자인 기법을 의미합니다. 이는 UI/UX 디자인에서 아이콘(icon)을 설계하고 사용하는 원칙을 포함하며, 사용자에게 직관적으로 의미를 전달하는 데 중요한 역할을 합니다.
아이콘은 작은 크기의 그래픽 요소이지만, 올바르게 설계되지 않으면 사용자가 혼란을 겪을 수 있습니다. 따라서 기호학적 접근을 바탕으로 직관적이고 명확한 정보 전달이 가능한 디자인을 우선해야 합니다.
아이콘(Icon)이란?
아이콘은 텍스트 없이도 의미를 전달할 수 있는 시각적 언어입니다. 이는 웹사이트, 모바일 앱, 소프트웨어 UI 등 다양한 환경에서 사용되며, 사용자가 빠르게 이해하고 조작할 수 있도록 돕는 역할을 합니다.
아이콘 디자인의 주요 원칙
1. 직관성
- 아이콘은 사용자가 즉시 이해할 수 있어야 합니다.
- 과도하게 추상적인 디자인은 피하고, 일반적으로 통용되는 기호를 사용해야 합니다.
2. 일관성
- 같은 시스템 내에서는 아이콘의 스타일, 크기, 색상이 일관되게 유지되어야 합니다.
- 서로 다른 스타일의 아이콘이 혼합되면 UI의 통일성이 깨지게 됩니다.
3. 심플함
- 너무 복잡한 형태의 아이콘은 인식이 어려울 수 있습니다.
- 가능한 한 단순한 선과 형태를 사용하여 가독성을 높여야 합니다.
4. 해상도 및 크기 고려
- 아이콘은 보통 24x24dp, 20x20dp 등의 작은 크기로 제작되므로, 작은 화면에서도 인식 가능해야 합니다.
- Live Area(안전 영역)를 고려하여 2dp의 여백을 두고 작업하는 것이 일반적입니다.
키라인(Keyline)이란?
키라인(Keyline)은 아이콘의 균형과 비례를 조정하기 위한 가이드라인입니다. 아이콘이 동일한 크기라도 시각적으로 균형감을 유지하려면, 형태별로 다른 비율이 적용될 필요가 있습니다.
키라인 적용 예시
아이콘은 정사각형, 원형, 직사각형 등 다양한 형태로 디자인됩니다. 같은 크기의 아이콘이라도 형태에 따라 크기가 달라 보일 수 있기 때문에 시각적 보정을 위해 키라인을 활용해야 합니다.
| 아이콘 형태 | 특징 |
|---|---|
| 정사각형 아이콘 | 네모난 형태를 유지하면서 적절한 여백을 설정 |
| 원형 아이콘 | 원의 크기를 조정하여 주변 요소와 균형을 맞춤 |
| 직사각형 아이콘 | 가로/세로 비율을 고려하여 적절한 배치 |
키라인을 적절히 활용하면 아이콘을 다양한 화면에서 통일감 있게 배치할 수 있으며, 사용자에게 안정적인 시각적 경험을 제공합니다.
주의할 점
1. 아이콘의 의미는 보편적이어야 합니다
- 문화권에 따라 아이콘의 해석이 달라질 수 있으므로, 글로벌 사용자 경험을 고려해야 합니다.
- 예를 들어, “메일” 아이콘은 서구권에서는 봉투로 표현되지만, 일부 국가에서는 다르게 해석될 수도 있습니다.
2. 색상과 명도 차이를 활용하여 가독성을 높여야 합니다
- 배경 색상과의 대비를 고려하여 아이콘이 쉽게 인식되도록 디자인해야 합니다.
- 예를 들어, 밝은 배경에서는 짙은 색상의 아이콘을 사용하고, 어두운 배경에서는 밝은 색상의 아이콘을 사용해야 합니다.
3. 일관된 스타일을 유지해야 합니다
- 같은 앱이나 웹사이트 내에서는 아이콘의 두께, 크기, 둥근 정도 등을 일관되게 맞춰야 합니다.
- 예를 들어, 어떤 아이콘은 둥근 모서리를 사용하고, 다른 아이콘은 각진 형태를 사용하면 시각적으로 조화롭지 않습니다.
아이코노그래피는 시각적 커뮤니케이션의 핵심 요소로, 사용자 경험을 향상시키기 위해 필수적인 디자인 원칙입니다. 아이콘의 직관성, 일관성, 단순함, 시각적 균형을 고려하여 디자인해야 하며, 키라인(Keyline)과 같은 가이드라인을 활용하면 더욱 효과적인 UI 디자인이 가능합니다.
잘 설계된 아이콘은 텍스트 없이도 의미를 전달할 수 있어 UI를 더 직관적이고 효율적으로 만들 수 있습니다. 따라서, UX/UI 디자이너는 아이콘의 기호학적 의미를 고려하고, 최적의 사용자 경험을 제공할 수 있도록 디자인의 일관성과 가독성을 유지하는 것이 중요합니다.
참고 : https://material.io/design/iconography/system-icons.html#system-icon-metrics
