구글 스티치 디자이너 가이드 — Gemini 3로 UI 디자인의 시작점이 바뀐 7가지 이유

구글 스티치 UI 시안 미리보기, 3개 모바일 앱 화면이 흰 배경 위에 떠 있는 미니멀 목업

2026년 봄, UI 디자이너의 첫 30분이 다시 정의됐다. 빈 화면을 마주하고 첫 박스를 그리던 시간이 — 한 줄의 문장으로 화면 한 벌이 동시에 나타나는 시간으로 바뀌었다. 구글 랩스에서 출시한 구글 스티치(Stitch by Google)는 텍스트나 이미지 한 장을 입력하면 반응형 UI 시안과 프론트엔드 코드까지 한 번에 만들어 주는 AI-네이티브 디자인 도구다. stitch.withgoogle.com에서 구글 계정 하나로 바로 시작할 수 있고, Gemini 2.5 Flash와 Pro, 그리고 2025년 12월 업데이트로 합류한 Gemini 3까지 골라 쓸 수 있다.

이 글은 도구의 일반 리뷰가 아니라 디자이너의 시점에서 본 정리다. 어떤 작업이 빨라지는지, 어떤 작업이 여전히 느리게 남는지, 그리고 구글 스티치를 자기 워크플로우에 어떻게 끼워 넣는 것이 가장 효율적인지 — 일곱 가지 결로 풀어 본다.

구글 스티치는 무엇이고 왜 디자이너가 주목해야 하는가

구글 스티치 UI 시안 미리보기, 3개 모바일 앱 화면이 흰 배경 위에 떠 있는 미니멀 목업

구글 스티치는 구글 I/O 2025에서 처음 공개된 후 몇 차례의 업데이트를 거친 AI-네이티브 UI 디자인 도구다. 초창기엔 Galileo AI의 기술이 기반이었고, 지금은 구글의 Gemini 2.5와 Gemini 3로 완전히 새로 짠 모델 위에서 돌아간다. 텍스트 프롬프트나 이미지 한 장을 던지면 반응형 UI를 만들어 주고, 같은 입력에서 여러 개의 레이아웃 변형을 동시에 보여 준다. 결과물은 화면 한 장이 아니라 디자이너가 골라 쓸 수 있는 시안 다발이다.

디자이너에게 중요한 점은 두 가지다. 첫째, 결과물이 평면 이미지가 아니라 편집 가능한 디자인이라는 점. Auto Layout 구조와 명명된 레이어가 살아있는 형태로 Figma에 그대로 붙여 넣을 수 있다. 둘째, HTML/CSS 코드 형태로도 즉시 추출된다. 디자인 → 핸드오프의 가장 무거운 단계 하나가 도구 안에서 미리 끝난다는 뜻이다.

이유 1 — AI-네이티브 인피니트 캔버스, 사고의 호흡이 끊어지지 않는다

구글 스티치 인피니트 캔버스 와이어프레임 트리, 흰 카드에 그려진 모바일 화면 스케치들이 연결선으로 연결된 디자이너 보드

구글 스티치의 가장 디자이너 친화적인 결정은 인피니트 캔버스다. 한 화면 안에서 초기 스케치, 변형 시안, 컴포넌트 분기, 인터랙티브 프로토타입까지 도구를 갈아타지 않고 한 자리에서 흐를 수 있게 했다. 이전에는 메모는 노션에서, 와이어프레임은 피그마에서, 코드는 다른 도구에서 — 사이의 전환 비용이 디자이너의 사고 흐름을 자주 끊었다. 인피니트 캔버스는 그 사이를 한 자리에 묶어 사고의 호흡을 유지시킨다.

실제로 작업해 보면 차이가 분명하다. 한 화면을 만들고, 그 옆에 변형 두 개를 띄우고, 또 그 옆에 인터랙션 분기를 펼치는 흐름이 캔버스 위에서 자연스럽다. 디자이너의 머릿속 트리 구조가 캔버스 위에 그대로 시각화되는 셈이다.

이유 2 — Gemini 3, 의도를 더 정확히 읽는 모델

2025년 12월의 Gemini 3 합류는 구글 스티치의 결정적 분수령이었다. 같은 프롬프트라도 결과물의 정렬이 더 깔끔해지고, 컴포넌트 사이의 비율과 여백이 더 디자인 시스템스럽게 정돈된다. 접근성 디테일 — 충분한 컬러 콘트라스트, 적절한 텍스트 크기, 의미 있는 시각 위계 — 도 이전 모델보다 한 단계 위에서 시작한다.

모델 선택도 디자이너의 통제 안에 있다. Standard 모드는 Gemini 2.5 Flash로 가볍고 빠른 생성을 월 350회까지, Experimental 모드는 Gemini 2.5 Pro로 더 정밀한 결과를 월 50회까지. Gemini 3는 디테일이 살아야 하는 시안에 쓰고, Flash는 시안 다발을 빠르게 펼쳐 비교하는 단계에 쓰는 분리가 잘 맞는다.

이유 3 — 텍스트·이미지 → UI, 시작점이 사라진다

구글 스티치 텍스트 프롬프트로 UI 생성, 흰 키보드와 태블릿 화면의 미니멀 인터페이스

구글 스티치의 핵심 기능은 단순하다. 한 줄의 문장으로 화면 한 벌이 만들어진다. “회원가입 폼이 있는 모바일 앱 화면, 미니멀한 톤”, “주식 시세 대시보드, 다크 모드, 한국어 인터페이스” — 이런 자연어 설명만으로 첫 시안이 30초 안에 떠오른다. 빈 화면 앞에서 첫 박스를 그릴지 말지 망설이던 시간이 사라진다는 뜻이다.

이미지 입력도 가능하다. 종이에 그린 와이어프레임 사진 한 장, 영감 받은 다른 앱의 스크린샷, 분위기 보드 이미지 한 장을 던지면 그 안의 시각 언어를 분석해 비슷한 결의 UI를 만들어 준다. 디자이너가 평소에 모아두던 레퍼런스 폴더가 곧장 출력으로 변환되는 통로가 생긴 것이다.

이유 4 — Figma로 바로 붙여 넣는 매끄러운 핸드오프

구글 스티치에서 Figma로 핸드오프, 노트북에 디자인 캔버스 프레임과 레이어 패널이 띄워진 화이트 데스크

구글 스티치를 디자이너가 진짜로 신뢰하기 시작한 결정적 이유는 Figma 호환이다. 결과물을 그대로 복사해 Figma에 붙여 넣으면 평면 이미지가 아니라 진짜 Figma 파일로 들어온다. Auto Layout 구조가 살아있고, 레이어 이름이 의미 있게 붙어 있으며, 컴포넌트가 논리적으로 그룹화돼 있다. Figma에서 그대로 후속 작업을 이어갈 수 있다.

코드 추출도 같은 자리에서 가능하다. HTML과 CSS로 출력되며, 개발팀에 그대로 넘겨도 무리가 없다. 디자인 → 핸드오프의 마지막 단계가 도구 안에서 한 번 더 압축되는 셈이다. 단, 코드의 품질은 프로토타입 수준이고 프로덕션 코드의 베이스로는 검토와 정리 작업이 더 필요하다.

이유 5 — Vibe Design과 Voice Canvas, 도구의 다음 결

구글 스티치 Vibe Design, 같은 UI 레이아웃이 쿨 그레이 웜 베이지 소프트 파스텔 세 톤으로 변형된 시안

2026년 업데이트에서 등장한 Vibe Design은 디자이너의 무드를 모델에 전달하는 새 결이다. “더 따뜻하게”, “더 차분하게”, “더 캐주얼하게”처럼 톤 단위 명령으로 화면 전체의 결을 한 번에 바꾼다. 컬러, 모서리 둥글기, 여백, 타이포그래피의 무게가 한 번의 명령으로 통합된다. 디자인 시스템의 톤 단위 변형을 빠르게 시험할 때 강력하다.

Voice Canvas는 음성으로 캔버스를 조정하는 실험 기능이다. “이 카드 더 넓게”, “버튼 색을 톤 다운”처럼 말로 디자인 결정을 내리는 흐름이다. 아직 정밀도는 거칠지만, 이 방향성이 가리키는 곳은 디자인 도구의 인터페이스 자체가 키보드·마우스에서 자연어로 한 단계 더 옮겨가는 흐름이다.

이유 6 — 무료에서 시작할 수 있는 진입 장벽

구글 스티치의 또 다른 매력은 진입 장벽이다. 구글 계정만 있으면 stitch.withgoogle.com에서 바로 시작할 수 있고, Standard 모드 월 350회, Experimental 모드 월 50회의 무료 한도 안에서 충분히 한 프로젝트를 끝낼 수 있다. 디자이너 한 명이 자기 사이드 프로젝트를 위해 가볍게 쓰는 것은 물론, 팀이 도구의 가능성을 검토하는 데에도 별도 결제 없이 시작할 수 있다는 점이 빠른 확산의 이유다.

유의할 점도 있다. 무료 한도는 모델당 분리 카운트이므로, Pro/Experimental 한도를 디테일 작업에 아껴 두고 Flash로 변형을 빠르게 펼치는 분리 사용이 효율적이다.

이유 7 — Figma의 대체가 아니라 첫 한 시간을 압축하는 도구

“구글 스티치가 Figma를 대체할까?”라는 질문은 잘못 잡힌 질문이다. Figma는 디자인 시스템, 협업, 컴포넌트 관리, 변형 운영의 도구다. 구글 스티치는 첫 시안을 30초 안에 만들고, 변형 다발을 펼치고, 디자인 의도를 빠르게 시험하는 도구다. 두 도구의 직무는 겹치지 않고 이어진다. 디자이너의 워크플로우는 “구글 스티치에서 첫 한 시간을 압축하고, Figma에서 그 다음을 다듬는다”의 분리로 가장 자연스럽게 정착하고 있다.

이 분리가 만드는 가장 큰 변화는 첫 시안의 비용이 0에 가까워졌다는 점이다. 시안 한 벌을 만드는 데 한 시간이 들면 그 시안을 버리기 어렵지만, 30초가 들면 다섯 벌을 만들어 비교한 뒤 가장 결이 맞는 한 벌을 골라 발전시키는 흐름이 자연스럽다. 변형의 비용이 떨어진 자리에 디자이너의 판단력이 더 중심으로 들어온다.

디자이너의 5단계 워크플로우 — 구글 스티치를 실제로 쓰는 방법

구글 스티치 디자이너 5단계 워크플로우, 펜슬 전구 돋보기 스와치 체크마크 다섯 단계 카드
  • 1단계 — 프롬프트 정리. 화면의 목적, 톤, 사용자, 핵심 액션을 한 문단으로 적는다. 이게 곧 첫 입력이 된다.
  • 2단계 — Flash로 변형 다발. Standard 모드(Flash)에서 같은 프롬프트로 변형 5~7개를 빠르게 펼친다. 이 단계에서 결의 후보를 좁힌다.
  • 3단계 — Pro/Gemini 3로 디테일. 후보 한두 개를 Experimental(Pro) 또는 Gemini 3로 다시 생성해 디테일을 끌어올린다.
  • 4단계 — Vibe Design으로 톤 조정. 컬러, 모서리, 여백을 톤 단위로 조정한다. 디자인 시스템의 결과 맞춘다.
  • 5단계 — Figma 핸드오프. 결과물을 Figma에 붙여 넣고, 컴포넌트로 정리하고, 디자인 시스템에 맞춰 조정한다.

한계와 디자이너가 주의할 점

구글 스티치는 “그럴듯한 결과물”을 너무 빠르게 만들어 준다. 그래서 디자이너의 검토 시간을 더 길게 잡아야 한다. 첫째, 한국어 인터페이스 정밀도는 영어보다 약간 낮다. 핵심 카피는 영어로 시작하고 한국어로 후작업하는 편이 안정적이다. 둘째, 코드는 프로덕션 그대로 쓰기엔 거칠다. 프로토타입과 빠른 검증용으로만 쓴다. 셋째, 브랜드의 디자인 시스템과 톤이 강한 프로덕트는 구글 스티치의 결과물을 그대로 가져오면 어색하다. 시스템에 맞춰 조정하는 단계가 반드시 필요하다.

가장 중요한 한 가지 — 구글 스티치는 디자이너의 첫 시안을 빠르게 만들지만, 디자인의 의도와 판단을 대신해 주지 않는다. 어떤 시안이 사용자에게 더 맞는지, 어떤 톤이 브랜드와 어울리는지, 어떤 인터랙션이 자연스러운지를 결정하는 자리는 여전히 디자이너의 머릿속이다. 도구는 시작점을 압축할 뿐이고, 끝점은 사람이 만든다.

UI 디자인의 시작점이 압축되는 시기

구글 스티치는 UI 디자인의 첫 한 시간을 30초로 압축한 도구다. 인피니트 캔버스, Gemini 3, 텍스트·이미지 → UI, Figma 핸드오프, Vibe Design, 무료 진입 장벽, Figma와의 분리된 직무 — 일곱 가지 이유가 합쳐져, 디자이너의 일상이 한 단계 다시 정렬되는 자리에 도구가 와 있다. 바로 전 글에서 다룬 구글 플로우가 영상 제작의 시작점을 바꿨다면, 구글 스티치는 UI 디자인의 시작점을 바꾼다.

한 가지를 강조하면서 마무리하고 싶다 — 도구가 빨라질수록 디자이너의 판단력이 더 중요해진다. 시안 한 벌을 만드는 데 한 시간이 들던 시대에는 시간이 디자이너를 보호했다. 이제는 변형 다발을 30초에 만들 수 있는 시대고, 그 다발 중 어떤 것을 다음 단계로 가져갈지 결정하는 능력이 디자이너의 핵심 가치가 된다. 외부 자료는 구글 개발자 공식 블로그의 스티치 출시 공지를 참고했다.

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다