Radix Primitives & Panda CSS: 유연하고 접근성 높은 컴포넌트 시스템 구축

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를 생성한다. 따라서 RSC와 호환되는 미래 지향적인 아키텍처를 구축했다.

토큰 라이브러리의 중요성

디자인 시스템의 핵심인 토큰과 타이포그래피를 일관성 있게 사용하기 위해, 각 스타일링 환경에 맞는 데이터 구조를 제공한다. Sass(SCSS) 환경을 위해 디자인 토큰의 계층 구조를 보존한 Map 객체를 제공한다. 결과적으로 서비스 앱은 스타일링 의존성에서 자유로워진다.