본문 바로가기

한국 서비스의 입력 칸,
이제 처음부터 만들지 마세요

전화번호·사업자등록번호·금액·약관 동의처럼 매번 직접 만들던 부품을 React 컴포넌트로 드려요. 모든 컴포넌트는 접근성 검사를 통과해야 배포돼요.

npm install @bestow-ui/react
시작하기 문서 보기브라우저에서 바로 써 보기

지금 버전은 2.1.0 이에요. React 18·19 와 Next.js App Router(서버 컴포넌트)를 지원하고, MIT 라이선스예요.

직접 입력해 보세요

하이픈·쉼표는 입력하는 동안 붙고, 사업자등록번호는 10자리를 채우면 검증 공식으로 확인해요.

대표색
원
약관 동의
이 색의 버튼 글자 대비는 라이트 5.9:1, 다크 5.9:1 이에요(기준 4.5:1). 색을 어떻게 고르든 기준을 넘도록 밝기를 조정해요.

무엇이 다른가요

한국 서비스 키트

약관 전체 동의, 문자 자동 채우기가 되는 인증번호, 검증 공식이 들어간 사업자등록번호, “12만 5,000원” 으로 읽어 주는 금액 칸, 카카오 우편번호 주소, 일요일부터 시작하는 달력까지 13종이에요. 서식·검증 함수만 필요하면 React 없이 쓰는 @bestow-ui/korean-utils 도 있어요.

한국 서비스 키트 문서

검사로 증명하는 접근성

모든 스토리를 Chromium·WebKit·Firefox 에서 라이트·다크 두 테마로 axe 검사해야 배포돼요. 고대비 모드, 320px 리플로, 기본 글꼴 2배도 확인하고, VoiceOver·NVDA 로 직접 들어 본 기록과 KWCAG 2.2 33개 항목별 대응 근거를 공개해요.

KWCAG 2.2 대응 근거

대표색 하나로 만드는 테마

브랜드 색 하나를 넣으면 라이트·다크 색 세트를 만들고, 글자 대비 4.5:1 과 포커스 링 3:1 을 지켜요. 위 데모에서 색을 바꿔 보세요. 모드를 바꿔도 브랜드는 유지되고, Modal·Toast 처럼 따로 띄우는 요소도 따라가요.

테마 빌더

쓰는 만큼만 받아요

Button 하나
1.7 kB
NativeSelect 로 만든 입력 폼 7종
약 4 kB
모든 컴포넌트의 CSS
약 11 kB

minify + brotli 기준이에요. 스타일은 빌드 때 CSS 파일로 뽑혀 런타임 비용이 없고, 크기 한도는 PR 마다 CI 로 확인해요. 스타일은 CSS 레이어(@layer bestow) 안에 있어 className·Tailwind 로 덮어쓰기 쉬워요.

Next.js 에서 시작하기

  1. 설치해요

    npm install @bestow-ui/react

  2. 스타일을 한 번 불러오고 ThemeProvider 로 감싸요

    // app/layout.tsx
import '@bestow-ui/react/styles.css';

// app/providers.tsx ('use client')
<ThemeProvider theme="system">{children}</ThemeProvider>

  3. 컴포넌트를 써요

    <PhoneNumberInput label="휴대폰 번호" value={phone} onValueChange={setPhone} />
전체 설정 방법(다크 모드·브랜드 테마·서버 컴포넌트)

더 알아보기

  • 컴포넌트 문서(Storybook)

    모든 컴포넌트를 직접 조작해 보고, 키보드·스크린리더 동작을 확인해요.

  • 서식·검증 함수

    전화번호 하이픈, 사업자등록번호 검증, 금액 한글 읽기 같은 함수를 직접 입력해 보고 가져가요. React 없이도 써요.

  • Next.js 예제 앱

    회원가입·주문 관리 화면을 App Router 로 만든 예제예요.

  • 언제 무엇을 쓰나

    Select 와 NativeSelect, Modal 과 Drawer 처럼 비슷한 컴포넌트 고르는 기준이에요.

  • llms.txt

    Cursor·Claude 같은 AI 코딩 도구에 넣는 문서예요.

  • GitHub

    소스, 이슈, Discussions, 변경 기록이 있어요.