“디자인은 했는데 코드로 옮기는 게 너무 오래 걸려요.” 프론트엔드 개발자라면 한 번쯤 해봤을 푸념이죠. 반대로 디자이너는 “내가 원한 건 이게 아닌데…”를 속으로 삼키곤 합니다. 이 간극을 AI가 메워줄 수 있다면 어떨까요? 오늘은 Google의 AI 디자인 도구 Stitch와 Claude를 조합해서 아이디어를 실제 웹페이지로 빠르게 구현하는 워크플로우를 소개합니다.
Google Stitch란?
Google Stitch는 Google Labs에서 2025년 5월 Google I/O에서 공개한 AI 기반 UI 디자인 도구입니다. 자연어 프롬프트나 스케치/와이어프레임 이미지를 입력하면 완성된 UI 디자인과 프론트엔드 코드를 생성해주죠.
핵심 기능
- 자연어 → UI: “할 일 관리 앱의 메인 화면” 같은 프롬프트로 디자인 생성
- 이미지 → UI: 손 스케치나 경쟁사 스크린샷을 참고 이미지로 활용
- 듀얼 AI 모드: Gemini 2.5 Flash(빠른 생성, 월 350회)와 Gemini 2.5 Pro(고품질, 월 50회)
- Figma/코드 내보내기: 디자인을 Figma에 붙여넣거나 HTML/CSS로 추출 가능
2025년 12월부터는 Gemini 3가 탑재되어 UI 생성 품질이 더 올라갔습니다. 현재 무료로 사용할 수 있어요.
왜 Claude와 조합하나요?
Stitch가 UI 디자인과 기본 HTML/CSS를 잘 뽑아주지만, 몇 가지 한계가 있습니다:
- 복잡한 인터랙션이나 애니메이션 미지원
- React/Vue 같은 프레임워크 코드 직접 생성 불가
- 비즈니스 로직이나 API 연동 코드 없음
여기서 Claude가 빛을 발합니다. Stitch가 만든 디자인/코드를 Claude에게 넘기면:
- HTML/CSS를 React/Vue 컴포넌트로 변환
- 인터랙션 로직 추가
- 접근성(a11y) 개선
- 반응형 세부 조정
Stitch = 빠른 시각화, Claude = 프로덕션급 코드 변환. 이 조합이 핵심입니다.
실전 워크플로우: 랜딩페이지 만들기
SaaS 제품의 랜딩페이지를 만드는 예시로 워크플로우를 살펴보죠.
Step 1: Stitch에서 디자인 생성
stitch.withgoogle.com/create에 접속해서 프롬프트를 입력합니다:
프로젝트 관리 SaaS의 랜딩페이지.
히어로 섹션에 제목, 부제목, CTA 버튼.
아래에 3개의 기능 카드.
모던하고 깔끔한 스타일, 파란색 계열.
몇 초 후 디자인이 생성됩니다. 마음에 들 때까지 “재생성(Regenerate)” 버튼으로 변형을 뽑아보세요.
Step 2: HTML/CSS 코드 추출
디자인이 확정되면 우측 패널에서 “Code” 탭을 클릭합니다. HTML과 CSS 코드가 나오는데, 이걸 복사해둡니다.
<!-- Stitch가 생성한 코드 예시 (간략화) -->
<div class="hero">
<h1>프로젝트 관리의 새로운 기준</h1>
<p>팀 협업을 10배 빠르게</p>
<button class="cta-btn">무료로 시작하기</button>
</div>
<div class="features">
<div class="feature-card">...</div>
<div class="feature-card">...</div>
<div class="feature-card">...</div>
</div>Step 3: Claude에게 React 컴포넌트로 변환 요청
이제 Claude에게 이 코드를 넘기면서 요청합니다:
아래 HTML/CSS를 React + Tailwind CSS 컴포넌트로 변환해줘.
- TypeScript 사용
- 반응형 (모바일 우선)
- CTA 버튼에 onClick 핸들러 추가
- 기능 카드는 props로 데이터 받게
[Stitch에서 복사한 HTML/CSS 붙여넣기]
Claude가 깔끔한 React 컴포넌트를 생성해줍니다:
interface FeatureCardProps {
icon: React.ReactNode;
title: string;
description: string;
}
function FeatureCard({ icon, title, description }: FeatureCardProps) {
return (
<div className="p-6 bg-white rounded-xl shadow-sm hover:shadow-md transition-shadow">
<div className="w-12 h-12 mb-4 text-blue-600">{icon}</div>
<h3 className="text-lg font-semibold mb-2">{title}</h3>
<p className="text-gray-600">{description}</p>
</div>
);
}
export function LandingPage() {
const handleCTAClick = () => {
// 회원가입 페이지로 이동 또는 모달 열기
};
return (
<main className="min-h-screen">
{/* Hero Section */}
<section className="px-4 py-20 text-center bg-gradient-to-b from-blue-50 to-white">
<h1 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
프로젝트 관리의 새로운 기준
</h1>
<p className="text-xl text-gray-600 mb-8">
팀 협업을 10배 빠르게
</p>
<button
onClick={handleCTAClick}
className="px-8 py-3 bg-blue-600 text-white rounded-lg font-medium
hover:bg-blue-700 transition-colors"
>
무료로 시작하기
</button>
</section>
{/* Features Section */}
<section className="px-4 py-16 max-w-6xl mx-auto">
<div className="grid md:grid-cols-3 gap-8">
{features.map((feature) => (
<FeatureCard key={feature.title} {...feature} />
))}
</div>
</section>
</main>
);
}Step 4: 반복 & 확장
기본 컴포넌트가 완성되면 Claude에게 추가 요청을 이어갑니다:
- “네비게이션 바 추가해줘”
- “다크모드 지원하게 수정해줘”
- “스크롤 애니메이션 넣어줘 (framer-motion 사용)”
이렇게 대화형으로 기능을 확장해나가면 됩니다.
더 강력한 방법: Stitch MCP 서버 연동
위 워크플로우에서 한 가지 아쉬운 점이 있습니다. Stitch에서 디자인을 만들고, 코드를 복사해서, Claude에게 붙여넣는 수동 과정이죠. 화면이 여러 개면 매번 이 작업을 반복해야 합니다. 게다가 “홈 화면”과 “프로필 화면”을 따로 만들면 폰트, 색상, 분위기가 제각각이 되기 쉽죠.
이 문제를 해결하는 게 Stitch MCP 서버입니다. MCP(Model Context Protocol)는 AI 에이전트가 외부 도구와 통신하는 표준 프로토콜인데, Stitch MCP를 설정하면 Claude가 Stitch에 직접 접근할 수 있습니다.
Stitch MCP가 해결하는 문제
- 컨텍스트 유지: 이전에 만든 디자인을 Claude가 “기억”
- 디자인 시스템 일관성: 같은 프로젝트 내 화면들이 동일한 스타일 유지
- 자동화: 복사-붙여넣기 없이 자연어로 디자인 요청
Claude Code에서 설정하기
Claude Code를 사용 중이라면 ~/.claude/settings.json에 MCP 서버를 추가합니다:
{
"mcpServers": {
"stitch": {
"command": "npx",
"args": ["@anthropic-ai/stitch-mcp", "proxy"],
"env": {
"STITCH_PROJECT_ID": "your-project-id"
}
}
}
}설정 후 Claude Code를 재시작하면 Stitch 관련 도구들이 활성화됩니다.
MCP 연동 워크플로우
MCP가 연결되면 워크플로우가 훨씬 간단해집니다:
나: 프로젝트 관리 SaaS 랜딩페이지 디자인해줘
Claude: [Stitch MCP로 디자인 생성]
디자인이 생성됐어요. 파란색 계열 모던 스타일로
히어로 섹션과 기능 카드 3개를 배치했습니다.
React 컴포넌트로 변환할까요?
나: 응, Tailwind CSS로 변환해줘
Claude: [이전 디자인 컨텍스트 유지하며 코드 생성]
완료했어요. 이제 프로필 페이지도 만들까요?
나: 응, 같은 스타일로
Claude: [동일한 디자인 시스템 적용하여 생성]핵심은 컨텍스트 유지입니다. 수동 워크플로우에서는 각 화면을 따로 만들어서 일관성이 깨지기 쉬웠는데, MCP를 쓰면 Claude가 전체 프로젝트를 “보면서” 작업합니다.
stitch-mcp-auto로 더 편하게
stitch-mcp-auto를 쓰면 설정이 더 간단하고, 추가 기능도 있습니다:
/design– 디자인 생성/design-system– 디자인 토큰 추출/design-flow– 여러 화면 한번에 생성/design-qa– 접근성 검사/design-export– Figma/코드 내보내기
npx stitch-mcp-auto install한 줄로 설치하면 Claude Code에 자동으로 연동됩니다.
팁과 주의사항
프롬프트 작성 팁
Stitch용 프롬프트:
- 구체적인 섹션 구성 명시 (히어로, 기능, 푸터 등)
- 색상/분위기 키워드 포함 (“모던”, “미니멀”, “다크”)
- 참고 이미지가 있으면 함께 업로드
Claude용 프롬프트:
- 사용할 프레임워크/라이브러리 명시
- 타입스크립트 사용 여부
- 특정 스타일 가이드가 있다면 언급
알아둘 한계점
- Stitch: 애니메이션, 브랜드 가이드라인 자동 적용, 실시간 협업 미지원
- 코드 품질: Stitch가 생성한 HTML/CSS는 그대로 프로덕션에 쓰기엔 부족할 수 있음
- 디자인 감각: AI가 레이아웃은 잘 잡지만, 시각적 위계나 UX 전략까지 고려하진 못함
결국 AI는 초안 생성기입니다. 최종 판단과 다듬기는 사람 몫이에요.
결론
Google Stitch로 아이디어를 빠르게 시각화하고, Claude로 프로덕션급 코드로 변환하는 워크플로우를 살펴봤습니다. 이 조합의 장점은:
- 속도: 디자인 → 코드 시간 대폭 단축
- 반복: 여러 시안을 빠르게 뽑아보고 비교
- 품질: Claude가 접근성, 반응형, 타입 안전성 챙겨줌
디자인 시스템이 이미 있는 팀이라면, Stitch로 와이어프레임 수준만 뽑고 Claude에게 기존 컴포넌트 조합을 맡기는 것도 좋은 전략입니다.
직접 한번 해보세요. stitch.withgoogle.com에서 무료로 시작할 수 있습니다.
참고자료:
