아이콘
아이콘 (Icon)
아이콘은 의미를 그래픽으로 표현한 것이에요. 동작, 상태를 표현하고 데이터까지 분류하는 데 사용할 수 있죠. Ant Design의 아이콘은 다음 두 가지 원칙을 따르며, 크로스 플랫폼 일관성을 위해 설계됐어요.
- 명확하고 직관적이며 단순한 그래픽은 인지도가 높고 더 쉽게 이해돼요.
- 사용자 인터페이스의 모든 아이콘은 스타일(디테일 디자인, 원근, 선 두께 등)이 일관되어야 해요.
출처: 문서
본문
시스템 아이콘 (System Icons)
시스템 아이콘은 저장, 편집, 삭제 같은 흔히 쓰는 동작을 표현할 때 자주 사용돼요. Ant Design에는 파일 유형과 상태를 나타내는 아이콘도 포함돼 있고요.
핵심 외곽선 (Key Contour Lines)
외곽선(contour line)은 다양한 아이콘을 동일한 시각 효과로 만드는 데 중요한 역할을 해요.
모든 아이콘은 1024×1024 해상도(16×16의 64배)로 만들어 주세요.
선 두께 (Stroke Weight)
일관된 선 두께는 전체 아이콘 시스템의 시각적 통일성을 유지하는 핵심이에요. Ant Design의 아이콘은 일관된 72px의 선 너비를 가져요.
모서리 (Corners)
모서리 라운딩과 각도 크기의 일관성도 시각적 통일성을 유지하는 중요한 요소예요.
Ant Design을 따르는 아이콘은 72px 반지름으로 모서리와 가장자리를 라운딩 처리해야 해요.
시각 보정 (Visual Correction)
특정 특수한 경우(예: 아이콘이 너무 빽빽할 때)에는 선 너비, 외곽선 또는 기타 미묘한 변화를 조정해 가독성을 높일 수 있어요.
원근 (Perspective)
항상 단순하고 평평한 스타일을 유지하세요. 아이콘에는 깊이감이나 많은 디테일이 있어서는 안 돼요.
명명 규칙 (Naming Conventions)
통일된 명명 규칙은 아이콘을 더 빠르고 쉽게 찾게 해 줘요. 예를 들어 테두리(outline)가 있는 아이콘은 "-o" 접미사를 통일해서 사용해요.
아이콘 크기 (Icon Sizing)
아이콘은 Ant Design 스펙에 따라 텍스트 크기에 맞춰 스케일링해야 해요.
예를 들어 12pt 폰트와 인라인인 아이콘은 8px 간격과 함께 12px 크기여야 해요.
색 (Color)
아이콘의 색은 주변 텍스트의 색과 일치해야 해요. 다만 아이콘이 상태를 표현할 때에는 그에 맞게 색을 칠할 수 있어요.
비즈니스 아이콘 (Business Icons)
비즈니스 아이콘은 시스템 아이콘과 달리 그 자체로 기능적인 동작이 없어요. 대신 카피라이팅을 돕는 추상화된 표현이에요. 시스템 아이콘에 비해 디자인 디테일이 더 풍부하고, 사용 크기도 상대적으로 커요.
참고: 비즈니스 아이콘의 디자인 원칙은 시스템 아이콘과 기본적으로 같아요. 다만 디테일 처리(예: 선 두께, 필렛 크기)는 구체적인 장면에 따라 달라질 수 있어요.
아이콘 크기 (Icon Sizing)
일반적인 사용에서는 32px(최소 크기), 48px, 64px(최대 크기) 세 가지 옵션이 있어요.
색 (Color)
비즈니스 아이콘에는 단색(중성색)과 이중색(중성색 + 기본색) 두 종류가 있어요. 기본색 영역은 전체 아이콘의 40%를 넘지 않아야 해요.
더 알아보기 (Learn more)
- 아이콘 컴포넌트 — 사용 가능한 모든 아이콘 보기
- 색 (Color) — 아이콘 색 이해하기
- Ant Design 소개 — 디자인 원칙 살펴보기