▲

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

(oat.ink)
1P by GN⁺ 19시간전 | ★ favorite | 댓글 1개
  • 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 구성을 구현 가능
▲
GN⁺ 19시간전  [-]
Hacker News 의견들

  • 나는 semantic HTML 요소만으로 웹앱의 올바른 효과를 내보려는 시도가 멋지다고 생각함
    “classless CSS” 패러다임을 지향하는 점도 마음에 듦. 하지만 컴포넌트 카탈로그를 살펴보면 semantic 요소와 기본 요소, data 태그와 aria 속성, 그리고 CSS 클래스가 뒤섞여 있어 일관성이 부족해 보임
    그래도 aria 속성에 따라 CSS가 반응해 스타일링되는 점은 인상적임. React 같은 무거운 컴포넌트 라이브러리 대신 aria-first 접근으로 사고하게 만드는 좋은 연습이 될 것 같음
    특히 이 컴포넌트 라이브러리에 네이티브 사이드바가 포함된 점이 좋음. 대부분의 라이브러리는 재사용 가능한 작은 컴포넌트에만 집중하지만, 이건 aside > nav > ul 구조로 main 옆에 자연스럽게 배치되어 깔끔함

  • 이 사이트를 보고 깜짝 놀랐음. 링크를 탭하자마자 페이지가 즉시 로드되어 거의 채찍처럼 빠르게 느껴졌음
    인터넷에서 이런 속도를 잊고 있었는데, 이제 웹 개발에 도전해보고 싶어짐

    • 사이트를 만들 거라면 Astro로 해보길 추천함. 로딩 속도가 정말 미쳤음
    • 참고로 Hacker News도 비슷한 속도감을 보여주는 좋은 예시임

  • 이 프로젝트는 내가 DaisyUI에서 기대했던 단순함을 실제로 구현한 느낌임
    여기에 Datastar를 조합하면 웹 표준에 기반한 강력한 조합이 될 것 같음. “생태계”보다는 진짜 웹 기술에 기대는 접근임

  • fosiao/rclone-webui-oat이
    기존의 무겁고 유지보수되지 않는 rclone-webui-react를 대체하는 듯함

  • 프론트 페이지에 링크된 블로그 글이 프레임워크 자체보다 더 흥미로운 논의를 이끌 것 같음
    나는 업무상 Angular와 Next.js를 모두 다루는데, 점점 이 글의 관점에 공감하게 됨
    관련 글: JavaScript ecosystem is a hot mess

    • 좋은 링크임. 2021년 글이지만 여전히 유효한 통찰이 많음
      당시 논의: HN 스레드
    • 이 웹사이트는 정말 마음에 듦. 클릭에서 완전 로드까지 지연이 0초임
    • 참고로 2021년에도 같은 주제가 이곳에서 논의되었음

  • <aside>는 사이드바에 항상 적합한 semantic 요소는 아님
    본문과 간접적으로 관련된 콘텐츠에 쓰이는 게 원래 목적임. 사이드바가 그 정의에 맞을 때도 있지만 항상 그런 건 아님

  • 이런 식의 semantic drop-in CSS 라이브러리가 정말 많음. 새 프로젝트를 보는 건 즐거움
    품질은 제각각이지만, 이 사이트에는 semantic HTML을 위한 50개 이상의 drop-in 스타일시트가 정리되어 있음
    링크: Drop-in Minimal CSS 모음

    • 네가 “drop in”을 말한 거였구나. 하이픈 하나가 이렇게 중요할 줄은 몰랐음 :)
    • 이건 더 많은 주목을 받아야 함. 솔직히 원글보다 더 흥미로운 자료임
    • 너무 마음에 듦. 오른쪽 화살표로 스타일시트를 순환 탐색할 수 있음
    • 혹시 그 리스트 중에서 추천할 만한 스타일시트가 있는지 궁금함

  • 이 프로젝트는 10년 전의 Bootstrap 초기 버전을 떠올리게 함
    지금의 Bootstrap은 많이 비대해졌지만, 그 시절의 단순함이 느껴짐
    참고: Bootstrap 공식 사이트

  • 구형 브라우저에서도 테스트해준 점이 고마움. 정말 초미니멀 라이브러리임
    스크린샷: 이미지1, 이미지2

    • 궁금한데, 평소에도 구형 브라우저를 주 브라우저로 쓰는 이유가 있는지 알고 싶음

  • 나도 앱에서 비슷한 걸 시도했는데, 일부 semantic/functional 태그가 아직도 브라우저에서 제대로 지원되지 않음을 깨달음
    예를 들어 Safari에서 dialog 태그의 showModal을 쓰면 페이지 전체의 레이아웃을 다시 계산해서 Chromium보다 59배 느림
    그래도 이런 접근 방식 자체는 여전히 마음에 듦

답변달기