shadcn CLI v4 공부 정리 | AI에게 내 프로젝트를 어떻게 설명하지?

pxd 블로그에서 shadcn/ui CLI v4 관련 글을 읽었다. “AI 에이전트에게 로그인 폼 만들어달라고 했더니 없는 props를 쓰고, import 경로가 틀렸다”는 얘기로 시작하는 글이었는데, AI 코딩 도구를 써본 사람이라면 한 번쯤 겪었을 상황이라 공감이 됐다.

shadcn/ui가 컴포넌트 코드를 npm 패키지로 설치하는 게 아니라 직접 프로젝트에 복사해오는 방식이라는 건 알고 있었다. AI가 코드를 직접 읽을 수 있다는 게 장점이라는 얘기도 들었는데, CLI v4가 그 발상을 더 구체적으로 밀어붙이고 있어서 한번 정리해봤다.

1️⃣ 이게 뭐냐?

CLI v4에서 새로 생긴 건 크게 세 가지다.

Skills — AI 에이전트가 내 프로젝트 설정을 직접 읽게 해주는 기능이다. npx skills add shadcn/ui를 실행하면 components.json, Tailwind 설정, 설치된 컴포넌트 목록 같은 정보를 AI가 참조할 수 있게 된다. “AI가 shadcn/ui를 안다”가 아니라 “지금 이 프로젝트에서 shadcn/ui가 어떻게 세팅돼 있는지 안다”로 바꿔주는 거다.

MCP 서버 — AI 학습 데이터에는 시점이 있어서, 어제 업데이트된 API는 반영이 안 된다. claude mcp add shadcn 한 줄로 shadcn 레지스트리에 실시간 접근이 가능해지면, 최신 컴포넌트 props나 예시 코드를 그때그때 확인할 수 있다. 학습 시점의 한계를 인프라로 보완하는 방식이다.

Preset — 색상, 폰트, border-radius 같은 디자인 시스템 값을 하나의 코드로 묶어두는 방식이다. AI가 컴포넌트를 생성할 때도 프로젝트의 스타일 기준을 참조하도록 해주는 거다.

2️⃣ 내가 든 생각

글을 읽으면서 인상에 남았던 건 문제를 짚는 방식이었다. “AI가 shadcn/ui를 모른다”가 아니라 “AI가 내 프로젝트를 모른다”고 보는 시각. 아무리 학습 데이터에 shadcn이 잔뜩 있어도, 내 프로젝트의 컴포넌트 경로나 테마 토큰은 당연히 모르니까.

👉🏻 Skills가 하는 일이 결국 “AI에게 내 프로젝트를 소개해주는 것”이라는 설명이 꽤 정확해 보였다.

디자이너로서 Preset이 특히 눈에 들어왔다. 디자인 시스템을 아무리 꼼꼼히 잡아도 개발 단계에서 색상이나 spacing이 조금씩 어긋나는 걸 많이 봤는데, AI가 컴포넌트를 생성할 때도 같은 문제가 생길 것 같아서다. Preset이 그 갭을 얼마나 메워줄 수 있는지는 직접 써봐야 알겠지만, 방향은 맞는 것 같다.

💡 여기서 드는 질문 — Skills나 Preset 없이도 AI 코딩이 어느 정도 됐던 건 그냥 운이었을까, 아니면 학습 데이터가 충분해서였을까?

그 차이를 의식하게 된 것 자체가 이번 공부에서 건진 게 있다는 생각이 들었다. 잘 된다고 그냥 넘겼던 것들을 다시 생각해보게 됐다는 점에서.

3️⃣ 앞으로 어떻게 쓸까?

지금 당장 shadcn/ui를 메인으로 쓰는 프로젝트는 없는데, Claude나 Cursor로 컴포넌트를 만들 때 import 경로가 틀리거나 프로젝트 테마와 안 맞는 코드가 나오는 경험은 있었다. Skills나 MCP를 세팅해두면 그 빈도가 좀 줄겠다 싶기는 하다.

Preset은 디자이너로서 한번 써보고 싶은 쪽이다. 팀에서 쓰는 디자인 토큰을 Preset에 박아두면 AI가 만드는 컴포넌트도 시스템 안으로 들어오는 흐름이 가능할 것 같아서. 실제로 그렇게 잘 작동하는지는 해봐야 알겠지만.

⭐️ 마지막으로, 공부하며 남은 인상

결국 핵심은 “AI가 얼마나 똑똑한가”가 아니라 “AI에게 얼마나 정확한 맥락을 줬는가” 쪽에 있는 것 같다. Skills, MCP, Preset은 그 맥락을 구성하는 인프라에 가깝다. 디자인 시스템을 설계하는 일이랑 어딘가 비슷한 문제처럼 느껴졌다.

---

참고 원문: shadcn과 함께 UI 컴포넌트를 AI 에이전트와 더 잘쓰는 방법