티스토리 뷰
Stitch가 뭔가요?
Stitch는 구글이 공개한 실험적 AI 도구입니다. 핵심 기능은 하나입니다.
"UI를 말로 설명하거나 스케치하면, 실제 코드로 변환해준다."
기존에는 디자이너가 Figma로 화면을 설계하고, 개발자가 그것을 코드로 옮기는 과정이 필요했습니다. Stitch는 이 두 단계를 하나로 압축합니다.
2025년 기준 Google Labs에서 실험적으로 운영 중이며, 구글 계정으로 접속하면 무료로 사용할 수 있습니다.
접속 주소: labs.google/fx/tools/stitch
Stitch의 핵심 기능 3가지
기능 1: 텍스트 → UI 생성
원하는 화면을 글로 설명하면 UI가 자동 생성됩니다.
기능 2: 스케치 → UI 변환
종이에 그린 화면 스케치를 사진으로 찍어 업로드하면, 실제 UI로 변환됩니다.
기능 3: UI → 코드 추출
생성된 UI를 HTML/CSS 코드로 내보낼 수 있습니다. 이 코드를 Lovable에 붙여넣으면 바로 앱이 됩니다.
Step 1: Stitch 접속 및 첫 화면
1단계: labs.google/fx/tools/stitch 접속
2단계: 구글 계정 로그인
3단계: "Create new" 클릭
화면 구성:
- 왼쪽: 프롬프트 입력창
- 중앙: 생성된 UI 미리보기
- 오른쪽: 코드 뷰어 (HTML/CSS)
처음 접속하면 예시 프로젝트들이 보입니다. 클릭해서 어떻게 만들어졌는지 참고해보세요.
Step 2: 텍스트로 UI 만들기
[실습 1] 생산 현황 대시보드 UI 만들기
입력창에 아래 내용을 입력하세요:
제조업 생산 현황 모니터링 대시보드 UI를 만들어줘.
화면 구성:
- 상단: 오늘 날짜, 현재 공장 가동 상태 (정상/점검중/비상)
- 왼쪽 사이드바: 공정별 메뉴 (사출/도장/조립/검사)
- 메인 영역 상단: 핵심 지표 4개 카드
- 오늘 생산량
- 목표 달성률
- 불량률
- 설비 가동률
- 메인 영역 하단: 시간별 생산량 차트 + 공정별 현황 테이블
색상: 진한 네이비 계열 배경에 흰색/초록색 텍스트. 산업용 느낌으로.
Stitch가 30초~1분 내에 UI를 생성합니다.
Step 3: 스케치 → UI 변환 (가장 강력한 기능)
종이에 직접 화면을 그려보세요. 전문 디자인 실력 필요 없습니다.
스케치 방법:
1단계: A4 용지에 네모 박스로 화면 영역 구분
2단계: 각 영역에 "차트", "테이블", "버튼" 등 간단히 메모
3단계: 스마트폰으로 사진 촬영
4단계: Stitch에 업로드
업로드 방법: 입력창 옆 이미지 아이콘 클릭 → 사진 선택
[실습 2] 스케치 업로드 후 이렇게 입력:
업로드한 스케치를 바탕으로 설비 점검 앱 UI를 만들어줘.
모바일 화면 기준으로, 현장 작업자가 스마트폰으로 쓰기 좋은 디자인으로.
Step 4: 코드 추출 및 활용
생성된 UI가 마음에 들면 코드로 내보냅니다.
1단계: 오른쪽 상단 "Export" 또는 "Copy code" 클릭
2단계: HTML/CSS 코드 복사
3단계: 이 코드를 활용하는 방법:
활용 방법 A: Lovable에 붙여넣기
Lovable 프롬프트에 "이 HTML 코드를 기반으로 앱을 만들어줘"라고 입력 후 코드 붙여넣기
활용 방법 B: Google AI Studio와 연결
AI Studio에서 이 UI를 설명하고 실제 데이터와 연결하는 코드 생성 요청
활용 방법 C: 그대로 웹사이트로 사용
단순한 정보 표시용 페이지라면 코드를 GitHub Pages 등에 올려 바로 공개
Step 5: Stitch 고급 활용 (반복 컴포넌트)
같은 스타일의 화면 여러 개가 필요할 때 유용한 방법입니다.
예시: 공정별 현황 카드를 5개 만들어야 할 때
1번째 카드를 Stitch로 만든 후:
"이 카드 컴포넌트를 재사용 가능한 형태로 수정해줘. 공정명, 생산량, 불량률을 변수로 받도록."
이렇게 하면 나중에 데이터만 바꾸면 여러 공정에 동일한 UI를 쓸 수 있습니다.
Stitch vs 다른 도구 비교
| 기능 | Stitch | Lovable | Google AI Studio |
|---|---|---|---|
| UI 디자인 생성 | ★★★★★ | ★★★☆☆ | ★★☆☆☆ |
| 앱 기능 구현 | ★★☆☆☆ | ★★★★★ | ★★★☆☆ |
| 데이터 연동 | ★★☆☆☆ | ★★★★☆ | ★★★★★ |
| 한국어 지원 | ★★★☆☆ | ★★★☆☆ | ★★★★★ |
| 무료 사용 | ★★★★★ | ★★★☆☆ | ★★★★★ |
결론: Stitch는 "디자인 전용" 도구입니다. UI를 만든 후 Lovable이나 Google AI Studio와 조합하면 완전한 앱이 됩니다.
실무 활용 시나리오
[시나리오] 사내 포털 UI 빠르게 제안하기
상황: IT 부서에 사내 포털 개선을 제안해야 함. 말로만 설명하기 어려움.
해결책:
1단계: Stitch에서 원하는 포털 UI 생성 (10분)
2단계: 스크린샷 캡처
3단계: 기획서에 삽입
4단계: "이런 느낌으로 만들어주세요"라고 제안
효과: 디자이너 없이도 구체적인 UI 시안 제출 가능
Stitch 사용 시 주의사항
주의사항 1: 실험적 도구임을 감안하세요
Stitch는 아직 Google Labs의 실험 단계 서비스입니다. 가끔 오류가 발생하거나, 서비스 정책이 변경될 수 있습니다.
주의사항 2: 생성된 코드는 검토가 필요합니다
Stitch가 만든 HTML/CSS 코드를 실제 서비스에 사용할 때는 보안과 성능을 검토하세요. 프로토타입이나 내부 도구 수준에서 활용하는 것이 적합합니다.
주의사항 3: 복잡한 기능은 Lovable과 조합하세요
Stitch는 UI만 만들 수 있습니다. 로그인, 데이터 저장, API 연동 같은 기능은 Lovable이나 개발자의 도움이 필요합니다.
오늘의 실습 미션
미션 1: Stitch에서 우리 팀 업무용 대시보드 UI 1개 만들기
미션 2: 종이 스케치 → Stitch 변환 체험
미션 3: 생성된 코드 복사 후 Lovable에 붙여넣어 앱 만들기
정리
Stitch는 아이디어를 시각화하는 가장 빠른 도구입니다. 기획안을 작성할 때, 상사나 동료에게 제안을 설명할 때, "말"보다 "화면"으로 보여주는 것이 훨씬 설득력 있습니다.
내일은 지금까지 배운 도구들을 조합해서 실제 제조업 대시보드를 처음부터 끝까지 완성하는 과정을 함께 해봅니다. 바이브코딩의 진짜 힘을 느낄 수 있을 겁니다.
-
- [바이브코딩 7일 완성 #1] 바이브코딩이란? 코딩 몰라도 앱 만드는 시대가 왔다.
- [바이브코딩 7일 완성 #2] Google AI Studio 완전 정복 : 무료로 AI 앱 만드는 법
- [바이브코딩 7일 완성 #3] Lovable로 웹앱 30분 만에 뚝딱 : 코딩 없이 앱 제작 실전
- [바이브코딩 7일 완성 #4] Antigravity로 반복 업무 자동화 : 매주 3시간 아끼는 법
- [바이브코딩 7일 완성 #5] Stitch로 UI 디자인 -> 코드 자동 변환 : 구글의 새 무기
- [바이브코딩 7일 완성 #6] 바이브코딩 실전 : 제조업 생산 대시보드 처음부터 끝까지 만들기
- [바이브코딩 7일 완성 #7] 실무 적용 전략과 앞으로의 로드맵
태그: #Stitch #GoogleStitch #바이브코딩 #UI자동생성 #디자인코드변환 #노코드 #구글AI #제조업대시보드 #UI설계 #프로토타이핑 #GoogleLabs