초경량, 제로 의존성, 시맨틱 HTML·CSS·JS UI 라이브러리 Oat

• HTML과 CSS 기반의 초경량 UI 컴포넌트 라이브러리로, 빌드 과정이나 프레임워크 의존성이 전혀 없는 구조
• 6KB CSS와 2.2KB JS(압축 및 gzip 기준)만으로 구성되어, 웹 애플리케이션에 필요한 주요 UI 요소를 즉시 사용 가능
• <button>, <input>, <dialog> 등 시맨틱 HTML 요소를 직접 스타일링하며, 클래스 사용을 최소화해 코드 오염을 줄임
• 접근성(Accessibility) 을 고려해 ARIA 역할과 키보드 내비게이션을 기본 지원
• 복잡한 JS 생태계의 의존성과 과도한 엔지니어링을 벗어나, 단순하고 표준 기반의 장기 사용 가능한 UI 구성을 목표로 함

Oat 개요

• Oat은 HTML + CSS 기반의 초경량 시맨틱 UI 컴포넌트 라이브러리로, 외부 의존성이 전혀 없는 형태
  • 프레임워크, 빌드 도구, 개발 환경 설정이 필요하지 않음
  • 작은 CSS와 JS 파일만 포함하면 즉시 사용 가능
• 약 8KB(6KB CSS + 2.2KB JS) 크기로, 웹 애플리케이션의 기본 UI를 빠르게 구성할 수 있음
• 주요 컴포넌트로 Button, Card, Dialog, Table, Tabs, Tooltip, Toast, Sidebar 등이 포함됨

시맨틱 HTML과 접근성

• 시맨틱 태그와 속성을 기반으로 스타일이 자동 적용되어, 클래스 지정 없이도 일관된 디자인 유지
  • 예: <button>, <input>, <dialog> 등 기본 HTML 요소에 직접 스타일 적용
  • role="button" 같은 시맨틱 속성도 자동 인식
• ARIA 역할과 키보드 내비게이션을 전 구성요소에서 지원
  • 접근성 표준을 강제 적용해 사용자 경험 향상

제로 의존성과 단순성

• JS나 CSS 프레임워크, 라이브러리 의존성 없음
  • Node.js 생태계의 복잡성과 불필요한 의존성 문제를 완전히 배제
  • 빌드나 패키지 관리 과정 없이 바로 사용 가능
• 일부 동적 컴포넌트는 WebComponents로 구현되어 최소한의 JS만 사용

커스터마이징과 테마

• CSS 변수를 통해 손쉽게 테마 색상과 스타일 조정 가능
  • data-theme="dark" 속성을 body에 추가하면 자동으로 다크 테마 적용
• 전체적인 디자인은 shadcn 미학의 영향을 받음

제작 배경

• 기존 JavaScript UI 프레임워크의 과도한 복잡성과 의존성 문제에 대한 불만에서 출발
  • Node.js 생태계의 “dependency hell”과 “lock-in” 문제를 피하기 위한 목적
• 단순하고 표준 기반의 장기적으로 유지 가능한 UI 라이브러리를 직접 사용하기 위해 제작
• 개발자는 Oat을 통해 불필요한 빌드 과정 없이 즉시 사용 가능한 UI 구성을 구현 가능