더욱 아름다워진 Shadcn UI - 새로운 프로젝트 생성 기능의 등장
📺 원본 영상: 더욱 아름다워진 Shadcn. Shadcn Create 업데이트
🎙️ 채널: 코드팩토리
📅 정리 일자: 2026-01-16
⚠️ Note: 본 리포트는 영상의 음성을 텍스트로 변환(STT)하여 정리한 것입니다. 화면에 표시된 자료(차트, 코드, 슬라이드 등)는 포함되지 않을 수 있습니다.
개요
Shadcn UI에 중요한 업데이트가 추가되었다. 웹사이트 상단에 새로 생긴 “New Project” 기능을 통해 개발자들은 프로젝트 초기 설정부터 테마 커스터마이징까지 한 번에 처리할 수 있게 되었다. 이번 영상에서는 기존 Radix UI에서 Base UI로의 전환, 다양한 아이콘 라이브러리 선택, 그리고 프리셋 기반 테마 설정 방법을 실습을 통해 살펴본다.
Shadcn UI의 근본적인 변화 - Radix UI에서 Base UI로
Shadcn UI는 많은 사람들이 오해하는 것과 달리, 독자적인 UI 라이브러리가 아니다. 실제로는 다른 UI 라이브러리와 아이콘 라이브러리를 래핑(wrapping)하여 디자인 시스템을 제공하는 구조다. 지금까지 Shadcn UI는 Radix UI를 기반으로 컴포넌트를 구성해왔다. Radix UI는 Shadcn 특유의 깔끔한 느낌을 만들어내는 데 핵심적인 역할을 했지만, 최근 들어 심각한 문제가 발생했다.
Radix UI 프로젝트가 사실상 중단된 것이다. 커밋이 거의 생기지 않고 있으며, 유지보수가 거의 이루어지지 않는 상태로 방치되고 있다. 이는 Shadcn UI를 사용하는 개발자들에게 큰 우려 사항이었고, Shadcn 레포지토리에는 대체 라이브러리를 사용할 수 있게 해달라는 이슈가 쇄도했다. 이러한 커뮤니티의 요구에 응답하는 형태로, 이번 업데이트에서는 Base UI를 기본 옵션으로 선택할 수 있도록 변경되었다.
Base UI는 현재 Radix UI의 대체제로 가장 주목받고 있는 라이브러리다. 중요한 점은, Base UI로 전환하더라도 UI 자체는 바뀌지 않는다는 것이다. 빌딩 블록(building block)만 다른 라이브러리로 교체되는 것이기 때문에, 최종 사용자가 보는 결과물은 동일하다. 따라서 새로 시작하는 프로젝트라면 더 이상 deprecated된 Radix UI를 사용할 이유가 없으며, Base UI로 시작하는 것이 권장된다.
프로젝트 생성의 혁신 - New Project 기능 탐구
Shadcn UI 웹사이트 오른쪽 상단에 새로 추가된 “New Project” 버튼은 단순한 프로젝트 생성 도구 이상의 의미를 지닌다. 이전까지는 개발자들이 직접 create-next-app 같은 CLI 도구를 실행하고, 이후 Shadcn UI를 설치하고, 테마 파일을 수동으로 수정해야 했다. 하지만 이제는 웹 인터페이스에서 모든 설정을 시각적으로 확인하고 조정한 뒤, 단 하나의 명령어로 완전히 구성된 프로젝트를 생성할 수 있다.
커스텀 프리셋 시스템
화면 상단에는 여러 개의 커스텀 프리셋이 제공된다. 각 프리셋은 테마, 아이콘 라이브러리, 폰트 등 다양한 설정 요소를 미리 조합해놓은 것이다. 예를 들어 첫 번째 프리셋을 선택하면 Vega Theme에 Lucid Icon, 그리고 Geist Sans 폰트가 자동으로 적용된다. 두 번째, 세 번째, 네 번째, 다섯 번째 프리셋을 차례로 눌러보면, 각각의 조합이 실제 화면에서 어떻게 렌더링되는지 즉시 확인할 수 있다.
프리셋이 마음에 들지 않는다면, 하단의 “Start Over” 버튼을 눌러 처음부터 직접 구성할 수도 있다. 이 방식은 세밀한 커스터마이징을 원하는 개발자들에게 적합하다.
컴포넌트 라이브러리 선택
“Component Library” 섹션에서는 앞서 언급한 Radix UI와 Base UI 중 하나를 선택할 수 있다. 다시 한번 강조하지만, Base UI를 선택하더라도 UI의 외형은 변하지 않는다. 빌딩 블록만 교체되는 것이므로, 유지보수가 활발한 Base UI를 선택하는 것이 현명하다.
스타일 커스터마이징
Style 탭에서는 세부적인 디자인 요소를 조정할 수 있다. 가장 눈에 띄는 옵션은 모서리 둥글기(radius) 설정이다. 강연자는 개인적으로 라운드하지 않은, 직각에 가까운 스타일을 선호한다고 밝혔다. 이러한 선호도는 프로젝트의 전체적인 느낌을 크게 좌우한다.
Base Color도 선택 가능하다. Stone, Zinc, Grey 등의 옵션이 제공되며, 이는 전체 UI의 기본 색조를 결정한다. Theme 섹션에서는 Accent Color를 변경할 수 있는데, 예를 들어 Cyan을 선택하면 다소 화려하고 정신없는 색상 조합을 만들어낼 수도 있다.
아이콘 라이브러리의 다양화
기존에는 Lucid Icon이 기본값이었지만, 이제는 여러 인기 아이콘 라이브러리 중에서 선택할 수 있게 되었다. 강연자가 특히 선호하는 것은 Huge Icons다. Lucid Icon의 경우 Chevron Down 같은 아이콘이 전형적인(typical) 형태로 표현되는 반면, Huge Icons는 좀 더 귀여운 느낌을 준다. Order Icon 같은 복잡한 아이콘의 경우, Lucid Icon은 다소 Material Design 느낌이 강해 어울리지 않을 수 있지만, Huge Icons는 전반적으로 더 조화롭고 아름다운 형태를 제공한다. 로딩 아이콘 같은 세부 요소에서도 이러한 차이가 두드러진다.
이러한 이유로 강연자는 앞으로 시작하는 모든 프로젝트에서 Huge Icons를 기본 설정으로 사용할 계획이라고 밝혔다.
폰트와 Radius 설정
폰트 선택 옵션에서는 Noto Sans를 비롯한 여러 폰트를 고를 수 있다. Radius 설정에서는 Small, Medium, Large를 선택하면 UI 요소들의 둥근 정도가 점진적으로 변화하는 것을 확인할 수 있다. None을 선택하면 완전히 뭉툭한(직각의) 형태가 된다.
Random 기능과 Lock 시스템
흥미로운 기능 중 하나는 “Try Random” 버튼이다. 특정 설정 요소가 마음에 들 때 그것을 Lock해두고 Random을 돌리면, 잠긴 요소는 그대로 유지한 채 나머지만 무작위로 조합해준다. 예를 들어 Style은 Lock하고 Base Color는 그대로 두되, 나머지를 Random으로 돌려 원하는 조합을 찾을 수 있다. 이는 디자인 영감을 얻기에 유용한 방식이다.
실시간 프리뷰와 컴포넌트 확인
왼쪽 패널에는 다양한 블록(block)들이 표시된다. 여기서는 실제 프로젝트에서 사용될 컴포넌트들이 현재 설정으로 어떻게 렌더링되는지 확인할 수 있다. 예를 들어 “11 Labs” 스타일(음성 생성 AI 서비스의 UI 스타일), GitHub 스타일, VS Code 스타일, ChatGPT 스타일 등을 미리 볼 수 있다. 이를 통해 자신의 설정이 실제 사용 환경에서 어떻게 보일지 직관적으로 파악할 수 있다.
하단으로 스크롤하면 Shadcn UI의 모든 컴포넌트를 확인할 수 있다. 기존에 제공되던 컴포넌트들이 모두 그대로 유지되고 있음을 확인할 수 있으며, 각 컴포넌트가 현재 선택한 테마로 어떻게 표현되는지 실시간으로 볼 수 있다.
프로젝트 생성 실습 - 한 줄 명령어의 마법
모든 설정이 마음에 들었다면, 오른쪽 상단의 “Create Project” 버튼을 클릭한다. 여기서는 프레임워크를 선택할 수 있는데, 대부분의 개발자는 Next.js를 사용할 것이다. 강연자는 이 지점에서 Next.js의 최근 보안 취약점(vulnerability)을 언급하며, 자신의 다른 영상을 참고할 것을 권장했다. 이는 크리티컬한 버그이므로 반드시 확인이 필요하다고 강조했다.
만약 Tanstack을 사용하고 싶다면 그 옵션을 선택할 수 있고, Vite를 원한다면 Vite도 선택 가능하다. 강연자는 이번 실습에서 Next.js를 선택했다.
Next.js를 선택한 후, “Copy Command” 버튼을 클릭하면 설정이 모두 반영된 명령어가 클립보드에 복사된다. 이 명령어를 터미널에 붙여넣으면, Query Parameter 형태로 모든 선택 사항이 URL에 포함되어 있는 것을 확인할 수 있다. Enter를 누르면 create-next-app 같은 별도의 초기화 작업 없이, Shadcn UI가 설정된 Next.js 프로젝트가 자동으로 생성된다.
강연자는 “Next Test”라는 이름으로 프로젝트를 생성했고, 명령어를 실행한 후 localhost:3000으로 접속하자 앞서 설정했던 모든 값들이 정확히 반영된 프로젝트가 구동되는 것을 확인할 수 있었다.
AI 코딩과 템플릿 초기화에 대한 조언
강연자는 바이브 코딩(AI 기반 코딩) 관련하여 중요한 조언을 덧붙였다. 템플릿 초기화 같은 작업은 AI에게 시키지 말라는 것이다. AI가 프로젝트 설정을 대신 해주는 것은 비효율적일 뿐만 아니라, 개발자가 초기 설정에 대한 이해도를 떨어뜨릴 수 있다.
대신 제안하는 방식은 다음과 같다. 먼저 Shadcn UI의 New Project 기능을 통해 원하는 설정을 모두 적용한 템플릿 프로젝트를 생성한다. 그 다음 이 프로젝트를 기반으로 cursor.md, agency.md, gemini.md 같은 AI 프롬프트 설정 파일을 작성하여 기본 세팅 값을 잡아준다. 이렇게 하면 AI는 이미 구성된 프로젝트 구조와 설정을 이해한 상태에서 코드 작성에만 집중할 수 있게 된다.
이는 프로젝트 초기화는 개발자가 직접 제어하되, 반복적인 코드 작성이나 로직 구현은 AI의 도움을 받는 균형 잡힌 접근 방식이다.
마무리 - Shadcn UI의 새로운 시작
Shadcn UI의 이번 업데이트는 단순한 기능 추가가 아니라, 개발자 경험(DX)을 근본적으로 개선하는 변화다. Radix UI에서 Base UI로의 전환은 지속 가능한 프로젝트 운영을 보장하고, 새로운 프로젝트 생성 기능은 초기 설정의 복잡함을 극적으로 줄여준다. 다양한 아이콘 라이브러리와 세밀한 테마 커스터마이징 옵션은 개발자들에게 더 넓은 디자인 자유도를 제공한다.
앞으로 Shadcn UI를 사용하는 프로젝트를 시작한다면, 반드시 이 New Project 기능을 활용하여 Base UI 기반의 프로젝트로 구성하는 것이 권장된다. 이는 유지보수성과 확장성 측면에서 명확한 이점을 제공한다.
📚 출처 및 참고
| 구분 | 내용 |
|---|---|
| 원본 영상 | 더욱 아름다워진 Shadcn. Shadcn Create 업데이트 |
| 채널 | 코드팩토리 |
| 리포트 작성 | 2026-01-16 |
| 작성 방식 | YouTube 영상 STT 변환 후 에디팅 |
💬 본 리포트는 영상 내용을 바탕으로 재구성되었습니다. 정확한 내용은 원본 영상을 참조해 주세요.