[디자인 시스템 어떻게 만들었어요?(2)] Radix Primitives와 Panda CSS로 유연하고 단단한 컴포넌트 만들기

핵심 요약

요기요 FE가 Radix Primitives와 Panda CSS를 도입해 디자인 시스템의 컴포넌트 라이브러리를 재구축하고, 접근성·확장성 강화와 First Load JS 용량 최적화 등 실무 효과를 공유합니다.

주요 특징

• Radix Primitives로 웹 접근성 보장 및 컴포넌트 확장성 확보
• Panda CSS로 제로 런타임 CSS 기반의 TS 스타일링, 정적 CSS 추출로 퍼포먼스 및 일관성 강화
• Panda Preset(Token/Recipes)로 디자인 토큰 관리와 타입 안전한 스타일 시스템 제공
• Barrel File 구조의 Tree Shaking 개선과 빌드 시스템 최적화로 초기 로드 성능 개선

적용 고려사항

• 서비스앱의 스타일링 소비 환경에 따라 Panda CSS 배포 방식(Preset/Static CSS/소스 코드 포함 여부)을 선택해야 합니다
• yds2-tokens 토큰 구조를 프로젝트 계층에 맞춰 적용하고, Panda CSS Preset과의 연계를 고려합니다