7단계 — AI 디자인 도구 (Stitch · v0 · Figma AI)

코드 도구 (Cursor·Claude Code) 만큼 디자인 도구 도 빠르게 자동화되고 있어요. 이 단계는 자연어로 UI 시안 을 만드는 도구들을 비교해, 어느 자리가 어떤 도구에 맞는지 정합니다.

세 가지 자리

Stitch (Google Labs, 2025-05)

• 사이트 stitch.withgoogle.com
• Gemini 2.5 Pro multimodal — 자연어 + 이미지 입력
• 출력: Figma 호환 (.fig) + HTML/CSS/Tailwind/React
• 강점: 다중 화면 동시 생성 + 5종 변형 + chat-to-edit
• 약점: 백엔드 미관여, Labs 단계, 무료 한도 빡빡
• 한국어 입력 가능 (단 일부 라벨은 영어 default)

상세 → Stitch 노트

v0.dev (Vercel)

• 사이트 v0.dev
• shadcn/ui + Tailwind CSS 기반 React 컴포넌트
• 강점: 코드 즉시 사용 + Vercel 자동 배포
• 약점: 다중 화면 디자인 약함, 디자인 토큰 일관성

Figma AI / FigJam AI

• 기존 Figma 안에서 통합
• 자동 레이아웃 / variant 제안 / 컴포넌트 변환
• 강점: 기존 워크플로 위에 얹힘
• 약점: 처음부터 NL 생성은 약함

시나리오 → 도구

워크플로 예 — Stitch → Cursor

1. Stitch 에 자연어로 4 화면 생성
   "주문 관리 SaaS — 사이드바 / 대시보드 KPI / 주문 목록 / 주문 상세"
2. chat-to-edit
   "primary 색상을 emerald-500", "주문 목록에 상태 칩 5종"
3. .fig 또는 React + Tailwind export
4. Cursor / Claude Code 에 코드 붙여넣기
5. 백엔드 (FastAPI / Spring Boot) 연결, 데이터 모델·API 와 wiring
6. CMS / 인증 / 결제 등 *프로덕션 wiring* 은 사람이 작성

데이터 / 학습 정책

• Stitch — Labs 단계, 무료 사용 시 입력이 학습에 사용 가능. 사내 와이어프레임 주의.
• v0.dev — Vercel Pro 권장 (학습 사용 옵트아웃).
• Figma AI — Figma enterprise 정책에 따라.

이 강좌의 자리

본 강좌 전 6단계는 코드 측 (Claude Code · MCP · Skills · workflow). 7단계는 디자인 측을 짧게 짚는 step. 더 깊게는:

• Stitch 노트
• AI Web IDE 비교
• MCP for Figma
• v0.dev (AI Web IDE 노트)

직접 해 보기

1. Stitch 에서 자연어로 4 화면 생성 (각자 익숙한 도메인).
2. 5종 변형 중 가장 마음에 드는 안 선택.
3. .fig export → Figma 정교화.
4. Tailwind + React export → Cursor 에 붙여넣고 props·state 연결.
5. 결과 시안과 첫 자연어 입력 사이 간극 을 메모 — 다음 시도의 prompt 패턴 학습.

다음 단계

본 강좌의 마무리. 다음은 본 코스의 시리즈 인덱스 로 돌아가 6단계까지 학습 결과 (Skills/Subagents/MCP) 와 7단계 디자인 측을 워크플로 로 묶어 보세요. quality-and-testing 강좌에서 이어집니다.