내가 말하면 AI가 웹사이트를 디자인한다 — 구글이 무료 공개한 Stitch, '바이브 디자인' 시대의 시작
구글 Labs가 텍스트와 음성만으로 클릭 가능한 UI를 만들어주는 AI 디자인 플랫폼 Stitch를 무료 공개했습니다. Gemini 3.1 Pro 기반으로 작동하며, 코딩이나 디자인 경험 없이도 고품질 웹·앱 화면을 만들 수 있습니다.
"로그인 페이지 만들어줘"라고 입력하면 AI가 클릭까지 되는 진짜 웹 화면을 만들어줍니다. 구글 Labs가 3월 18일 공개한 Stitch는 텍스트나 음성 한마디로 고품질 UI(사용자 화면)를 생성하는 AI 디자인 플랫폼입니다. 피그마(Figma)나 포토샵 같은 전문 도구를 배울 필요 없이, 말로 설명하면 AI가 알아서 디자인합니다.
'바이브 디자인'이란 무엇인가
지금까지 AI로 코드를 짜는 것을 '바이브코딩(vibe coding)'이라 불렀습니다. 구글은 여기서 한 발 더 나아가 '바이브 디자인(vibe design)'이라는 새로운 개념을 제시했습니다. 와이어프레임(화면 설계도)부터 시작하는 기존 방식 대신, 원하는 것을 말로 설명하면 AI가 여러 디자인 시안을 동시에 탐색하고 가장 적합한 결과를 보여줍니다.
구글 Labs 블로그에 따르면 Stitch는 Gemini 3.1 Pro 모델을 기반으로 작동하며, 디자인 전문가뿐 아니라 디자인 경험이 전혀 없는 창업자나 기획자도 사용할 수 있도록 설계됐습니다.
핵심 기능 5가지
"쇼핑몰 메인 페이지 만들어줘"처럼 한국어로 입력하거나 말하면, AI가 바로 디자인을 생성합니다. 생성된 화면은 정적 이미지가 아니라 실제로 클릭하고 이동할 수 있는 프로토타입(시제품)입니다.
이미지, 텍스트, 코드 조각을 하나의 작업 공간에 자유롭게 배치할 수 있습니다. 레퍼런스 사진을 옆에 놓고 "이 느낌으로 만들어줘"라고 지시하는 것이 가능합니다.
화면을 보면서 "이 버튼 색상을 파란색으로 바꿔줘"라고 말하면 AI가 즉시 수정합니다. 마우스 조작 없이 대화만으로 디자인을 다듬을 수 있습니다.
브랜드 색상, 폰트, 버튼 스타일 등 디자인 규칙을 DESIGN.md라는 파일 하나에 정리하면, AI가 이 규칙을 자동으로 따릅니다. 팀원 모두가 일관된 디자인을 유지할 수 있습니다.
Stitch SDK를 사용하면 코드에서 직접 UI를 생성하고 HTML을 추출할 수 있습니다. 또한 MCP(AI가 외부 도구를 연결해서 쓸 수 있게 해주는 규격) 서버를 제공해 Claude Code나 Cursor 같은 AI 코딩 도구와 연결할 수 있습니다.
지금 바로 사용하는 방법
웹 브라우저에서 바로 사용할 수 있습니다. 별도 설치가 필요 없고, Gemini를 사용할 수 있는 지역이라면 누구나 무료로 접속할 수 있습니다.
웹에서 사용하기: stitch.withgoogle.com에 접속해서 구글 계정으로 로그인하면 바로 시작할 수 있습니다.
개발자라면 TypeScript SDK를 설치해서 코드에서 직접 활용할 수도 있습니다.
# SDK 설치
npm install @google/stitch-sdk
# Vercel AI SDK 연동 (선택)
npm install @google/stitch-sdk ai설치 후 몇 줄의 코드로 UI를 생성할 수 있습니다.
import { stitch } from "@google/stitch-sdk";
const project = stitch.project("my-project");
const screen = await project.generate("쇼핑몰 메인 페이지");
const html = await screen.getHtml(); # HTML 코드 추출
const image = await screen.getImage(); # 스크린샷 추출AI 코딩 도구에서 연결하려면 MCP 서버를 활용합니다. 설정 방법은 Stitch MCP 설정 가이드에서 확인할 수 있습니다.
기존 도구와 무엇이 다른가
AI로 UI를 만드는 도구가 Stitch만 있는 것은 아닙니다. Vercel의 v0는 텍스트로 React 컴포넌트를 만들고, Bolt.new는 전체 웹앱을 생성합니다. 하지만 Stitch는 몇 가지 차별점이 있습니다.
| 비교 항목 | Stitch | v0 (Vercel) | Bolt.new |
|---|---|---|---|
| 음성 입력 | ✅ | ❌ | ❌ |
| 클릭 가능한 프로토타입 | ✅ | ✅ | ✅ |
| 디자인 시스템 규칙(DESIGN.md) | ✅ | ❌ | ❌ |
| MCP 서버 제공 | ✅ | ❌ | ❌ |
| 무료 사용 | ✅ | 제한적 | 제한적 |
가장 큰 차이는 음성 편집과 DESIGN.md입니다. 음성으로 실시간 수정이 가능하다는 것은 마우스와 키보드에 익숙하지 않은 비개발자에게 특히 유용합니다. DESIGN.md는 바이브코딩에서 CLAUDE.md가 코딩 규칙을 담는 것처럼, 디자인 규칙을 AI에게 전달하는 표준 형식이 될 가능성이 있습니다.
SDK는 GitHub 스타 717개로 빠르게 성장 중
Stitch의 TypeScript SDK는 공개 하루 만에 GitHub 스타 717개를 기록했습니다. 모바일·데스크톱·태블릿 등 다양한 디바이스 화면을 지정해서 생성할 수 있고, Gemini 3 Pro와 Flash 두 가지 모델을 선택할 수 있습니다. 빠른 시안이 필요하면 Flash, 높은 품질이 필요하면 Pro를 쓰면 됩니다.
또한 Vercel AI SDK와 연동되어, AI 에이전트가 자율적으로 UI를 생성하는 워크플로우도 구축할 수 있습니다.
누가, 어떻게 활용하면 좋을까
투자 발표 전 프로토타입이 필요할 때, 디자이너를 구하기 전에 Stitch로 클릭 가능한 시제품을 만들어 보여줄 수 있습니다.
랜딩 페이지 초안을 직접 만들어서 개발팀에 전달할 수 있습니다. "이런 느낌으로 만들어주세요" 대신 실제 작동하는 화면을 보여줄 수 있습니다.
Claude Code나 Cursor로 앱을 만들 때 디자인이 걸림돌이었다면, Stitch MCP 서버를 연결해서 AI 코딩 도구가 직접 UI를 생성하도록 할 수 있습니다.
반복적인 시안 작업을 AI에게 맡기고, 중요한 디자인 의사결정에 집중할 수 있습니다. DESIGN.md로 브랜드 규칙을 세팅해두면 AI가 알아서 따릅니다.
바이브코딩 다음은 바이브 디자인
2025년부터 '바이브코딩'이 개발 문화를 바꿨듯이, 구글은 디자인 영역에서도 같은 변화를 만들려 합니다. 코딩을 모르는 사람이 AI에게 코드를 맡기듯, 디자인을 모르는 사람이 AI에게 디자인을 맡기는 시대입니다.
아직 Stitch가 전문 디자이너의 섬세한 작업을 완전히 대체할 수는 없겠지만, "아이디어를 빠르게 눈에 보이는 화면으로 만드는 것"에서는 이미 충분히 쓸 만합니다. 특히 무료라는 점이 강력합니다. 바이브코딩에 이어 바이브 디자인까지 — AI 덕분에 만들고 싶은 것을 만드는 데 필요한 기술 장벽이 계속 낮아지고 있습니다.
관련 콘텐츠 — Easy클코로 AI 시작하기 | 무료 학습 가이드 | AI 뉴스 더보기