FEInterview Prep

Medium

Shadcn, 2025년 대규모 업데이트 출시

Shadcn Create 는 '첫 커밋 전에 디자인 시스템을 고르는' 시각적 빌더. Radix UI 단독 → Base UI 선택 가능 으로 기반 라이브러리 탈종속을 시작했다.

2025-12-28·6분 읽기
React빌드/도구CSS
원문 보기 ↗

핵심 요약

업데이트의 구성 요소는 다섯 가지다.

  1. Shadcn Create: 시각적 프로젝트 빌더. URL 파라미터에 모든 설정이 직렬화됨
  2. 5개 스타일: Vega(클래식), Nova(컴팩트), Maia(둥근), Lyra(각진), Mira(고밀도)
  3. 컬러·폰트·아이콘 시스템: gray/zinc/stone/neutral 기본 톤 + 테마 브랜드 컬러, Lucide/Tabler/HugeIcons
  4. 빌딩 블록: Elevenlabs/GitHub/Vercel/ChatGPT 등 프로덕션 패턴 컴포넌트
  5. v0 통합: 'Open in v0' 버튼으로 설정된 디자인 시스템 그대로 AI UI 생성

최종 출력은 CLI 명령어 한 줄.

npx shadcn@latest create \
  --preset 'https://ui.shadcn.com/init?base=base&style=vega&baseColor=stone&theme=violet&iconLibrary=hugeicons' \
  --template next

Shadcn 은 라이브러리가 아니라 '컴포넌트 소스 코드 배달 시스템' 이다. 2025 업데이트의 본질은 이 배달 단계에 시각적 설정 계층 을 끼워 넣은 것. URL 파라미터 → CLI preset → 실제 코드 생성 으로 연결되는 파이프라인을 이해해야 한다.

대부분의 Shadcn 프로젝트는 기본값이 너무 좋아서 결국 다 똑같이 생긴 문제가 있었다. 이번 업데이트의 실질 효과는 두 가지다.

  • 기반 UI 라이브러리 선택지: Radix UI → Base UI 로 교체 가능. Radix 유지보수 정체 + Base UI 활발한 개발이라는 생태계 현실을 반영
  • 프로젝트 초기화 시점에 디자인 시스템 확정: 나중에 globals.css 뜯어고치는 고통이 사라짐

shadcn/ui 를 쓰는 팀이라면 업그레이드 경로 (기존 Radix 컴포넌트 → Base UI) 를 판단할 수 있어야 한다.

학습 포인트

면접 답변으로 연결할 학습 포인트입니다.

URL 파라미터 = 공유 가능한 디자인 시스템

Shadcn Create 는 모든 설정을 URL 쿼리 스트링에 직렬화한다.

?base=base&theme=violet&font=dm-sans
&baseColor=stone&menuAccent=bold&iconLibrary=hugeicons

이 URL 을 그대로 npx shadcn create --preset <url> 에 넘기면 동일 설정이 재현된다. 디자이너-엔지니어 협업에서 Figma 링크 대신 shadcn URL 을 공유하는 워크플로우가 가능.

URL presetshadcn create--preset flag
자주 하는 오해

--preset 없이 수동으로 globals.css 를 편집하는 것. 설정을 URL 로 관리하지 않으면 재현성이 사라진다.

Radix → Base UI 전환은 '호환성 있는 탈종속'

Base UI 를 선택해도 시각적으로는 완전히 동일하다. 이유는 Shadcn 이 디자인을 전담하고, 기반 라이브러리는 Unstyled Primitives 역할만 하기 때문.

라이브러리역할현재 상태
Radix UI접근성·키보드 내비게이션 primitives유지보수 정체
Base UI동일 역할, 활발한 개발Radix 출신 개발자 다수 참여

기존 프로젝트에서 Base UI 로 점진 전환 가능하지만, 일부 컴포넌트(드래그 앤 드롭 등) 는 아직 Radix 에 남아 있다.

Radix UIBase UIunstyled primitivesheadless
자주 하는 오해

'Base UI 로 바꾸면 UI 가 달라진다' 는 오해. 시각적 출력은 같다. 변경점은 내부 접근성 로직 뿐.

빌딩 블록은 '컴포넌트' 가 아니라 '프로덕션 패턴'

Elevenlabs 블록은 파형 시각화, GitHub 블록은 레포 툴바/컨트리뷰션 그래프, Vercel 블록은 분석 대시보드. 단일 컴포넌트가 아니라 실사용 조합 예시 를 코드로 제공한다.

# 특정 블록만 설치
npx shadcn@latest add github-repo-toolbar

빌딩 블록 = 디자인된 레고 조각 묶음. 처음부터 레이아웃 짤 필요 없이 조합만 하면 된다.

building blocksElevenlabsGitHub blocksproduction patterns
자주 하는 오해

빌딩 블록을 수정 없이 그대로 쓰는 것. 브랜드 컬러/톤에 맞춰 한 번의 전역 재조정 은 필수다.

읽는 순서

  1. 1이론

    ui.shadcn.com/create 에서 Vega/Nova/Maia/Lyra/Mira 다섯 스타일이 실제로 어느 토큰을 바꾸는지 비교. 특히 spacing, radius, density 토큰 차이.

  2. 2구현

    Shadcn Create 에서 스타일·컬러·폰트를 고르고 생성된 --preset URL 로 Next.js 프로젝트를 초기화. 기본 Button/Input 이 어떻게 달라지는지 확인.

  3. 3실무

    현재 프로젝트의 components/ui/* 에서 Radix 의존성을 grep 해 보고, Base UI 로 치환 가능한 컴포넌트와 그렇지 않은 컴포넌트를 분류한다.

  4. 4설명

    'Shadcn 을 쓰는 프로젝트에서 모든 화면이 똑같아 보이는 문제를 어떻게 해결할 수 있나?' 질문에 5개 스타일 + 5개 빌딩 블록 + 커스텀 컬러 전략으로 답한다.

면접 연결 질문

easy`shadcn/ui` 가 `Material UI` 같은 일반 컴포넌트 라이브러리와 구조적으로 다른 점은?
힌트

[감점 답변] '커스터마이징이 쉽다'. [좋은 답변] node_modules 안 블랙박스가 아니라 소스 코드가 프로젝트에 직접 복사 됨. npx shadcn add button 이 components/ui/button.tsx 를 생성. 수정 자유도는 최대지만 업그레이드 시 diff 관리 책임은 개발자에게 있다.

mediumRadix UI 에서 Base UI 로 점진 전환할 때 고려할 리스크는?
힌트

[감점 답변] '그냥 라이브러리만 바꾸면 된다'. [좋은 답변] (1) 일부 컴포넌트는 여전히 Radix primitives 사용 중 (2) 드래그앤드롭 같은 기능은 아직 Base UI 에 없음 (3) 자동완성/키보드 이벤트 처리에 미묘한 동작 차이 가 있을 수 있어 회귀 테스트 필요. Shadcn Create 로 새로 뽑은 프로젝트라도 모든 컴포넌트가 Base UI 만 쓰진 않는다.

자기 점검

Shadcn Create 의 URL 파라미터 방식이 '디자인 시스템 공유' 에 어떤 실질적 이득을 주는지 설명해보세요.
preset URL재현성CLI
자주 하는 오해

디자인 스타일이 URL 만으로 완전히 복원된다는 오해. 테마 커스텀 컬러나 커스텀 컴포넌트 는 여전히 globals.css 수정이 필요하다.

← 이전 글리액트 라우터의 리액트 서버 컴포넌트 접근 방식다음 글 →도메인의 간략한 역사