Headless UI가 뭘까 ?

프로젝트를 진행하다보면 생산성 향상을 위해 자체 컴포넌트 생성보다 Component UI라이브러리를 사용하기도 한다.
Component UI라이브러리에는 스타일이 적용되어 있기 때문에 개발하고자하는 스타일을 새로 입혀야 한다. 이 과정에서 CSS 우선 순위 때문에 피하려 해도 어쩔 수 없이 !important를 사용하게 되는데.. 🥲 HeadlessUI를 사용하면 !important의 지옥에서 벗어날뿐만 아니라 Component UI에서 reset.css를 적용한 듯한 효과를 볼 수 있다!
ㅤ
ㅤ
그래서 그게뭔데? 🧐

Headless UI

스타일이 제공되지 않고 기능만 제공되는 라이브러리이다.
UI 라이브러리와는 다르게 디자인이 적용되어있지 않으며, 원하는 대로 스타일을 완전히 커스텀 할 수 있다.

기능에 집중되어있어 대부분 접근성이 높으며, 스타일 파일이 없기 때문에 불필요한 CSS가 없으니 성능이 최적화되고, 번들 크기도 가볍다. 다만, 기능만 제공되기 때문에 기존 UI 라이브러리처럼 스타일과 기능이 모두 갖춰진 상태로 바로 사용할 수는 없다. 원하는 방식으로 스타일 적용 및 기능을 설정해야 한다.

종류

HeadlessUI, Ariakit, Reakit 등 다양한 Headless UI가 있지만, 인기도와 접근성면에서 라이브러리 세가지만 소개해본다.

Radix UI

접근성을 고려한 UI 프리미티브 컴포넌트

• 웹 접근성에 강점을 두고 설계되어 있으며, 자동 ARIA 속성 및 키보드 접근성을 지원
• 필요한 패키지만 설치해 사용 가능
• themes 패키지 사용 시 Radix 제공 테마 적용 가능

Shadcn/ui (인기 👍)

Radix UI를 활용한 Tailwind 기반 컴포넌트 생성기
(shadcn/ui는 Radix UI를 기반으로 하지만, 꼭 Radix UI 컴포넌트만 포함하는 건 아님)

• RadixUI 기반의 접근성 제공
• Tailwind로 설정된 기본스타일 적용. components/ui/컴포넌트명.tsx에서 기본적용된 Tailwind 스타일 삭제 가능

  컴포넌트 생성기란?
  보통 패키지 설치의 경우
  : pnpm/npm으로 설치 →node_modules에 추가되어 사용페이지 상단에 import해서 사용
  ㅤ
  컴포넌트 생성기의 경우
  : pnpm/npm으로 기본 패키지 설치 → npx shadcn add button와 같이 컴포넌트 단위로 추가 → 패키지 설치 시 설정한 파일로 /components/ui/button.tsx컴포넌트 생성

React Aria (접근성 👍)

Adobe에서 개발한, 접근성에 특화된 라이브러리

• 완벽한 WCAG 준수 및 강력한 ARIA 지원
• 훅(hook) 기반 API를 제공하며, 개발자가 직접 컴포넌트를 구성해야함

* React Aria의 기능을 활용할 수 있도록 돕는 컴포넌트 생성기 Jully UI가 있음 (shadcn/ui와는 다르게 기본 스타일을 제공하지는 않음)

WCAG란?
웹 콘텐츠 접근성 지침(Web Content Accessibility Guidelines)으로 W3C의 웹 접근성 표준 그룹에서 게시한 권장 사항이다. 이 지침은 장애가 있는 사용자뿐만아니라 다양한 환경에서도 웹 콘텐츠에 평등하게 접근할 수 있도록 돕기 위해 마련되었다.

접근성이 좋다며?

Radix UI와 React Aria는 모두 접근성이 뛰어나다고 하지만 어떤 차이가 있을까?
Shadcn/ui는 Radix UI를 기반으로 하므로 비교 대상에서 제외하고, 두 라이브러리를 직접 비교해본다.

	RadixUI	React Aria
ARIA 속성 자동 적용	✅	✅
키보드 내비게이션	✅ 복잡한 특정 컴포넌트에 제공 (ex. Tabs, Dialog 등)	✅ 모든 컴포넌트에 제공
스크린 리더 지원	✅	✅ (W3C의 ARIA Authoring Practices Guide 기반)
포커스 이동	✅ 일부 컴포넌트에서 사용자 상호작용에 따라 자동 이동 (ex. AlertDialog)	✅ 스크린 리더 사용자도 고려한 포커스 이동 지원
모바일 환경 지원	❌ 모바일 환경에 대한 내용 없음	✅

---

📑 정리

	RadixUI	Shadcn/ui	React Aria
스타일	❌ (필요 시 @radix-ui/themes 사용)	기본 Tailwind스타일 제공	❌
특징	컴포넌트 제공(import 사용)	자동 컴포넌트 생성	훅만 제공, 컴포넌트 생성 필요
접근성	✅	✅ (Radix 기반)	✅ (WCAG 완전 준수)
컴포넌트 갯수	30+	20+	40+
설치방식	컴포넌트 개별 설치 가능	패키지 설치 후 컴포넌트 추가(npx add)	컴포넌트 개별 설치 가능
사용 난이도	쉬움	쉬움 (Tailwind 익숙하면 더 편함)	상대적으로 높음 (컴포넌트 구현)

---

Headless UI, 언제 쓰는가?

완전한 스타일 커스텀이 필요한 경우, 번들 크기를 최소화하고 싶은 경우 접근성을 특히 신경 써야 하는 경우에 사용하면 좋을 것 같다. 다만, 세부적인 옵션 조정 및 설정이 필요하기도하고, React Aria의 경우 컴포넌트를 생성해야하기 때문에 Component UI보다 설정과 구현에 더 많은 공수가 들 수 있다.

반대로 빠른 개발이 필요하거나 디자인이 크게 중요하지 않다면 Component UI를 사용하는게 효율적일 수 있다. 프로젝트의 성격과 요구사항을 고려하여 적절한 UI 라이브러리를 선택하는 것이 중요하다. 각 방식의 장단점을 이해하고 상황에 맞게 유연하게 활용하자!

참고
Radix UI
Shadcn/ui
React Aria
스타일이 없는 UI 라이브러리가 있다?!
shadcn ui 자세히 알아보기
shadcn/ui 를 이용한 공유 UI 컴포넌트 사용 경험