2026 AI 디자인 & UI 생성 툴 정면 비교 — v0 · Lovable · Bolt.new · Figma AI · Galileo · Uizard · Subframe · Magic Patterns · Tempo 심층 분석

프롤로그 — 디자인이 코드의 첫 번째 시민이 된 해

2026년 봄, 디자인 툴의 풍경이 두 번째로 뒤집혔다. 첫 번째 전환은 2010년대 후반, Sketch에서 Figma로의 클라우드 이주였다. 두 번째 전환은 지금 — 프롬프트에서 production-grade 컴포넌트가 나오는 시대다. "버튼을 다크모드 지원하는 카드 안에 넣어줘"라는 한 줄에서 shadcn/ui 기반 React JSX가 떨어진다. 디자이너가 Figma를 열기 전에 v0가 먼저 답을 낸다.

이 변화가 디자인을 죽이느냐고? 아니다. 디자인의 입구를 바꿨을 뿐이다. 2026년의 디자이너는 픽셀을 그리는 사람이 아니라 디자인 시스템을 큐레이션하고, 토큰을 정의하고, AI가 토해낸 초안을 다듬는 사람이다. 픽사가 손그림을 죽이지 않았듯, AI 디자인 툴도 디자인 직군을 죽이지 않는다 — 그들이 다루는 도구의 추상화 수준을 한 단계 올린다.

이 글은 25개가 넘는 AI 디자인·UI 생성 툴을 같은 축으로 정면 비교한다. v0, Lovable, Bolt.new, Figma AI, Figma Make, Galileo, Uizard, Subframe, Magic Patterns, Tempo, Builder.io Mantis, Plasmic, Phase, Anima, Locofy, Khroma, Spline, Microsoft Designer, Adobe Firefly Design, Canva Magic Studio, Penpot AI, ChatGPT Canvas, Claude Artifacts, Polymet — 각자 다른 워크플로를 위해 만들어진 도구들이다. "최고"는 없다. 당신이 디자이너냐 개발자냐, 솔로냐 팀이냐, 디자인 시스템이 있느냐 없느냐에 따라 정답이 바뀐다.

디자인은 소프트웨어가 되어 가고, 소프트웨어는 디자인이 되어 간다. 두 직군의 경계가 흐려지는 곳에 AI가 있다.

1장 · 비교 축 — 무엇을 보고 골라야 하는가

AI 디자인 툴을 "예쁘다/안 예쁘다"로 고르면 3개월 안에 후회한다. 다음 8개 축으로 분해해서 보라.

축 1 · Surface (어디서 도는가) 브라우저 웹앱, Figma 플러그인, VS Code 익스텐션, 데스크탑 네이티브, CLI. 도구의 surface가 워크플로의 자연스러움을 결정한다. v0는 브라우저, Figma AI는 Figma 안, Subframe은 웹 + 코드 익스포트, Bolt.new는 브라우저 IDE. 디자이너 일과의 90%가 Figma라면 Figma 안에서 돌아가는 도구가 우선이고, 개발자가 Next.js를 짠다면 React JSX를 토하는 브라우저 도구가 낫다.

축 2 · 출력 포맷 React JSX (Next.js 호환), Vue SFC, HTML+CSS, Tailwind 클래스, vanilla CSS, Figma 프레임, Sketch, 디자인 토큰. 같은 "버튼"을 시켜도 v0는 shadcn/ui 기반 React를 토하고, Uizard는 Figma 프레임을 토하고, Locofy는 기존 Figma를 React로 변환한다. 출력이 워크플로에 들어맞아야 가치가 있다.

축 3 · 디자인 시스템 정합성 "토큰을 안다"의 의미. 도구가 (a) 색·간격·타이포 토큰을 인지하고 일관되게 쓰는가, (b) 기존 컴포넌트 라이브러리(shadcn, MUI, Mantine, Radix)와 호환되는가, (c) 사내 디자인 시스템을 학습/주입할 수 있는가. v0는 shadcn/ui를 기본으로 쓰고, Subframe은 Tailwind 토큰을 1급 시민으로 다룬다. Lovable·Bolt는 토큰 정합성이 약한 편 — 새 프로젝트엔 빠르지만 디자인 시스템이 있는 회사엔 마찰이다.

축 4 · 자율성 레벨 스니펫 생성(컴포넌트 하나) → 페이지 생성(여러 컴포넌트 조립) → 풀 앱 생성(라우팅·상태·DB·인증까지). v0는 컴포넌트~페이지, Lovable·Bolt는 풀 앱, Figma AI는 프레임/컴포넌트, Uizard는 여러 화면이 연결된 와이어프레임. 자율성이 높을수록 빠르지만 틀린 코드를 디버깅하는 책임도 커진다.

축 5 · 반복 루프 (refinement) 첫 출력이 100점일 일은 없다. 두 번째·세 번째 프롬프트로 다듬는 루프가 매끄러운가. 채팅으로 자연어 수정인가, 시각적으로 직접 편집하는가, diff로 보여주는가. v0의 "이 카드를 더 컴팩트하게" 같은 채팅 루프, Subframe의 시각 편집 + 프롬프트 하이브리드, Magic Patterns의 변형 갤러리 같은 패턴이 각각 다르다.

축 6 · 가격 모델 정액 구독(개인 무료·Pro 월 20달러 수준이 표준), 사용량 기반(토큰·생성 횟수), 시트 기반(팀), Figma 같은 기존 도구는 시트 + AI 부가 사용량. 2026년 초 기준 v0·Lovable·Bolt·Figma AI 모두 월 20달러 안팎의 표면 가격이지만, 헤비 유저의 실 사용량 청구는 다른 얘기다. Lovable처럼 메시지·크레딧 단위로 청구하는 도구는 큰 앱 만들 때 빠르게 100~200달러가 나간다.

축 7 · 비-개발자 친화성 이게 결정적인 축이다. 마케터·PM·디자이너가 코드 없이 끝까지 갈 수 있는가, 아니면 "여기서부터 개발자 호출" 지점이 있는가. Lovable·Bolt는 비-개발자도 배포까지 끌고 갈 수 있게 디자인됐다. v0는 개발자가 Next.js 프로젝트에 붙이는 컴포넌트를 토하는 데 최적화 — 비-개발자가 단독으로 쓰기엔 다음 단계가 막힌다. Canva Magic Studio·Microsoft Designer는 디자인 자체 사용자(비-기술자) 타겟이고 코드는 안 나온다.

축 8 · 접근성·시맨틱 품질 AI가 토하는 코드의 진짜 시험. <div onClick>을 쓰는가 <button>을 쓰는가, alt 텍스트가 있는가, ARIA 속성이 적절한가, 키보드 내비게이션이 동작하는가, 색 대비가 WCAG AA를 넘는가. 2026년 봄 기준, 어떤 도구도 접근성을 자동으로 완벽히 처리하지 못한다. v0와 Subframe이 shadcn/Radix 기반이라 비교적 양호하지만 검증은 사람이 해야 한다.

8개 축의 가중치는 역할에 따라 다르다. 디자이너에겐 축 1·2·3·5가 결정적이고, 개발자에겐 축 2·3·4가, 마케터·PM에겐 축 7이 가장 크다. 같은 표를 봐도 다른 도구가 1등이 된다. "최고의 AI 디자인 툴"이라는 헤드라인이 의미 없는 이유다.

2장 · Vercel v0 — 개발자-led AI 컴포넌트 생성의 기준점

Surface: 브라우저 웹앱(v0.dev). 채팅 형태로 프롬프트 → React JSX 컴포넌트가 나온다. Next.js 프로젝트에 복사-붙여넣기 하는 워크플로가 1차 사용 사례다.

무엇을 잘하나 v0의 정체성은 shadcn/ui + Tailwind + Next.js라는 강력한 의견이다. 도구가 의견이 있다는 건 출력이 일관되다는 뜻이고, 개발자가 받아들이기 쉽다. 백엔드는 GPT-4 계열 + Claude 계열을 섞어 쓰고, 출력은 거의 항상 컴파일되는 React JSX다. "그라데이션 헤더가 있는 가격 카드 3개" 같은 프롬프트에서 5초 안에 결과를 받고, 다음 프롬프트로 "다크모드 토글 추가" 하면 매끄럽게 이어진다.

Block 개념 — 작은 단위(Hero, PricingCard, Sidebar)를 갤러리에서 골라 조합 — 도 강력하다. 발견·재사용·변형이 자연스럽다. shadcn/ui 라이브러리 자체가 Vercel·Radix 라인업이라 v0가 토하는 컴포넌트는 그대로 프로덕션에 쓸 수 있는 품질에 가깝다.

디자인 시스템 정합성 shadcn/ui와 Radix 프리미티브를 기본 출력으로 쓰므로 이미 shadcn 기반 프로젝트엔 마찰이 거의 없다. Tailwind 토큰을 인지하고, 다크모드를 빌트인으로 처리하고, 접근성 측면에서 Radix가 깔린 만큼 베이스라인이 좋다. 단점: shadcn이 아닌 디자인 시스템(MUI, Mantine, Chakra)을 쓰면 변환 작업이 필요하고, 사내 자체 시스템엔 그대로 안 맞는다.

자율성 컴포넌트~페이지 수준의 자율성이 sweet spot. "풀 앱"은 약하다. 라우팅·상태 관리·인증·DB 연결까진 자동으로 안 깔아준다. 그 영역은 v0를 Next.js 프로젝트에 임포트한 뒤 개발자가 손으로 한다.

가격 2026년 초 기준 무료 티어가 있고, Pro $20/월 수준에서 추가 메시지·생성 크레딧이 늘어난다. 팀 플랜은 시트 기반. 헤비 유저는 월 50~100달러 수준 사용량 청구가 흔하다.

약점

비-개발자가 단독으로 못 쓴다. 출력이 코드이고, Next.js 프로젝트 컨텍스트가 있어야 의미가 있다.
shadcn이 아닌 환경엔 마찰. MUI·Mantine 프로젝트엔 매번 변환 비용.
풀 앱 생성은 약하다. 페이지를 넘으면 다른 도구가 낫다.

언제 안 쓰나

디자이너가 Figma 안에서 작업을 끝내고 싶을 때 — Figma AI가 낫다.
풀 앱(라우팅·상태·DB·인증)을 한 번에 받고 싶을 때 — Lovable·Bolt가 낫다.
비-기술자가 단독으로 마케팅 페이지를 만들고 싶을 때 — Canva·Microsoft Designer가 낫다.

한 줄 요약: 개발자가 Next.js + shadcn 프로젝트에 붙일 React 컴포넌트를 빠르게 받는 데 2026년 기준점. 그 외 워크플로엔 오버킬이거나 부적합.

3장 · Lovable — 비-개발자도 풀스택 앱까지 끌고 가는 도구

Surface: 브라우저 웹앱(lovable.dev). 한 줄 프롬프트에서 React + Supabase 기반의 풀스택 앱이 나온다. 이전 이름은 GPT Engineer.

무엇을 잘하나 Lovable의 정체성은 end-to-end다. "북클럽 멤버 관리 앱 만들어줘"라고 치면 라우팅, UI, Supabase 스키마, 인증, 배포 옵션까지 한 번에 받는다. 비-개발자가 처음 만지는 시점부터 동작하는 앱을 보는 경험이 매끄럽다. v0가 "한 조각"을 토하는 도구라면, Lovable은 "전체 시스템"을 토하는 도구다.

Supabase 통합이 1급 시민이라 DB·인증·스토리지가 추가 셋업 없이 들어온다. 배포는 Lovable 자체 호스팅 + 커스텀 도메인을 지원하고, GitHub로 익스포트해서 직접 호스팅도 가능하다. 코드 자체는 React + Tailwind 기반이라 익숙한 개발자라면 그대로 받아 손볼 수 있다.

디자인 시스템 정합성 약한 편. Lovable의 디자인 출력은 "기본기로는 깔끔하지만 일관성 있는 디자인 시스템에서 나온 것 같진 않은" 인상이 흔하다. 토큰을 명시적으로 다루지 않고, shadcn/ui처럼 강력한 베이스라인도 없다. 새 프로젝트엔 빠르지만 "회사 디자인 시스템에 맞춰줘"가 매끄럽게 안 된다.

자율성 가장 높다. 풀스택 앱 — UI + 백엔드 스키마 + 인증 + 배포 — 까지 자율적으로 처리한다. 그 대가는 틀린 코드의 디버깅 부담이다. 자율성이 높을수록 AI가 잘못된 가정을 했을 때 사람이 추적하기 힘들다.

가격 2026년 초 기준 무료 티어(제한된 메시지) + Starter $20/월 + Pro$ 50/월 수준의 단계 구조. 메시지·크레딧 기반 청구라 큰 앱을 만들면 빠르게 100~200달러가 나간다. 라이트 유저에겐 매력적, 헤비 유저는 비용 관리가 필요하다.

약점

디자인 시스템 정합성이 약하다. 회사 디자인 시스템이 있으면 변환 비용.
헤비 유저 비용이 빠르게 오른다. 사용량 청구 모델 주의.
출력의 코드 품질이 v0보다 인상적이지 않은 편. 동작은 하지만 "프로덕션에 그대로 들어가도 되겠다"의 신뢰는 v0보다 약간 낮다.
백엔드 락-인. Supabase 통합이 강하지만, 다른 백엔드(Firebase·자체 API)를 쓰려면 마찰.

언제 안 쓰나

기존 Next.js·Vite 프로젝트에 부분 컴포넌트만 추가하고 싶을 때 — v0가 낫다.
회사 디자인 시스템에 엄격히 맞춰야 할 때 — Subframe·v0가 낫다.
디자이너가 픽셀 정밀 제어를 원할 때 — Figma 계열이 낫다.

한 줄 요약: 비-개발자도 풀스택 앱까지 끌고 갈 수 있는 가장 매끄러운 경험. 디자인 시스템·비용 통제는 약점.

4장 · Bolt.new — WebContainer 기반 풀스택 IDE

Surface: 브라우저 IDE(bolt.new). StackBlitz의 WebContainer 기술 위에 LLM 에이전트를 얹은 도구다. 브라우저 안에서 Node.js·npm·dev 서버가 도는 게 특징.

무엇을 잘하나 Bolt의 차별점은 실제로 동작하는 환경이 브라우저 안에 있다는 것. WebContainer로 npm install, dev server, 로그를 모두 브라우저에서 본다. 다른 도구처럼 "코드를 토하는데 동작은 사용자 환경에서 확인"이 아니라, 그 자리에서 돌아간다.

Lovable처럼 풀스택 앱 생성이 가능하고, 출력은 일반 Vite/Next.js/Astro 프로젝트라 GitHub로 빼서 어디서든 호스팅할 수 있다. Anthropic Claude를 기본 백엔드로 쓰고(2026년 초 기준), 큰 변경을 자율적으로 처리한다 — "이 컴포넌트를 모달로 바꿔" 한 줄에서 여러 파일이 동시에 수정된다.

디자인 시스템 정합성 중간. Lovable보다는 약간 낫고 v0보다는 약하다. shadcn/ui나 Mantine을 기본 옵션으로 선택할 수 있지만, 토큰 일관성은 v0만큼 엄격하지 않다.

자율성 높다. 풀 앱 생성 + 자체 실행 환경. 다만 자율성이 높은 만큼 "왜 이렇게 짰지?"의 추적이 어렵고, 실패하면 처음부터 다시 프롬프트하는 경우가 많다.

가격 2026년 초 기준 무료 티어 + Pro $20/월 수준 시작. 토큰 사용량 기반 청구라 큰 앱은 비용이 빠르게 오른다. Lovable과 비슷한 청구 패턴.

약점

WebContainer 제약. 브라우저 안에서 도는 만큼 무거운 라이브러리·네이티브 모듈은 제약이 있다.
토큰 비용. 헤비 유저는 월 100달러 이상이 흔하다.
디자인 정밀도가 v0보다 약하다. 동작은 빠르지만 픽셀 단위 일관성은 떨어진다.

언제 안 쓰나

디자이너가 Figma 안에서 작업하고 싶을 때.
회사의 엄격한 디자인 시스템에 맞춰야 할 때.
"이미 있는 Next.js 프로젝트에 컴포넌트만 추가"가 목표일 때.

한 줄 요약: 풀스택 앱을 브라우저 안에서 즉시 돌려 보면서 만드는 데 가장 매끄럽다. Lovable과 직접 경쟁.

5장 · Figma AI · Figma Make — Figma 안에서 끝내는 워크플로

Surface: Figma 데스크탑·웹앱 안의 First Draft, Make 기능. 별도 도구가 아니라 Figma 자체의 AI 레이어.

무엇을 잘하나 Figma AI의 가장 큰 가치는 디자이너가 평소 쓰는 도구 안에서 안 떠난다는 것. First Draft는 텍스트 프롬프트에서 Figma 프레임(컴포넌트·페이지)이 나오고, 기존 컴포넌트 라이브러리·variables(디자인 토큰)·variants를 인지한다. 사내 디자인 시스템이 Figma에 정의돼 있다면 그걸 그대로 활용해 생성한다.

Figma Make는 한 발 더 나아간다 — Figma 디자인에서 풀스택 코드(React + 백엔드)를 만든다. 디자인-코드 간격을 가장 좁히려는 시도이고, 2026년 들어 빠르게 발전 중이다. 텍스트→디자인, 디자인→코드, 리디자인(기존 디자인 개선) 같은 워크플로를 한 캔버스에서 처리한다.

Prompt assist, 자동 레이아웃 추천, 자동 정렬, 변형 생성 같은 보조 기능들도 매일 쓰는 마찰을 줄인다.

디자인 시스템 정합성 가장 강하다. 사내 Figma 라이브러리를 인지하고 활용하는 게 1급 시민이다. variables(디자인 토큰)도 직접 다룬다. 사내 디자인 시스템이 Figma에 정의돼 있다면 다른 어떤 도구보다 정합성이 높다.

자율성 프레임·컴포넌트 단위. 풀 앱 생성은 Figma Make 영역이고, v0/Lovable/Bolt만큼 자율적이진 않다.

가격 Figma의 시트 기반 가격 + AI 사용량. 2026년 초 기준 Professional $15/시트/월 + AI 기능 사용량. AI 사용량 청구가 별도 구조라 큰 팀이 무겁게 쓰면 추가 비용이 든다.

약점

Figma 안에서만 산다. Figma 안 쓰면 진입 자체가 막힌다.
출력 코드의 직접 사용 가능성은 v0·Lovable보다 낮다. Figma Make로 받은 코드도 손볼 부분이 있다.
사용량 청구 구조 주의. 시트 가격만 보고 들어왔다가 AI 사용량 청구가 추가될 수 있다.

언제 안 쓰나

디자이너가 아니거나 팀이 Figma를 쓰지 않을 때.
풀스택 앱을 끝까지 만들고 싶을 때 — Lovable·Bolt가 낫다.
회사 디자인 시스템이 Figma 밖에 (예: Storybook + 자체 토큰) 있을 때.

한 줄 요약: 디자이너 워크플로에서 가장 자연스럽다. 사내 Figma 디자인 시스템이 강할수록 가치가 커진다.

6장 · Galileo AI — 텍스트에서 Figma로

Surface: 브라우저 웹앱. 텍스트 프롬프트 → Figma 프레임 출력이 핵심 기능. 2024년 구글에 인수됐고 이후 구글 디자인 도구 라인에 통합되고 있다.

무엇을 잘하나 Galileo의 정체성은 텍스트에서 즉시 Figma로다. 디자이너가 빈 캔버스에서 시작하는 마찰을 줄인다. "캘린더 위젯이 있는 대시보드" 같은 프롬프트에서 Figma로 가져갈 수 있는 디자인이 떨어진다.

구글 인수 이후로는 Material Design 시스템과의 통합이 강해지고, 모바일(Android·iOS) 모킹에 특화된 방향으로 가고 있다. Stitch라는 후속 도구가 출시됐다 — Galileo의 후계자 격으로, Material 3 기반의 UI 생성에 집중한다.

디자인 시스템 정합성 Material Design을 기본으로 다루는 만큼 Material 기반 프로젝트엔 정합성이 높다. 그 외 디자인 시스템엔 마찰이 있다.

가격 2026년 초 기준 무료 베타 + 유료 플랜의 단계. 구글 통합 이후 가격 구조가 자주 바뀌었으니 직접 확인.

약점

구글 라인업으로 흡수되면서 독립 도구의 성격이 약해졌다. Stitch로 마이그레이션 권유.
Material Design 편향. 그 외 디자인 시스템엔 강점이 적다.

한 줄 요약: 텍스트→Figma의 선구자였고, 2026년엔 구글의 Stitch로 이어진다. Material 기반 모바일 디자인에 강하다.

7장 · Uizard — 와이어프레임에서 UI까지

Surface: 브라우저 웹앱. 텍스트, 스크린샷, 손그림 와이어프레임에서 디지털 UI 디자인을 생성한다. 2024년 미로(Miro)에 인수됐다.

무엇을 잘하나 Uizard의 차별점은 인풋의 다양성이다. 텍스트 외에도 종이에 그린 와이어프레임 사진, 경쟁사 앱 스크린샷, 손그림 스케치를 입력으로 받아 UI를 생성한다. PM이나 UX 리서처가 미팅 화이트보드에 그린 와이어프레임을 즉시 UI로 만드는 워크플로가 매끄럽다.

여러 화면이 연결된 흐름(앱 navigation flow)을 한 번에 생성해 와이어프레임에서 prototype까지 빠르게 가는 데 강하다.

디자인 시스템 정합성 약한 편. Uizard 자체의 디자인 시스템 안에선 일관되지만, 사내 디자인 시스템을 학습/주입하는 옵션은 제한적이다.

가격 2026년 초 기준 무료 + Pro $19/월 + Business$ 39/월 수준의 단계. 합리적인 표면 가격이지만 헤비 사용에는 상위 플랜이 필요.

약점

출력 코드의 프로덕션 사용 가능성이 낮다. Uizard는 디자인 단계 도구이지 코드 생성 도구가 아니다.
사내 디자인 시스템 정합성이 약하다.

한 줄 요약: 와이어프레임·스크린샷·스케치에서 디자인 초안을 빠르게 받는 데 강하다. 코드 출력보다는 디자인 단계 도구.

8장 · Subframe — Tailwind 퍼스트 디자인+코드 하이브리드

Surface: 브라우저 웹앱. 시각 편집 + 프롬프트 + 코드 익스포트를 한 도구에 묶는다.

무엇을 잘하나 Subframe의 정체성은 Tailwind를 1급 시민으로 다루는 디자인 툴이다. 시각 편집기 안에서 컴포넌트를 만들고 즉시 깨끗한 Tailwind 클래스가 붙은 React/Vue/HTML 코드를 받는다. 디자인 시스템 토큰을 인지하고, 사내 토큰을 임포트할 수 있다.

v0보다 시각 편집이 강하고 Figma보다 코드 출력이 깨끗하다는 게 시장 포지셔닝. 디자이너와 개발자가 같은 캔버스에서 작업하는 워크플로를 노린다.

디자인 시스템 정합성 강하다. Tailwind 토큰·shadcn/ui·Radix 프리미티브를 1급으로 지원하고, 사내 디자인 시스템을 임포트하는 옵션이 있다.

가격 2026년 초 기준 무료 + Pro $20/월 수준. Figma·v0와 비슷한 표면 가격.

약점

Tailwind를 안 쓰는 프로젝트엔 가치가 크게 줄어든다.
풀 앱 생성은 약하다. 컴포넌트~페이지 영역에 머문다.

한 줄 요약: Tailwind + shadcn 환경에서 디자이너-개발자 협업에 최적. v0와 직접 경쟁하지만 시각 편집이 더 강하다.

9장 · Magic Patterns — 변형 갤러리 중심의 UI 생성기

Surface: 브라우저 웹앱(magicpatterns.com). 프롬프트에서 여러 변형을 한 번에 받는 갤러리식 UX가 특징.

무엇을 잘하나 Magic Patterns의 차별점은 변형(variations)을 한 번에다. 한 프롬프트에서 4~8개의 다른 변형을 동시에 받고, 마음에 드는 걸 골라 다음 라운드에서 세부 조정. 디자이너가 평소 하는 "10개 그려보고 1개 고르기" 워크플로를 AI로 가속한다.

React 출력이 깨끗하고 Tailwind 기본이라 v0와 유사한 영역. 변형 비교 UX가 v0보다 매끄럽다는 게 강점.

디자인 시스템 정합성 shadcn/ui·Tailwind 기반이라 v0와 비슷한 수준의 정합성.

가격 2026년 초 기준 무료 + Pro $20/월 수준.

약점

풀 앱 영역엔 약하다.
에코시스템 규모가 v0보다 작다.

한 줄 요약: v0와 유사한 영역에서 변형 갤러리 UX로 차별화. 디자이너 친화적 비교를 원할 때 강점.

10장 · Tempo — 디자인 시스템 AI 생성 도구

Surface: 브라우저 웹앱. React 컴포넌트 + Storybook 영역에 특화된 AI 디자인 도구.

무엇을 잘하나 Tempo의 정체성은 디자인 시스템 자체를 AI가 짠다는 것. 컴포넌트 라이브러리, variants, Storybook 스토리, 토큰을 한 번에 생성한다. 단일 컴포넌트가 아니라 "전체 디자인 시스템의 기본기"를 만드는 데 초점.

스타트업·신생 팀이 디자인 시스템 0에서 시작할 때 유용. 기존 디자인 시스템이 있는 팀엔 가치가 작아진다.

디자인 시스템 정합성 디자인 시스템을 생성하는 도구라 정합성을 "정의"하는 입장. 기존 시스템에 맞추기보다는 새로 만드는 데 강하다.

가격 2026년 초 기준 Pro $30/월 수준.

약점

기존 디자인 시스템에 맞추는 사용 사례엔 약하다.
풀 앱 영역에선 v0·Lovable이 낫다.

한 줄 요약: 새 디자인 시스템을 빠르게 부트스트랩하고 싶을 때 강하다. 기존 시스템에 맞추는 워크플로엔 부적합.

11장 · Builder.io · Plasmic · Anima · Locofy — Figma-to-Code 라인업

Builder.io (Mantis 라인업): 비주얼 빌더 + Figma to code. Figma 디자인을 React/Vue/Angular/Qwik으로 변환하고, 마케팅 페이지 같은 콘텐츠 영역의 비주얼 CMS 사용 사례에 강하다.

Plasmic: 비주얼 페이지/컴포넌트 빌더 + AI. 디자이너가 비주얼로 만들고 개발자가 코드 환경에 임포트한다. 헤드리스 CMS 같은 흐름이 자연스럽다.

Anima: Figma → React/Vue/HTML 변환의 오리지널. 픽셀 정확도를 우선하고, 디자인-개발 핸드오프 자동화가 핵심.

Locofy: Figma → React/React Native/HTML 변환. AI로 "이게 버튼이다, 이게 카드다" 같은 시맨틱 감지를 한 뒤 코드를 토한다.

공통 강점: Figma가 진실의 원천(source of truth)인 팀에서 디자인-코드 간격을 좁히는 데 강하다.

공통 약점: 자동 변환의 품질이 "그대로 프로덕션"엔 아직 부족하다. 시맨틱(div vs button)·반응형·상태 관리는 사람 보완이 필요. "Figma에서 그린 그대로의 React"가 좋은 React인가는 별개 문제 — 디자인은 자유롭고 코드는 패턴이 있다.

한 줄 요약: 디자인-개발 핸드오프 자동화에 강하다. Figma 디자인의 90%를 변환하고 10%를 사람이 채우는 워크플로에 맞는다.

12장 · Phase · Khroma · Spline — 특화 도구들

Phase: 한국 출신 디자인 툴. 모션·인터랙션 디자인에 특화된 비주얼 도구로, 코드를 짜지 않고 매끄러운 애니메이션을 만든다. 2026년 기준 AI 모션 생성 기능을 점차 추가 중.

Khroma: AI 컬러 팔레트 생성기. "당신이 좋아하는 색"을 학습해 무한히 팔레트를 추천한다. 디자인 시스템 토큰 정의 단계에서 영감을 얻는 도구.

Spline: 3D 디자인 + AI. 웹에서 돌아가는 3D 씬을 비주얼로 만들고, AI 보조로 텍스트→3D 객체 생성을 한다. 마케팅 페이지의 3D 히어로·인터랙티브 프로덕트 뷰어 같은 용도.

한 줄 요약: 일반 UI 생성 도구가 못 다루는 특화 영역(모션·컬러·3D)을 채우는 보조 도구들. 메인 디자인 도구를 대체하지 않고 보완한다.

13장 · Diagram AI (Figma 인수) · Microsoft Designer · Adobe Firefly · Canva Magic Studio

Diagram (Figma 인수): Magician 같은 Figma 플러그인을 만들던 회사로 Figma에 인수됐고, 그 기술이 Figma AI의 일부가 됐다.

Microsoft Designer + Copilot Design: Microsoft 365 통합. 마케팅용 그래픽, 소셜 포스트, 발표 슬라이드를 텍스트로 만든다. 코드는 안 나오고, 비-기술자 타겟.

Adobe Firefly Design + Express AI: Adobe 생태계 통합. Photoshop·Illustrator·InDesign 안에서 AI 보조로 디자인. Express는 비-기술자용 간단 디자인. 코드 출력 아님.

Canva Magic Studio + Magic Design: 비-기술자 친화 디자인 도구의 절대 강자. 텍스트에서 소셜·프레젠테이션·인쇄 디자인. 코드 출력 아님, 디자인 자산 출력.

한 줄 요약: 코드를 안 토하는 디자인 도구들. 마케팅·비-기술자 워크플로에 맞고, 개발자 사용 사례엔 부적합.

14장 · Penpot AI · ChatGPT Canvas · Claude Artifacts · Polymet

Penpot AI: 오픈소스 Figma 대안. Penpot 자체가 SVG 기반이고 셀프호스팅이 가능하다. AI 기능을 점차 추가 중. 오픈소스·온프레미스가 필요한 팀(보안 규제·정부) 사용 사례.

ChatGPT Canvas + Claude Artifacts: 정식 디자인 도구는 아니지만, LLM 채팅 안에서 즉시 HTML/CSS/JS·React 아티팩트를 생성·미리보기하는 기능. 빠른 프로토타입·1회용 UI에 적합. "정식 도구로 만들기 전의 탐색" 단계.

Polymet: 비교적 신생 AI 디자인 도구. v0 계열과 비슷한 영역에서 디자이너 친화 UX를 강조. 2026년 봄 기준 빠르게 발전 중.

한 줄 요약: 오픈소스(Penpot), LLM 내장(ChatGPT/Claude), 신생 경쟁자(Polymet) 같은 변형들. 메인 흐름에 없는 요구사항을 채운다.

15장 · 거대 비교 표

축 8개로 핵심 도구를 한눈에 본다. (Score: A=강함, B=중간, C=약함; 가격은 2026년 초 기준 표면)

도구	Surface	출력	디자인시스템	자율성	비-개발자	가격(개인 표준)
Vercel v0	브라우저	React + shadcn	A (shadcn)	컴포넌트~페이지	C	무료 / Pro 20/월
Lovable	브라우저	React + Supabase	C	풀 앱	A	무료 / 20~50/월
Bolt.new	브라우저 IDE	다양	B	풀 앱	A	무료 / 20/월~
Figma AI	Figma	Figma 프레임	A (사내 라이브)	프레임	B	Figma 시트 + AI
Figma Make	Figma	Figma + 코드	A	프레임~앱	B	Figma + AI
Galileo / Stitch	브라우저	Figma + Material	B	프레임	B	무료 + 유료
Uizard	브라우저	UI 디자인	C	와이어프레임~흐름	A	무료 / 19~39/월
Subframe	브라우저	React+Tailwind	A (Tailwind)	컴포넌트	B	무료 / 20/월
Magic Patterns	브라우저	React + Tailwind	A	컴포넌트~페이지	B	무료 / 20/월
Tempo	브라우저	React 시스템	A	시스템 부트스트랩	C	30/월 수준
Builder.io	비주얼 빌더	React/Vue/Angular	B	페이지	B	무료 + 시트
Plasmic	비주얼 빌더	React	B	페이지	B	무료 + 시트
Anima	Figma 플러그인	React/Vue/HTML	B	변환	C	무료 + 유료
Locofy	Figma 플러그인	React/React Native	B	변환	C	무료 + 유료
Spline	브라우저	3D + 코드	n/a	3D 씬	B	무료 + 유료
Canva Magic Studio	브라우저	디자인 자산	n/a	디자인	A	무료 + Pro
ChatGPT Canvas	ChatGPT	HTML/React	C	1회용	A	ChatGPT 구독
Claude Artifacts	Claude	HTML/React	C	1회용	A	Claude 구독

표를 카탈로그로 보지 말고 "내 워크플로의 축 가중치"를 정해 읽어라. 디자이너에겐 축 1·3·5가, 개발자에겐 축 2·3·4가, 비-기술자에겐 축 7이 결정적이다.

16장 · 결정 매트릭스 — 어떤 상황에 어떤 도구

상황을 4개로 쪼개 추천을 매핑한다.

상황 A · 솔로 개발자가 Next.js 프로젝트에 빠른 컴포넌트가 필요할 때 → v0 1순위. shadcn 기반이고 출력이 그대로 들어맞는다. 변형 비교가 필요하면 Magic Patterns 추가. 디자인 시스템이 Tailwind라면 Subframe도 좋다.

상황 B · 비-기술자가 풀 앱을 끝까지 만들고 싶을 때 → Lovable 1순위. Supabase 통합이 매끄럽다. WebContainer로 즉시 미리보기를 원하면 Bolt.new. 마케팅 페이지 수준이면 코드 없이 Canva Magic Studio·Microsoft Designer.

상황 C · 디자이너가 Figma 안에서 작업을 끝내고 싶을 때 → Figma AI + Figma Make 1순위. 사내 디자인 시스템과 정합성이 가장 높다. Material 기반 모바일이면 Galileo/Stitch도 옵션.

상황 D · 디자인-코드 핸드오프 자동화가 필요할 때 → Locofy + Anima + Builder.io 중 워크플로 맞는 것. 마케팅 페이지가 많으면 Builder.io의 비주얼 CMS가 매력적, 픽셀 정확도가 우선이면 Anima.

상황 E · 신생 팀이 디자인 시스템을 부트스트랩할 때 → Tempo + Khroma(컬러) + shadcn/ui(베이스라인). 빠르게 토큰·컴포넌트·variants를 깐다.

조합 안티패턴

v0 + Lovable 둘 다 헤비하게 — 영역이 겹치고 비용이 두 배.
Figma AI + Locofy — 같은 흐름의 자동화가 중복.
모든 신생 AI 도구 동시 체험 — 표면 마찰이 누적된다. 2~3개로 좁히고 분기마다 재평가.

17장 · 토스 · 네이버 · 메르카리 · CyberAgent 사례

토스 (Toss): 디자인 시스템 TDS(Toss Design System)를 자체 운영하는 한국 핀테크. 2026년 들어 v0 같은 도구로 prototype을 빠르게 만들고 TDS로 마이그레이션하는 워크플로가 보고된다. 디자인 시스템이 강한 회사일수록 AI 출력을 자체 시스템으로 다시 매핑하는 "변환 비용"이 든다는 게 핵심 학습.

네이버 (Naver): 네이버의 디자인 조직은 자체 디자인 시스템(NUI)을 운영한다. 마케팅 페이지·실험적 프로토타입엔 v0·Figma AI를 빠르게 활용하지만 프로덕션 본진은 자체 시스템.

메르카리 (Mercari): 일본 중고거래 마켓플레이스. 디자인 시스템을 Storybook + Figma에 동기화해 운영. Figma AI와 Figma Make를 디자이너 워크플로에 점진 도입.

CyberAgent: 일본 광고·미디어 거인. 자회사가 많아 디자인 시스템도 다양. Lovable·Bolt 류로 신규 서비스 prototype을 빠르게 만들고, 본진 합류 단계에서 자체 시스템으로 마이그레이션하는 패턴이 보고된다.

공통 패턴

AI 디자인 도구로 prototype을 빠르게 만든다.
사내 디자인 시스템으로 마이그레이션한다.
AI 출력의 "느낌"은 검증된 시스템으로 흡수한다.

AI 디자인 도구가 회사의 디자인 시스템을 대체하는 게 아니라 그 안으로 들어가는 입구가 빨라진다는 게 2026년 실무 풍경이다.

18장 · 디자이너-led vs 개발자-led 워크플로

도구의 진영은 명확히 둘로 갈린다.

디자이너-led 진영: Figma AI/Make, Galileo, Uizard, Anima, Locofy, Penpot AI, Builder.io

디자인이 진실의 원천
코드는 자동 변환 또는 핸드오프
사내 디자인 시스템 정합성 우선
디자이너가 픽셀 단위 제어 유지

개발자-led 진영: v0, Subframe, Magic Patterns, Tempo, Lovable, Bolt.new

코드가 진실의 원천
디자인은 코드의 결과
shadcn·Tailwind 같은 코드 베이스라인 우선
개발자가 컴포넌트 단위 제어 유지

두 진영은 같은 문제(프롬프트→UI)를 풀지만 출발점과 진실의 원천이 다르다. 회사가 어느 진영을 택하는지가 도구 선택을 거의 결정한다. 답을 단순화하면 — 디자인 시스템이 Figma에 살면 디자이너-led, 코드에 살면 개발자-led.

두 진영이 만나는 미래의 흐름도 있다. Figma Make는 디자이너 진영에서 개발자 진영으로 다리를 놓고, Subframe·Tempo는 개발자 진영에서 디자이너 친화로 다가간다. 2027~2028년쯤엔 이 경계가 더 흐려질 가능성이 높다.

19장 · AI 디자인의 진짜 함정

이 도구들은 마법이 아니다. 함정을 모르고 쓰면 6개월 뒤 후회한다.

함정 1 · 사양 표류 (spec drift) AI가 토하는 출력은 매번 약간씩 다르다. 같은 프롬프트로도 색·여백·텍스트 톤이 약간씩 변한다. 디자인 시스템 없이 여러 컴포넌트를 한 번에 만들면 사양이 표류한다. 시스템을 먼저, 컴포넌트를 다음에 만들어라.

함정 2 · 불일치한 컴포넌트 하나는 Button, 다른 하나는 CTA, 또 하나는 ActionButton. AI가 매번 새 이름을 만든다. 사람이 통합·정규화하지 않으면 코드베이스가 컴포넌트 정원으로 변한다.

함정 3 · 접근성 사각지대 <div onClick>이 <button>을 대체하는 코드, alt 없는 이미지, 키보드로 닿지 않는 토글. AI는 접근성을 자동으로 검증하지 않는다. WCAG 검증은 사람의 일이고, axe/Pa11y 같은 자동 도구로 보조.

함정 4 · 시맨틱이 아닌 마크업 <div className="text-2xl font-bold">로 헤딩을 그린다. 시각적으론 같지만 스크린리더엔 헤딩이 아니다. 시멘틱 태그(<h1>, <nav>, <main>)를 사람이 점검해라.

함정 5 · 가짜 데이터의 함정 AI가 토하는 컴포넌트는 가짜 데이터로 빛난다. 실제 데이터(빈 상태, 긴 텍스트, 오류 상태, 로딩 상태)에선 깨진다. 빈 상태·오류 상태·긴 데이터를 의도적으로 테스트하라.

함정 6 · 반응형 거짓말 데스크탑 뷰만 보면 잘 동작하는 것 같지만, 모바일·태블릿에선 깨진다. AI 출력은 반응형이 약하다 — 모든 크기에서 검증.

함정 7 · 디자인 시스템 vs AI 시스템 충돌 회사 디자인 시스템과 AI가 토하는 출력이 충돌한다. 매번 변환 비용이 든다. 해결: AI 도구에 디자인 시스템을 학습시키거나, 출력을 처음부터 사내 시스템에 맞춰 받는다.

함정 8 · 비용의 누적 표면 가격은 20달러처럼 보이지만 사용량 청구가 누적된다. 헤비 유저는 100~200달러가 흔하다. 분기마다 비용을 실측.

함정 10 · 디자인 사고의 위축 AI가 빨리 첫 답을 주니까 사람이 첫 답에 만족한다. 2~3번 더 다른 방향을 탐색하는 습관을 강제로 유지하지 않으면 디자인의 다양성이 줄어든다.

20장 · 통합 워크플로 — 도구를 어떻게 묶는가

2026년 실무에서 검증된 통합 패턴 3개.

패턴 1 · 디자이너 중심

Figma AI로 First Draft → 디자이너가 다듬는다
사내 디자인 시스템 컴포넌트로 마이그레이션
Figma Make 또는 Locofy로 React 코드 변환
개발자가 상태·라우팅·데이터를 채워 프로덕션 합류

패턴 2 · 개발자 중심

v0 또는 Subframe으로 컴포넌트 초안 생성
shadcn/ui 또는 사내 라이브러리로 정규화
개발자가 Next.js 프로젝트에 합류
디자이너가 시각적으로 검수·미세 조정

패턴 3 · 비-기술자 fast-track

Lovable 또는 Bolt.new로 풀 앱 prototype
Supabase 등 백엔드 셋업 자동 처리
직접 배포 또는 GitHub 익스포트
필요 시 개발자가 합류해 프로덕션화

조합 원칙

도구를 한 개로 좁히지 마라 — 단계별로 다른 도구가 낫다.
사내 디자인 시스템을 진실의 원천으로 유지 — AI는 입구, 시스템은 본진.
검증 단계를 비워두지 마라 — 시멘틱·접근성·반응형 점검.

21장 · Cursor + shadcn vs AI 디자인 툴

개발자가 자주 묻는 비교: "v0 같은 도구 vs Cursor + shadcn 직접"이다. 차이를 분해하면:

v0 같은 도구의 강점

디자인 발견 — 갤러리에서 영감을 얻는다
변형 비교 — 여러 안을 한 번에 보고 고른다
빠른 prototype — 채팅으로 즉시 결과
디자이너 친화 — 비-기술자 콜라보 가능

Cursor + shadcn 직접의 강점

컨텍스트 — 기존 프로젝트 전체를 본다
일관성 — 사내 컨벤션을 따라간다
통합 — 한 도구 안에서 디자인부터 배포까지
비용 통제 — 정액 구독 안에 들어간다

결론: 둘은 경쟁이 아니라 보완이다. 새 컴포넌트의 첫 안은 v0/Subframe, 기존 코드 안에서 합류·조정은 Cursor. 2026년 헤비 유저는 둘 다 쓴다.

22장 · 2026~2027 트렌드 — 어디로 가는가

트렌드 1 · 디자인+코드가 하나의 흐름으로 Figma Make처럼 디자인-코드 경계가 흐려지는 도구가 늘어난다. 디자이너가 코드를 보지 않고도 코드를 만들고, 개발자가 디자인을 그리지 않고도 디자인을 만든다.

트렌드 2 · 디자인 토큰을 AI가 1급으로 2025~2026년 변화 중에서도 가장 중요한 것 — AI가 토큰을 인지하고 사용한다. CSS 변수, Figma variables, 디자인 토큰 표준(W3C draft)이 AI 출력에 자동 반영된다.

트렌드 3 · 접근성 우선 AI 규제 압박(EU의 European Accessibility Act 2025 시행 등)과 시장 요구로 AI 디자인 도구의 접근성 자동 검증이 1급 시민이 된다. axe·Pa11y 같은 도구가 출력 파이프라인에 빌트인된다.

트렌드 4 · 멀티모달 입력 확장 텍스트 외에 스크린샷, 손그림, 음성, 비디오에서 디자인을 만드는 흐름. Uizard가 선구자였지만 2026년엔 v0·Lovable도 따라잡는다.

트렌드 5 · 사내 디자인 시스템 통합 "내 회사의 디자인 시스템을 학습"이 표준 기능이 된다. 도구가 사내 Storybook·Figma 라이브러리·토큰을 임포트하고 그 안에서만 생성하도록 제약하는 옵션이 늘어난다.

트렌드 6 · 디자인-개발 핸드오프의 종말? "디자이너→개발자 핸드오프"라는 단어가 사라질 가능성. 동일 캔버스에서 두 직군이 같이 작업한다. 핸드오프 자동화 도구(Anima·Locofy)는 통합 도구(Figma Make·Subframe)에 흡수된다.

트렌드 7 · 오픈소스의 등장 v0의 출력(shadcn 기반)이 사실상 오픈소스, Penpot AI는 도구 자체가 오픈소스. "AI 디자인 도구 = SaaS only"의 명제가 깨진다.

에필로그 — 체크리스트 · 안티패턴 · 다음 글 예고

2026년 봄, AI 디자인 툴 필드는 디자이너-led와 개발자-led로 갈렸고, 둘 다 빠르게 발전 중이다. "최고"는 없다. 당신 역할·디자인 시스템·팀 크기에 맞는 도구의 조합이 있을 뿐이다.

도구 선택 체크리스트 (번호순)

역할을 먼저 확정한다 — 디자이너 / 개발자 / 마케터·PM / 비-기술자.
디자인 시스템의 진실의 원천을 확인한다 — Figma 안 / 코드 안 / 없음.
도구의 surface를 결정한다 — 브라우저 / Figma 안 / IDE / CLI.
출력 포맷을 워크플로에 맞춘다 — React / Vue / Figma / 비주얼 자산.
자율성 레벨을 정한다 — 컴포넌트 / 페이지 / 풀 앱.
가격 모델과 헤비 유저 실비용을 추정한다.
디자인 시스템 정합성을 검증한다 — shadcn / Tailwind / Material / 사내.
후보를 2~3개로 좁힌다 — 표는 좁히는 도구.
일주일간 실제 작업으로 검증한다 — 정량 + 정성.
분기마다 반나절씩 재평가한다 — 이 필드는 빠르다.

안티패턴 (하지 마라)

첫 출력을 그대로 프로덕션에 넣기 — 시멘틱·접근성·반응형을 검증하라.
AI 출력의 컴포넌트 이름을 그대로 두기 — 매번 새 이름이 생긴다. 정규화하라.
사내 디자인 시스템 무시 — AI는 입구, 시스템은 본진이다.
표면 가격만 보고 안심 — 사용량 청구를 실측하라.
한 도구에 종교 갖기 — 단계별로 다른 도구가 낫다.
변형 탐색 생략 — 첫 답에 만족하면 디자인이 좁아진다.
접근성을 나중 일로 미루기 — 처음부터 검증.
분기 재평가 건너뛰기 — 6개월 뒤 한물간 도구를 쓰고 있다.

다음 글 예고

같은 시리즈로 다룰 주제: (1) shadcn/ui 심층 분석 — 왜 표준이 되었나, (2) 디자인 토큰의 진짜 표준 — W3C·CSS 변수·Figma variables, (3) 접근성-퍼스트 컴포넌트 라이브러리 비교, (4) Figma 대안의 풍경 — Penpot·Sketch·Phase·국내 도구.

도구는 입구이고 디자인 시스템은 본진이다. AI가 입구를 빠르게 만들수록, 본진의 일관성이 가치를 결정한다.

참고 자료 (References)

Vercel v0 — 공식
shadcn/ui — v0의 출력 기반 라이브러리
Lovable — 공식 (구 GPT Engineer)
Bolt.new — StackBlitz
Figma AI — Figma 공식 AI 페이지
Figma Make — Figma 디자인-코드 통합
Galileo AI / Stitch — 구글 인수 이후 후속 도구
Uizard — Miro 인수
Subframe — Tailwind 퍼스트
Magic Patterns — 변형 갤러리
Tempo — 디자인 시스템 부트스트랩
Builder.io — Mantis · Figma to code
Plasmic — 비주얼 빌더
Anima — Figma to code
Locofy — Figma to React
Khroma — AI 컬러 팔레트
Spline — 3D 디자인 AI
Microsoft Designer — Microsoft 365 통합
Adobe Firefly — Adobe AI
Canva Magic Studio — 비-기술자 디자인
Penpot — 오픈소스 Figma 대안
Phase — 모션·인터랙션 (한국 출신)
W3C Design Tokens Community Group — 토큰 표준
European Accessibility Act 2025 — EU 규제
shadcn/ui · Radix — 접근성 베이스라인