UI 컴포넌트 구조화하기
아이콘은 작은 요소지만, 제품의 완성도를 크게 좌우한다. 그럼에도 불구하고 많은 제품에서 아이콘은 의외로 쉽게 무너집니다.
크기가 조금씩 다르고 Stroke 굵기가 제각각이며 구조 처리 방식도 통일되어 있지 않습니다. 이 상태에서 아이콘을 컴포넌트화하면 문제가 더 명확해집니다.
같은 아이콘인데 상태에 따라 색이 다르게 보이고 투명도를 적용하면 의도하지 않은 부분이 진해지거나 흐려집니다. 결국 왜 이렇게 보이는지 설명할 수 없는 상태가 됩니다.
이런 문제를 해결하기 위해 전 제품에 공통 적용 가능한 Icon system 기준을 재정의했습니다. Figma 기반 아이콘 컴포넌트 구조를 디자인 시스템 관점에서 정리한 과정으로 우리가 목표로 한 것은 단순합니다.
일관된 크기와 Stroke 체계
컴포넌트 기반으로 확장 가능한 구조
유지보수와 재사용이 가능한 아이콘 시스템
아이콘을 개별 리소스로 관리하면 처음에는 빠르지만 제품이 커질수록 유지가 불가능할 수도 있습니다. 그래서 아이콘도 버튼이나 타이포그래피처럼 규칙을 가진 시스템으로 관리해야 합니다.
정의한 기준은 크게 여섯 가지입니다.
1. Size
아이콘은 반드시 세트로 존재하고 개별 사이즈로는 존재하지 않는다.
반드시 세트 단위로 관리되어야 하고 기본 사이즈는 다음 두 가지다. 이 두 사이즈는 모든 아이콘에서 필수로 제공된다.
• Small: 12 × 12 px
• Large: 20 × 20 px
추가 사이즈가 필요한 경우도 있다.
예외 사이즈도 개별로 만들지 않고 항상 세트로 함께 정의한다.
• XSmall: 10 × 10 px
• Medium: 16 × 16 px
• XLarge: 24 × 24 px
이러한 규칙 하나만으로도 아이콘 스케일이 무너지는 문제의 대부분이 사라집니다.