[디자인 시스템 어떻게 만들었어요?(1)] 아이콘 라이브러리 만들기
요기요는 디자인 시스템 아이콘을 개별 SVG 컴포넌트와 전용 라이브러리로 재구축했습니다. 자동 변환, 접근성, 토큰 연동, 변경 내역 자동화로 운영 효율을 높였습니다.
#React#SVG#디자인 시스템
12800
![[디자인 시스템 어떻게 만들었어요?(1)] 아이콘 라이브러리 만들기](https://miro.medium.com/v2/resize:fit:1200/1*kCf05hhyLPa7iBp2vBTJAA.png)
SVG 태그가 달린 국내 IT 기업 기술 블로그 글을 최신순으로 모았습니다.
4개 표시
요기요는 디자인 시스템 아이콘을 개별 SVG 컴포넌트와 전용 라이브러리로 재구축했습니다. 자동 변환, 접근성, 토큰 연동, 변경 내역 자동화로 운영 효율을 높였습니다.
![[디자인 시스템 어떻게 만들었어요?(1)] 아이콘 라이브러리 만들기](https://miro.medium.com/v2/resize:fit:1200/1*kCf05hhyLPa7iBp2vBTJAA.png)
리브랜딩 후 사용자에게 오류처럼 보이던 UI icon을 폰트 기반 디자인과 명확한 가이드로 개선했습니다. 그 결과 VOC가 감소하고 아이콘 제작 리소스도 크게 줄었습니다.

SVG의 `viewBox`, `viewport`, `preserveAspectRatio` 개념을 정리하고 `meet`와 `slice`의 동작 차이를 설명했습니다.\n크기 관계에 따라 정렬 기준이 어떻게 달라지는지 예시로 살펴보았습니다.
SVG 도형을 추출해 ID와 그룹 단위로 CSS 애니메이션을 적용하는 방법을 정리했습니다. hover 이동, 클릭 색상 변경, 순차 등장 애니메이션까지 구현 과정을 소개했습니다.