Introduction

공공기관 웹사이트 만들 때마다 KRDS 가이드 찾아보고, 접근성 체크하고, 디자인 시스템 구축하느라 지치셨죠? HANUI가 대신 해드립니다.

공공기관 웹 개발, 뭐가 문제인가요?

  • KRDS 가이드 읽다가 하루가 끝남
  • 색상, 타이포그래피, 간격... 매번 처음부터 설정
  • "이거 접근성 통과해요?" 불안한 마음으로 납품
  • 프로젝트마다 똑같은 컴포넌트 또 만들기
  • 디자이너: "KRDS 따라 해주세요" / 개발자: "...네"

HANUI가 뭔데요?

KRDS 표준 + KWCAG 2.2 접근성이 기본 탑재된 React 컴포넌트 라이브러리입니다. 그냥 가져다 쓰면 됩니다.

핵심만 말하면

  • KRDS 2.2 표준 준수 — 색상, 타이포, 간격, 컴포넌트 다 맞춰놨음
  • KWCAG 2.2 접근성 기본 탑재 — 키보드 네비게이션, ARIA, 포커스 관리 자동
  • 소스 코드 복사 방식 — npm 의존성 걱정 없이 내 프로젝트에 복사해서 자유롭게 수정
  • TypeScript + Tailwind — 요즘 프론트엔드 스택 그대로

왜 만들었나요?

공공기관 SI 프로젝트 해본 분들은 아실 거예요. 매번 KRDS 가이드 뒤지고, 접근성 체크리스트 확인하고, 비슷한 컴포넌트 또 만들고... 이 반복 작업이 너무 비효율적이었습니다.

그래서 만들었습니다. 한 번 제대로 만들어서, 다 같이 쓰자.

솔직히 말하면: 아직 베타입니다. 모든 KRDS 컴포넌트가 완성된 건 아니에요. 하지만 있는 것들은 제대로 만들었고, 계속 추가하고 있습니다.

기술 스택

React + TypeScript

타입 안정성과 자동완성으로 개발 생산성을 높입니다. 모든 컴포넌트에 완벽한 타입 정의가 제공됩니다.

Vue 3도 지원합니다! vue.hanui.io에서 Vue 버전 문서를 확인하세요.

Tailwind CSS

KRDS 색상, 타이포그래피, 간격 시스템이 Tailwind 설정에 녹아 있습니다.text-krds-primary-60, bg-krds-gray-10 같은 클래스로 바로 사용 가능합니다.

Radix UI (일부 컴포넌트)

Dialog, Tabs 같은 복잡한 인터랙션이 필요한 컴포넌트는 Radix UI Primitives를 기반으로 만들었습니다. 접근성 로직이 자동으로 처리되어 ARIA, 키보드 네비게이션을 신경 쓸 필요가 없습니다.

소스 코드 복사 방식

shadcn/ui 스타일입니다. CLI로 컴포넌트를 내 프로젝트에 복사해서 사용합니다.

  • npm 패키지 버전 충돌 걱정 없음
  • 내 프로젝트에 맞게 자유롭게 수정 가능
  • 필요한 컴포넌트만 가져가서 번들 사이즈 최적화

이런 분들에게 추천

  • 공공기관 SI 프로젝트를 진행하는 개발팀
  • KRDS 준수가 필수인 정부/지자체 웹사이트 개발
  • 웹 접근성을 제대로 지원해야 하는 프로젝트
  • 매번 똑같은 컴포넌트 만들기 지친 프론트엔드 개발자

브라우저 지원

최신 브라우저를 지원합니다. IE는 지원하지 않습니다. (2025년이니까요)

  • Chrome, Edge, Safari, Firefox — 최신 2개 버전