구글 스티치 업데이트, 직접 사용해본 후기
디자이너의 시선으로 분석한 새로운 바이브 디자인(vibe design)
*원문을 번역한 글입니다.
*원문은 발행 이후 수정될 수 있으며, 본 번역은 발송 시점 기준으로 작성되었습니다.
즐거운 토요일입니다. 며칠 전 스티치(Stitch)가 대규모 업데이트를 발표했는데요, 제 소셜 미디어 피드는 온통 이런 반응들이었습니다.
“구글 스티치 대 피그마(Figma), 이제 끝났네.”
“구글의 새로운 바이브 디자인 툴은 진짜 미쳤다.”
“이제 디자이너들 다 망한 건가?”
저는 구글이 인수하기 전, 갈릴레오 AI(Galileo AI) 시절부터 스티치를 사용해 왔습니다. 지난 12월부터 지금까지 Stitch가 진화하는 속도를 지켜보는 것만으로도 정말 놀라울 따름입니다. 다른 글에서 Stitch의 디자인 워크플로우를 설명해 드린 적이 있지만, 이번 업데이트를 계기로 오늘은 더 상세한 가이드와 함께 제 소감을 공유해 보려 합니다. 자, 그럼 시작해 볼까요?
개요
Google Stitch는 프롬프트를 입력하면 고해상도(High-fidelity) 인터페이스를 생성해 주는 AI 기반 디자인 플랫폼입니다. 구글 계정만 있다면 무료로 이용할 수 있습니다.
저는 Stitch를 영감을 주는 아주 훌륭한 ‘바이브 디자인’ 툴이라고 생각합니다. 현재 시장에 나와 있는 제품 중 Stitch만큼의 퍼포먼스를 보여주는 도구는 거의 없죠. 특히 디자인 브레인스토밍 단계에서 활용하기가 매우 좋습니다.
하지만 디자이너 입장에서는 실무에 쓰기에 스티치가 조금 더 정교했으면 하는 아쉬움이 늘 있었습니다. 다행히 이번 업데이트를 통해 결과물을 더 세밀하게 제어할 수 있는 엄청난 가능성이 열렸습니다.
이 글에서는 특히 흥미로운 업데이트들을 중심으로 살펴보겠습니다.
1. 신속한 프로토타이핑
이전까지 이 기능은 아주 기본적인 수준이라 거의 사용하지 않았습니다.
이전에 다른 글에서도 언급했듯이, 저는 보통 Stitch에서 만든 화면을 Google AI Studio로 내보내 추가 프로토타이핑을 진행했습니다. 하지만 이제는 Stitch 내부에서 할 수 있는 작업이 훨씬 많아졌습니다.
화면(프레임)을 우클릭한 뒤 “Instant Prototype”을 선택하면 됩니다.
또는 화면을 선택하면 상단에 툴바가 나타납니다. 여기서 “Generate”를 클릭한 뒤 “Instant Prototype”을 선택할 수도 있습니다. 그러면 프로토타이핑 전용 뷰로 전환됩니다. 다른 방해 요소 없이 작업에만 집중할 수 있어 아주 만족스러운 부분입니다.
프로토타입 생성
좌측 네비게이션 패널에서 기존 화면을 선택하거나, 새로운 화면을 생성하도록 Stitch에 요청할 수 있습니다.
또한 몇 주 전에 출시된 “Direct Edit” 기능 덕분에, 화면 내 특정 컴포넌트를 선택하고 다음과 같은 작업을 수행할 수 있습니다:
해당 컴포넌트를 클릭했을 때 이어지는 새 화면 생성
기존 화면과 연결
AI로 변경
텍스트 수정
한 가지 주의할 점은, AI의 상상력이 때로는 '지나치게 풍부할' 수 있다는 것입니다. 빠르게 아이데이션하기에는 직관적이고 유용하지만, 디자이너 입장에서는 각 결과물에 대한 의도와 정밀도가 더 필요하기 때문에 여전히 더 많은 컨트롤이 가능했으면 합니다.
그래도 화면 하단의 “Edit with AI” 기능을 활용하면 보다 구체적인 지시를 통해 수정할 수 있습니다.
프로토타입 공유
또 흥미로운 점은 “Share Project” 설정에서 프로토타입을 공개하면, 다른 사람들이 이를 보고 리믹스까지 할 수 있다는 점입니다. 공유 링크뿐 아니라 QR 코드도 생성할 수 있어, 모바일이나 iPad에서 프로토타입을 쉽게 확인할 수 있습니다.
저도 직접 제 휴대폰으로 테스트해 보았는데요. 반응형 디자인을 확인하기에 정말 편리하고 좋았습니다. 휴대폰 화면에서도 프로토타입의 흐름을 직접 클릭하며 확인할 수 있었습니다.
2. 디자인 시스템
이 또한 매우 기대되는 기능입니다. 예전의 스티치는 기존 디자인 스타일에 맞춰 결과물을 생성해 주긴 했지만, 사용자가 이를 세부적으로 제어할 수는 없었습니다. 하지만 이제 디자인 시스템을 직접 구축하고 커스텀할 수 있는 방법이 생겼습니다.
Stitch에서 화면을 선택한 뒤 “Modify”를 클릭하면 드롭다운에서 “Design System”을 찾을 수 있고, 세 가지 방식으로 시스템을 생성할 수 있습니다:
처음부터 새로 만들기(Create from scratch)
선택한 화면에서 생성하기
웹사이트에서 가져오기
선택한 화면에서 생성하기
“처음부터 생성” 옵션은 선택한 화면 기반 생성과 크게 다르지 않아 이번 글에서는 생략하겠습니다.
구성은 두 개의 패널로 나뉩니다:
Theme: 컬러 팔레트를 정의할 수 있습니다.
DESIGN.md: 커스텀 지침을 작성할 수 있습니다.
DESIGN.md가 포함된 점은 긍정적이며, 이는 다른 AI 툴에서도 공통적으로 나타나는 흐름입니다. 이를 통해 보다 구체적인 지침으로 결과를 제어할 수 있는 가능성이 열립니다.
생성 이후에는 디자인 스타일 패널이 자동으로 만들어지고 캔버스에 배치되어 참고할 수 있다는 점이 좋았습니다.
웹사이트에서 가져오기
이 기능은 기대가 컸지만, 실제로 사용해보니 아직은 버그가 있습니다. 처리 시간이 오래 걸린 뒤 다음과 같은 메시지가 나타났습니다:
“해당 사이트에서 커스텀 디자인 시스템을 생성하는 중 일시적인 기술적 한계에 도달한 것 같습니다.”
3. AI 기반 캔버스
내비게이션
기존의 좌측 네비게이션 패널과 비교했을 때 큰 변화입니다.
에이전트처럼 동작하는 느낌이 강해서 적응하는 데 시간이 조금 걸렸습니다.
다른 AI 툴처럼 단순한 채팅 히스토리 패널이 아니라, 대화를 자동으로 스레드 단위로 나눠 보여줍니다.
각 스레드를 클릭하면 해당 대화와 연결된 디자인 화면들도 함께 하이라이트됩니다.
컨텍스트
이제 Stitch는 캔버스 내 모든 화면을 에이전트가 인식할 수 있게 되면서, 더 다양한 활용 가능성이 열렸습니다. 예를 들어, 기능을 테스트하기 위해 이런 프롬프트를 입력해봤습니다:
내 프롬프트 기록과 캔버스에 있는 화면들을 바탕으로 제품 요구사항 정의서(PRD)를 작성해 줘.
그러자 문서가 하나의 화면 형태로 생성되어 캔버스에 자동으로 배치되었습니다. 이제 하나의 캔버스 안에서 다양한 자산을 함께 다룰 수 있습니다:
디자인 화면
디자인 시스템
문서
프로토타입
그리고 AI 에이전트는 이 모든 요소를 함께 인식합니다.
서로 다른 곳에 파편화되어 존재하던 자산들이 이제 하나의 맥락(Context)으로 묶여야 한다는, 이 '통합 캔버스'의 비전이 매우 인상 깊었습니다.
4. 다이렉트 에디트(Direct Edit)
사실 이 기능은 몇 주 전에 처음 출시되었습니다. 하지만 워낙 중요한 업데이트인 만큼, 예시와 함께 자세히 소개해 드리겠습니다.
Stitch에서 화면(프레임)을 선택하면 상단 툴바의 “Modify”를 통해 세 가지 옵션을 선택할 수 있습니다.
특정 컴포넌트를 직접 수정하는 Edit와, 보다 유연하게 수정하는 Annotate 기능이 제공됩니다.
전체 글은 Design with AI에서 확인할 수 있습니다. 다음에 또 봐요. Xinran
원문 출처: https://medium.com/design-bootcamp/my-hands-on-walkthrough-of-google-stitchs-biggest-upgrades-yet-b8cb921ccee8
DEET를 구독하고 커리어 성장을 위한 작은 습관을 시작해 보세요.