소개
KRDS를 프로젝트 코드로 가져와 구축하기 위한 오픈 코드 레지스트리입니다.
krdscn/ui는 패키지형 컴포넌트 라이브러리가 아닙니다. KRDS 컴포넌트 라이브러리를 여러분의 프로젝트 안에 구축하는 방식입니다.
React 프로젝트에서 컴포넌트 소스 코드를 직접 가져와 서비스에 맞게 수정하는 방식은 점점 더 보편적인 선택지가 되고 있습니다. 하지만 KRDS를 매번 프로젝트마다 수동으로 커스터마이징하면 색상, 간격, 포커스, 반경, 접근성 패턴이 조금씩 달라지고 가이드라인 정합성을 유지하기 어려워집니다.
공개된 krds-react는 패키지를 설치해 사용하는 라이브러리 형태에 가깝습니다. 빠르게 사용할 수 있다는 장점은 있지만, 컴포넌트의 최상위 소스 코드를 프로젝트에 두고 직접 읽고 수정하며 확장하는 모델과는 다릅니다.
krdscn/ui는 이 간극을 줄이기 위해 만들었습니다. KRDS에 맞춰 확장할 컴포넌트 소스를 원격 레지스트리로 제공합니다. 설치하면 컴포넌트 코드가 프로젝트로 들어오고, 팀은 그 코드를 기준으로 일관된 KRDS UI를 만들 수 있습니다.
krdscn/ui는 다음 원칙을 따릅니다.
- 오픈 코드: 컴포넌트의 최상위 코드를 프로젝트 안에서 직접 확인하고 수정할 수 있습니다.
- 레지스트리 소스: 컴포넌트, 유틸리티, 훅을 프로젝트 안으로 복사해 직접 수정할 수 있습니다.
- 일관된 조합성: 예측 가능한 API와 합성 방식을 유지합니다.
- Radix 호환성: 기존 Radix primitive 생태계와 자연스럽게 맞물리도록 구조를 유지합니다.
- 서비스형 레지스트리: 저장소를 복제해 쓰는 방식이 아니라 CLI가 읽을 수 있는 레지스트리 URL로 제공합니다.
오픈 코드
krdscn/ui는 컴포넌트를 패키지 내부에 숨기지 않습니다. 설치한 컴포넌트는 여러분의 코드베이스에 들어오며, 서비스 정책과 화면 요구사항에 맞게 수정할 수 있습니다.
일반적인 라이브러리에서는 버튼 하나의 상태나 스타일을 바꾸기 위해 래퍼를 만들거나 override를 쌓아야 하는 경우가 많습니다. krdscn/ui에서는 설치된 button.tsx를 직접 수정해 팀의 디자인 시스템으로 발전시킬 수 있습니다.
설치
전체 컴포넌트를 한 번에 가져오려면 다음 명령어를 사용하세요.
개별 컴포넌트도 같은 방식으로 설치할 수 있습니다.
참고 자료
- KRDS 공식 사이트와 UI/UX 가이드라인
- KRDS React Storybook
krds-react,krds-uiux-dev- Registry workflow