요기요 디자인 시스템의 아이콘 라이브러리 구축

이 게시물은 요기요의 디자인 시스템 YDS에서 아이콘 라이브러리를 새롭게 구축한 과정을 다룹니다.

기존 문제점 및 개선 방향

• 기존 아이콘 관리 방식의 트리 쉐이킹 불가, 색상 변경 미반영, 버전 관리 문제점 지적
• 개별 SVG 컴포넌트 관리 및 최적화, Monochrome과 Multicolor 아이콘 요구사항 반영
• 자동 변환 스크립트 개발로 SVG 파일을 React 컴포넌트로 자동 변환

기술적 구현 상세

• svgo 및 svgr 패키지 활용한 SVG 최적화 및 React 컴포넌트 생성
• 접근성 고려한 AccessibleIcon 컴포넌트 도입
• Wrapper 컴포넌트로 스타일 제어를 일원화하여 디자인 시스템과 통합

운영 및 협업 개선

• 아이콘 변경 이력 자동 분석 및 PR 설명 자동 생성 워크플로우 적용
• Figma 플러그인 활용해 디자이너와 개발자가 아이콘 동기화 및 협업 강화 예정

아이콘 라이브러리는 단순 리소스가 아닌 일관된 사용자 경험과 생산성 향상을 위한 핵심 시스템임을 강조합니다.