Figma 구독료 내면서 초안 스케치하고 계셨나요? 이제 안 해도 됩니다. Google이 Gemini 기반 AI 디자인 도구를 완전 무료로 풀었는데, 발표 당일 Figma 주가가 8.8% 빠졌어요. 이름은 Stitch. 텍스트 한 줄로 UI가 나오고, 실시간 멀티플레이어 편집도 되고, React 코드까지 뽑아줘요. 전부 무료로요.
이게 뭔데?
Google Stitch는 Google Labs에서 만든 AI 기반 UI 디자인 플랫폼이에요. Gemini 2.5 Flash/Pro를 기반으로 텍스트, 이미지, 음성 명령을 받아서 UI를 생성해줘요. 2025년 Google I/O에서 처음 공개됐고, 2026년 3월 대규모 업데이트를 통해 "AI 네이티브 무한 캔버스"로 완전히 재구축됐어요.
가장 크게 달라진 건 "실시간 스트리밍 에이전트"예요. 입력하는 동안 UI 컴포넌트가 실시간으로 렌더링되고, Agent Manager가 프로젝트 전체 히스토리를 기억해서 일관된 결과를 만들어줘요. Figma처럼 여러 명이 동시에 편집하는 멀티플레이어 기능도 이번에 추가됐어요 — 전부 무료로요.
한 가지 더 주목할 게 있어요. DESIGN.md라는 오픈소스 포맷이에요. Apache 2.0으로 공개된 마크다운 기반 디자인 시스템 포맷인데, 색상, 타이포그래피, 간격, 컴포넌트 패턴을 텍스트로 정의하면 AI가 이걸 읽어서 모든 화면에 일관성 있게 적용해줘요. Git으로 버전 관리가 되고, Claude Code나 Cursor 같은 AI 코딩 도구와도 호환돼요.
Stitch의 4가지 AI 모드도 알아두면 좋아요:
- Flash 모드 (Gemini 2.5 Flash)
60~90초 내에 빠른 초안을 생성해요. 아이디어를 빠르게 확인하거나 여러 방향을 탐색할 때 써요. - Thinking 모드
복잡한 UI 흐름과 멀티스크린 설계에 최적화돼 있어요. 조금 느리지만 복잡한 서비스 구조를 한 번에 설계할 때 효과적이에요. - Redesign 모드
기존 스크린샷을 업로드하면 고해상도 재설계 버전을 만들어줘요. 레거시 화면 리뉴얼에 유용해요. - Ideate 모드
하나의 설명에서 여러 가지 창의적 컨셉을 동시에 제안해요. 클라이언트 초기 방향 탐색에 딱이에요.
뭐가 달라지는 건데?
솔직히 "AI 디자인 도구"는 이미 많아요. Figma Make, v0, MagicPath, Framer AI... 근데 Stitch가 다른 건 구글이 만들었다는 것 말고도, 탐색 단계 전체를 무료로 열어버렸다는 거예요. 기존 워크플로우는 Figma에 들어가서 아무것도 없는 캔버스에서 시작했는데, 이제 Stitch에서 수십 가지 방향을 2분 만에 뽑아보고 Figma로 가져가서 정제하는 방식이 가능해졌어요.
| 기존 워크플로우 (Figma 단독) | Stitch → Figma 조합 | |
|---|---|---|
| 초안 생성 | 디자이너가 하나하나 수동 배치 (수 시간) | 텍스트 입력 → 2분 내 여러 방향 생성 |
| 아이디어 탐색 | 1~2개 방향만 실현 가능 | Ideate 모드로 동시에 여러 컨셉 비교 |
| 비개발자 참여 | Figma 학습 필요, 진입장벽 높음 | PM, 기획자도 음성으로 즉시 프로토타입 생성 |
| 브랜드 적용 | 디자인 시스템 컴포넌트 수동 적용 | DESIGN.md 한 번 설정 → 전체 자동 적용 |
| 코드 연동 | 개발자 핸드오프 + 수동 구현 | MCP 서버로 Claude Code, Cursor에 직접 연결 |
| 비용 | Figma Pro: $15/에디터/월 | Stitch 탐색 단계: 무료 |
하지만 아직 Figma를 완전히 대체할 수는 없어요. 실제로 써본 사람들이 공통적으로 말하는 한계가 있어요.
Stitch의 현재 한계
마이크로 인터랙션 구현 불가, 반응형 일관성 부족, 복잡한 컴포넌트 시스템 관리 어려움. 현재 협업 기능도 Figma 수준은 아니에요. 프로덕션 최종 완성본보다는 아이디에이션과 초안 검증 단계에서 진가를 발휘해요.
| 도구 | 핵심 강점 | 최적 사용 단계 | 가격 |
|---|---|---|---|
| Google Stitch | AI 에이전트 탐색, 무료, DESIGN.md | 아이디에이션 → 초안 | 무료 (350회/월) |
| Figma | 팀 협업, 디자인 시스템, 2,000+ 플러그인 | 정제 → 프로덕션 | $15/에디터/월~ |
| MagicPath | 무한 캔버스, Figma 임포트 | 디자인 → 코드 | 무료 / $20/월 Pro |
| v0 (Vercel) | shadcn/ui 컴포넌트, 개발자 친화적 | 컴포넌트 개발 | 무료 / 유료 |
핵심만 정리: 시작하는 법
- Stitch 접속 및 가입
stitch.withgoogle.com에서 Google 계정으로 로그인해요. 신용카드 없이 즉시 시작. 월 350회 무료 생성이에요. - 첫 프롬프트 입력
원하는 UI를 설명해요. "SaaS 대시보드 메인 화면, 다크 모드, 좌측 사이드바" 식으로 구체적일수록 좋아요. Flash 모드로 빠르게 여러 방향을 먼저 탐색해보세요. - DESIGN.md 설정 (선택, 강력 추천)
기존 브랜드 URL을 붙여넣으면 Stitch가 자동으로 디자인 시스템을 추출해줘요. 색상, 폰트를 직접 정의하면 이후 모든 생성물에 자동 적용돼요. - Agent Manager로 반복 탐색
Voice Canvas나 직접 편집으로 수정해요. Ideate 모드로 여러 방향을 탐색하고 마음에 드는 방향을 선택해서 이어가세요. - 내보내기
Figma 레이어로 내보내거나 (공식 커뮤니티 플러그인 활용), HTML/Tailwind CSS 코드를 직접 내보낼 수 있어요. MCP 서버 연결로 Claude Code, Cursor에서 바로 이어서 개발 가능해요.
처음 쓸 때 이것만 기억하세요
모호한 한 문장 프롬프트는 제네릭한 결과를 낳아요. "4단계 프레임"을 써보세요: 기초 화면 설명 → 미적 분위기 설명 → 화면별 세부 수정 → DESIGN.md로 테마 통일. 이 순서대로 하면 처음부터 훨씬 일관된 결과가 나와요.
