안녕하세요, 소플입니다.

일반적으로 스타일이 없는 형태의 UI 컴포넌트 라이브러리를 Headless UI 라이브러리라고 부릅니다.

약 2년 전쯤에 작성했던 매거진을 통해서 관련 내용을 다루기도 했었죠.
(🔗 관련 링크: 스타일이 없는 UI 라이브러리가 있다?!)

당시에는 조금 생소한 개념이었지만 지금은 많은 회사와 개발자들이 Headless UI 라이브러리를 사용하고 있습니다.

그리고 그 중에 가장 대표적인 것이 바로 Radix UI Primitives입니다.

하지만 최근들어 Radix가 아닌 새로운 Headless UI 라이브러리가 주목받고 있는데요,

이번 매거진에서는 떠오르고 있는 Headless UI 라이브러리인 Base UI에 대해 알아보도록 하겠습니다.

---

Radix UI의 한계 🥲

Radix UI는 초기에 뛰어난 접근성과 로우레벨 컴포넌트로 주목받았습니다.

그리고 현재 Headless UI 라이브러리의 대표주자로 자리잡게 되었죠.

참고로 요즘 UI 컴포넌트 라이브러리들 중에서 가장 많이 쓰이는 Shadcn UI 또한 Radix UI의 컴포넌트를 기반으로 만들어졌습니다.

https://www.radix-ui.com/primitives

Radix UI는 빠르게 성장했지만, 점차 업데이트 속도가 느려지고 문서화도 부족해지는 등 몇 가지 문제점이 드러나기 시작했습니다.

또한 Radix Themes와 같은 스타일이 입혀진 UI 라이브러리를 출시하면서, Radix의 정체성에도 혼란을 야기하게 되었습니다.

Shadcn UI를 만든 Shadcn이 Radix UI에 대한 현실과 생각을 적은 트윗을 올리기도 했죠.

Some thoughts on Radix, component libraries, and shadcn/ui.

We’re at that point in the web dev cycle where we’re talking about component libraries again. That’s okay. With Radix receiving fewer updates, it’s a conversation worth having.

Let me start with this and I’ll bold it:…

— shadcn (@shadcn) June 20, 2025

이러한 배경 속에서 Base UI가 새롭게 떠오르기 시작했습니다.

---

Base UI의 등장 ✨

Base UI의 공식 홈페이지에서는 Base UI를 아래와 같이 소개하고 있습니다.

https://base-ui.com/

한국말로 번역해보면 접근성이 뛰어난 웹앱과 디자인 시스템을 만들기 위한 스타일이 없는 UI 컴포넌트 라이브러리가 됩니다.

기본적인 철학이나 목표는 다른 Headless UI 라이브러리와 비슷하다고 볼 수 있습니다.

하지만 그 바로 아래에 나오는 문장이 굉장히 인상적인데요,

Base UI는 Radix, Floating UI, 그리고 Material UI를 만든 개발자들이 만든 것이라고 소개하고 있습니다.

Base UI는 Material UI를 만든 MUI에서 만든 오픈소스 프로젝트입니다.

MUI에서 만들었다는 사실만으로도 충분히 주목받을만 하지만,

Radix UI와 Floating UI, Material UI의 개발자들이 참여했다는 점에서 더 크게 주목받는게 아닐까 싶습니다.

각 분야에서 최고봉에 있는 프로젝트를 만든 사람들을 모아서 만든 것이니까요.

특히 Radix UI를 만든 Colm Tuite와 Vlad Moroz가 팀원으로 있다는 사실은 가까운 미래에 Base UI가 Radix UI를 대체할 수도 있다는 생각이 들게 합니다.

---

Base UI의 특징 📌

Base UI는 접근성이 뛰어난 사용자 인터페이스 구축에 중점을 두고 있습니다.

그래서 접근성, 성능, 그리고 개발자 경험에 초점을 맞추어 지속 가능한 방식으로 완전한 오픈소스 UI 컴포넌트 세트를 제공하는 것을 목표로 하고 있습니다.

https://github.com/mui/base-ui

이러한 Base UI의 특징은 다음과 같습니다.

1. Headless
   • Base UI 컴포넌트는 스타일이 없고, CSS를 번들하지 않으며, 특정 스타일링 솔루션을 강요하지 않음
   • 개발자는 애플리케이션의 CSS 레이어에 대한 완전한 제어권을 유지할 수 있음
   • Tailwind CSS, CSS Modules, 일반 CSS, CSS-in-JS 또는 기타 선호하는 스타일링 엔진과 호환됨
2. Accessibility
   • Base UI 컴포넌트는 WAI-ARIA 디자인 패턴을 준수함
   • 다양한 플랫폼, 디바이스, 브라우저, 스크린 리더 및 기타 환경에서 테스트 완료
3. Composable
   • 컴포넌트 API는 완전히 개방되어 있어 각 노드에 직접 접근할 수 있음
   • 쉽게 부분을 추가하거나 제거할 수 있으며, 원하는 대로 래핑할 수 있음

그리고 Radix UI에서 편리하게 마이그레이션할 수 있도록, 최대한 비슷하게 컴포넌트와 API를 설계했다는 점도 큰 특징이라고 볼 수 있습니다.

---

언제 사용해야 할까? 🤔

그렇다면 Base UI는 언제 사용하면 좋을까요?

Headless UI 라이브러리는 스타일이 없기 때문에, 개발자가 원하는 대로 디자인을 입힐 수 있다는 점이 가장 큰 특징이죠.

그래서 Base UI 또한 아래와 같은 경우에 사용하면 좋습니다.

• 브랜드의 고유한 디자인 시스템을 구축하려는 경우
• 완전한 스타일 제어가 필요한 프로젝트를 하는 경우
• 접근성을 중시하는 애플리케이션을 개발하려는 경우
• 기존 스타일링 시스템과의 완벽한 통합이 필요한 경우

즉, Base UI는 자유로운 스타일링과 높은 접근성이 필요한 프로젝트에 적합한 선택지라고 할 수 있습니다.

스타일에 구애받지 않는 헤드리스 컴포넌트를 통해 완전한 디자인 자유도를 제공하면서도, 접근성과 성능을 보장하는 것이죠.

---

마치며

개인적으로는 앞으로 Base UI가 Radix UI를 완벽하게 대체하게 될지 굉장히 궁금한데요,

아직은 Radix UI가 더 많은 사용자층을 확보하고 있고, Base UI는 초기 단계이기 때문에 시간이 좀 더 지나야 알 수 있을 것 같습니다.

하지만 지금 시점에 새로운 프로젝트에서 Headless UI 라이브러리를 사용해야 한다면,

Base UI를 사용하는 것이 장기적인 유지보수 관점에서 더 낫지 않을까 싶습니다.

---

🔗 참고 링크

• https://base-ui.com/
• https://github.com/mui/base-ui

---

이번 매거진에서는 떠오르고 있는 Headless UI 라이브러리인 Base UI에 대해 알아보았습니다.

각자 개발하려는 프로젝트에서 Headless UI 라이브러리를 쓸 일이 생기면, Base UI를 한 번 사용해보시면 좋을 것 같습니다.

저는 다음에 또 유익한 글로 찾아뵙겠습니다!

지금까지 소플이었습니다. 감사합니다 😀