Google Stitch(구글 스티치) 사용법 완벽 정리: Gemini 3.0으로 스케치를 UI 코드로 변환하기

코딩을 전혀 몰라도 종이에 그린 낙서 한 장이면, 30초 만에 작동하는 웹사이트 코드를 얻을 수 있습니다

1. Google Stitch란? Gemini 3.0 기반 생성형 UI(Generative UI) 도구의 특징

구글의 공식 문서(Overview)에 따르면, Stitch는 단순한 '그림 그리는 AI'가 아닙니다. 이 도구의 정체성은 '생성형 UI 디자인(Generative UI Design)'과 '프론트엔드 엔지니어링'을 하나로 결합한 차세대 프로토타이핑 솔루션입니다.

핵심 엔진: Gemini 3.0의 두 가지 무기

Stitch가 기존의 디자인 도구와 차별화되는 이유는 구글의 최신 AI 모델인 Gemini 3.0이 탑재되었기 때문입니다.

1. 네이티브 멀티모달 (Native Multimodality): 텍스트와 이미지를 따로 처리하지 않고 사람처럼 동시에 이해합니다. 덕분에 종이에 대충 그린 낙서(Sketch)를 업로드해도, AI는 그 안에 담긴 '로그인 버튼', '이미지 영역' 등의 의도를 정확히 파악하여 코드로 변환합니다.

2. 100만 토큰 컨텍스트 (Long Context Window): 이게 진짜 핵심입니다. AI가 방대한 기억력을 가졌다는 뜻입니다. 앱 화면이 1개일 땐 잘하다가 10개가 넘어가면 디자인이 뒤죽박죽되는 다른 AI들과 달리, Stitch는 프로젝트의 첫 번째 화면 스타일과 규칙을 끝까지 기억하고 일관성 있게 유지합니다.

Stitch의 철학: 브릿지(Bridge)

기존의 앱 개발 과정은 기획(텍스트/PPT) → 디자인(Figma) → 개발(Code)로 단절되어 있었습니다. 각 단계마다 소통 비용이 발생했죠. Stitch는 이 과정을 하나로 합쳐, 기획자가 텍스트를 입력하면 바로 개발 가능한 코드가 나오는 새로운 워크플로우를 제시합니다.

특히 구글AI스튜디오로 내보내기 기능이 있어 스티치에서 세부 디자인을 만들어낸 후 구글AI스튜디오 빌드를 통해 내가 원하는 디자인으로 개발을 할 수 있습니다.

2. 텍스트와 이미지로 디자인하기: 스케치(손그림)를 앱 UI로 변환하는 법

Google Stitch를 처음 실행하면 무엇부터 해야 할지 막막할 수 있습니다. 접속부터 첫 디자인을 생성하기까지의 과정을 하나하나 짚어드립니다.

Step 1. 접속 및 로그인

1. 웹사이트 접속: 브라우저(크롬 권장)를 열고 stitch.withgoogle.com에 접속합니다.

   

   Stitch 소개 페이지입니다. AI를 활용해 효율적으로 디자인을 생성할 수 있음을 강조합니다.

2. 구글 계정 로그인: 우측 상단의 'Sign in' 버튼을 눌러 구글 계정으로 로그인합니다. (별도의 회원가입 절차 없이 기존 구글 아이디로 바로 이용 가능합니다.)

3. 약관 동의: 구글 랩스(Labs) 실험 기능에 대한 약관 동의 팝업이 뜨면 동의(Agree)를 누르고 메인 대시보드로 진입합니다.

Step 2. 새 프로젝트 생성 (Create New)

메인 화면 중앙이나 좌측 중간에 있는 '디자인을 설명하세요' 또는 입력창을 통해 시작합니다.
이때, 만들고자 하는 앱의 형태를 미리 선택할 수 있습니다.

• 앱: 스마트폰 세로 비율에 최적화된 앱 디자인을 시작할 때 선택합니다.

  

• 웹: PC 웹사이트나 넓은 대시보드 화면을 만들 때 선택합니다.

  

Step 3. 입력 방식 선택 (텍스트 vs 이미지)

Stitch는 두 가지 방식으로 디자인을 시작할 수 있습니다. 상황에 맞게 골라보세요.

A. 텍스트로 시작하기 (Text-to-UI)
가장 기본적인 방법입니다. 입력창에 만들고 싶은 화면을 글로 설명합니다.

• Tip: 단순히 "로그인 화면"이라고 하지 말고, [스타일 + 구성요소 + 테마]를 포함해 구체적으로 적으세요.

  • 좋은 예: "A login screen for a coffee ordering app. Use warm brown colors, rounded buttons, and include 'Sign in with Google' option." (따뜻한 갈색 톤의 커피 주문 앱 로그인 화면, 둥근 버튼, 구글 로그인 옵션 포함)

이렇게 프롬프트를 입력하면 다음과 같은 결과물을 얻을 수 있습니다. (제미나이 3.0플래시 기준)

구글 Stitch로 생성한 두 가지 스타일의 커피 앱 로그인 화면이 나란히 비교되어 있습니다. 왼쪽은 커피 이미지를 강조하고, 오른쪽은 심플한 디자인으로 구성되어 있습니다.

B. 이미지로 시작하기 (Image-to-UI)
이미지 업로드 아이콘(클립 모양)을 클릭하여 파일을 올립니다.

• 손그림(Sketch): 종이에 펜으로 대충 그린 와이어프레임 사진을 올리면, AI가 그 구조를 그대로 살려 깔끔한 디지털 디자인으로 바꿔줍니다. 기획자에게 가장 강력한 기능입니다.

• 스크린샷: 기존에 마음에 들었던 다른 앱의 스크린샷을 올리고 "이런 스타일로 만들어줘"라고 참고용으로 줄 수도 있습니다.

• 웹사이트: 평소 관심을 두고 있던 웹사이트의 URL을 복사하여 붙여넣으면 거의 그대로 복제가 가능합니다. 다만 꼭 '이 웹사이트와 똑같이 만들어'는 프롬프트를 입력하여야 합니다.

  

  우리에게 익숙한 틸노트 주소를 넣고 '이 웹사이트를 보고 이 웹사이트의 UI/UX를 그대로 만들어 줘'라고 명령을 내려보겠습니다 .

  

  그러면 다음과 같은 결과를 얻을 수 있습니다.(죄송합니다 운영자님)

  

  stitch로 복제한 틸노트 메인 페이지 입니다.

  이 디자인을 앤디워홀 스타일로 변경하여 달라고 하였더니 다음과 같이 변경하여 주었습니다.

  

  틸노트 메인 페이지를 앤디워홀 스타일로 변환한 페이지 입니다.

  이렇듯 우리가 원하는 UI/UX를 너무 손쉽게 만들고 수정할 수 있습니다.

Step 4. 모델 및 옵션 설정 (중요!)

입력창 주변에 있는 작은 설정 버튼들을 놓치지 마세요.

• 모델 선택 (Gemini Model): 입력창 우측 하단에서 AI 모델을 선택할 수 있습니다.

  • Gemini 3.0 Flash: 속도가 매우 빠르고 효율적입니다. 빠른 아이데이션에 추천합니다.(좀 더 싸요) 다만 결과값이 확실히 3.0프로의 결과보다는 좋지 못합니다.

  • Gemini 3.0 Pro: 더 복잡하고 정교한 추론이 가능합니다. 디테일한 디자인이 필요할 때 선택하세요.(비싸요) 굉장히 좋은 결과물을 보여줍니다.

  • 나노바나나 (Nanobanana) 리디자인: 오래된 웹사이트의 스크린샷을 올리면, 그 사이트의 내용과 구조는 그대로 유지하면서 디자인 스타일만 최신 트렌드(Modern, Material Design 등)로 싹 리모델링해 줍니다. 리뉴얼 프로젝트를 할 때 최고의 기능입니다.(제일 비싸요)

• 3x 모드 (3개 생성): 입력창 왼쪽의 '(+) 3x' 버튼을 활성화하세요. 한 번에 3가지 다른 스타일의 시안을 동시에 만들어줍니다. 시간이 조금 더 걸리지만, 여러 옵션을 비교해보고 고를 수 있어 훨씬 효율적입니다.

  

3. 전문가용 편집 기능: 예측 히트맵(Heatmap)과 변형 생성(Variant) 활용 팁

기본 생성만으로는 "어? 뭔가 2% 부족한데?" 싶을 때가 반드시 옵니다. 이때 사용하는 것이 바로 전문가용 패널입니다. 공식 문서에는 간략하게 소개되어 있지만, 실무에서는 퀄리티를 결정짓는 핵심 기능들입니다.

1. 변형 생성 패널 (Variant Generation): AI의 창의성 조절하기

생성된 이미지를 클릭하면 상단에 메뉴가 생성됩니다. 이렇게 생성된 메뉴 중 'Generate' 버튼을 누르면 나오는 패널입니다. 여기서 AI에게 "어디까지 맘대로 바꿔도 되는지" 허락해 줄 수 있습니다.

1. 창의성 범위 (Creativity Range) 조절

스크린샷에 보이는 3단계 버튼은 AI에게 "얼마나 많이 바꿀지" 허용 범위를 정해주는 핵심 기능입니다.

• 미세 조정 (Fine-tune):

  • "지금 느낌 딱 좋아. 아주 조금만 다듬어줘."

  • 현재 디자인의 뼈대와 분위기는 99% 유지합니다. 버튼의 미세한 간격, 폰트의 자간, 색상의 톤 정도만 깔끔하게 정리하고 싶을 때 사용합니다.

• Explore (탐색):

  • "컨셉은 좋은데, 다른 레이아웃은 없어?"

  • 기존 디자인의 핵심 컨셉은 유지하되, 구성 요소를 재배치하거나 스타일을 조금 더 과감하게 변경하여 대안(Alternative)을 찾을 때 가장 많이 사용하는 옵션입니다.

• Reimagine (재해석):

  • "다 지루해. 완전히 새롭게 다시 짜봐!"

  • 기존 디자인을 파괴하고 제로베이스에서 완전히 새로운 스타일을 제안합니다. 아이디어가 고갈되었을 때 영감을 얻기 위한 '브레인스토밍' 용도로 강력 추천합니다.

2. 다양하게 변경할 요소 (Elements to Vary)

이 체크박스들은 일종의 '잠금(Lock)' 장치입니다. 체크된 항목만 AI가 건드릴 수 있고, 체크를 해제하면 그 요소는 고정됩니다.

• Layout (레이아웃): 체크 시 버튼 위치나 이미지 배치를 바꿉니다.

• Color scheme (색상): 체크 시 배색을 변경합니다.

• Images / Text font / Text content: 각각 이미지, 폰트, 텍스트 내용을 변경합니다.

💡 실전 활용 꿀팁
"디자인 구조는 마음에 드는데, 색상이 우리 브랜드랑 안 맞네?"
👉 Layout 체크 해제 (잠금) / Color scheme 체크 (변경 허용)
👉 이렇게 설정하고 '변형 생성하기'를 누르면, 레이아웃은 그대로 유지된 채 색상만 바뀐 시안 3개를 얻을 수 있습니다.

2. 분석 및 수정 도구

단순히 예쁜 그림이 아니라, 사용자가 쓰기 편한 앱을 만들기 위한 도구들입니다.

• 🔥 예측 히트맵 (Prediction Heatmap):

  

  • 변형 패널 내의 'Heatmap' 아이콘을 클릭해 보세요.

    Google Stitch 예측 히트맵(Prediction Heatmap) 분석 화면

  • AI가 시선 추적 데이터를 기반으로 사용자의 눈길이 가장 먼저 머무는 곳을 붉은색으로 표시해 줍니다. 내가 의도한 '구매하기' 버튼이 붉게 빛나지 않는다면? 버튼 위치나 색상을 수정해야 한다는 신호입니다.

• 🖊️ 주석작성 (화면 위에 메모하기):

  • 채팅창에 말로 "오른쪽 위 버튼 좀 키워줘"라고 하면 AI가 헷갈릴 수 있습니다.

  • '주석작성' 모드를 켜고, 해당 버튼을 지정한다음 "Size Up"이라고 적으세요. 훨씬 직관적이고 정확하게 수정 사항이 반영됩니다.

    

    

• 테마수정:

  

  • 전반적으로 테마를 수정할 때 사용할 수 있습니다.

  • 세세하게 원하는 디자인 사항을 반영하여 수정할 수 있습니다.

3. "내 폰에서도 잘 보일까?" - 실전 검증(Preview) 메뉴

디자인이 화면상에서만 예쁘면 소용없죠? 사용자가 실제로 쓰게 될 다양한 환경에서 레이아웃이 깨지지 않는지 확인하는 '검수 단계'입니다.

① New Tab (새 탭에서 보기)

• 기능: 현재 작업 중인 디자인을 브라우저의 새 탭을 열어 꽉 찬 화면으로 보여줍니다.

• 활용법: 스티치의 복잡한 편집 도구(패널, 버튼 등)를 모두 걷어내고, 오직 '순수한 웹사이트 결과물'만 집중해서 보고 싶을 때 사용합니다. 고객이나 팀원에게 화면을 공유하며 프레젠테이션할 때 유용합니다.

② Show QR Code (실물 기기 테스트) - ⭐ 강력 추천!

• 기능: 화면에 QR코드를 띄워줍니다.

• 활용법: 가장 중요한 기능입니다. 스마트폰 카메라로 이 QR을 찍으면, 지금 내가 만든 디자인이 내 핸드폰 브라우저에서 즉시 실행됩니다.

  • 모니터로 볼 때는 괜찮았는데 막상 폰으로 보면 버튼이 너무 작아 누르기 힘들거나, 글씨가 너무 클 수 있습니다. 이런 '실제 사용감(Touch & Feel)'을 체크하는 데 필수적입니다.

③ Mobile / Tablet / Desktop (반응형 테스트)

• 기능: 뷰어의 화면 비율을 모바일(좁게), 태블릿(중간), 데스크톱(넓게) 크기로 즉시 변경합니다.

• 활용법: '반응형 웹(Responsive Web)'이 잘 적용되었는지 확인하는 기능입니다.

  • 체크 포인트: 데스크톱에서는 가로로 넓게 펴져 있던 메뉴들이, 모바일 모드를 눌렀을 때 세로로 예쁘게 정렬되는지 확인해 보세요. Stitch가 생성한 코드가 얼마나 똑똑하게 화면 크기에 대처하는지 검증할 수 있습니다.

4. 사용량 - 무료지만 무제한은 아니다

구글 스티치는 넉넉한 사용량을 제공하지만, 두 가지 종류의 크레딧으로 나뉘어 있으니 작업 시 참고해야 합니다.

1. 일일 크레딧 (Daily Credits): 매일 400회

• 무엇인가요? 가장 기본적인 작업 활동량입니다.

• 언제 차감되나요?

  • 텍스트 프롬프트로 디자인을 처음 생성할 때

  • 채팅으로 부분 수정을 요청할 때

  • 변형 생성(Variant) 버튼을 눌러 시안을 늘릴 때

  • 테마 수정, 글꼴 변경 등 일반적인 편집 기능을 사용할 때

2. 리디자인 크레딧 (Daily Redesign Credits): 매일 15회

• 무엇인가요? 가장 강력하고 무거운 연산이 필요한 고급 기능 전용 크레딧입니다.

• 언제 차감되나요?

  • 'Redesign(리디자인)' 모드를 사용할 때만 차감됩니다.

  • 기존 웹사이트의 URL이나 스크린샷을 업로드하고, "이 사이트 디자인을 현대적으로 바꿔줘"라고 요청하는 작업이 여기에 해당합니다.

• 특징: 이 작업은 'Nanobanana'와 같은 특화된 고성능 모델을 사용하기 때문에 연산 비용이 비쌉니다. 하루 15회로 제한되어 있으므로, 기존 사이트를 리모델링하는 작업을 할 때는 신중하게 프롬프트를 입력하는 것이 좋습니다.

🔄 초기화 (Reset)

• 이 크레딧은 매일(24시간 주기) 자동으로 초기화됩니다. 오늘 400회를 다 썼더라도, 내일이면 다시 채워지니 안심하세요.

5. 완성한 디자인 Google AI Studio 내보내기

Stitch가 '자동차의 외관(Design)'을 만드는 곳이라면, AI Studio는 '엔진(Logic)'을 조립하는 곳입니다. Stitch의 진가는 [내보내기(Export) > AI Studio] 기능에서 사용할 수 있습니다.

• 프롬프트 엔지니어링 심화: Stitch에서 생성된 디자인을 기반으로, AI Studio 환경에서 내가 원하는 디자인으로 개발을 시작할 수 있습니다.

• 구글AI스튜디오의 디자인 무작위성을 해결할 수 있는 굉장히 좋은 해결방법입니다.

• 개발자 핸드오프 최적화: 디자이너와 개발자 간의 불필요한 핑퐁 없이, 작동하는 코드를 베이스로 개발자가 즉시 작업을 이어받을 수 있습니다.

6. 마치며

Google Stitch는 단순한 디자인 도구가 아닙니다. 아이디어와 제품 사이의 거리를 획기적으로 좁혀주는 '생산성 가속기'입니다.

코딩을 모르는 기획자는 움직이는 프로토타입으로 설득력을 높일 수 있고, 개발자는 지루한 퍼블리싱 시간을 단축해 로직 구현에 집중할 수 있습니다. 지금 바로 stitch.withgoogle.com에서 머릿속 아이디어를 현실로 구현해 보시길 바랍니다.