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

YDS v2 컴포넌트 라이브러리 재구축 목표

• 요기요 디자인 시스템(YDS) v2의 컴포넌트 라이브러리 재구축 경험을 공유하며, Radix Primitives 도입, Panda CSS로 스타일 라이브러리 전환, Tree Shaking 문제 진단 및 빌드 시스템 개선, 구 버전 브라우저 호환성 제공을 핵심 기술 변화로 제시.
• 기존 UI 라이브러리 사용 및 직접 구현 방식의 딜레마를 해결하기 위해 Radix Primitives와 Panda CSS 조합을 선택.

Radix Primitives 도입을 통한 유연성 및 웹 접근성 확보

• Radix Primitives는 Headless UI 철학 기반의 로우 레벨 컴포넌트 라이브러리로, 스타일링은 분리하고 핵심 로직, 상태 관리, 웹 접근성만을 제공.
• 개발자는 복잡한 접근성 구현을 Radix에 위임하고 비즈니스 로직과 디자인 구현에 집중 가능하며, Open Component Architecture를 통해 높은 확장성을 확보.
• Radix의 Data Attributes를 활용하여 컴포넌트의 기능적 상태에 따른 스타일을 Panda CSS로 선언적으로 관리.

Panda CSS로 스타일 라이브러리 전환 및 최적화

• styled-components의 런타임 오버헤드 및 React 18 이후 변화(RSC)에 대응하기 위해 Panda CSS로 전환 결정.
• Panda CSS는 Zero-runtime CSS-in-TS 패러다임을 구현하여 개발 시 CSS-in-JS 문법과 TypeScript 이점을 누리면서, 빌드 시 최적화된 static CSS를 생성.
• yds2-tokens 라이브러리는 다양한 스타일링 환경을 고려하여 디자인 토큰의 계층 구조를 보존한 Map 객체 등 최적화된 데이터 구조로 변환하여 제공.