[안티그래비티 02] 구글 스티치 사용 입문하기

2026년 3월 30일조회 7

이 글은 《요즘 바이브 코딩 안티그래비티 완벽 가이드》에서 발췌했습니다.

요즘 바이브 코딩 안티그래비티 완벽 가이드

ISBN 9791194383734지은이 최지호(코드팩토리)₩28,000

구글의 스티치Stitch는 프롬프트나 간단한 스케치만으로 고품질의 사용자 인터페이스를 생성합니다. 생성한 디자인은 제미나이 모델을 기반으로 실제 작동하는 프런트엔드 코드로 변환됩니다. 디자인 구상부터 구현까지 걸리는 시간을 획기적으로 단축할 수 있습니다. 앞으로 모든 웹페이지가 필요한 실습 프로젝트는 모두 스티치를 사용합니다. 잘 익혀두세요.

1. 스티치 기본 화면 살펴보기

스티치는 웹에서 작동합니다. 구글 계정으로 로그인만 하면 됩니다. 2026년 1월 기준 무료로 사용할 수 있습니다. 아직 베타 버전이기 때문에 추후 사용법이 바뀌거나 구독 및 비용이 발생할 수 있습니다.

01 스티치 공식 홈페이지에 접속합니다. [사용해 보기]를 누른 후 구글 계정으로 로그인합니다.

스티치 : stitch.withgoogle.com

02 로그인하면 다음과 같은 화면이 보입니다. 스티치는 네 가지 요소로 이루어져있습니다. 프로젝트 사이드 바, 디자인 타입 탭, 디자인 프롬프트, 데모 프롬프트입니다. 차근차근 살펴봅시다.

➊ 프로젝트 사이드바에서 지금까지 작업한 디자인 프로젝트를 확인할 수 있습니다. 언제든지 스티치에 다시 접속해서 기존 작업한 프로젝트를 확인할 수 있습니다.

➋ 디자인 타입 탭입니다. 스티치는 앱 디자인과 웹 디자인을 모두 지원합니다. 제작할 디자인에 어울리는 탭을 선택해서 진행하세요. 앱 디자인이 기본 값입니다. 실수로 다른 디자인을 선택하지 않도록 유의하세요.

➌ 디자인 프롬프트 창입니다. 제미나이같이 흔히 사용하는 AI 인터페이스와 마찬가지로 프롬프트를 입력해주면 됩니다.

➍ 데모 프롬프트입니다. 아이디어가 없거나 스티치 작동법만 익히고 싶다면 데모 프롬프트 중 하나를 선택하고 [➝] 버튼을 눌러 실행해보면 됩니다. 다음과 같이 완성도 높은 예시 프로젝트를 확인할 수 있습니다.

03 디자인 프롬프트 창의 옵션을 자세히 살펴보겠습니다. 디자인 프롬프트 창의 왼쪽 아래 [+] 버튼을 눌러보세요. [Upload Images]와 [Website URL] 버튼이 있습니다.

[Upload Images]는 특정 이미지를 참조하여 디자인하고 싶을 때 사용합니다. 이미지를 업로드하고 프롬프팅하면 됩니다. 참조할 웹사이트가 있다면 [Website URL] 버튼을 눌러서 웹사이트 링크를 붙여넣습니다. 그럼 스티치가 웹사이트를 크롤링하여 비슷한 느낌의 웹사이트를 제작합니다.

04 다음은 모델 선택 창입니다. 디자인 생성에 사용할 AI 모델을 고를 수 있습니다.

우리가 가장 많이 사용할 옵션은 [Thinking with 3 Pro]입니다. 제미나이 3 Pro 모델에 Thinking 모드를 설정한 형태로 가장 수준 높은 결과물을 기대할 수 있습니다. [Redesign]은 기존 디자인을 재구성하는 방식입니다. 현존 최강 이미지 인식 도구인 나노바나나 프로를 통해 이미 구현된 디자인을 인식한 후, 이를 기반으로 새로운 버전의 디자인을 제작합니다. 웹사이트나 앱의 업데이트가 필요할 때, 혹은 기존 이미지에서 새로운 영감을 얻어 비슷한 느낌의 디자인을 구현하고 싶을 때 매우 유용합니다.

Fast는 제미나이 플래시 모델을 사용합니다. 완성도보다는 속도에 집중한 선택지입니다. 2.5 Pro는 이전 세대의 제미나이 모델입니다. 이제는 사용할 필요 없습니다.

2. 스티치 디자인 화면 살펴보기

직접 디자인을 제작해보며 디자인 인터페이스에서 어떤 기능이 있는지 확인해보겠습니다.

01 ➊ [Web] 탭을 선택하고 ➋ [3.0 Pro] 모델을 선택한 후 ➌ 샘플 프롬프트중 마음에 드는 프롬프트를 하나 선택한 후 [➝] 버튼을 눌러주세요.

저는 ‘Create a dashboard for Indoor Plan Care with watering schedules, sunlight requirements per plant, and fertilization reminders’를 선택하겠습니다. 같은 프롬프트를 입력하더라도 어차피 다른 디자인이 나오기 때문에 꼭 책과 같은 프롬프트를 입력할 필요 없습니다.

02 프롬프트를 실행하면 다음과 같이 화면이 바뀌고 5~10분을 대기하면 디자인이 완성됩니다. 디자인 창의 전반적인 레이아웃을 확인해보겠습니다.

왼쪽에는 ➊ 채팅 사이드바가 보입니다. 방금 프롬프팅했던 창이 왼쪽 사이드바로 옮겨 왔다고 생각하면 됩니다. 오른쪽에는 ➋ 디자인 시안이 있습니다. 우리 프롬프트를 기반으로 만들어낸 결과물입니다. 아래에는 ➌ 컨트롤 옵션이 있습니다. 왼쪽부터 순서대로 선택 도구 (V), 패닝 도구 (H), 확대 도구(V), 이미지 업로드 도구입니다. 화면을 자유롭게 이동할 수 있는 패닝 도구은 단축키 [Space bar]로 사용할 수 있고, [Command] 또는 [Ctrl]을 누른 상태에서 마우스 스크롤을 하면 확대, 축소할 수 있습니다. 디자인을 클릭하면 상단에 ➍ 디자인 옵션이 만들어집니다. 시안을 개선하는데 필요한 다양한 기능을 사용할 수 있습니다. 디자인 옵션의 메뉴를 더 자세히 알아봅시다.

Generate

[Generate] 옵션은 AI가 만들어진 디자인을 바탕으로 새로운 디자인을 제안하거나 사용자 경험을 분석하는 기능입니다. [Variation], [Regenerate], [Predictive Heatmap] 기능을 사용할 수 있습니다.

01 Variations 옵션은 Generate 옵션중에 가장 흥미로운 옵션으로 현재 디자인의 여러 변형을 동시에 생성할 수 있습니다. 빠르게 여러 시안을 받아 볼 수 있는 가장 좋은 방법입니다. [Variations]을 누르면 다음과 같이 오른쪽 사이드바가 생성됩니다. 사이드바의 옵션을 순서대로 확인해보겠습니다.

➊ Number of options는 몇개의 시안을 생성할지 선택할 수 있습니다. 여러 개를 동시에 만들수록 토큰이 빨리 소모됩니다. 경험상 3개 시안이 가장 적절하고 좋습니다.

➋ Creative Range는 창의력 레벨을 설정합니다. Refine은 가장 낮은 창의력이고 YOLO는 가장 높은 창의력을 보이게 할 수 있습니다. 창의력을 높게 설정할수록 원본 디자인과 드라마틱하게 다른 결과가 도출됩니다.

➌ Custom Instructions에는 특별히 수정할 요소나 원하는 느낌을 입력하면 됩니다.

➍ Aspects to vary는 어떤 요소들을 변경할 건지 선택하는 옵션입니다. 각 요소별로 체크를 하면 변경을 허가합니다. 사용자가 원하는 대로 레이아웃이나 사진만 교체할 수 있습니다. Color scheme을 체크하면 색상 변경을 허가합니다. Text font는 글씨체 변경, Text content는 내용 변경을 허가합니다.

02 3개의 Variation을 선택하고 창의력은 [Medium]을 선택한 후 밝은 느낌을 얻기 위해 Light Mode 색상을 사용하도록 요청해보겠습니다. 모든 요소를 변경 가능하도록 체크합니다. [Generate variations]를 누르면 원본 디자인 옆에 3개의 시안이 동시에 작업을 시작합니다.

03 잠시 대기하면 시안이 완성됩니다. 요청한 대로 3개의 시안이 완성됐고 Light 모드로 생성해달라고 했기 때문에 밝은 배경의 디자인이 생성 됐습니다. 단순히 색감만 변경한게 아니라 레이아웃과 스타일, 전반적인 테마까지 완전히 다른 세 가지 시안이 생성되었네요.

먼저 마음에 드는 스타일을 완벽히 만든 다음 해당 디자인을 기반으로 여러 시안을 생성해서 비교해보길 바랍니다.

<바이브 UP! 3초 꿀팁> Generate의 다른 옵션을 알아봅시다!

Generate에는 실습에서 사용한 Variations 옵션 외에도 다른 옵션이 있습니다. 간단히 설명하겠습니다. 직접 다양한 디자인을 만들며 익혀보세요.

[Regenerate]는 선택한 시안을 다시 생성합니다. 생성 완료까지 대기하면 기존 디자인은 삭제되고 새로운 디자인을 확인할 수 있습니다. 기존 시안이 완전 삭제되기 때문에 추천하지 않는 기능입니다.

[Predictive Heatmap]은 매우 유용한 기능입니다. 사용자의 눈이 어디에 오래 머물지를 예측해서 히트맵을 그려줍니다. 빨간색에 가까울수록 사용자의 시선이 오래 머물고 파란색에 가까울수록 사용자의 시선이 덜 머무는 위치입니다. 중요한 위치에 사용자의 시선이 오래 머물도록 디자인하기 좋습니다.

Edit

다음은 [Edit] 옵션으로 넘어가보겠습니다. 이 기능은 이미 완성한 시안을 수정할 때 사용됩니다.

01 [Edit]의 첫번째 옵션은 [Add to Chat]입니다. [Add to Chat] 버튼을 클릭하면 디자인이 채팅 사이드바에 추가 됩니다. 변경하고 싶은 사항 또는 참고할 정보가 있을때 사용하면 유용합니다.

02 다음은 [Annotate] 기능입니다. 가장 유용한 기능 중 하나로 디자인 시안에 직접 그림을 그리고 코멘트를 추가하며 수정을 요청할 수 있는 기능입니다. 특정 부분을 드래그하고 코멘트를 남긴 후 [Apply] 버튼을 클릭하면 수정 요청을 기반으로 디자인을 새로 작업합니다. 디자인 시안을 태그하고 프롬프팅 하는 것 보다 훨씬 세세하게 조작할 수 있어 유용합니다.

그림 그리기 기능은 추천하지 않습니다. 코멘트 기능을 사용하는 걸 추천합니다.

03 [Edit Theme] 기능은 테마를 더욱 세세하게 조정할 수 있도록 도와줍니다. Light, Dark Theme, 메인 색상, 모서리 둥굴기, 폰트 스타일 등 원하는 형태로 변경을 요청할 수 있습니다. 직접 버튼을 눌러보며 여러분의 디자인을 수정해보세요.

Preview와 More

디자인할 때는 다양한 사용자의 기기 화면 크기를 반영해야 합니다. [Preview] 옵션은 디자인 시안을 모바일, 태블릿, 데스크톱 사이즈로 변경해서 확인할 수 있습니다. 특정 사이즈에서 마음에 들지 않는 디자인이 있다면 확인 후 프롬프팅해서 해당 사이즈에서의 디자인을 변경할 수도 있습니다.

[More] 옵션은 이름이 곧 기능 설명과 같기 때문에 간단히 설명하겠습니다.

View Code : 시안의 HTML/CSS/JS 코드를 확인할 수 있습니다.

Export : 외부 앱으로 추출할 때 사용합니다

Download : 코드 및 이미지를 다운받을 때 사용합니다. HTML 파일과 PNG 파일을 동시에 받을 수 있습니다.

Delete : 디자인을 삭제합니다.

바이브 코딩의 든든한 조력자, 스티치의 핵심 기능을 모두 살펴보았습니다. 스티치는 아이디어를 즉시 실제 코드로 바꿉니다. 상상을 현실로 만드는 가장 강력하고 빠른 도구라 할 수 있습니다. 각 기능은 이후에 실습을 하면 자연스럽게 익숙해질 겁니다.

📚 더 읽기

저자 소개

최지호(코드팩토리)

저자 최지호(코드팩토리)임페리얼 한국 지사에서 소프트웨어 엔지니어로 일했습니다. 현재 주식회사 코드팩토리를 창업하여 개발을 하면서 초보자뿐만 아니라 현직 개발자에게도 유용한 개발 강의를 제작합니다. 〈2022 인프런 Rookie of the Year〉, 〈2023 베스트셀러〉, 〈2024 패스트캠퍼스 어워드〉를 수상했으며 2024년 기준 2만 명이 넘는 수강생을 보유하고 있습니다._SNS __ Official : codefactory.ai__ Facebook : fb.com/serendipity111011__ YouTube : youtube.com/@codefactory_official__ Blog : blog.codefactory.ai__ GitHub : github.com/orgs/codefactory-co__ : open.kakao.com/o/gg2S2GBc__ : open.kakao.com/o/gDUhYNDh _주요 저서 __ 《코드팩토리의 플러터 프로그래밍(3판)》__ 《요즘 바이브 코딩 클로드 코드 완벽 가이드》 _주요 강의__ 코드팩토리의 Flutter 앱개발 초급__ 코드팩토리의 Flutter 앱개발 중급__ 코드팩토리의 9시간만에 끝내는 Javascript 풀코스__ 코드팩토리의 8시간만에 끝내는 Typescript 풀코스__ 코드팩토리의 백엔드 아카데미 : 한 번에 끝내는 NestJS 패키지 - 기초부터 MSA까지

📚《요즘 바이브 코딩 안티그래비티 완벽 가이드》 자주 묻는 질문

Q.안티그래비티라는 코딩 에이전트가 정확히 무엇인가요? 그리고 기존 코딩 방식과 어떤 차이가 있나요?

안티그래비티는 구글에서 개발한 차세대 코딩 에이전트입니다. 단순히 코드를 생성해주는 수준을 넘어, 사용자의 의도를 파악하고 디자인, 구현, 테스트, 배포까지 전 과정을 지원합니다. 기존 코딩 방식은 개발자가 직접 모든 코드를 작성하고 디버깅해야 했지만, 안티그래비티를 활용하면 AI가 코드 생성 및 문제 해결을 도와 개발 속도를 혁신적으로 향상시킬 수 있습니다. 특히, 구글 스티치와 연동하여 UI 디자인을 쉽게 구현하고, 제미나이, 클로드, GPT 등 다양한 AI 모델을 활용하여 더욱 강력한 기능을 제공합니다. 이 책에서는 안티그래비티를 활용한 바이브 코딩의 기초부터 고급 활용법까지 상세하게 다루고 있습니다. AI 에이전트를 200% 활용하는 TCREI 프롬프팅 프레임워크부터 아티팩트 시스템 활용법, 그리고 RAG 기반 챗봇 구축까지, 안티그래비티를 활용한 다양한 예제를 통해 실전 감각을 익힐 수 있습니다. 코딩 생산성을 극대화하고 싶다면 《요즘 바이브 코딩 안티그래비티 완벽 가이드》를 통해 안티그래비티를 마스터해보세요!

Q.AI 에이전트를 효과적으로 활용하기 위한 프롬프트 엔지니어링이 중요하다고 들었습니다. TCREI 프롬프팅 프레임워크는 무엇이며, 어떻게 활용해야 AI 에이전트의 능력을 최대한으로 끌어낼 수 있나요?

TCREI 프롬프팅 프레임워크는 Task(작업), Context(맥락), Requirement(요구사항), Example(예시), Iteration(반복)의 약자로, AI 에이전트에게 명확하고 구체적인 지시를 내리기 위한 프레임워크입니다. 각 요소들을 체계적으로 구성하여 프롬프트를 작성하면 AI 에이전트가 사용자의 의도를 정확하게 파악하고, 원하는 결과를 더욱 효과적으로 생성할 수 있습니다. 예를 들어, Task에는 '랜딩 페이지 디자인', Context에는 '스타트업 회사 소개', Requirement에는 '세련되고 현대적인 디자인', Example에는 '경쟁사 랜딩 페이지 URL', Iteration에는 '피드백 반영 후 수정'과 같이 구체적인 정보를 제공하는 것입니다. 《요즘 바이브 코딩 안티그래비티 완벽 가이드》에서는 TCREI 프롬프팅 프레임워크를 자세히 설명하고, 다양한 예시를 통해 실제로 어떻게 적용해야 하는지 보여줍니다. 또한, 제미나이 3 프로와 플래시를 오가는 효율적인 모델 스위칭 전략까지 제시하여, AI 에이전트의 능력을 200% 이끌어낼 수 있도록 돕습니다. AI 에이전트 활용 능력을 향상시키고 싶다면, 이 책을 통해 TCREI 프롬프팅 프레임워크를 완벽하게 이해하고 실전에 적용해보세요.

Q.스티치라는 도구가 UI 디자인에 활용된다고 하는데, 코딩 없이도 디자인이 가능한가요? 스티치를 안티그래비티와 함께 사용하면 어떤 시너지를 얻을 수 있나요?

구글 스티치는 코딩 없이도 직관적인 UI 디자인을 가능하게 하는 강력한 도구입니다. 드래그 앤 드롭 방식으로 컴포넌트를 배치하고 속성을 설정하여 웹사이트나 앱의 UI를 쉽게 만들 수 있습니다. 스티치의 가장 큰 장점은 디자인한 UI를 안티그래비티와 바로 연동하여 코드를 생성할 수 있다는 점입니다. 스티치에서 디자인한 내용을 안티그래비티에 전달하면, AI가 자동으로 해당 디자인에 맞는 코드를 생성해줍니다. 이를 통해 개발자는 디자인 작업에 소요되는 시간을 절약하고, 코드 구현에 더욱 집중할 수 있습니다. 《요즘 바이브 코딩 안티그래비티 완벽 가이드》에서는 스티치를 활용하여 랜딩 페이지, 블로그, 대시보드 등 다양한 웹 서비스를 디자인하고, 안티그래비티로 코드를 구현하는 과정을 상세하게 보여줍니다. 디자인 실력이 부족하더라도 스티치를 통해 멋진 UI를 만들고, 안티그래비티와 함께 빠르고 효율적으로 웹 서비스를 개발할 수 있습니다. 디자인과 개발 능력을 동시에 향상시키고 싶다면 이 책을 통해 스티치와 안티그래비티의 시너지를 경험해보세요.

Q.RAG 기반 챗봇 구축에 대한 내용이 있던데, RAG가 무엇이고, 챗봇 개발에 어떻게 활용되는 건가요?

RAG(Retrieval-Augmented Generation)는 검색 증강 생성 모델로, 외부 지식 베이스에서 정보를 검색하여 생성 모델의 답변을 보강하는 기술입니다. RAG를 챗봇 개발에 활용하면 챗봇이 단순히 미리 학습된 데이터에 의존하는 것이 아니라, 최신 정보나 특정 도메인 지식을 검색하여 답변에 반영할 수 있습니다. 예를 들어, 기업의 제품 매뉴얼이나 FAQ를 RAG 기반 챗봇에 연결하면, 고객 문의에 대해 정확하고 최신의 정보를 제공할 수 있습니다. 《요즘 바이브 코딩 안티그래비티 완벽 가이드》에서는 RAG 기반 챗봇을 구축하는 방법을 자세하게 설명합니다. 안티그래비티를 활용하여 RAG 파이프라인을 구축하고, 특정 데이터 소스에서 정보를 검색하여 챗봇의 답변을 풍부하게 만드는 과정을 단계별로 안내합니다. 또한, 챗봇의 성능을 평가하고 개선하는 방법, 다양한 데이터 소스와 연동하는 방법 등 RAG 기반 챗봇 개발에 필요한 모든 지식을 제공합니다. 챗봇 개발 능력을 향상시키고, 더욱 똑똑한 챗봇을 만들고 싶다면 이 책을 통해 RAG 기술을 마스터해보세요.

Q.책에서 랜딩 페이지와 블로그 구축을 다룬다고 하는데, 초보자도 쉽게 따라할 수 있도록 자세한 설명이 되어 있나요?

《요즘 바이브 코딩 안티그래비티 완벽 가이드》는 코딩 경험이 없는 초보자도 쉽게 따라할 수 있도록 랜딩 페이지와 블로그 구축 과정을 매우 자세하게 설명합니다. 단순히 코드만 나열하는 것이 아니라, 각 단계별로 필요한 개념과 원리를 명확하게 설명하고, 실제 화면을 캡처하여 시각적으로 이해하기 쉽도록 구성했습니다. 특히, 스티치를 활용하여 랜딩 페이지와 블로그의 UI를 디자인하고, 안티그래비티를 통해 코드를 구현하는 과정을 단계별로 안내합니다. 디자인 감각이 부족하더라도 스티치의 직관적인 인터페이스를 통해 멋진 랜딩 페이지와 블로그를 만들 수 있으며, 안티그래비티의 도움을 받아 코딩에 대한 부담 없이 웹사이트를 구축할 수 있습니다. 또한, 데이터베이스 설정, 배포 서비스 설정 등 초보자가 어려워하는 부분에 대한 자세한 설명과 문제 해결 방법까지 제공하여, 막힘 없이 따라할 수 있도록 돕습니다. 웹 개발 입문자라면 이 책을 통해 랜딩 페이지와 블로그를 직접 만들어보면서 웹 개발의 기초를 탄탄하게 다져보세요.

Q.결제 시스템 연동 및 권한 시스템 구현에 대한 내용이 있던데, 실제 서비스에 바로 적용할 수 있을 정도로 실용적인 정보인가요?

《요즘 바이브 코딩 안티그래비티 완벽 가이드》는 실제 서비스에 즉시 적용할 수 있을 정도로 실용적인 정보를 제공합니다. 단순히 이론적인 내용만 다루는 것이 아니라, 현업 개발자가 실제 서비스 개발 과정에서 겪는 어려움을 해결하고, 실제 서비스에 적용 가능한 수준의 코드를 제공합니다. 특히, 결제 시스템 연동 및 권한 시스템 구현 부분에서는 실제 서비스에서 많이 사용되는 결제 API를 활용하여 결제 기능을 구현하고, 사용자 역할에 따라 접근 권한을 제어하는 방법을 자세하게 설명합니다. 단순히 코드를 복사-붙여넣기 하는 수준을 넘어, 각 코드의 의미와 작동 원리를 명확하게 설명하여, 실제 서비스에 맞게 코드를 수정하고 응용할 수 있도록 돕습니다. 또한, 보안 취약점을 예방하고 안전한 서비스를 구축하기 위한 팁과 노하우도 제공합니다. 실제 서비스 개발 경험을 쌓고 싶거나, 현재 운영 중인 서비스의 기능을 개선하고 싶다면 이 책을 통해 결제 시스템 연동 및 권한 시스템 구현 능력을 향상시켜보세요.

Q.클린 아키텍처, 리팩터링, TDD 등 개발 방법론에 대한 내용도 포함되어 있나요? 좋은 코드를 작성하기 위한 원칙들을 배우고 싶습니다.

《요즘 바이브 코딩 안티그래비티 완벽 가이드》는 클린 아키텍처, 리팩터링, TDD(테스트 주도 개발) 등 좋은 코드를 작성하기 위한 다양한 개발 방법론을 다룹니다. 단순히 방법론을 소개하는 것에 그치지 않고, 안티그래비티를 활용하여 실제로 어떻게 적용할 수 있는지 구체적인 예시를 통해 보여줍니다. 클린 아키텍처를 통해 코드의 의존성을 줄이고 유지보수성을 높이는 방법, 리팩터링을 통해 코드를 개선하고 가독성을 향상시키는 방법, TDD를 통해 버그를 줄이고 안정적인 코드를 만드는 방법을 단계별로 설명합니다. 또한, 코드 리뷰, 코드 컨벤션, 디자인 패턴 등 좋은 코드를 작성하기 위한 다양한 원칙들을 소개하고, 실제 프로젝트에 적용할 수 있도록 돕습니다. 안티그래비티를 활용하여 빠르게 코드를 생성하는 것도 중요하지만, 생성된 코드를 개선하고 유지보수하기 쉽도록 만드는 것도 매우 중요합니다. 이 책을 통해 좋은 코드를 작성하기 위한 원칙들을 배우고, 안티그래비티를 활용하여 더욱 효율적이고 안정적인 서비스를 개발해보세요.