AI로 UI/UX 프로토타이핑을 해보자. Google Stitch 소개

📌 핵심 요약

결론: Google Stitch는 프롬프트 → UI → 코드까지 자동화해주는 무료 도구임. 초기 프로토타입용으로 최적.

바로 실행할 것 3가지:

1. stitch.withgoogle.com 접속해서 구글 계정 로그인
2. 구체적인 프롬프트로 UI 생성 (색상, 레이아웃, 컴포넌트 포함)
3. HTML 코드 복사하거나 Figma로 내보내기

흔한 실수 2가지:

• 프롬프트 대충 쓰고 결과물 탓하기 (구체적으로 써야 함)
• 완성본 기대하기 (초기 검증용 도구임, 세부 조정은 Figma에서)

추천 플러그인: Stitch to Figma - HTML을 Figma 프레임으로 변환

---

1. Google Stitch가 뭔지 30초 정리

Google Stitch는 Google Labs에서 만든 AI UI 디자인 도구임.

텍스트로 "이런 앱 만들어줘" 하면 UI 디자인이랑 HTML/CSS 코드까지 자동 생성해줌. 2025년 5월 Google I/O에서 발표됨.

핵심 포인트:

• Gemini 2.5 모델 기반
• 텍스트 → UI 또는 이미지 → UI 변환
• Figma 내보내기 + HTML 코드 다운로드 지원
• 현재 무료 (Google Labs 실험 단계)

디자이너 없이 빠르게 프로토타입 만들어야 할 때, 아이디어 검증할 때 쓰면 됨.

---

2. 두 가지 모드 차이점

Stitch에는 Standard Mode랑 Experimental Mode 두 가지 있음.

구분	Standard Mode	Experimental Mode
AI 모델	Gemini 2.5 Flash	Gemini 2.5 Pro
입력 방식	텍스트만	텍스트 + 이미지
생성 속도	빠름	느림
결과 품질	기본	고품질
월 생성 한도	350회	50회
Figma 내보내기	✅	✅

실전 팁:

• 빠른 테스트 → Standard Mode
• 레퍼런스 이미지 있을 때 → Experimental Mode
• 크레딧 아끼려면 Standard로 방향 잡고, 최종만 Experimental

---

3. 프롬프트 잘 쓰는 법 (이게 결과 80% 결정함)

Stitch 결과물 품질은 프롬프트가 거의 다 결정함. 대충 쓰면 대충 나옴.

나쁜 프롬프트 vs 좋은 프롬프트

❌ "가계부 앱 만들어줘"

✅ "다크 테마의 개인 가계부 앱. 상단에 이번 달 총 지출 카드, 
   중간에 카테고리별 파이 차트, 하단에 최근 거래 리스트 5개, 
   하단 탭 네비게이션 포함. 메인 컬러 #6366f1"

프롬프트에 포함할 것

요소	예시
테마/분위기	다크 테마, 미니멀, 모던
레이아웃 구조	상단 카드, 중간 리스트, 하단 탭
컴포넌트	파이 차트, 버튼, 입력 폼
색상	메인 컬러 #6366f1, 배경 #1a1a2e
타겟 플랫폼	모바일 앱, 웹 대시보드

수정 요청도 구체적으로

생성 후 수정할 때도 타겟팅해서 요청해야 함.

❌ "좀 더 예쁘게"
✅ "파이 차트를 도넛 차트로 변경하고, 앱 이름을 좌측 정렬로"

---

4. HTML 코드 바로 개발에 쓰는 법

Stitch의 진짜 강점은 생성된 UI를 HTML/CSS 코드로 바로 뽑을 수 있다는 것임.

코드 내보내기 방법

1. UI 생성 완료
2. 코드 내보내기 버튼 클릭
3. HTML/CSS 코드 복사 또는 다운로드
4. VS Code 등 에디터에 붙여넣기
5. 필요시 커스터마이징

코드 품질 특징

• 웹 표준 준수하는 클린한 마크업
• 구조화된 CSS
• 최소 수정으로 바로 사용 가능
• 반응형 기본 지원

활용 시나리오:

• 랜딩 페이지 빠르게 만들기
• 컴포넌트 구조 잡고 시작하기
• 클라이언트에게 시안 공유하기

---

5. Figma 연동하는 2가지 방법

방법 1: Stitch 내장 기능 (추천)

1. UI 생성 완료
2. "Copy to Figma" 버튼 클릭
3. Figma 열고 Ctrl+V (Mac은 Cmd+V)
4. 끝. 레이아웃, 컴포넌트 그대로 유지됨

장점:

• 편집 가능한 레이어로 들어옴
• Auto Layout 자동 적용
• 바로 디자인 시스템에 통합 가능

방법 2: Stitch to Figma 플러그인

HTML 파일을 Figma 네이티브 프레임으로 변환하는 플러그인임.

플러그인 링크: Stitch to Figma

사용법:

1. Figma에서 플러그인 설치
2. 플러그인 실행
3. Stitch에서 다운받은 HTML 업로드
4. 미리보기 확인 후 Generate

플러그인 주요 기능:

• HTML → Figma 프레임 정확한 변환
• Flexbox → Auto Layout 자동 변환
• CSS 스타일 유지 (색상, 폰트, 그림자 등)
• ZIP 파일 일괄 가져오기 지원

---

6. 실전 워크플로우

아이디어 구상
    ↓
Stitch에서 프롬프트 입력
    ↓
여러 변형 생성 후 선택
    ↓
    ├── [바로 개발] HTML 코드 복사 → IDE에서 작업
    │
    └── [디자인 다듬기] Figma 내보내기 → 세부 조정 → 개발 핸드오프

추천 흐름:

1. Standard Mode로 방향 빠르게 테스트
2. 괜찮으면 Experimental Mode로 품질 높이기
3. Figma로 내보내서 세부 조정
4. 또는 HTML 코드 뽑아서 바로 개발

---

7. Stitch의 한계점 (이거 알고 써야 함)

완벽한 도구는 없음. 한계 알고 쓰면 실망 안 함.

한계	대응 방법
2~3개 화면 이상 생성 어려움	화면별로 따로 생성 후 연결
복잡한 플로우 표현 한계	초기 검증용으로만 활용
레이아웃이 기본적일 수 있음	Figma에서 세부 조정
디자인 시스템 자동 적용 안 됨	수동으로 토큰 매칭 필요

결론: Stitch는 아이디어 → 초기 프로토타입 단계에 최적화된 도구임. 완성본 만드는 용도 아님.

---

마무리

정리하면 이거임:

• Google Stitch = 텍스트 → UI → 코드 자동화 도구
• 프롬프트가 결과의 80% 결정함. 구체적으로 써야 함
• HTML 코드 바로 뽑아서 개발 가능
• Figma 연동으로 디자인 세부 조정 가능
• 초기 검증용으로 쓰면 시간 엄청 아낌

디자이너 없이 MVP 만들어야 하거나, 아이디어 빠르게 시각화해야 할 때 진짜 유용함.

기존엔 빠른 프로토타이핑이 필요한 경우 visily를 활용했었는데, stitch 단독 사용은 어렵고 병행하면 좋겠다는 정도의 감상임.