Figma 연동부터 코드 추출까지, Google Stitch 소개

Figma 연동부터 코드 추출까지, Google Stitch 소개

스티치(Stitch)는 AI기반 UI 디자인 툴로2025년 5월 Google I/O에서 발표되었다.
본 포스트에서는 Stitch의 기능과 사용 방법 등을 간단하게 알아보고자 한다.

목차

• Stitch란?
• Stitch의 기능
• Stitch 기술적 기반
• Stitch 활용 사례
• Stitch 사용 방법

Stitch란?

✔ 텍스트·이미지를 UI로 전환하는 Google의 AI 도구

Stitch는 2025년 5월 Google I/O에서 발표된 AI 기반 UI 디자인 생성 도구로, 사용자가 입력한 텍스트 설명이나 이미지를 바탕으로 실제 사용자 인터페이스(UI)를 자동으로 생성한다.
텍스트나 이미지를 입력하기만 하면, AI가 자동으로 UI 디자인을 생성하고 이를 프론트엔드 코드로 변환해줄 수 있다.
디자인 경험이 없는 사용자도 손쉽게 활용할 수 있도록 설계되었으며, 디자인과 개발 사이의 커뮤니케이션 간극을 AI로 해결하고자 하는 목적을 가진다.
또한 피그마(Figma)와도 연동이되어 결과물을 피그마에서 작업도 가능하다.

구글의 스티치

Stitch의 기능

✔ 자연어와 이미지로 다양한 UI 생성 및 코드 제공

Stitch는 다양한 기능을 통해 UI 디자인을 자동화하고 생산성을 높인다. 자연어로 앱의 기능이나 스타일을 설명하면 이를 바탕으로 UI가 생성되며, 이미지 기반 입력도 가능해 화이트보드 스케치나 와이어프레임에서 직접 디자인을 추출할 수 있다. 반복적인 작업이 가능하도록 다양한 디자인을 생성해 비교할 수 있으며, Figma 연동과 코드 추출 기능을 통해 실제 제품 개발로도 이어지게 할 수 있다.
모바일 앱/PC 웹을 선택해서 진행할 수 있으며, Theme도 원한다면 변경이 가능하다.

Stitch의 기능 요약

• 자연어 기반 UI 생성 : 기능이나 색상, 구조를 설명하면 자동 디자인 생성
• 이미지 기반 UI 생성 : 스케치나 와이어프레임을 업로드해 디지털 UI로 전환
• 디자인 테스트 : 다양한 레이아웃 및 스타일을 빠르게 테스트
• Figma 및 코드 연동 : 디자인을 협업 툴에 연동하거나 코드로 추출 가능

대충 설명해도 구성을 추천해주는 스티치

Theme 변경

코드 또는 피그마 형식으로 복사

Stitch 기술적 기반

✔ Gemini 2.5 Pro 기반 멀티모달 AI 활용

Stitch는 Google의 Gemini 2.5 Pro 모델을 기반으로 하며, 멀티모달 AI 기능을 갖추고 있어 텍스트와 이미지를 동시에 이해하고 처리할 수 있다. 이 기술 덕에 사용자가 단순히 설명하거나 이미지를 업로드하는 것만으로도 직관적이고 기능적인 UI가 자동 생성된다. 복잡한 UX 흐름이나 컴포넌트 스타일링도 AI가 스스로 판단하여 구성한다는 점이 흥미롭다.

Stitch 활용 사례

✔ 프로토타이핑, 협업, 접근성을 모두 만족시키는 사례들

Stitch는 초기 UI 기획 단계부터 실사용 환경까지 폭넓게 활용될 수 있을 것 같다. 아이디어만 있는 스타트업이나 개인 개발자는 Stitch를 통해 빠르게 프로토타입을 제작할 수 있을 것이고, 디자이너와 개발자 간 협업에서는 Figma와의 연동 및 코드 변환 기능이 효과적일 것 같다. 또한 디자인 지식이 부족한 초보자도 자연어 기반 설명만으로 UI를 제작할 수 있어 접근성이 매우 높을 것이다.

스티치의 활용 예시

• 프로토타입 제작 : 아이디어를 빠르게 시각화하여 검토 가능
• 협업 개선 : 디자인과 개발팀 간의 원활한 연결
• 초보자 접근성 : 누구나 쉽게 UI 생성 가능

Stitch 사용 방법

✔ Google Labs에서 체험 가능한 실험적 기능

Stitch는 현재 stitch.withgoogle.com에서 체험할 수 있으며, Google Labs의 실험적 프로젝트로 제공된다. 초기에는 영어만 가능한 것으로 확인했는데, 현재는 한글로도 사용이 가능해보인다.
사용 방법은 매우 단순한데, 그냥 모바일 앱인지, 데스크톱 웹인지 선택하고 자연어를 기반으로 디자인을 설명해주면 된다.
하다보면 스티치가 자동으로 어떤 요소를 넣을 지, 디자인을 어떻게 할 지 추천도 해준다.

구글의 스티치에 대해서 간단하게 알아보는 시간을 가졌다.
필자의 경우에도 디자인에 항상 고민이 많았는데, 간단한 웹/앱 디자인을 스티치를 통해 먼저 확인해보고 진행해볼 수도 있을 것 같다.
피그마는 안 써봐서 잘 모르지만, 피그마의 AI 기능까지 함께 활용한다면 생산성 측면에서 굉장히 좋지 않을까 생각해본다.

커피 한 잔으로
저를 응원해주세요!