<aside> 📎

참고 출처

1. Icons — Apple Human Interface Guidelines — 이 레슨에서 다루는 좋은 인터페이스 아이콘의 원칙(단순성·인지 가능성·대체 텍스트)의 공식 근거입니다.
2. SF Symbols — Apple Developer — 검증된 아이콘 라이브러리 활용 사례와 라이선스 유의점의 근거입니다. </aside>

레이아웃까지 익혔다면 UI 디자인 기초의 마지막 조각은 아이콘과 시각 요소입니다. 아이콘은 공간을 아끼고 의미를 빠르게 전달하지만, 모호하게 쓰면 오히려 사용자를 헷갈리게 합니다. 또한 이 단원의 큰 방향인 'AI와 디자인 키트 활용'과 연결되는 지점이기도 합니다. 직접 그리기보다 검증된 라이브러리를 잘 활용하는 역량이 중요합니다. 이번 레슨에서는 아이콘과 시각 요소를 다루는 원칙을 익힙니다.

아이콘과 시각 요소 활용

• 아이콘은 의미를 압축해 전달하는 작은 그래픽으로, 공간 절약과 빠른 인지가 장점입니다.
• 다만 의미가 모호한 아이콘은 오히려 혼란을 주므로, 원칙에 따라 선택하고 일관되게 사용해야 합니다.

아이콘의 종류와 역할

• 아이콘은 크게 두 가지로 구분합니다.
  • 인터페이스 아이콘(글리프): 버튼·내비게이션·툴바 등에서 기능을 나타내는 작은 아이콘입니다.
  • 앱 아이콘: 홈 화면 등에 노출되는 브랜드 대표 아이콘으로, 음영·질감 등 풍부한 표현이 들어갑니다.
• 이번 레슨은 화면 안에서 기능을 전달하는 인터페이스 아이콘을 중심으로 다룹니다.

좋은 아이콘의 원칙

• Apple HIG가 제시하는 좋은 아이콘의 기준은 다음과 같습니다.
  • 단순하고 인지 가능한 디자인: 디테일이 많으면 작은 크기에서 알아보기 어렵습니다. 대부분의 사람이 즉시 알아보는 보편적 형태를 지향합니다.
  • 일관된 스타일: 선 굵기(stroke), 모서리 둥글기, 정렬을 통일해 한 세트처럼 보이게 합니다.
  • 텍스트 라벨 병행: 모호할 수 있는 아이콘에는 라벨을 함께 두고, 접근성을 위해 대체 텍스트(스크린리더용 설명)를 제공합니다.
• 또한 아이콘·UI 요소는 배경과 최소 3:1의 명도 대비(WCAG 비텍스트 요소 기준)를 확보해야 합니다.

아이콘 라이브러리 활용

• 실무에서는 아이콘을 직접 그리기보다 검증된 라이브러리를 활용하는 것이 효율적이고 일관성도 높습니다.
  • SF Symbols: Apple이 제공하는 7,000개 이상의 시스템 아이콘으로, 시스템 폰트와 정렬되도록 설계되어 있습니다. 단, Apple 플랫폼 한정 사용 등 라이선스 제약이 있습니다.
  • Material Symbols: Google이 제공하는 오픈 아이콘 세트입니다.
  • Lucide, Heroicons: 웹에서 널리 쓰이는 오픈소스 아이콘 세트로, 뒤에서 다룰 shadcn/ui 디자인 키트와도 잘 어울립니다.
• 라이브러리를 쓸 때는 라이선스와 플랫폼 제약을 반드시 확인합니다.

이미지·일러스트 등 시각 요소

• 아이콘 외 이미지·일러스트도 같은 원칙을 따릅니다.
  • 스타일(톤·컬러·선)을 통일해 한 서비스처럼 보이게 합니다.
  • 의미 있는 이미지에는 대체 텍스트를 제공해 접근성을 확보합니다.