백광수구글 Stitch(스티치) 특징 및 AI UI 디자인 사용해보기
구글 Stitch는 2025년 구글 I/O에서 공개된 Google Labs의 AI 디자인 도구로, 자연어 프롬프트만으로 모바일·웹 앱의 UI 화면을 자동으로 만들어 줍니다.
내부적으로는 구글의 AI 모델인 Gemini가 화면 생성을 담당합니다.
이번 글에서는 Stitch가 어떤 도구인지 간단히 살펴보고, 실제로 접속해 UI를 만들어 보는 과정까지 정리해 보겠습니다.
구글 Stitch란 무엇인가?
Stitch는 “이런 앱 화면을 만들어줘”라고 글로 적으면 AI가 실제 UI 화면을 그려 주는 도구입니다.
컴포넌트를 하나하나 배치하지 않아도, 텍스트 설명만으로 첫 시안을 빠르게 받아볼 수 있습니다.
공식 주소(stitch.withgoogle.com)에서 구글 계정만 있으면 무료로 사용할 수 있습니다.
구글 Stitch 핵심 기능
-
텍스트 프롬프트 생성: 자연어로 설명하면 UI를 만들어 줍니다. 손그림 스케치나 스크린샷을 올려서 생성할 수도 있습니다.
-
모바일·웹 모두 지원: 스마트폰 앱과 웹사이트 화면을 모두 만들 수 있습니다.
-
주석(Annotate) 기반 수정: 화면 위에 메모를 적거나 채팅으로 요청하면 AI가 알아서 수정해 줍니다.
-
코드·Figma 내보내기: HTML/CSS 코드로 내보내거나 Figma로 옮겨 후속 작업을 이어갈 수 있습니다.
-
두 가지 모드: 빠른 Standard 모드와 더 정교한 Experimental 모드를 선택할 수 있습니다.
구글 Stitch 사용해보기
실제 사용 흐름은 어렵지 않습니다. 아래 순서대로 진행하면 됩니다.
1) 접속 및 로그인
브라우저에서 stitch.withgoogle.com에 접속한 뒤, 구글 계정으로 로그인합니다.
2) 프롬프트 입력
만들고 싶은 화면을 글로 설명합니다.
예를 들어 “Ubuntu MASS 베어메탈 서버 프로비저닝(워크플로우 포함) 단계를 상세하게 실시간 모니터링,운영,관리 가능한 대시보드 만들어줘.”처럼 구체적으로 적을수록 결과가 좋습니다.
3) 화면 생성 확인
잠시 기다리면 AI가 입력한 설명을 바탕으로 UI 화면을 생성합니다.(프로비저닝 워크플로우 디자인)
4) 수정 요청
마음에 들지 않는 부분은 주석을 달거나 채팅으로 다시 요청해 다듬습니다.
원하는 디자인을 선택한 후 “색상을 좀 더 차분하고, 트렌디하게”, “언어는 한국어로” 같은 식입니다.
5) 프리뷰 확인 및 코드 또는 Figma로 내보내기
결과가 만족스러우면 “AI Studio”로 프리뷰를 통해 페이지를 사전 확인하거나, “HTML/CSS 코드”로 내보내거나, “Figma”로 옮겨 실제 작업에 활용합니다.
개인적으로 느낀 장단점
장점
- 빈 화면에서 시작하는 부담이 사라집니다. 형태가 있는 시안을 빠르게 받아볼 수 있어 초기 아이디어를 잡기에 좋았습니다.
- 디자인을 잘 몰라도 결과물을 금방 확인할 수 있어, 의사소통용 시안을 만들기 편했습니다.
- 무료라서 부담 없이 여러 시안을 시도해 볼 수 있었습니다.
단점
- 같은 프롬프트라도 결과가 매번 조금씩 달라서, 원하는 화면이 나올 때까지 몇 번 다시 요청해야 했습니다.
- 내보낸 코드를 그대로 쓰기엔 손이 좀 가서, 결국 직접 다듬는 작업이 필요했습니다.
- 화면이 복잡해질수록 정렬이나 디테일이 어긋나는 부분이 보여, 아직은 시안용으로 쓰는 게 마음 편했습니다.
마무리
구글 Stitch는 완성된 디자인을 뽑아내는 도구라기보다, 아이디어를 빠르게 확인하고 출발점을 잡아 주는 도구에 가깝습니다.
아직 다듬어야 할 부분은 있지만, 기획 초기의 시안 작업용으로는 충분히 유용했습니다.
무료로 제공되니 한 번 가볍게 써보시길 추천합니다. 이만 구글 Stitch 소개를 마칩니다.