Photo by Igor Omilaev on Unsplash
AI로 UI 디자인 자동화하기 — "AI가 멋대로 UI 짜는 문제"를 시스템으로 막아버린 사람
AI가 UI를 자동으로 만들어주는 거 편하긴 한데, 결과물이 제멋대로 나와서 결국 손으로 다 고친 경험 있지? tsubotax라는 개발자가 그 문제를 정면으로 뚫었어. AI로 UI 디자인 자동화하기를 제대로 구현하려면 AI가 "올바른 UI만 생성하도록 강제하는 규칙 체계"가 필요하다는 걸 깨닫고, 그걸 직접 만들어서 오픈소스로 공개했거든.
왜 만들었냐면
Claude Code나 Cursor 같은 AI 에이전트한테 UI 만들어달라고 하면, 디자인 시스템이 있어도 AI가 그걸 제대로 참조를 안 해. 토큰 무시하고 임의 색상 쓰고, 금지된 패턴 그대로 쓰고. 그러니까 결국 개발자가 매번 검수하고 수정해야 했던 거야. "AI한테 맡겼더니 오히려 일이 늘었다"는 그 상황.
어떤 도구를 어떻게 썼냐면
만든 게 melta UI야. Tailwind CSS 기반으로 28개 컴포넌트, 99개 디자인 토큰을 구성하고, 여기에 MCP 서버를 붙였어. 핵심은 이거야 — 토큰이랑 컴포넌트 스펙을 AI가 읽을 수 있는 형태(기계 가독 포맷)로 저장하고, "이 패턴은 금지"라는 규칙을 명시적으로 선언해뒀어. Claude Code 같은 에이전트가 UI 생성할 때 MCP 툴을 통해 이 시스템을 참조하게 만든 거지. 그냥 문서 만든 게 아니라, AI가 틀린 선택을 하면 시스템이 막아주는 구조야.
결과는
직접 공개한 수치는 없지만, 구조 자체가 결과를 말해줘. AI가 생성한 UI가 디자인 시스템을 벗어나는 경우를 시스템 단에서 차단하니까, 검수·수정 작업이 확 줄었다고 해. 오픈소스로 공개 후 바이브코딩 커뮤니티에서 주목받고 있고, melta.tsubotax.com에서 바로 확인 가능해.
따라할 수 있는 포인트
- 디자인 토큰이나 컴포넌트 규칙을 자연어가 아니라 구조화된 데이터로 만들어봐. AI가 훨씬 잘 읽어.
- 금지 패턴을 명시적으로 선언하는 거 중요해. "이거 쓰지 마"를 문서에 적는 게 아니라 시스템에 박아넣는 거야.
- MCP 서버 연동은 진입장벽이 있지만, 일단 DESIGN.md 하나로 AI 참조 문서 만드는 것부터 시작해볼 수 있어.
AI로 UI 디자인 자동화하기, 편의성만 추구하다 보면 오히려 품질 관리가 무너지는데 — 이 사례는 자동화와 일관성을 동시에 잡는 방향을 보여줘.
🔗 참고 링크
- 원본 출처: DESIGN.md + 壊れたら気づくハーネス - AI向けデザインシステムを「維持できる仕組み」にした記録
- 관련 AI 툴: Claude Code · Cursor · melta UI · MCP
댓글
댓글 쓰기