1/4
디자인
shadcn/ui란?
미국 1인 개발자 Shadcn(샤드시엔)이 2023년 공개한 오픈소스 React 컴포넌트 라이브러리로, Tailwind CSS 기반의 검증된 부품 50여 종을 무료 제공하며 2026년 현재 1인 개발자·스타트업의 디자인 시스템 사실상 표준이 된 도구입니다.
2/4
쉬운 풀이
이렇게 이해하면 쉬워요
디자인 시스템을 처음부터 만들기는 어렵습니다. shadcn/ui는 '좋은 디자인의 부품 50개를 무료로 가져다 써' 같은 접근입니다. 특이한 점은 npm 설치가 아니라 'CLI로 코드를 복사해 내 프로젝트에 붙이는' 방식이라, 마음대로 수정할 수 있습니다. v0(Vercel의 AI 디자인 도구)도 shadcn/ui 컴포넌트로 화면을 만듭니다.
3/4
활용 사례
누가·언제 쓰나?
[v0 · 기본 출력] 구분: Vercel의 AI 디자인 도구가 만드는 코드의 기본 컴포넌트. com/blog}}. 결과: 비전공자가 만든 화면도 shadcn/ui 일관된 디자인 적용. ac · 이 사이트] 구분: 이 사이트의 일부 UI 컴포넌트도 shadcn/ui 패턴 영향을 받음. 수치: 빌드 후 페이지 무게 약 100KB로 가벼움. 결과: 운영자가 코드를 직접 수정하기 쉬움.
4/4
더 알아보기
ai.percent.ac
/word/shadcnui
AI for Everyone by Percent · CC BY-SA 4.0
카드를 캡처하거나 브라우저 인쇄 → PDF로 저장하면 인스타·수업 자료에 쓸 수 있습니다. CC BY-SA 4.0에 따라 출처(AI for Everyone by Percent · ai.percent.ac)와 라이선스를 표시하면 상업적으로도 이용할 수 있습니다. 내용을 바꿨다면 그 사실을 밝히고 같은 라이선스로 공유해 주세요.