5분도 안걸림 스크린샷 하나로 앱이 만드는 방법

구글이 디자인을 코드로 바꿨다 ⚡

스크린샷 하나로 ‘실제 작동하는 HTML’을 만드는 방법 (Stitch 완전 사용법)

구글이 최근 OpenAI의 **“12 Days of Shipmas”**에 맞서

일주일간 대규모 업데이트를 쏟아내고 있습니다.

그 첫 번째 타자가 바로 Stitch입니다.

이제는

👉 앱·웹 스크린샷 하나만 업로드하면

👉 실제로 작동하는 HTML/CSS 코드까지 자동 생성해주는 시대가 열렸습니다.

디자인 → 개발 사이의 벽을 구글이 정면으로 깨버린 셈이죠.

Stitch란 무엇인가?

Stitch는 구글이 공개한 디자인 → 코드 변환 전용 AI 도구입니다.

기존에도 ‘Nano Banana Pro’ 모델을 통해

1. UI를 더 예쁘게 리디자인하거나
2. 컬러, 레이아웃을 바꾸는 건 가능했지만

❌ 코드까지 바로 뽑아주지는 못했습니다.

그런데 Stitch는 다릅니다

1. 스크린샷 기반 UI 분석
2. 자연어로 디자인 수정
3. HTML/CSS 코드 자동 생성
4. Gemini AI Studio와 바로 연결

즉,

디자인 시안 → 바로 실행 가능한 코드까지

한 번에 이어주는 도구입니다.

Stitch는 어디서 사용하나요?

📍 전용 사이트에서만 사용 가능

👉 https://stitch.withgoogle.com

1. Gemini 앱 ❌
2. Google AI Studio ❌
3. 별도의 Stitch 전용 웹툴 ⭕

※ 내부적으로는 Nano Banana Pro 모델이 사용됩니다.

Stitch로 할 수 있는 대표적인 작업

1. 웹사이트 UI 코드 생성
2. 앱 화면 HTML 프로토타입 제작
3. 기존 서비스 리디자인 후 코드화
4. 기획자·디자이너의 아이디어 즉시 구현
5. 개발자에게 넘길 초안 코드 생성

Stitch 실제 사용법 (단계별 완전 정리)

4

① 스크린샷 업로드

가장 먼저 할 일은 화면 캡처 준비입니다.

업로드 가능한 예시:

1. 웹사이트 화면
2. 앱 UI
3. 게임 인터페이스
4. 대시보드
5. 랜딩 페이지 시안

📌 TIP

1. 해상도가 높을수록 인식 정확도 ↑
2. 전체 화면이 잘 보이게 캡처하면 레이아웃 분석이 더 정확합니다.

② 자연어로 리디자인 요청

스크린샷을 올리면, 바로 텍스트 입력창이 나타납니다.

여기서 사람 말하듯이 디자인을 수정하면 됩니다.

예시 프롬프트:

1. “버튼 색상을 파란색에서 검정색으로 바꿔줘”
2. “전체를 다크 모드 스타일로 변경”
3. “모서리를 더 둥글게 해줘”
4. “모바일 앱 느낌으로 UI를 단순화해줘”
5. “애플 스타일처럼 미니멀하게 바꿔줘”

👉 디자인 툴을 다룰 줄 몰라도 전혀 문제 없음

③ </> Code version 버튼 클릭 (핵심)

리디자인 결과가 마음에 들면

화면 상단 또는 하단에 있는

버튼을 클릭합니다.

💥 이 순간 Stitch가 하는 일:

1. UI 구성 요소 분석
2. 레이아웃 구조 분해
3. 스타일 추출
4. HTML + CSS 코드 자동 생성

즉,

“이 디자인을 실제로 움직이게 만들면 이런 코드다”

라는 결과물을 바로 보여줍니다.

④ 생성된 코드 확인 & 수정

자동 생성되는 코드에는 보통 다음이 포함됩니다.

1. HTML 구조
2. CSS 스타일
3. 버튼, 카드, 섹션 등 컴포넌트
4. 반응형 레이아웃 기본 구조

📌 중요 포인트

1. 완벽한 상용 코드라기보다는
2. 👉 초기 프로토타입 / MVP용 코드
3. 하지만 수정해서 쓰기엔 충분히 정리된 상태

⑤ Export to AI Studio 클릭 (연결의 완성)

마지막 단계입니다.

Export to AI Studio 버튼을 누르면

👉 Google AI Studio(Gemini) 로 바로 연동됩니다.

여기서 가능한 일:

1. Gemini에게 코드 수정 요청
2. 기능 추가 (폼, 버튼 동작 등)
3. JavaScript 로직 생성
4. 실제 앱 구조로 확장

즉,

Stitch = 디자인 → 코드 변환

AI Studio = 코드 → 앱 확장

이렇게 이어지는 구조입니다.

이게 왜 이렇게 중요한가?

1️⃣ 디자인과 개발의 경계가 사라짐

1. Figma → 개발 전달 ❌
2. 이제는 **스크린샷 → 코드 ⭕

2️⃣ 개발자 없이 MVP 제작 가능

1. 기획자
2. 마케터
3. 디자이너
4. → 혼자서도 실제 앱 초안 제작 가능

3️⃣ 코딩 에이전트와 결합 시 파괴력

1. Stitch → UI 코드 생성
2. Gemini / Cursor / Copilot → 기능 확장

👉 아이디어 → 실제 서비스까지 몇 분

이런 사람에게 특히 추천

1. 💡 스타트업 기획자
2. 🎨 디자이너
3. 📈 마케터
4. 🧑‍💻 개발 입문자
5. 🚀 MVP를 빨리 만들어야 하는 팀

한 줄 요약

Stitch는 “디자인을 코드로 번역하는 AI”다.

스크린샷 하나면, 더 이상 개발이 시작의 장벽이 아니다.