웹사이트나 모바일 앱을 만들고 싶은데 화면 디자인부터 막막한 경우가 있습니다. 메뉴를 어디에 놓을지, 버튼은 얼마나 크게 만들지 정하다 보면 코드를 작성하기도 전에 시간이 많이 지나가죠. 이럴 때 사용할 수 있는 도구가 구글의 Google Stitch(구글 스티치)입니다.

Google Stitch는 원하는 화면을 문장으로 설명하면 AI가 웹사이트와 앱의 UI 디자인을 제안해 주는 서비스입니다. 직접 도형을 그리지 않아도 화면 배치를 살펴보고, 수정하고, 여러 페이지의 흐름을 미리 확인할 수 있습니다.

무료로 시작하는 방법부터 한국어 프롬프트, 모바일 화면 수정, HTML 코드 내보내기와 오류 해결까지 순서대로 알아보겠습니다.

1. Google Stitch는 무엇을 만드는 AI일까?

Stitch는 구글 랩스(Google Labs)의 AI 기반 화면 디자인 도구입니다. 쇼핑몰 첫 화면, 예약 앱, 회사 대시보드처럼 사용자가 실제로 보게 될 화면의 구조와 분위기를 만드는 데 초점을 맞춥니다.

웹 UI 디자인: 상단 메뉴, 검색창, 상품 카드, 가입 버튼 등의 배치와 디자인을 만듭니다.

모바일 앱 화면: 작은 화면에 맞는 메뉴와 버튼, 하단 탭 등의 구성을 제안합니다.

프로토타입: 여러 화면을 연결해 버튼을 누른 뒤 어떤 화면으로 이동할지 미리 확인할 수 있습니다.

개발용 내보내기: 디자인을 Figma나 프런트엔드 코드 작업으로 이어갈 수 있습니다. 단, 디자인이 완성됐다고 로그인·결제·데이터 저장 기능까지 자동으로 완성되는 것은 아닙니다.

2. 구글 스티치 무료로 시작하기

설치 프로그램은 필요하지 않습니다. PC 브라우저에서 Google Stitch 공식 사이트에 접속해 Google 계정으로 로그인하세요.

① 새 프로젝트 열기: 새 디자인을 시작하는 화면에서 프로젝트를 생성합니다. 업데이트에 따라 시작 버튼이나 메뉴 이름은 달라질 수 있습니다.

② 만들 화면 설명하기: 웹사이트인지 모바일 앱인지, 누구를 위한 서비스인지, 필요한 메뉴와 색상을 입력합니다.

③ 생성 결과 확인하기: AI가 제안한 화면을 살펴보면서 빠진 항목과 읽기 어려운 글씨를 확인합니다.

④ 채팅으로 수정하기: 마음에 들지 않는 부분을 선택하거나 구체적인 수정 요청을 입력해 화면을 다듬습니다.

처음부터 다섯 페이지를 한 번에 만들기보다 첫 화면 한 장만 만든 뒤 디자인을 고정하는 편이 수정하기 수월합니다.

3. 복사해서 쓰는 모바일 앱 프롬프트

예를 들어 동네 카페의 모바일 주문 앱을 만든다고 가정해 보겠습니다. 아래 문장을 그대로 복사해 입력해 보세요.

실전 프롬프트 — 카페 주문 앱
한국어로 된 동네 카페 모바일 주문 앱의 홈 화면을 디자인해 줘.
대상 사용자는 스마트폰으로 메뉴를 빠르게 주문하려는 일반 고객이야.
화면은 폭 390px 정도의 모바일 앱을 기준으로 구성해 줘.
상단에는 카페 이름과 매장 선택 메뉴를 넣어 줘.
중앙에는 인기 메뉴 3개를 사진·가격과 함께 카드로 보여 줘.
하단에는 장바구니 버튼과 홈·주문내역·내정보 탭을 넣어 줘.
크림색 배경, 짙은 갈색 강조색, 읽기 쉬운 큰 글씨를 사용해 줘.
모든 메뉴와 버튼 이름은 자연스러운 한국어로 써 줘.

이렇게 화면 종류·사용자·필수 요소·색상·언어를 함께 적으면 단순히 “카페 앱 만들어 줘”라고 할 때보다 원하는 구성에 가까워질 수 있습니다.

생성된 가격과 메뉴 이름은 예시 데이터일 수 있습니다. 실제 서비스에 사용하려면 정확한 상품 정보로 바꿔야 합니다.

4. 웹사이트 화면도 같은 방식으로 만들기

웹사이트가 필요하다면 앱 화면 대신 PC와 모바일 양쪽의 배치를 요청하면 됩니다. 중요한 건 예쁜 그림 한 장이 아니라 사람들이 내용을 찾기 쉬운 화면인지 확인하는 것입니다.

실전 프롬프트 — 소규모 가게 홈페이지
한국어 소규모 공방의 반응형 홈페이지 첫 화면을 디자인해 줘.
PC에서는 상단 로고·소개·상품·오시는 길 메뉴를 보여 줘.
첫 화면에 대표 이미지와 예약 문의 버튼을 넣어 줘.
그 아래에는 인기 상품 카드 3개와 운영 시간 정보를 배치해 줘.
모바일에서는 메뉴를 간단하게 접고 카드가 한 줄씩 보이도록 해 줘.
밝은 배경과 차분한 녹색을 사용하고 글씨는 너무 작지 않게 해 줘.

PC 디자인과 모바일 디자인이 각각 보기 좋더라도 실제 웹사이트에서 화면 크기에 따라 자동으로 바뀌는지는 코드 적용 후 별도로 테스트해야 합니다.

5. 마음에 안 드는 부분만 수정하는 방법

디자인 전체를 처음부터 다시 만들 필요는 없습니다. 수정할 화면과 요소를 지정해 한두 가지씩 바꾸는 것이 좋습니다. 구글의 공식 프롬프트 가이드에서도 구체적이고 작은 단위의 수정을 권장합니다.

수정 프롬프트 1: “홈 화면의 인기 메뉴 카드만 수정해 줘. 사진은 조금 줄이고 가격과 주문 버튼을 더 크게 보여 줘. 나머지 화면은 유지해 줘.”

수정 프롬프트 2: “모바일 화면에서 좌우로 스크롤되지 않도록 폭을 조정해 줘. 카드 간격을 넓히고 모든 텍스트는 한국어로 유지해 줘.”

수정 프롬프트 3: “첫 화면의 상단 메뉴 색상만 짙은 남색으로 바꿔 줘. 폰트 크기와 버튼 위치는 변경하지 마.”

한 번에 색상, 메뉴, 이미지, 페이지 구조까지 바꾸라고 하면 기존에 마음에 들었던 요소가 함께 변할 수 있습니다. 수정 후에는 이전 화면과 비교해 보세요.

프롬프트 표현이 고민된다면 Google Stitch 공식 프롬프트 가이드의 예시도 참고할 수 있습니다.

6. 사진이나 손그림으로 화면 만들기

Stitch는 글뿐 아니라 스케치·참고 이미지 등을 디자인 작업의 맥락으로 활용할 수 있습니다. 종이에 그린 대략적인 메뉴 배치나 기존 화면 캡처가 있다면 참고 자료로 가져와 보세요.

이미지를 첨부한 뒤 “이 화면의 정보 구조를 참고하되 밝고 단정한 한국어 모바일 UI로 다시 만들어 줘”처럼 요청하면 됩니다. 단, 입력한 그림이 픽셀 단위로 똑같이 재현되는 것은 아닙니다.

다른 업체의 디자인을 그대로 복제하기보다는 메뉴 배치나 사용 흐름 같은 아이디어만 참고하세요. 개인정보가 보이는 캡처는 올리기 전에 가리는 편이 안전합니다.

7. 여러 페이지 연결하고 동작 미리 보기

홈 화면이 정리됐다면 상품 상세, 주문 확인, 주문 완료 화면을 차례로 추가해 보세요. 동일한 색상과 메뉴 규칙을 사용하도록 요청하면 화면이 덜 어색해집니다.

Stitch의 프로토타입 기능은 화면을 서로 연결하고 Play 미리보기에서 이동 흐름을 살펴보는 데 활용할 수 있습니다. 예를 들어 메뉴 카드에서 상세 화면으로, 주문 버튼에서 주문 확인 화면으로 넘어가는 모습을 점검합니다.

이때 버튼이 움직이는 것처럼 보여도 실제 주문이 접수되거나 결제되는 것은 아닙니다. 미리보기의 화면 연결과 실제 서비스 기능은 구분해야 합니다.

8. HTML 코드와 디자인 내보내기

디자인이 완성되면 프로젝트의 내보내기 관련 메뉴에서 사용 가능한 옵션을 확인하세요. Google은 Stitch에서 프런트엔드 코드 생성, Figma로 디자인 옮기기, 다른 개발 도구로 이어지는 작업 흐름을 공식적으로 안내하고 있습니다.

HTML·CSS 코드: 내보낸 코드가 제공되는 경우 편집기에서 열어 글자, 화면 폭, 메뉴 구성 등을 수정할 수 있습니다.

Figma: 디자인을 가져가 세부 요소를 수정하거나 다른 사람과 협업할 수 있습니다.

개발 도구 연계: Google AI Studio·Antigravity 등으로 디자인을 이어갈 수 있으며, Netlify를 활용한 웹 게시 흐름도 안내돼 있습니다. 기능 노출과 연결 과정은 계정 및 서비스 업데이트에 따라 달라질 수 있습니다.

실제 사이트에 적용하기 전에는 모바일 화면, 버튼 동작, 개인정보 처리, 접근성과 오류를 별도로 검사하세요. Stitch에서 나온 코드는 완성된 운영용 시스템이라기보다 개발을 시작할 수 있는 초안에 가깝습니다.

9. Google Stitch 무료 사용량과 제한

Google Stitch는 현재 구글 랩스의 무료 실험 서비스로 이용할 수 있지만, 무제한 생성은 아닙니다. 디자인 생성에는 계정별 사용량 제한이 적용되며 한도를 다 쓰면 추가 생성이 제한될 수 있습니다.

사용량 기준은 서비스 업데이트로 바뀔 수 있고, 과거에 소개된 월간 횟수와 현재의 일일 크레딧 방식이 다를 수 있습니다. 정확한 남은 크레딧과 초기화 안내는 로그인한 Stitch 화면에서 확인하세요.

공식 공개 안내에서 별도의 Stitch 유료 구독 요금은 확인되지 않지만, 이를 모든 연계 서비스가 무료라는 뜻으로 받아들이면 안 됩니다. 도메인, 호스팅, 다른 개발 서비스 이용에는 별도 비용이 생길 수 있습니다.

무료 한도를 효율적으로 쓰려면 먼저 필요한 메뉴를 메모해 두고, 전체 재생성보다 특정 요소 수정 위주로 작업하는 편이 좋습니다.

10. 한국어 오류·화면 깨짐·생성 실패 해결

한국어가 어색할 때: “모든 제목·메뉴·버튼·설명은 자연스러운 한국어로 작성하고 영어 임시 문구를 제거해 줘”라고 다시 요청하세요. 최종 문구는 직접 읽어 보고 수정해야 합니다.

모바일 화면이 잘릴 때: 수정할 화면을 지정한 뒤 “가로 스크롤 없이 390px 폭 안에 모든 항목이 들어가도록 정렬해 줘”라고 요청해 보세요.

새 화면마다 디자인이 달라질 때: 첫 화면을 기준으로 “같은 상단 메뉴, 글꼴, 강조색, 버튼 모양을 유지해 줘”라고 명시하세요. 프로젝트의 테마 또는 디자인 규칙 기능을 함께 살펴보면 좋습니다.

생성 버튼이 작동하지 않을 때: 크레딧 잔량을 먼저 확인하고, 로그아웃 후 재로그인하거나 브라우저를 새로고침해 보세요. 브라우저 확장 프로그램을 잠시 끄거나 다른 브라우저에서 확인하는 것도 방법입니다.

서비스 이용 불가 오류가 뜰 때: 계정·지역·서비스 장애 등 원인이 다양하므로 반복 생성보다 공식 커뮤니티의 Stitch 오류 및 공지 게시판에서 비슷한 문제가 보고됐는지 확인해 보세요.

11. 처음 만든다면 이렇게 활용하세요

디자인 경험이 없다면 복잡한 쇼핑몰보다 예약 페이지, 개인 소개 페이지, 간단한 앱 홈 화면처럼 구성 요소가 적은 주제부터 시작해 보세요.

먼저 한 장을 만들고, 한국어 문구를 고치고, 모바일에서 읽기 쉬운지 확인한 뒤 다음 화면으로 넘어가는 순서가 편리합니다. 실제 서비스로 연결할 계획이라면 구현할 기능과 필요한 데이터를 따로 정리해 두세요.

Google Stitch의 가장 편리한 점은 디자인 도구를 오래 배우기 전에 자신의 아이디어가 어떤 화면으로 보일지 빠르게 확인할 수 있다는 것입니다. 처음에는 무료로 화면 한 장을 만들어 보는 것만으로도 활용 방법을 익힐 수 있습니다.