Google Stitch vs Claude Design — AI 디자인 툴 2파전, 뭘 써야 하나

Figma 주가가 11% 빠졌습니다. 3월에 Stitch, 4월에 Claude Design. 한 달 새 AI 디자인 툴 2개가 연속 출시됐습니다.

[핵심 요약]
→ Google Stitch: 3월 19일 대규모 업데이트, 무료
→ Claude Design: 4월 17일 출시, Opus 4.7 기반, 유료 구독 필요
→ 공통점: 자연어 → UI/프로토타입 자동 생성
→ 차이점: Stitch는 디자이너용, Claude Design은 비디자이너용
→ 피해자: Figma (출시 당일 7% 하락)
→ 결론: 용도가 달라 경쟁 구도라기보단 상호보완

---

출시 배경 — Figma가 왜 떨었나

타임라인:
→ 3월 14일: Anthropic CPO Mike Krieger, Figma 이사회 조용히 사임
→ 3월 19일: Google Stitch 대규모 업데이트 발표 (Figma 4% 하락)
→ 4월 16일: The Information, "Anthropic 다음 모델에 디자인 툴 포함" 보도
→ 4월 17일: Claude Design 공식 출시 (Figma 추가 7% 하락)
→ 누적: Figma 주가 약 11% 하락

두 툴 모두 "Figma 대체"보다는 "Figma 이전 단계"를 노립니다. 아이디어 → 초안 → Figma로 넘기는 흐름에서 초안 단계를 AI로 대체하는 것입니다.

---

Google Stitch 완전 정리

출시: 2025년 5월 Google I/O (초기) → 2026년 3월 19일 대규모 업데이트 가격: 완전 무료 (Google 계정만 필요) 주소: stitch.withgoogle.com

[Stitch가 할 수 있는 것]
→ 자연어 → 고해상도 UI 생성 (웹/모바일)
→ 한 번에 최대 5개 화면 동시 생성
→ 인터랙티브 프로토타입 (화면 연결 → Play 버튼으로 플로우 확인)
→ 음성 명령으로 실시간 디자인 수정 (Voice Canvas)
→ URL에서 디자인 시스템 자동 추출
→ DESIGN.md로 디자인 규칙 내보내기/가져오기
→ 코드 내보내기: HTML + Tailwind CSS
→ Figma로 내보내기 지원
→ Agent Manager: 여러 방향 병렬 탐색

# Stitch 워크플로우 예시
"""
1. stitch.withgoogle.com 접속
2. 프롬프트 입력:
   "쇼핑 앱 설계:
   - 홈 화면 (추천 상품 그리드)
   - 상품 상세 페이지
   - 장바구니
   - 결제 화면
   - 주문 완료 화면"

3. 5개 화면 동시 생성

4. Voice Canvas로 수정:
   "헤더를 더 미니멀하게, 상품 카드에 별점 추가"

5. Play 버튼 → 인터랙티브 플로우 확인

6. Figma 내보내기 또는 HTML+Tailwind 코드 복사
"""

[Stitch 무료 플랜 한도]
→ Standard Mode (Gemini 2.5 Flash): 350회/월
→ Experimental Mode (Gemini 2.5 Pro): 50회/월
→ 신용카드 불필요, Google 계정만 있으면 OK

[Stitch 한계]
→ 코드 출력: HTML+Tailwind만 (React, Vue, SwiftUI 미지원)
→ 디자인 시스템 관리: 팀 컴포넌트 라이브러리 강제 불가
→ 마이크로 인터랙션: 호버, 스크롤, 로딩 애니메이션 미지원
→ Google 생태계 의존: Firebase Studio 통합 외 다른 스택은 마찰 있음
→ AI 일관성: 같은 프롬프트도 결과 품질 차이 있음

---

Claude Design 완전 정리

출시: 2026년 4월 17일 (Research Preview) 가격: Claude Pro/Max/Team/Enterprise 구독자 포함 주소: claude.ai/design

[Claude Design이 할 수 있는 것]
→ 자연어 → 프로토타입, 슬라이드, 원페이저, 마케팅 자료
→ 팀 디자인 시스템 자동 적용 (코드베이스/디자인 파일 읽어서)
→ 인라인 코멘트로 특정 요소 수정 지시
→ 조정 노브(adjustment knobs)로 색상/여백/레이아웃 실시간 수정
→ Claude Code로 직접 핸드오프 (구현 번들 패키징)
→ 조직 내 협업 (링크 공유, 편집 권한 부여)
→ 내보내기: PDF, PPTX, HTML, Canva
→ 커스텀 슬라이더로 속성 패널 직접 추가 가능

# Claude Design 워크플로우 예시
"""
1. claude.ai/design 접속

2. 프롬프트 입력:
   "명상 앱 프로토타입 만들어줘.
   차분한 미스티 블루 컬러 팔레트,
   홈 화면에 일일 명상 트래킹 기능 포함,
   다크 모드 토글 있어야 함"

3. Claude Opus 4.7이 인터랙티브 프로토타입 생성

4. 인라인 코멘트:
   [특정 버튼 클릭] → "이 버튼 크기 키우고 그림자 추가"

5. 조정 노브로 여백/색상 실시간 수정

6-A. Claude Code 핸드오프:
   "이 디자인 구현해줘" → 번들 전달 → Claude Code가 코드 작성

6-B. Canva 내보내기 → Canva에서 완전 편집 가능

6-C. PDF/PPTX 내보내기 → 바로 공유
"""

[Claude Design 차별점]
→ Tweaks Window: 다른 툴과 달리 속성 패널을 사용자가 직접 추가 가능
   (다크모드 토글, 코너 반경, 글로우 슬라이더 등)
→ 브랜드 시스템 읽기: 기존 코드베이스/디자인 파일 분석 → 자동 적용
→ Claude Code 직접 연결: 디자인 → 코드까지 Anthropic 생태계 내에서 완결
→ 20+ 프롬프트 → 2 프롬프트: Brilliant 팀 실제 사례
→ Canva 파트너십: 4월 10일 공식 파트너십 → Canva에서 완전 편집

[Claude Design 한계]
→ 유료 구독 필요 (Pro $20/월 이상)
→ Research Preview — 아직 안정화 전
→ 전문 디자이너 도구 수준은 아님 (Figma 대체 불가)
→ Anthropic 생태계 의존 (Claude Code 핸드오프)
→ 팀 기능: Enterprise는 기본 비활성화, 관리자 설정 필요

---

핵심 비교표

               Google Stitch           Claude Design
출시:          2025.05 (2026.03 대규모 업데이트)  2026.04.17
가격:          완전 무료                Pro $20/월 이상
모델:          Gemini 2.5 Flash/Pro    Claude Opus 4.7
주 대상:       디자이너, 개발자         비디자이너 (PM, 창업자, 마케터)
UI 생성:       ✅ (최대 5화면 동시)     ✅
슬라이드:      △ (제한적)              ✅ (핵심 기능)
마케팅 자료:   △                       ✅
프로토타입:    ✅ Play 버튼 플로우      ✅ 인터랙티브
음성 입력:     ✅ Voice Canvas          ❌
브랜드 시스템: △ URL 추출              ✅ 코드베이스 읽기
코드 출력:     HTML + Tailwind          HTML
React 지원:    ❌ (예정)               ❌
Figma 연동:    ✅ 내보내기             ❌
Claude Code:   ❌                      ✅ 직접 핸드오프
Canva 연동:    ❌                      ✅ 파트너십
PPTX 내보내기: ❌                      ✅
팀 협업:       제한적                  ✅ 조직 공유

---

실전 — 어떤 상황에 뭘 쓰나

def choose_design_tool(user_type, task, budget):

    # 비디자이너 + 빠른 초안
    if user_type in ["PM", "창업자", "마케터"] and budget == "무료":
        return "Google Stitch"  # 무료, 5화면 동시 생성

    # 슬라이드/피치덱/원페이저
    if task in ["slide", "pitch_deck", "one_pager"]:
        return "Claude Design"  # 슬라이드 특화

    # 웹/모바일 UI 프로토타입, 무료
    if task == "ui_prototype" and budget == "무료":
        return "Google Stitch"  # 무료 + 플로우 연결

    # Claude Code로 바로 구현할 계획
    if task == "prototype_to_code" and "claude_code" in stack:
        return "Claude Design"  # 핸드오프 직접 연결

    # Firebase/Google 생태계
    if "firebase" in stack or "google_cloud" in stack:
        return "Google Stitch"  # Firebase Studio 연동

    # 기업 브랜드 가이드 자동 적용
    if task == "brand_consistent_design":
        return "Claude Design"  # 코드베이스 읽어서 브랜드 적용

    # 음성으로 빠른 수정
    if prefer_voice_input:
        return "Google Stitch"  # Voice Canvas

    # 기본값
    return "Google Stitch"  # 무료니까

[상황별 추천]

Google Stitch 쓸 때:
→ 돈 없음, 무료로 UI 뽑고 싶음
→ 웹/모바일 앱 화면 여러 개 동시에 만들고 싶음
→ 음성으로 실시간 수정하고 싶음
→ Figma로 넘겨서 마무리할 계획
→ Firebase 기반 프로젝트

Claude Design 쓸 때:
→ 이미 Claude Pro/Max 구독 중
→ 피치덱, 슬라이드, 원페이저가 주 목적
→ Claude Code로 바로 구현할 계획
→ 회사 브랜드 가이드 자동 반영 필요
→ Canva에서 편집 이어서 할 계획
→ 팀 공유/협업 필요

---

마무리

✅ Google Stitch 써야 할 때
→ 무료로 UI 프로토타입 빠르게 뽑을 때
→ 여러 화면 흐름을 한 번에 잡을 때
→ 음성으로 실시간 디자인 수정
→ Firebase/Google 스택 개발자
→ Figma 전 단계 아이데이션 용도

✅ Claude Design 써야 할 때
→ 이미 Claude Pro/Max 구독자 (추가 비용 없음)
→ 슬라이드, 피치덱, 마케팅 원페이저 주력
→ Claude Code 핸드오프까지 원스톱
→ 회사 브랜드 시스템 자동 적용 필요
→ 비디자이너가 빠른 시각 자료 필요할 때

❌ 둘 다 대체 못하는 것
→ 프로덕션 수준 디자인 시스템 관리 → Figma
→ 팀 전체 협업 도구 → Figma
→ 정밀한 픽셀 수준 제어 → Figma
→ 네이티브 모바일 앱 → 별도 툴

---

 

관련 글:

https://cell-devlog.tistory.com/146

Lovable 완전 가이드 — 코드 한 줄 없이 풀스택 SaaS MVP를 30분에 만드는 법