피드로 돌아가기
Pick your shadcn base, your style, your icons
Dev.toDev.to
Frontend

Registry URL 동적 파라미터화를 통한 UI 프레임워크 설정 자동화

Pick your shadcn base, your style, your icons

shadcncraft2026년 4월 28일2intermediate

Context

기존 shadcncraft 구성 요소는 Radix UI, 표준 스타일, Lucide 아이콘이라는 고정된 기본값을 사용함. 이로 인해 사용자가 다른 라이브러리를 채택한 프로젝트에서는 설치 후 수동으로 코드를 수정해야 하는 오버헤드가 발생함.

Technical Solution

  • Registry URL 구조를 {name}에서 {style}/{name}으로 변경하여 설치 시점의 설정값을 서버로 전달하는 동적 라우팅 설계
  • Base UI와 Radix UI를 모두 지원하는 추상화 레이어를 통해 프로젝트 기반 UI 라이브러리 선택권 보장
  • 7종의 shadcn 프리셋 스타일과 5종의 아이콘 라이브러리를 Registry 레벨에서 매핑하여 일관된 출력물 생성
  • 프로젝트의 components.json 설정을 Source of Truth로 정의하여 설치 단계에서 환경 설정을 자동 반영하는 메커니즘 구축
  • Live Customizer를 통해 설치 전 Base, Style, Icon 조합을 미리 확인하는 Pre-install 프리뷰 시스템 도입

- 라이브러리 배포 시 고정된 설정 대신 사용자 프로젝트 설정(Config)을 주입받는 파라미터 기반 Registry 설계 검토 - UI 컴포넌트 설치 과정에서 발생하는 수동 수정 작업을 줄이기 위한 Config-driven Installation 패턴 적용 - 디자인 시스템의 일관성을 위해 Figma와 코드 간의 토큰 및 스타일 매핑 구조 일치화

원문 읽기