Oat – 초경량, 시맨틱, 무의존성 HTML UI 컴포넌트 라이브러리

Source: Hacker News

의미론적이고, 최소한이며, 의존성이 전혀 없는. ~8KB CSS와 JS.

Oat는 초경량 HTML + CSS 기반의 의미론적 UI 컴포넌트 라이브러리로, 의존성이 전혀 없습니다. 프레임워크, 빌드, 혹은 개발 복잡성이 없으며, 작은 CSS와 JS 파일만 포함하면 가장 흔히 필요한 컴포넌트와 요소들을 갖춘 깔끔한 웹 애플리케이션을 바로 만들 수 있습니다.

의미론적 태그와 속성은 클래스 없이도 기본적으로 컨텍스트에 맞게 스타일링되며, 모범 사례를 강제하고 마크업에 클래스가 남는 것을 줄여줍니다. 일부 동적 컴포넌트는 WebComponents이며 최소한의 JavaScript만 사용합니다.

귀리 조각처럼 가볍다

6 KB CSS, 2.2 KB JS, 압축 + gzip 적용.
그게 전부입니다.

의존성 제로

어떠한 JS 또는 CSS 프레임워크·라이브러리에도 의존하지 않는 완전 독립형입니다. Node.js 생태계의 불필요한 쓰레기나 부피를 전혀 포함하지 않습니다.

의미론적 HTML

```, , 와 같은 네이티브 요소와 role="button" 같은 의미론적 속성이 직접 스타일링됩니다. 클래스가 필요 없습니다.

접근성

의미론적 HTML과 ARIA 역할이 전반에 걸쳐 사용(그리고 많은 경우 강제)됩니다. 모든 컴포넌트와 요소에 대해 올바른 키보드 네비게이션을 지원합니다.

손쉬운 커스터마이징

몇 개의 CSS 변수를 오버라이드하면 전체 테마를 쉽게 커스터마이징할 수 있습니다. “에 data-theme="dark" 를 추가하면 번들된 다크 테마로 자동 전환됩니다.

왜 만들었나요?

사실상 모든 JavaScript UI 라이브러리와 프레임워크가 가지고 있는 과도한 설계, 복잡성, 그리고 의존성 지옥에 대한 끝없는 좌절감 때문에 만들게 되었습니다. Node.js 생태계의 러그 풀과 락인 문제에 대한 지속적인 PTSD도 한몫했습니다.
JavaScript 생태계 혼란에 대해 더 읽어보기

Node.js 생태계 트라우마를 겪는 다른 사람들에게 도움이 될까 싶어 공개합니다.

제 목표는 장기적으로 JavaScript 생태계 쓰레기에 신경 쓰지 않고도 내 프로젝트에 사용할 수 있는, 단순하고 최소한이며, 바닐라 표준 기반 UI 라이브러리를 만드는 것입니다. 외관과 느낌은 shadcn 미학에서 영감을 받았습니다.