Skill
2025년 12월 03일Frontent UI Framework 도입기
Headless 컴포넌트?
- UI 프레임워크 독립성
- 재사용성, 일관성
- 디자인 시스템과 1:1 매칭 가능
- Radix UI
- Headless UI
- React Aria
- Ariakit
- Ark UI
종합하여 후보군을 추려보았을때?
Radix-ui, Ark-ui, shadcn/ui, Rㅈeact Aria
현재 프로젝트에서 사용 중인 Chakra UI v2가 기본 스타일 종속성으로 인해 더 유연하고 커스터마이징이 쉬운 Headless 기반의 UI 라이브러리를 검토하고자 함.
📌 추천 조합
빠른 생산성과 디자인 통일
- shadcn/ui
- 이유: Tailwind 기반의 잘 설계된 컴포넌트 세트 제공, 실무에서 바로 사용 가능
디자인 시스템을 완전히 커스터마이징
- Radix UI + Tailwind 또는 Vanilla Extract
- 이유: 모든 UI를 직접 설계할 수 있어 Figma 1:1 대응에 최적
Chakra UI와 유사한 방식으로 점진적 마이그레이션
- Ark UI
- 이유: Chakra와 API 패턴 유사, 기존 상태 관리 훅 재활용 가능
결론?
shadcn/ui가 가장 적합함. 러닝 커브가 낮고, 이미 구성된 컴포넌트 구조 덕분에 실무 적용이 빠르며, 추후 Radix UI로 확장하거나 커스터마이징할 수 있는 유연성도 확보되어 있음.
shadcn > ark-ui > Radix > Headleses ?