Codex Design vs tweakcn 비교.
tweakcn과 Codex Design 디자인 시스템 라이브러리는 둘 다 AI가 만든 앱이 다른 shadcn 앱과 똑같아 보이지 않게 도와줍니다. tweakcn은 shadcn/ui 테마를 위한 시각적 에디터입니다. 저희 라이브러리는 웹사이트와 모바일 앱을 위한 완성된 디자인 시스템 모음으로, Codex나 Claude Code가 따를 수 있게 쓰여 있고 시스템마다 shadcn 테마가 딸려 있습니다.
2026년 11월 6일 업데이트 · 5분 분량
짧게 답하자면
shadcn 테마를 색상 하나하나 직접 조정하거나 이미지에서 생성하고 싶다면 tweakcn을 쓰세요. AI 에이전트가 웹사이트나 모바일 앱의 타입 스케일, 레이아웃 규칙, 피해야 할 것까지 담긴 완성된 디자인 시스템을 따르게 하고 싶다면 Codex Design 라이브러리에서 시작하세요.
- tweakcn을 고르세요. 라이브 프리뷰를 보며 모든 shadcn 변수를 직접 제어하고 싶거나, 커뮤니티 테마가 많은 곳이 좋거나, 프롬프트나 이미지로 AI가 테마를 생성하게 하고 싶다면.
- Codex Design 라이브러리를 고르세요. Codex나 Claude Code로 디자인하고, 웹뿐 아니라 모바일 앱에 대한 가이드도 필요하고, 에이전트가 저장해 따르는 DESIGN.md로 각 시스템을 받고 싶다면.
각 도구는 무엇인가
tweakcn은 Tailwind CSS와 shadcn/ui를 위한 오픈소스 시각적 테마 에디터로, Sahaj(GitHub의 jnsahaj)가 만들었습니다. 프리셋에서 시작해 실시간 프리뷰와 대비 검사기를 보며 색상, 타이포그래피, 반경, 간격, 그림자를 조정하고, 테마를 CSS 변수나 shadcn 레지스트리 명령으로 내보냅니다. Tailwind v4와 v3, OKLCH와 HSL을 지원합니다. Pro 플랜은 이미지를 포함한 AI 테마 생성을 무제한으로 제공합니다.
Codex Design 라이브러리는 이 사이트에 있는 무료 디자인 시스템 모음입니다. 시스템마다 라이트·다크 모드 색상, Google Fonts, 타입 스케일, 반경, 간격, 그림자, 그리고 그것을 쓰는 규칙이 들어 있습니다. 모든 시스템에는 라이브 프리뷰, 에이전트가 URL에서 읽을 수 있는 DESIGN.md, Tailwind v4용 globals.css, 명령어 한 줄로 설치하는 shadcn 테마가 있습니다. 절반은 터치 영역, 탭 바, 화면 패딩을 갖춘 모바일 앱용입니다.
나란히 비교
| tweakcn | Codex Design 라이브러리 | |
|---|---|---|
| 제공하는 것 | 직접 만들거나 프리셋과 커뮤니티 테마에서 고르는 shadcn 테마 | 완성된 디자인 시스템: 토큰에 더해 타입 스케일, 레이아웃, 해야 할 것과 하지 말아야 할 것 |
| 편집 | 실시간 프리뷰가 있는 시각적 에디터 | 그대로 복사하거나, 에이전트에게 바꿔 달라고 요청 |
| 웹과 앱 | 웹 앱용 shadcn/ui 테마 | 웹 시스템 12개와 모바일 앱 시스템 12개 |
| AI 에이전트용 | CSS 또는 레지스트리 명령 내보내기 | 공개 URL의 DESIGN.md, 한 줄 프롬프트, CSS, shadcn 레지스트리 명령 |
| AI 생성 | AI 테마 5개 무료, Pro는 무제한이며 이미지로도 생성 | 없음. 시스템은 직접 디자인하고 대비를 손수 검사함 |
| 요금 | 무료, Pro는 월 $8 | 무료 |
| 오픈소스 | 예(Apache 2.0) | 아니요. 시스템은 자유롭게 복사해 쓸 수 있음 |
이 사실들은 2026년 11월 6일 기준이며 tweakcn.com과 GitHub 저장소를 근거로 합니다.
tweakcn을 고르는 경우
tweakcn은 테마를 직접 다듬고 싶을 때 더 나은 도구입니다. 모든 shadcn 변수가 슬라이더나 컬러 피커로 되어 있고, 바꾸는 즉시 프리뷰가 갱신되며, 커뮤니티 갤러리에 출발점이 많습니다. 이미 브랜드 색상이 있고 확정하기 전에 shadcn 컴포넌트 전반에서 어떻게 보이는지 확인하고 싶다면, CSS를 손으로 고치는 것보다 빠릅니다.
Codex Design 라이브러리를 고르는 경우
테마는 색상, 폰트, 반경을 정하지만, 에이전트는 제목이 얼마나 큰지, 텍스트가 얼마나 넓게 흐르는지, 섹션 사이 간격이 얼마인지, 어떤 패턴을 피해야 하는지도 알아야 합니다. 저희 라이브러리의 각 시스템은 이를 DESIGN.md에 적어 두므로 Codex나 Claude Code가 shadcn 컴포넌트뿐 아니라 모든 화면에 적용합니다. 앱 시스템은 48px 터치 영역과 하단 탭 바처럼 휴대폰 화면에 필요한 규칙을 더합니다. 또한 보라색 그라데이션이나 글래스모피즘처럼 AI가 만든 것으로 읽히는 패턴을 피하도록 만들었기 때문에, 제품이 생성된 티가 나지 않길 바랄 때 더 안전한 출발점입니다.
자주 묻는 질문
Codex Design 라이브러리는 tweakcn의 대안인가요?
시작할 테마를 고르는 용도라면 그렇습니다. 모든 시스템이 명령어 한 줄로 shadcn 테마로 설치됩니다. 테마를 시각적으로 편집하는 일은 tweakcn이 더 잘합니다. 저희 라이브러리는 AI 에이전트가 따르도록 만들어졌습니다.
둘 다 쓸 수 있나요?
네. 저희 라이브러리에서 시스템을 골라 shadcn 테마를 설치하고, tweakcn에서 색상을 미세 조정하세요. 그다음 에이전트에게 DESIGN.md도 그에 맞게 고치라고 요청하세요.
라이브러리를 쓰려면 Codex Design 플러그인이 필요한가요?
아니요. 디자인 시스템은 이 사이트에서 무료이고 어떤 프로젝트에서도 작동합니다. Codex Design 플러그인은 Codex에서 디자인 방향을 비교하는 캔버스를 더해 줍니다.