구글 스티치 AI가 뭐야?

처음 구글 스티치를 켜면 딱딱한 개발 툴 느낌보다는, 흰 캔버스랑 카드형 패널이 보이는 편안한 UI가 먼저 눈에 들어와요. 가운데에 큰 화면 미리보기가 있고, 왼쪽에는 제가 넣은 설명과 PRD 요약, 오른쪽에는 색상·컴포넌트 같은 옵션이 붙는 구조라서, 디자인 툴을 잘 모르는 동료도 금방 길을 찾더라고요. 저는 첫 테스트로 "감성적인 독서 기록 앱, 다크 모드 기본, 카드형 리스트" 정도만 적었는데, 구글 스티치가 몇 분 안 돼서 여러 버전의 초기 화면을 쭉 뽑아줬습니다. 여기서 마음에 드는 버전을 고르면 곧바로 버튼 색, 폰트 크기, 간격을 만지면서 바꿀 수 있고, 바꾸는 즉시 뒤쪽 코드까지 같이 정리된다고 생각하니, 디자이너와 개발자를 왔다 갔다 하던 예전 방식이 조금 허무해질 정도였어요.

바이브 디자인·피그마 연동·코드까지

실제로 일을 줄여준 건 바이브 디자인 기능이었어요. 기존에 작성해 두었던 PRD 파일을 그대로 올리니까, 구글 스티치가 문서 안에서 분위기와 핵심 플로우를 뽑아 여러 화면으로 나눠 그려주더라고요. 예를 들어 "데이터 대시보드, 실시간 그래프, 파란 톤, 실험 기간 설정" 같은 문장이 들어있으면, 대시보드 메인·세부 설정·결과 화면까지 세트로 만들어주는 식입니다. 이렇게 만들어진 결과는 버튼 하나로 Figma로 바로 내보낼 수 있고, 거기서 디자이너가 디테일을 정리했어요. 개발 쪽에서는 각 영역을 클릭하면 HTML·CSS 위주 코드 스니펫과 design.md 파일을 받을 수 있는데, 이걸 그대로 사내 AI 코딩 도구에 붙여 넣어 초안을 만드는 식으로 작업했어요. 덕분에 예전처럼 와이어프레임 그리고, 다시 목업 그리는 과정을 절반 정도는 생략했습니다.

실사용하면서 느낀 한계와 챙겨야 할 점

물론 구글 스티치가 만능은 아니었어요. 우선 한국어 프롬프트를 써도 되긴 하는데, 아주 세밀한 톤을 잡을 때는 영어로 설명해야 더 일관된 결과가 나오더라고요. 그리고 자동으로 뽑히는 컴포넌트 구조가 항상 우리 팀 디자인 시스템과 딱 맞지는 않아서, Figma로 가져간 뒤에 스타일을 한 번 더 입히는 과정은 필요했습니다. 또 디자인과 코드가 같이 나오는 게 장점이지만, 그대로 프로덕션에 쓰기에는 네이밍 규칙이나 접근성 기준을 다시 손봐야 해서, "초안 자동 생성기" 정도로 보는 게 마음이 편했어요. 개인적으로는 추상적인 아이디어를 빠르게 눈으로 보여주고, 내부 합의를 끌어내는 데 구글 스티치가 제일 큰 힘을 발휘한다고 느꼈습니다.

직접 써보니 구글 스티치는 "내가 디자이너가 되겠다"기보다, 머릿속에서만 떠돌던 화면을 빨리 밖으로 끌어내는 도구에 더 가깝네요. 덕분에 회의 시간에 말로만 설계하던 걸 실제 화면으로 돌려보면서 얘기하게 됐고, 개발 일정 잡는 것도 훨씬 수월해졌어요. 개인적으로는 앞으로 사이드 프로젝트를 시작할 때, 노트에 낙서하기 전에 구글 스티치부터 켜보게 될 것 같은 느낌입니다.

#구글스티치 #구글스티치AI가뭐야 #구글스티치사용후기 #구글스티치UI디자인 #구글스티치코드생성 #구글스티치피그마연동 #구글스티치바이브디자인 #구글AI디자인툴 #UI자동생성도구 #앱UI디자인AI