# [[Headless UI|Headless UI]]

## 📌 Brief Summary
Headless UI(헤드리스 UI)는 시각적인 스타일이나 마크업 없이 컴포넌트의 상태, 동작 로직, 그리고 접근성(A11y) 기능만을 제공하는 UI 설계 패턴이자 컴포넌트 라이브러리 형태입니다 [1-3]. 이를 통해 개발자는 복잡한 내부 상태 관리나 브라우저별 상호작용의 어려움을 덜고, 자신만의 시각적 요소(Visuals)와 디자인 시스템을 자유롭게 입힐 수 있습니다 [2, 4]. 특히 고도로 맞춤화된 브랜딩이 필요한 앱이나 [[Tailwind CSS|Tailwind CSS]]와 같은 유틸리티 우선 프레임워크와 결합할 때 매우 강력한 확장성을 발휘합니다 [2, 4].

## 📖 Core Content
* **개념 및 역할**: Headless 컴포넌트는 스타일이 지정되지 않은 로직 전용 훅(hooks) 또는 컴포넌트를 의미합니다 [1]. 시각적 표현(UI)에 대한 결정권을 전적으로 소비자(Consumer)에게 위임하며, 컴포넌트 자체는 상태와 동작 논리만을 제공합니다 [4, 5].
* **확장성 및 장점**: 로직과 마크업이 명확하게 분리되어 있어 컴포넌트의 조합성(Composability)이 매우 뛰어납니다 [3]. 특정 프레임워크나 디자인 시스템에 종속되지 않고 접근성이 높은 라이브러리를 구축하는 데 적합합니다 [3]. 또한, UI 없이도 내부 로직(Hook 등)을 개별적으로 테스트할 수 있어 관심사의 분리가 명확해집니다 [6].
* **생태계 및 통합**: 2025년 기준 모던 프론트엔드 개발에서는 [[Radix UI|Radix UI]]나 Tailwind 제작자가 만든 Headless UI 라이브러리를 활용하는 것이 주요 트렌드입니다 [2]. 이러한 라이브러리들은 드롭다운, 다이얼로그와 같은 복잡한 컴포넌트의 로직을 처리해주며, 개발자는 Tailwind CSS를 활용해 스타일링만 담당함으로써 시각적 일관성과 접근성을 동시에 확보할 수 있습니다 [2, 7].
* **주요 사용 사례 (Use Cases)**: 특정한 스타일 오피니언(Opinions)이 고정된 컴포넌트 라이브러리를 피하고, 브랜드 맞춤형 UI를 완벽하게 통제하고 싶을 때 이상적입니다 [4, 5]. 대표적인 예시로는 로직만 노출하고 UI 정의를 개발자에게 맡기는 Down[[Shift|Shift]]의 `useCombobox()` 등이 있습니다 [3].

## 🔗 Knowledge Connections
- **Related Topics:** [[Tailwind CSS|Tailwind CSS]], Compound Components, Design Tokens, [[Accessibility (A11y)|Accessibility (A11y]]
- **Projects/Contexts:** [[Radix UI|Radix UI]], [[Downshift|Downshift]]
- **Contradictions/Notes:** 소스에 따르면 Headless 컴포넌트는 오직 로직과 상태만을 제공하여 시각적 디자인을 사용자에게 맡기는 반면, Styled 컴포넌트(의견이 반영된 컴포넌트)는 사전 정의된 스타일을 함께 제공한다는 점에서 명확한 차이와 대비를 보입니다 [5].

---
*Last updated: 2026-04-26*