Radix Primitives와 Panda CSS를 활용한 YDS 컴포넌트 라이브러리 재구축

이 게시물은 요기요 디자인 시스템(YDS) v2의 컴포넌트 라이브러리 재구축 경험을 중심으로 Radix Primitives 도입과 스타일 라이브러리의 styled-components에서 Panda CSS로의 전환 과정을 설명합니다.

Radix Primitives 도입

• Headless UI 철학 기반의 접근성 높은 로우 레벨 컴포넌트 제공
• 컴포넌트 상태를 Data Attributes로 관리하여 스타일링과 기능 분리
• Open Component Architecture로 높은 확장성과 유연성 보장

Panda CSS 도입 이유와 효과

• styled-components의 런타임 오버헤드와 미래 호환성 문제 극복
• Zero-runtime CSS-in-TS 패러다임으로 빌드 시 최적화된 static CSS 생성
• 개발 생산성 유지와 안정적인 스타일 관리 가능

디자인 토큰과 라이브러리 배포 전략

• 스타일링 환경별 최적화된 토큰 데이터 구조 제공
• 라이브러리와 서비스 앱 간 스타일링 의존성 최소화
• 다양한 배포 방식으로 서비스 환경에 맞춘 유연한 적용 지원