Radix Primitives & Panda CSS: 유연하고 접근성 높은 컴포넌트 시스템 구축
by DD
7개월 전
조회수 25
Radix Primitives 도입으로 웹 접근성을 확보하고 컴포넌트 확장성을 개선함
styled-components에서 Panda CSS로 스타일 라이브러리를 전환함
Panda CSS를 통해 디자인 시스템의 디테일을 일치시키고 개발 생산성을 향상시킴
Radix Primitives: Headless UI의 힘
Radix Primitives는 Headless UI 철학을 기반으로, 스타일링과 로직을 분리하여 유연성을 제공한다. 구체적으로 WAI-ARIA 패턴 준수, 키보드 네비게이션, 포커스 관리 등 복잡한 접근성 구현을 지원한다. 따라서 개발자는 비즈니스 로직과 디자인 구현에 집중할 수 있다.
Panda CSS: Zero-runtime CSS-in-TS
요기요 FE는 styled-components의 런타임 오버헤드를 해결하기 위해 Panda CSS를 선택했다. Zero-runtime CSS-in-TS 방식을 통해 개발 단계에서는 CSS-in-JS의 이점을 누리고, 빌드 시점에 최적화된 static CSS를 생성한다. 따라서 와 호환되는 미래 지향적인 아키텍처를 구축했다.
![[디자인 시스템 어떻게 만들었어요?(2)] Radix Primitives와 Panda CSS로 유연하고 단단한 컴포넌트 만들기](https://static.devday.kr/thumbnails-w1200/yogiyo-7ead98362e17.webp)
