웹 개발에서 UI 컴포넌트 라이브러리는 필수 요소입니다. 하지만, 디자인이 강하게 결합된 컴포넌트는 프로젝트마다 커스터마이징이 어려운 경우가 많습니다. 이를 해결하기 위해 등장한 개념이 Headless UI입니다.

이 글에서는 Headless UI의 개념과 탄생 배경, 대표적인 프레임워크, 적용 시 주의할 점을 정리해 보겠습니다.

1. Headless UI란?

🏗 Headless UI의 개념

Headless UI는 디자인(스타일) 없이 기능만 제공하는 UI 라이브러리를 의미합니다. 즉, UI의 동작과 상태 관리 기능을 제공하지만, 스타일은 전혀 포함하지 않거나 최소한으로 유지됩니다.

✅ 주요 특징

• 스타일이 없는 UI 컴포넌트
• 완전한 커스터마이징 가능
• 프레임워크에 독립적 (React, Vue 등 다양한 환경에서 사용 가능)
• 접근성(Accessibility, A11Y)을 고려한 컴포넌트 제공

The Headless Component pattern

The Headless Component pattern

🚀 예제

예를 들어, 일반적인 UI 라이브러리(예: Material UI, Ant Design)의 Dropdown 컴포넌트는 기본적인 스타일과 테마가 포함되어 있습니다. 하지만, Headless UI의 Dropdown은 동작과 상태 관리만 제공하고, 디자인은 사용자가 직접 스타일링해야 합니다.

import { Menu } from '@headlessui/react'

export default function Dropdown() {
  return (
    <Menu>
      <Menu.Button>메뉴 열기</Menu.Button>
      <Menu.Items>
        <Menu.Item>
          {({ active }) => <a className={`${active ? 'bg-blue-500' : ''}`} href="#">옵션 1</a>}
        </Menu.Item>
      </Menu.Items>
    </Menu>
  )
}

👆 위 코드에서는 Menu, Menu.Button, Menu.Items 같은 기능적 컴포넌트만 제공되고, 스타일은 직접 작성해야 합니다