구글 스티치 사용법, 랜딩페이지 시안을 실제 웹사이트로 잇는 순서

구글 스티치는 자연어로 웹 화면 시안을 만들고 반복 수정하는 AI 디자인 캔버스입니다. 2026년 10월 20일 기준, 시안·프로토타입을 만든 뒤 Google AI Studio 같은 개발 도구로 이어 실제 동작을 붙이는 흐름과 점검표를 정리합니다.

문의용 랜딩페이지를 준비하는 기획자나 강사는 화면 모양을 먼저 잡아도 어디서 실제 동작을 붙일지 막힙니다. 시안과 웹사이트는 같은 결과물이 아닙니다. 도면을 만든 다음 배관과 전기를 연결해야 건물이 작동하듯, 화면 설계·기능 구현·배포를 나누어 확인해야 합니다.

목차

1. 시안과 웹사이트를 구분합니다
2. 첫 화면을 구글 스티치로 설계합니다
3. AI Studio에서 실제 동작을 붙입니다
4. 문의 폼은 보안과 한도까지 점검합니다
5. 배포 전에 확인할 체크리스트
6. 자주 묻는 질문

1. 시안과 웹사이트를 구분합니다

기존 작업은 디자이너에게 화면을 맡기고, 개발자가 그 화면을 코드로 다시 옮기는 식으로 이어졌습니다. 이제는 아이디어를 말로 설명해 시안을 만들고, AI와 대화하며 여러 방향을 빠르게 비교할 수 있습니다. 다만 화면이 그럴듯하다고 문의가 실제로 전달되는 것은 아닙니다.

시안은 건축 도면, 웹사이트는 사람이 드나들 수 있게 완성한 건물입니다. 버튼이 눌리는지, 입력값이 전달되는지, 휴대전화에서도 읽히는지 확인해야 합니다. 구글의 2026년 3월 안내에 따르면 Stitch는 자연어로 고품질 UI를 만들고 수정·협업하는 AI 기반 디자인 캔버스로 확장됐습니다. 5월 발표에서는 시안을 AI Studio로 공유하거나 Antigravity로 내보내고, Netlify로 웹에 게시하는 선택지도 소개했습니다.

따라서 첫 목표를 “사이트 완성”으로 크게 잡기보다, 방문자가 무엇을 보고 어떤 행동을 할지 한 화면으로 정하는 편이 좋습니다. 예를 들어 강의 소개 페이지라면 첫 화면의 목표는 강의 문의 버튼을 찾게 하는 것입니다. 대상, 핵심 메시지, 버튼 하나를 먼저 고정하면 AI가 장식만 늘리는 일을 줄일 수 있습니다.

2. 첫 화면을 구글 스티치로 설계합니다

처음부터 “예쁜 랜딩페이지를 만들어줘”라고 하면 결과를 평가할 기준이 없습니다. 방문자, 페이지 목적, 반드시 보여 줄 내용, 피하고 싶은 요소를 같이 적습니다. 실제 고객의 이름이나 연락처 등 민감한 자료는 넣지 말고, 예시 문구로 대체합니다.

아래 지시문은 강사 소개 페이지의 첫 시안을 만들 때 바로 복사해 쓸 수 있습니다. 목적은 시각 완성도가 아니라, 방문자가 첫 화면에서 정보를 이해하는지 검토할 초안을 얻는 것입니다.

프롬프트
비전공자 대상 AI 실무교육 강사의 소개 랜딩페이지 첫 화면을 설계해줘.
방문자는 기업 교육 담당자이고, 목표는 강사의 전문 분야와 교육 방식을 10초 안에 파악하는 것이다.
첫 화면에는 짧은 제목, 25년 개발 실무를 바탕으로 한 쉬운 설명이라는 소개, 교육 분야 3개, 문의 버튼 1개만 둬.
모바일 화면에서도 제목과 버튼이 첫 화면에 보이게 해줘.
장식용 통계, 검증되지 않은 수강 성과, 가짜 후기와 실제로 동작하는 것처럼 보이는 기능은 넣지 마.
결과는 데스크톱과 모바일 화면 구성, 각 요소의 역할, 확인이 필요한 가정으로 나눠서 제시해줘.

초안을 받으면 “더 세련되게”라고만 말하지 말고 한 번에 한 기준씩 고칩니다. 예를 들어 제목이 길면 “제목을 12자 안팎으로 줄이고 교육 대상이 드러나게 바꿔줘”라고 요청합니다. 버튼이 여러 개면 “첫 화면에는 가장 중요한 행동 하나만 남겨줘”라고 제한합니다. 수정 기준을 하나씩 주면 어떤 지시가 화면을 바꿨는지 비교하기 쉽습니다.

화면 설계는 방문자가 해야 할 행동 하나를 정하는 데서 시작합니다.

3. AI Studio에서 실제 동작을 붙입니다

검토할 화면 흐름이 정해지면 AI Studio의 Build mode에서 웹 앱으로 이어갈 수 있습니다. 2026년 8월 20일 갱신된 공식 문서는 프롬프트로 웹 앱을 만들고, 코드와 파일을 생성하면서 오른쪽 미리보기에서 결과를 확인하는 과정을 안내합니다. 웹 앱은 React 기반 화면과 Node.js 서버 실행 환경을 포함할 수 있습니다. 단, 메뉴 이름과 제공 범위는 계정과 서비스 업데이트에 따라 달라질 수 있으므로 실제 화면을 기준으로 확인합니다.

Stitch와 AI Studio의 역할을 섞지 않는 것이 핵심입니다. Stitch에서 방문 흐름과 화면 배치를 다듬고, AI Studio에서는 버튼·폼·저장처럼 실제 작동할 부분을 구현합니다. 이는 설계도와 시공을 같은 종이에 그려 넣는 대신, 설계도를 확인한 뒤 공사를 시작하는 것과 같습니다.

Build mode에 처음 요청할 때는 전체 서비스를 한꺼번에 만들지 않습니다. 우선 첫 화면과 메뉴 이동을 구현하고 미리보기에서 확인한 다음, 문의 폼을 추가합니다. 오류가 나면 “사이트가 안 돼” 대신 어떤 버튼을 눌렀는지, 기대한 결과와 실제 결과가 무엇인지 설명합니다. 이렇게 하면 고칠 범위를 줄일 수 있습니다.

구현 프롬프트
현재 랜딩페이지 시안을 기준으로 반응형 웹 페이지를 만들어줘.
첫 화면의 제목, 소개 문장, 교육 분야, 문의 버튼 순서는 유지해.
문의 버튼을 누르면 이름·이메일·문의 내용 입력 폼이 열리게 해.
필수 입력이 비어 있으면 전송하지 말고 어떤 항목이 빠졌는지 화면에 표시해.
실제 이메일 전송은 아직 연결하지 말고, 우선 입력 검증과 성공·실패 화면을 테스트할 수 있게 해.
변경한 파일과 각 파일의 역할, 브라우저에서 확인할 테스트 순서를 함께 알려줘.

“실제 이메일 전송은 아직 연결하지 말라”는 조건이 중요합니다. 기능이 다 만들어진 것처럼 보이는 허위 성공 화면을 막고, 입력 확인과 전송 연결을 별도 단계로 테스트할 수 있기 때문입니다. 먼저 버튼과 폼의 동작을 시험한 뒤, 필요한 서비스와 개인정보 처리 방식을 결정합니다.

4. 문의 폼은 보안과 한도까지 점검합니다

문의 폼은 이름과 이메일을 받는 순간 개인정보를 다루는 기능이 됩니다. 전송 서비스 계정의 인증 키를 웹페이지 코드에 그대로 넣으면 방문자가 브라우저에서 읽을 수 있으므로, 비밀 키가 필요한 연동은 서버 측 보관 기능을 우선 검토해야 합니다. AI Studio 문서는 서버 측 코드에서 비밀 값을 관리하는 방법을 안내합니다. 공개 페이지에 넣어도 되는 값과 감춰야 하는 값을 구분합니다.

EmailJS를 선택한다면 요금과 제한을 현재 가격표에서 확인합니다. 2026년 10월 20일 확인 기준 무료 플랜은 월 200건 요청, 템플릿 2개, 요청당 50KB까지이며 대시보드 기록 보관은 7일입니다. “무료로 시작 가능”은 무제한이라는 뜻이 아닙니다. 문의가 늘거나 첨부 파일이 필요해지면 플랜 조건과 대안을 다시 비교해야 합니다.

폼을 공개하기 전에는 스팸 요청을 막는 장치도 확인합니다. EmailJS는 대시보드에서 출처 도메인 허용 목록과 IP 기반 요청 제한을 설정하는 방법을 안내합니다. 누가 폼에 접근할 수 있는지, 자동 반복 요청을 어떻게 제한할지 정하지 않으면 문의 메일함이 광고로 채워질 수 있습니다. 서비스 선택보다 운영 규칙이 먼저입니다.

업무에 필요한 정보만 받는 것도 원칙입니다. 문의 목적에 이름과 회신 이메일만 필요하다면 주민등록번호나 상세 주소를 받지 않습니다. 폼 가까이에 수집 목적과 보관 기준을 알리고, 실제 개인정보 처리 기준은 조직의 정책과 관련 법령에 맞춰 검토합니다. AI가 만든 개인정보 안내 문구를 법률 검토가 끝난 문장처럼 그대로 게시하지 않습니다.

시안 다음에는 기능 연결과 개인정보·요금 한도 점검이 이어집니다.

5. 배포 전에 확인할 체크리스트

미리보기에서 좋아 보이는 것과 방문자가 문제없이 쓰는 것은 다릅니다. 배포 전에 데스크톱과 휴대전화 화면에서 직접 눌러 봅니다. 다른 사람에게 링크를 전달하기 전에는 테스트용 입력값만 사용하고, 실제 이메일·데이터가 어느 서비스에 저장되는지 확인합니다.

점검 단계	확인할 내용	통과 기준
화면	제목·대상·행동 버튼이 한눈에 보이는가	방문자가 다음 행동을 말할 수 있다
모바일	글자 잘림, 가로 스크롤, 버튼 겹침이 없는가	화면 폭을 바꿔도 읽고 누를 수 있다
폼	빈 값·잘못된 이메일·정상 입력을 각각 시험했는가	오류와 성공 상태가 구분된다
보안	비밀 키 노출, 스팸 제한, 개인정보 수집을 확인했는가	필요한 값만 받고 공개 범위를 점검했다
비용	무료 한도, 배포 조건, 초과 시 동작을 확인했는가	서비스 공식 요금표 기준으로 판단했다

배포 버튼은 마지막 단계입니다. AI Studio에서 배포 선택지가 보이더라도 계정의 프로젝트·결제 설정과 현재 제공 조건을 먼저 읽습니다. 시험용 페이지라면 접근을 제한하고, 공개 사이트라면 도메인·문의 수신자·오류 대응 담당자를 정합니다. 작동하는 결과물을 만든 뒤 운영할 사람이 누구인지까지 정해야 업무에서 계속 쓸 수 있습니다.

자주 묻는 질문

구글 스티치만으로 문의가 전달되는 웹사이트를 만들 수 있나요?

Stitch는 화면 설계와 프로토타입에 초점을 둔 도구입니다. 문의 전송이나 데이터 저장 같은 기능은 별도로 구현하고 시험해야 합니다. 공식 발표에서 내보내기·개발 도구 연결·웹 게시 경로를 안내하지만, 구체적인 구현 범위는 선택한 도구와 계정 환경에 따라 확인해야 합니다.

코딩을 몰라도 AI Studio에서 완성할 수 있나요?

자연어 지시로 웹 앱 초안을 만들고 미리보기에서 바꿀 수 있습니다. 그러나 오류 원인, 계정 비밀 값, 데이터 보관, 비용을 판단하는 일까지 자동으로 보장되지는 않습니다. 프롬프트로 초안을 만들되, 입력·오류·권한·배포를 체크리스트로 검증해야 합니다.

EmailJS 무료 플랜으로 문의 폼을 운영해도 되나요?

공식 가격표 기준 월 200건 요청이 제공되지만, 두 개 템플릿과 요청 크기 등 조건이 있습니다. 문의량과 필요한 기능이 한도 안에 들어오는지 계산하고, 개인정보·스팸 방지 설정도 함께 확인한 뒤 선택합니다. 요금과 정책은 바뀔 수 있으므로 도입 직전에 공식 가격표를 다시 확인합니다.

세 줄 요약

• 구글 스티치에서 방문 흐름과 화면 시안을 먼저 다듬습니다.
• AI Studio에서 버튼·폼 등 실제 동작을 작게 나눠 구현하고 시험합니다.
• 배포 전 개인정보, 비밀 키, 스팸 제한, 무료 한도를 확인합니다.

출처

• Google Labs, Introducing “vibe design” with Stitch
• Google AI for Developers, Build apps in Google AI Studio
• EmailJS, Pricing

글쓴이 나미리 — AI 실무 강사 · 한국AI콘텐츠연구소 전임강사. 기업·공공기관 대상 생성형 AI 업무 활용 강의를 합니다. 강사 소개

함께 보면 좋은 채널

• AI 강사 나미리 공식 홈페이지 — 강의 커리큘럼 및 강의 문의
• 네이버 블로그 — AI 활용 팁과 강의 현장 이야기
• 구글 블로그 — 업무에 바로 쓰는 AI 도구 사용법