구글에서 나온 ai디자인툴 Stitch 사용 후기!(사용량,ai학습허용 설정) - 사무데이즈

올해 5월, 구글에서 새로운 디자인 툴 Stitch가 출시되었다. 직접 사용해보니 꽤 만족스러워 정리해두면 좋을 것 같아 글을 작성하게 되었다. UI/UX 디자인을 다루는 툴이기 때문에 어느 정도 제한은 있겠지만, 무료로 사용할 수 있다는 점은 충분히 매력적이다. (쉽게 말하면 피그마와 비슷한 느낌의 디자인 툴이라고 생각하면 편하다.)

1. Stitch 소개

Stitch는 Google Labs에서 공개한 도구로, 디자인과 개발 사이의 복잡한 과정을 크게 줄여주는 기능을 제공한다. 요즘 디자인 툴들이 AI 기능을 적극적으로 도입하면서 생산성을 높이고 있지만, Stitch는 그중에서도 Gemini 2.5 Pro 기반 멀티모달 기술을 활용해 문장·스케치·와이어프레임 등을 분석하고 즉시 디지털 UI로 변환해주는 점이 특징이다.

색상 팔레트나 화면 분위기처럼 구체적인 요구사항을 적어도 되고, 화이트보드에 그린 간단한 구도를 업로드해도 자동으로 초기 디자인을 구성한다. 다양한 레이아웃과 스타일을 빠르게 생성할 수 있어, 초반 디자인 탐색 과정의 속도가 크게 빨라진다는 점이 강점으로 꼽힌다. 또한 생성된 화면은 피그마로 붙여넣을 수 있고, HTML 파일로도 다운로드할 수 있다. (정확하지 않을 수 있지만, 피그마에서 HTML·CSS·JS 코드를 추출하는 기능은 유료 플랜만 지원했던 것으로 기억한다.)

2. 사용방법

만들고 싶은 디자인을 문장으로 작성해 입력하면 된다. 또는 + 버튼을 눌러 이미지를 추가하면, 이를 참고해 AI가 UI/UX를 생성해준다.

예시로 간단한 상세 페이지를 GPT를 이용해 프롬프트를 작성한 뒤 Stitch에 넣어 디자인을 생성해 보았다. 하단 중앙의 툴바를 이용해 화면을 조작할 수 있으며 주요 기능은 다음과 같다.

• 화살표(select): 요소 선택 및 제어 — 단축키 V
• 손바닥(hand): 전체 화면 이동 — 단축키 H
• 돋보기(zoom): 확대 — 단축키 Z
• 이미지 추가

왼쪽 하단 입력창에 원하는 디자인을 작성하면 화면을 생성할 수 있으며, 이미 만들어진 UI 요소를 선택한 뒤 추가 프롬프트를 입력해 재구성하는 것도 가능하다.

3. 코드 추출(Code Export) 및 프로젝트 다운로드

View code를 누르면 HTML 형태의 코드를 복사할 수 있다. 다만 여기서 호불호가 갈릴 수 있는 부분이 있는데, 생성되는 코드는 대부분 Tailwind CSS 기반으로 구성된다. 현재로서는 다른 스타일 옵션을 선택할 수 없는 것으로 보인다.

상단에 햄버거 버튼을 누르면 Download project를 누르면 해당 페이지의 UI가 HTML 파일과 PNG 이미지 형태로 다운로드된다.

4. 이번 달 사용량 확인 방법

프롬프트를 작성하던 메인 페이지에서 오른쪽 상단의 구글 프로필 아이콘을 누르면 위에 이미지 같이  Stitch 설정 버튼이 보인다 클릭하고 나면 이번 달 사용량과 AI 모델 학습 허용 여부를 설정할 수 있다.(아래 링크를 통해 프롬프트 가이드를 확인하면  더 잘 사용할 수 있다.)

구글에서 제공하는 프롬프트 가이드