shadcn/ui vs 당근 SEED: "해줘"로 만든 밋밋한 화면을 예쁘게 바꾸는 디자인 세팅
2026년 9월 5일 · @gongsoonyee
“해줘”로 만든 화면은 왜 늘 2% 부족할까
AI에게 “대시보드 만들어줘”라고만 하면 기능은 돌아가는데 화면은 어딘가 밋밋합니다. 회색 카드, 파란 버튼, 제각각인 여백과 글자 크기. 모델이 디자인을 못해서라기보다, 기준이 없으니 매번 평균값으로 그리기 때문입니다.
해법은 모델에게 취향을 설명하는 게 아니라 디자인 시스템을 먼저 깔아두는 것입니다. 색상·간격·타이포그래피가 토큰으로 정해져 있고, 버튼·카드·다이얼로그가 이미 다듬어진 컴포넌트로 준비돼 있으면, AI는 “그리는” 대신 “조립”합니다. 결과물의 바닥이 올라갑니다.
이 글은 그 바닥으로 가장 많이 쓰이는 두 가지, 범용 표준이 된 shadcn/ui와 국내 프로덕트 디자인의 레퍼런스로 꼽히는 당근의 SEED Design을 비교합니다. 어떤 상황에 무엇을 깔아야 화면이 예뻐지는지가 목표입니다.
shadcn/ui: 설치하지 않고 “복사해서 소유하는” 컴포넌트
shadcn/ui는 npm 패키지가 아니라, 컴포넌트 소스 코드를 내 프로젝트에 복사해 넣고 직접 고쳐 쓰는 방식의 오픈소스 컴포넌트 모음입니다. 접근성은 Radix(또는 Base UI) 프리미티브가, 스타일은 Tailwind CSS와 CSS 변수가 담당합니다. 코드가 내 것이라 수정에 제약이 없고, AI가 읽고 고치기도 쉽습니다.
2026년의 shadcn/ui는 컴포넌트 모음을 넘어 “배포 시스템”이 됐습니다. 핵심 변화는 세 가지입니다.
- CLI v4와 프리셋(2026년 3월): 색상·테마·아이콘 라이브러리·폰트·라운드 값을 짧은 코드 하나로 묶어
init --preset으로 한 번에 적용합니다. shadcn/create에서 실제 컴포넌트에 입혀 미리보고 코드를 받습니다. Next.js, Vite, TanStack Start, React Router, Astro, Laravel 템플릿도 지원합니다. (changelog) - shadcn/skills와 MCP 서버: 코딩 에이전트에 컴포넌트 API, Radix/Base UI 차이, CLI 사용법을 알려주는 컨텍스트 층입니다. MCP 서버는 2025년 8월 CLI 3.0과 함께 모든 레지스트리를 지원하도록 개편됐습니다. (CLI 3.0 changelog)
- 레지스트리 생태계:
@registry/name형식의 네임스페이스로 서드파티 컴포넌트를 설치하고, 2026년 6월부터는 공개 GitHub 저장소 자체를 레지스트리로 쓸 수 있습니다. (GitHub Registries 소개)
약점도 분명합니다. 기본값 그대로 쓰면 “어디서 본 듯한” 회색·흑백 SaaS 화면이 나옵니다. AI가 만든 화면이 다 비슷해 보이는 이유의 상당 부분이 바로 이 기본 테마입니다. shadcn/ui는 완성된 디자인이 아니라 잘 만든 뼈대라서, 프리셋과 테마를 직접 정해야 비로소 예뻐집니다.
당근 SEED Design: 실제 서비스에서 다듬어진 완성형 디자인 언어
SEED는 당근 제품을 위해 만든 통합 디자인 언어로, 하나의 토큰 소스에서 React·iOS·Android·Lynx까지 같은 디자인을 내보내고 Figma와 연동됩니다. 코드는 Apache-2.0 라이선스로 공개돼 있고, GitHub 스타는 약 1.2k입니다. (GitHub)
2026년 7월에는 “Seed to Root, Root to Daangn”을 슬로건으로 새 브랜드 아이덴티티와 문서 사이트를 공개했습니다. 당근의 주황색은 유지하고, 코드 에디터 하이라이트에서 가져온 라임색을 포인트로 더했습니다. (디자인 나침반, seed-design.io)
구성은 shadcn/ui보다 층이 많습니다.
- 토큰과 레시피: rootage(토큰 빌드 엔진)와 qvism(스타일 레시피 엔진)이 디자인 결정을 정의하고,
@seed-design/css가 토큰·컴포넌트 스타일·테마를 CSS로 냅니다. - React 컴포넌트: 스타일이 입혀진
@seed-design/react와 로직만 있는@seed-design/react-headless가 따로 있습니다. 모바일 웹뷰용 화면 전환 라이브러리 Stackflow 통합도 있습니다. - CLI 스니펫:
npx @seed-design/cli@latest add ui:action-button처럼 추가하면 컴포넌트가 프로젝트의seed-design/폴더에 소스로 들어옵니다. shadcn처럼 내 코드가 되어 자유롭게 고칠 수 있습니다. (seed-design 스킬) - 번들러·Tailwind 플러그인: Vite, Webpack/Rspack, Rsbuild 플러그인과 Tailwind 3·4용 토큰 패키지가 있습니다.
요약하면 SEED는 대형 서비스에서 이미 검증된 “정답지”입니다. V3로 바뀐 기준을 처음 적용한 프로필 화면에서는 다른 이웃 모아보기가 약 44%, 화면 체류 시간이 Android 68%·iOS 83% 늘었다고 합니다. (SEED 진화기 정리) 간격, 글자 크기, 상태 색이 서로 맞물리도록 결정돼 있어서, 그대로 쓰면 고민 없이 정돈된 화면이 나옵니다.
철학 비교: “범용 뼈대” vs “브랜드 완성형”
둘 다 소스를 내 프로젝트로 가져오는 방식이지만, 출발점이 정반대입니다. shadcn/ui는 누구의 브랜드도 아닌 중립적인 뼈대를 주고 “너의 디자인 시스템을 만들라”고 말합니다. SEED는 당근이라는 한 브랜드를 위해 이미 내린 결정의 묶음을 그대로 보여줍니다.
이 차이가 화면에서는 이렇게 드러납니다.
- shadcn/ui 기본값: 흑백 위주의 미니멀한 SaaS 톤. 깔끔하지만 개성이 없고, 이미 수많은 서비스가 같은 모습이라 “AI가 만든 티”가 납니다. 프리셋과 테마를 바꾸는 순간 완전히 다른 서비스가 됩니다.
- SEED 기본값: 따뜻한 주황 브랜드 컬러, 모바일 앱에 맞춘 터치 영역과 정보 위계. 그대로 쓰면 당장 “잘 만든 국내 앱” 느낌이 나지만, 당근과 닮아 보인다는 점은 감수해야 합니다.
SEED V3 개편에서 라이브러리 철학도 “커스터마이징을 막아 통일성을 지키는 방식”에서 “구성요소를 분해해 제공하는 방식”으로 바뀌었습니다. 통일성은 디자인 단계에서 풀 문제라는 판단입니다. 결과적으로 두 시스템 모두 “내 코드로 가져와 고친다”는 방향으로 수렴하고 있습니다.
한 가지 주의할 점: SEED 코드는 Apache-2.0이라 상업적으로도 쓸 수 있지만, 당근 로고와 브랜드 자산은 별도 가이드를 따르며 당근을 사칭하는 방식으로 쓰면 안 됩니다. 사내 서비스에 SEED를 쓴다면 브랜드 컬러는 우리 것으로 바꾸는 편이 안전합니다.
토큰·테마 구조: 화면 인상을 실제로 결정하는 곳
화면이 예뻐지느냐는 컴포넌트보다 토큰에서 갈립니다. 두 시스템의 토큰 설계를 보면 왜 기본 화면 인상이 다른지 바로 보입니다.
shadcn/ui는 “짝”으로 된 시맨틱 변수를 씁니다. --background/--foreground, --primary/--primary-foreground, --muted, --accent, --destructive, --border, --ring, 그리고 하나의 --radius에서 sm~4xl 라운드를 계산합니다. 값은 OKLCH로, .dark 클래스에서 다크모드 값을 덮어씁니다. (설치 문서)
기본 화면이 밋밋한 이유가 여기 있습니다. 기본 neutral 테마는 oklch(0.145 0 0)처럼 채도(C)가 0인 순수 회색입니다. 색이 없으니 깔끔하지만 감정도 없습니다. 반대로 말하면 --primary 한 줄과 배경에 아주 약한 채도만 줘도 인상이 확 바뀝니다.
SEED는 “역할” 기반 토큰입니다. 색을 전경(fg), 배경(bg), 외곽선(stroke)으로 나누고 --seed-color-fg-*, --seed-color-bg-*, --seed-color-stroke-*를 우선 씁니다. 원색 팔레트(--seed-color-palette-*)는 역할로 커버되지 않는 예외에만 씁니다. 이 조합은 WCAG·APCA 기준의 명도 대비를 보장하도록 설계됐습니다. 타이포는 38개 스타일을 24개로 줄이고 t1~t10 스케일(--seed-font-size-t{n})로 정리했습니다. (SEED 정리 글)
| 항목 | shadcn/ui | SEED Design |
|---|---|---|
| 색 토큰 방식 | 용도별 짝 변수 (primary / primary-foreground) | 역할별 분리 (fg / bg / stroke) |
| 기본 색감 | 무채색 회색, 프리셋으로 교체 | 당근 주황 브랜드 + 정돈된 회색 |
| 타이포 | Tailwind 기본 스케일, 폰트는 프리셋으로 지정 | t1~t10 전용 스케일, 24개 텍스트 스타일 |
| 접근성 | Radix·Base UI 프리미티브가 상호작용 담당 | 색 대비(WCAG·APCA)와 터치 영역까지 스펙화 |
| 테마 교체 | --preset 한 줄, tweakcn 같은 외부 에디터 풍부 |
토큰 빌드 엔진(rootage)으로 정의, 브랜드 교체는 직접 |
정리하면, shadcn/ui는 바꾸기 쉬운 빈 캔버스이고 SEED는 바꿀 필요가 적은 완성된 팔레트입니다. AI에게 “예쁘게”를 맡길 때, 전자는 테마를 정해줘야 하고 후자는 규칙만 지키게 하면 됩니다.
AI 코딩 도구와의 궁합: 둘 다 “에이전트용”으로 진화했다
AI가 UI를 망치는 전형적인 실패는 세 가지입니다. 없는 컴포넌트를 import하고, 팔레트에 없는 색을 하드코딩하고, 폐기된 API를 되살립니다. 두 시스템 모두 2026년에 이 문제를 정면으로 겨냥한 도구를 내놨습니다.
shadcn/ui의 에이전트 스택
- MCP 서버:
npx shadcn@latest mcp init --client claude처럼 설치하면, 에이전트가 기본 레지스트리와 서드파티 레지스트리에서 컴포넌트를 검색·설치합니다. - shadcn/skills:
pnpm dlx skills add shadcn/ui로 추가하면 에이전트가 Radix와 Base UI 차이, CLI 플래그, 레지스트리 워크플로를 알고 움직입니다. - 프리셋을 프롬프트에: “
--preset <코드>로 새 Next 앱 만들어줘”처럼 디자인 시스템 전체를 문자열 하나로 넘길 수 있습니다. Claude, Codex, v0, Replit 어디서든 같은 결과가 나옵니다. (CLI v4 changelog) - 생태계: 레지스트리를 통해 애니메이션·랜딩 블록 같은 서드파티 컴포넌트까지 같은 방식으로 끌어올 수 있다는 점이 가장 큰 강점입니다.
SEED의 4단 구조
| 구성요소 | 하는 일 | 구분 |
|---|---|---|
| seed-design Agent Skill | 프로젝트 상태(설치 여부, 번들러, 패키지 매니저)를 먼저 읽고 필요한 문서로 분기 | 디자인 변환 |
| @seed-design/mcp (Figma MCP) | Figma 레이어를 SEED React 코드로 변환 | 도구 |
| @seed-design/docs-mcp | 컴포넌트·토큰·아이콘 문서를 도구 호출로 조회, 한국어 아이콘 검색 지원 | 도구 |
| llms.txt, llms-full.txt | 문서 전체를 LLM용 평문으로 노출, 섹션별 인덱스와 전문 분리 | 문서 |
설치는 claude mcp add seed-docs -- npx -y @seed-design/docs-mcp 한 줄, 스킬은 npx skills add https://github.com/daangn/seed-design --skill seed-design입니다. 스킬에는 “모르면 추측하지 말고 물어보라”는 규칙까지 들어 있습니다. (SEED AI 통합 정리)
차이 한 줄 요약: shadcn/ui는 “어디서든 무엇이든 가져오는” 넓은 생태계, SEED는 “한 시스템을 깊고 정확하게” 지키는 구조입니다. 문서가 한국어라 한국어로 지시하는 워크플로와도 잘 맞습니다.
상황별로 무엇을 깔까
데스크톱 중심의 관리 도구·대시보드라면 shadcn/ui, 모바일 웹·앱 같은 소비자 화면이라면 SEED가 기본 출발점으로 유리합니다. 결정 기준을 상황별로 정리하면 다음과 같습니다.
| 상황 | 추천 | 이유 |
|---|---|---|
| 사내 어드민, 데이터 대시보드, 백오피스 | shadcn/ui | 테이블·사이드바·차트·커맨드 메뉴가 풍부하고, 데스크톱 정보 밀도에 맞음 |
| 고객용 모바일 웹, 웹뷰 앱, 커머스 화면 | SEED | 터치 영역·타이포 위계·화면 전환(Stackflow)이 모바일 기준으로 잡혀 있음 |
| 우리 브랜드 컬러가 확실히 정해져 있음 | shadcn/ui | 프리셋으로 브랜드 토큰을 한 번에 주입하기 쉬움 |
| 디자이너 없이 “정돈된 앱” 품질이 바로 필요함 | SEED | 결정이 이미 끝나 있어 AI가 규칙만 지키면 됨 |
| 랜딩 페이지, 애니메이션 많은 마케팅 화면 | shadcn/ui | 서드파티 레지스트리의 히어로·모션 블록 활용 |
| 한국어 문서·한국어 프롬프트 중심 팀 | SEED | 문서와 아이콘 검색이 한국어 기반 |
| 여러 프레임워크(Astro, Laravel 등) 혼용 | shadcn/ui | init 템플릿과 레지스트리가 프레임워크를 폭넓게 지원 |
섞어 쓰는 것도 방법입니다. 예를 들어 shadcn/ui 컴포넌트를 쓰되, SEED가 공개한 원칙(색을 fg·bg·stroke로 나누기, 타이포 스케일 고정, 터치 영역 명시)을 테마 설계 기준으로 빌려오면 범용성과 완성도를 함께 챙길 수 있습니다.
실전 세팅: “해줘” 전에 10분 투자하기
핵심은 AI에게 화면을 맡기기 전에 토큰, 컴포넌트, 규칙 세 가지를 먼저 깔아두는 것입니다.
shadcn/ui로 세팅할 때
- shadcn/create에서 프리셋 고르기: 색상·폰트·라운드·아이콘을 실제 컴포넌트에 입혀 보면서 정하고 프리셋 코드를 받습니다. 기본 neutral 그대로 두지 않는 것이 가장 큰 차이를 만듭니다.
- 프리셋으로 프로젝트 만들기:
pnpm dlx shadcn@latest init --preset <코드>. 이미 만든 앱도 같은 명령으로 테마를 갈아끼울 수 있습니다. - 에이전트에 컨텍스트 주기:
pnpm dlx skills add shadcn/ui와npx shadcn@latest mcp init --client claude. - 규칙 파일 쓰기: CLAUDE.md나 AGENTS.md에 “레지스트리에 있는 컴포넌트는
shadcn add로 설치, 색은 테마 변수만 사용, 임의 hex 금지”를 적습니다.
SEED로 세팅할 때
- CLI로 초기화와 컴포넌트 추가:
npx @seed-design/cli@latest init후add ui:action-button ui:checkbox처럼 필요한 것만, 혹은add-all ui로 전체를 가져옵니다. - 번들러 플러그인 연결: Vite, Webpack/Rspack, Rsbuild용 플러그인이나 Tailwind 4 테마 패키지로 토큰을 연결합니다.
- 에이전트에 컨텍스트 주기:
claude mcp add seed-docs -- npx -y @seed-design/docs-mcp와npx skills add https://github.com/daangn/seed-design --skill seed-design. - 규칙 파일 쓰기: “색은
--seed-color-fg/bg/stroke-*역할 토큰 우선, 팔레트 직접 사용 금지, 글자 크기는 t1~t10 스케일만”을 적습니다. 브랜드 컬러를 바꿀 계획이면 이 단계에서 정합니다.
프롬프트는 이렇게 바꾼다
세팅 후에는 프롬프트도 “무엇을 그릴지”보다 “무엇을 조립할지”로 바뀝니다.
- 전: “주문 관리 대시보드 예쁘게 만들어줘”
- 후: “설치된 디자인 시스템 컴포넌트만 써서 주문 관리 대시보드를 만들어줘. 상단은 KPI 카드 4개, 아래는 필터가 있는 데이터 테이블. 색과 간격은 테마 토큰만 쓰고, 없는 컴포넌트가 필요하면 만들기 전에 먼저 물어봐.”
마지막 문장이 중요합니다. 에이전트가 임의로 새 스타일을 만들기 시작하는 순간 일관성이 무너지기 때문입니다.
마무리: 예쁜 화면은 프롬프트가 아니라 세팅에서 나온다
AI가 만든 화면이 별로였던 건 모델의 감각 문제가 아니라 기준이 없었기 때문입니다. shadcn/ui는 그 기준을 내 손으로 빠르게 정하게 해주고, SEED는 이미 잘 정해진 기준을 통째로 빌려줍니다. 어느 쪽이든 토큰과 컴포넌트, 규칙을 먼저 깔아두면 “해줘” 한마디의 결과물이 달라집니다.
참고 자료
- shadcn/ui CLI v4 changelog (2026년 3월)
- shadcn/ui CLI 3.0과 MCP 서버 (2025년 8월)
- shadcn/ui 수동 설치 문서 (테마 변수)
- shadcn GitHub Registries 소개
- daangn/seed-design GitHub
- SEED Design 공식 사이트
- 당근, 디자인 시스템 SEED 브랜드 아이덴티티 공개 (디자인 나침반)
- 당근 디자인 시스템 SEED, llms.txt와 MCP로 AI 에이전트에게 문서를 여는 방법 (PyTorchKR)
- seed-design Agent Skill 소개