요기요 디자인 시스템, 아이콘 라이브러리 구축 노하우 공개!

YDS 구축을 통해 개발자 생산성 향상 및 일관된 사용자 경험 제공

SVG 자동 변환 및 아이콘 라이브러리 분리를 통해 관리 효율성 증대

Monochrome/Multicolor 아이콘에 맞는 스타일 제어 API 제공

SVG 자동 변환 시스템 설계

Figma에서 export된 SVG 파일을 React 컴포넌트로 자동 변환하는 시스템을 구축했다. 구체적으로, svgo를 사용하여 SVG 최적화를 수행하고, svgr을 통해 React 컴포넌트를 생성한다. 따라서, 아이콘 관리의 효율성을 높이고, 휴먼 에러를 방지한다.

Monochrome과 Multicolor 아이콘 처리

Monochrome 아이콘은 currentColor를 활용하여 색상 변경을 유연하게 처리한다. 반면, Multicolor 아이콘은 고유 색상을 유지하기 위해 convertColors 플러그인을 적용하지 않았다. 결과적으로, 각 아이콘의 디자인 요구사항을 충족하고, 디자인 시스템과의 통합을 용이하게 했다.

디자인 시스템 컴포넌트 통합

MonochromeIcon 및 MulticolorIcon 컴포넌트를 제공하여 디자인 시스템과의 통합을 지원한다. 따라서, Wrapper 컴포넌트에서 스타일 제어를 일원화하고, IDE 자동완성 및 타입 안정성을 확보했다. 결과적으로, 아이콘 라이브러리와 디자인 시스템 간의 결합도를 낮췄다.