Google Stitch 사용 방법 및 사용 후기

오늘은 Google AI Labs에서 만든 Design AI Agent인 Stitch에 대한 사용 방법과 기초 사용 후기를 정리해보려 한다.

사실 Stitch는 완전히 새로 나온 툴은 아니다. 2025년 5월에 처음 공개될 당시만 해도, 여타 서비스처럼 프롬프트를 넣으면 기초 웹 UI와 HTML/CSS 코드를 만들어주는 아주 기본적인 수준의 서비스였다. 하지만 구글이 3월 19일에 새로운 업데이트를 발표했고, 그 파급력은 발표 이후 단 이틀 만에 Figma의 주가가 12% 하락하며 시가총액 약 20억 달러가 증발했을 정도로 어마어마했다.

이제 Stitch는 디자인을 전혀 모르는 사람도 입력창에 원하는 바를 설명하거나 엉망으로 그린 스케치를 프롬프트로 넣기만 하면 그럴듯한 App 또는 Web 화면을 생성해준다. 음성을 통해서도 끊임없이 AI와 소통하며 디자인을 발전시켜 나갈 수 있고, 2026년 4월 기준으로 이 모든 기능을 무료로 사용할 수 있다.

한 달 늦은 후기지만, Claude Design을 비롯해 디자인 AI가 계속해서 쏟아지는 지금의 AI 시대에 이를 어떻게 활용하고 바라봐야 할지 내 생각을 정리해보려고 한다. 이번 글에서는 Stitch 업데이트의 핵심 기능들을 바탕으로, 개발자가 디자인 AI Agent와 함께 간단한 웹 서비스 하나를 구축해 나가는 과정을 담아볼 예정이다.

Figma를 위협한 Stitch 2.0, 무엇이 달라졌나?

1. AI 네이티브 무한 캔버스

Stitch는 단일 화면 생성을 넘어 프로젝트 전체의 맥락을 이해하는 작업 공간이다. 작업 파일 내에 있는 모든 컴포넌트를 AI가 이해하고 있고, 접근할 수 있다. 위의 예시 이미지처럼 작업 공간 내에 이미지를 첨부하고 홈페이지 컴포넌트 클릭 후 변경을 요청하면 해당 이미지로 자연스럽게 설정해준다.

단순한 캔버스가 아닌, AI가 프로젝트 전체의 맥락을 추적하는 작업 공간이 된다는 점이 핵심이다.

2. Design Agent & Manager

Stitch에는 프로젝트 전체 히스토리를 이해하는 agent가 있다. 기획 설계부터 정돈해나가는 모든 과정을 기억하고 이해하고 있으며, 어떻게 개선되었는지도 추적한다. 사용자가 처음에 디자인을 요청하면 여러 디자인 방향(A, B, C안)을 동시에 탐색하고 관리해준다. 간단하게 소설 서비스를 제작해달라고 부탁했을 때, 아래처럼 개별화된 디자인 토큰과 설계 방향을 제시해준다.

PLAINTEXT

1. 시네마틱 & 몰입형 (Cinematic & Immersive) 어두운 배경(다크 모드)과 고전적인 명조체(Serif) 타이포그래피를 사용하여 마치 영화의 주인공이나 소설 속에 들어온 듯한 깊은 몰입감…

2. 게임화 & 인터랙티브 (Playful & Gamified) '나의 선택'이 결과를 만든다는 재미 요소에 초점을 맞춥니다. 밝고 생동감 넘치는 색상…

3. 미니멀 & 스토리 집중 (Minimal & Editorial) 불필요한 시각적 장식을 최대한 배제하고 풍부한 여백과 깔끔하고 세련된 폰트만을 활용…

3. Voice Canvas

"다크 테마로 바꿔줘" 등 음성으로 실시간 디자인 수정 및 AI의 역제안이 가능해졌다. 즉, 팀원들이 오프라인으로 서로의 의견을 공유하고 수정 제안하는 행위를 AI로 처리할 수 있게 된 것이다.

4. 다양하고 정교해진 Menu Bar

New로 표시된 기능은 물론, 전반적으로 대부분의 기능이 새롭게 추가되었거나 성능이 크게 개선되었다.

먼저 Instant Prototype은 Figma를 사용해본 사람이라면 익숙할 기능으로, 제작한 웹 디자인의 사용자 흐름을 실제 서비스처럼 체험할 수 있게 해준다. 즉, 정적인 디자인을 단순히 보는 것을 넘어 실제로 동작하는 앱처럼 인터랙션을 확인할 수 있다.

Predictive Heatmap은 AI가 사용자의 시선과 상호작용 가능성을 분석해, 서비스 내에서 어떤 영역에 집중할지 예측해 시각적으로 보여주는 기능이다.

Missing States는 선택한 컴포넌트에서 누락된 상태나 연결되지 않은 사용자 흐름을 자동으로 분석하고, 필요한 화면과 상태를 생성해 자연스럽게 이어준다.

이외에도 모바일·태블릿·데스크탑 환경의 디자인을 자동으로 생성하거나 미리 확인할 수 있으며, 기본적으로 모든 디자인에 반응형 레이아웃이 적용되어 있어 개발자가 별도로 신경 써야 할 작업을 크게 줄여준다.

또한 Modify 기능을 통해 디자인에 사용된 문구를 직접 수정할 수 있고, 색상이나 디자인 시스템이 마음에 들지 않을 경우 AI에게 변경을 요청해 전체 스타일을 손쉽게 재구성할 수 있다.

5. 디자인 시스템 생성

디자이너나 프론트엔드 개발자가 아니라면 디자인 시스템이 왜 필요한지 의문이 들 수 있다. 하지만 디자인 시스템은 현대 웹 서비스에서 일관된 사용자 경험을 만드는 핵심 요소다.

예를 들어 사용자가 우리 서비스에 접속했는데,

홈페이지는 검은색, 로그인 페이지는 흰색, 대시보드는 회색이며 페이지마다 폰트 크기와 스타일이 모두 다르다면 어떨까? 사용자는 자연스럽게 혼란과 불편함을 느끼게 된다.

반대로 우리가 자주 사용하는 서비스를 떠올려보면 이해하기 쉽다. 카카오톡 하면 노란색, 네이버 하면 초록색이 먼저 떠오른다. 이는 모든 화면에 동일한 색상, 타이포그래피, 컴포넌트 규칙이 일관되게 적용되어 있기 때문이다. 디자인 시스템은 이렇게 서비스의 정체성을 유지하면서 사용자에게 안정적인 경험을 제공한다.

Desing.md는 AI가 이해하기 쉽도록 구성된 마크다운 기반 문서로, 디자인 규칙과 스타일 토큰(색상, 폰트, 간격 등)을 정의해 둔 파일이다. Stitch가 구축한 디자인 시스템을 마크다운 형태로 추출하면, 다른 프로젝트나 발표 자료, 신규 서비스에도 동일한 스타일을 손쉽게 적용할 수 있다.

이는 디자인의 일관성 유지뿐 아니라 재사용성과 이식성 측면에서도 큰 장점을 제공한다. 더 나아가 URL만 입력하면 기존 웹사이트의 디자인 시스템을 분석해 추출할 수 있어, 이미 완성된 서비스의 스타일을 기반으로 새로운 프로젝트를 빠르게 시작하는 것도 가능해졌다.

6. MCP 서버 & Figma 연동

MCP(Model Context Protocol)는 간단히 말해 AI와 외부 도구를 연결해주는 표준 프로토콜이다. 즉, AI가 단순히 대화만 하는 존재가 아니라 실제 개발 도구와 협업할 수 있도록 만들어주는 연결 규칙이라고 보면 된다.

Stitch에서 MCP 서버 연동이나 Figma 연동을 지원한다는 것은, Stitch 안에서 생성된 디자인이 특정 플랫폼에 갇히지 않고 다른 작업 환경으로 자연스럽게 이어진다는 의미다.

예를 들어 Stitch에서 생성한 디자인을 바로 Figma로 가져가면, 디자이너는 이를 기반으로 레이아웃을 세밀하게 다듬거나 실제 UI/UX 설계를 더욱 구체화할 수 있다. 이후 해당 디자인을 Claude Code와 같은 AI 코딩 에이전트와 연결하면, 디자인 구조와 컴포넌트 정보를 이해한 AI가 이를 실제 프론트엔드 코드로 변환해준다.

디자인 생성 → 디자인 툴(Figma)에서 보완 → AI 코딩 에이전트 연결 → 실제 코드 생성

즉 위의 흐름이 하나의 워크플로우로 이어지게 된다.

기존에는 디자이너가 화면을 만들고, 개발자가 이를 해석해 다시 구현하는 과정에서 많은 커뮤니케이션 비용과 해석 오차가 발생했다. 하지만 MCP 기반 연동을 활용하면 디자인의 구조, 스타일 토큰, 컴포넌트 계층까지 AI가 그대로 이해하기 때문에 디자인과 개발 사이의 간극이 크게 줄어든다.

결과적으로 Stitch + MCP 환경은 단순한 디자인 생성 도구를 넘어, 디자인 → 설계 → 구현 → 코드화까지 연결되는 새로운 AI 기반 개발 워크플로우를 만들어낸다고 볼 수 있다.

개발자가 디자인 AI와 웹 서비스 만들어보기

본격적으로 웹서비스를 만들어보기 전에 기본 흐름과 기본 인터페이스에 대해 살펴보려고 한다.

설계흐름은 웹 채팅 LLM을 활용해 기초적인 기획을 하고 디자인, 디자인 수정, MCP연동, 실제 운용되는 서비스까지 3시간내에 완료해보는것을 목표로 하고 시작해보자.

1. 기초 인터페이스 이해

우선 Google에 Stitch를 검색하고 접속하면 아래 이미지같은 화면을 보게된다.

사실 Stitch를 처음 접했을 때의 인터페이스는 다른 웹 기반 AI 서비스들과 크게 다르지 않은 익숙한 구조를 가지고 있다. 위 이미지에 표시된 1번부터 6번 영역을 간단히 살펴보면 다음과 같다.

내가 생성하거나 작업했던 프로젝트 히스토리
Google에서 제공하는 기본 디자인 샘플
디자인 초안이나 MD 파일 등을 첨부할 수 있으며, 제작 대상이 App인지 Web인지 선택하는 영역
미리 정의된 Design.md를 적용해 디자인을 생성하는 기능
디자인 시스템을 선택하고 프로젝트에 적용하는 옵션
사용할 AI 모델 선택 및 Live Mode(음성 기반 인터랙션 모드) 설정

이번에 새롭게 출시된 Stitch 2.0에서는 기존 버전과 비교해 선택 가능한 모드와 기능이 크게 늘어났다. 특히 첫 화면 인터페이스만 살펴봐도 이번 업데이트가 단순한 기능 추가를 넘어 작업 방식 자체의 변화를 목표로 하고 있다는 점을 확인할 수 있다.

이제 다음 목차에서 Stitch 2.0 업데이트의 핵심 기능들을 자세히 살펴보도록 하겠다.

2. 기획하고 디자인하기

회고에 기록할 목적으로 3시간 이내에 완성할 수 있는 토이 프로젝트를 하나 기획해보기로 했다. 프로젝트 아이디어는 Gemini와 GPT를 함께 활용해 빠르게 구체화했고, 정리한 기획 내용을 마크다운 파일로 다운로드한 뒤 그대로 Stitch 프롬프트에 입력했다.

이번에 만들 서비스는 웹 기반 서비스이므로 Web을 선택했고, 처음부터 디자인 기획서와 디자인 시스템을 함께 생성하며 시작하는 Ideate Mode를 사용했다.

참고로,

Redesign Mode는 기존 디자인 시스템을 수정·개선할 때 사용하는 모드이며
상단의 Gemini 기반 모드들은 처음부터 설계하기보다는 빠른 프로토타이핑에 초점이 맞춰져 있다.

아직 어떤 디자인 방향이 적합할지 감이 잡히지 않았기 때문에, 초기 단계에서는 디자인 시스템을 직접 지정하지 않고 Stitch가 제안하는 디자인 초안을 먼저 확인하기로 했다.

앞서 언급했듯 Stitch는 프로젝트 성격을 분석한 뒤 다음과 같은 세 가지 디자인 방향성을 제시했다.

1. 시네마틱 & 몰입형 (Cinematic & Immersive)

어두운 배경(다크 모드)과 클래식한 명조체(Serif) 타이포그래피를 활용해 영화 속 주인공이나 소설 세계에 들어온 듯한 깊은 몰입감을 제공하는 스타일.

2. 게임화 & 인터랙티브 (Playful & Gamified)

사용자의 선택이 결과를 만들어낸다는 재미 요소에 집중한 디자인으로, 밝고 생동감 있는 색상과 인터랙션 중심의 경험을 강조한다.

3. 미니멀 & 스토리 집중 (Minimal & Editorial)

불필요한 시각적 요소를 최소화하고 여백과 타이포그래피 중심으로 콘텐츠 자체에 집중하도록 만드는 차분하고 세련된 스타일.

세 가지 중 1번 방향성이 가장 마음에 들어, 프롬프트에 “1번 방향성으로 진행해줘”라고 요청했다.

방향을 선택하자 Stitch는 곧바로 PRD(Product Requirement Document)를 생성해 검토를 요청했다. 스크롤 길이에서 느껴지듯 상당히 상세한 문서였지만, 전체 흐름만 빠르게 확인한 뒤 그대로 진행하도록 요청했다. 이후 프로젝트 테마에 맞는 디자인 토큰(색상, 타이포그래피, 간격 등)을 먼저 정의하면서 본격적인 작업이 시작되었다.

한 가지 팁을 추가하자면, 한글 기반 웹 서비스를 만들 계획이라면 첫 프롬프트에서 반드시 ‘한글로 작성해달라’고 명시하는 것이 좋다. Stitch는 한글로 프롬프트를 입력하더라도 기본적으로 영어 기준 결과물을 생성하는 경우가 많기 때문이다.

나중에 영어 결과물을 한글로 다시 변환하면 폰트와 타이포그래피가 의도와 다르게 변경되는 문제가 발생할 수 있어, 초기 단계에서 언어를 명확히 지정하는 것이 중요하다.

한글 기준으로 변환한 초안은 아래와 같다.

3. 리디자인과 픽셀 단위의 정교한 제어

생성된 초안 자체도 나쁘지는 않았지만, 몇 가지 개선이 필요해 보였다. 전체적으로 디자인이 다소 단조로운 느낌이 있었고, 특히 캐릭터 설정 컴포넌트에서는 좌우 여백이 균형 있게 맞지 않아 시각적으로 어색한 인상을 주었다.

우선 내가 직접 생각해본 개선 방향은 다음과 같았다.

장르 선택 영역 개선 단순히 텍스트만 나열된 형태가 아니라, 각 장르를 상징하는 이미지를 함께 배치해 사용자의 흥미를 유도하고 선택 과정을 직관적으로 만들고 싶었다.
캐릭터 설정 UI 개선 캐릭터 설정 단계에서 실제 게임처럼 직업을 선택하는 경험을 제공하고, UI 역시 게임의 캐릭터 선택 화면처럼 직관적이고 깔끔한 구조로 개선하고 싶었다.

따라서 가장 먼저 해야 할 일은 6개의 장르에 사용할 커버 이미지를 준비하는 것이었다. 각 장르 분위기에 맞는 이미지를 수집한 뒤, 수정이 필요한 컴포넌트를 직접 선택하고 원하는 개선 방향을 프롬프트로 작성해 전달했다.

Before

After

글을 읽는 분들은 어떻게 느낄지 모르겠지만, 개인적으로는 이전보다 훨씬 깔끔하고 일관된 디자인으로 개선되었다고 느꼈다. 특히 인상 깊었던 점은 Before → After 과정에서 단 세 번의 프롬프트만 입력했다는 것이다.

디자인이 마음에 들지 않아 반복 수정했다기보다는,

캐릭터 직업군을 내가 원하는 12개로 확장하고
각 직업에 맞는 이모지를 설정하며
캐릭터 이름 입력 기능을 추가해달라는 정도의 요청만 진행했던 것으로 기억한다.

놀랍게도 기획 과정을 제외하면 실제 디자인을 완성하는 데 30분도 채 걸리지 않았다.

4. 인터랙티브 프로토타이핑

이제 디자인 작업이 어느 정도 마무리되었으니, 지금까지 만든 화면 흐름을 한 번에 확인해보고 싶어졌다. 이럴 때 활용할 수 있는 기능이 바로 이번 업데이트에서 추가된 Instant Prototyping이다.

사용 방법은 매우 간단하다.

우리가 제작한 컴포넌트(각 페이지)를 모두 선택한 뒤, 상단 메뉴에서 Generate → Instant Prototype을 클릭하면 된다.

현재 프로젝트는 웹 서비스 기준으로 제작했지만, 흥미롭게도 모바일 앱 형태로도 프로토타입 흐름을 확인할 수 있어 다양한 디바이스 관점에서 사용자 경험을 빠르게 검증할 수 있다.

생성된 프로토타입을 실행해보면 실제 User Flow가 그대로 재현된다. 화면 내 버튼을 클릭하면 다음 페이지로 자연스럽게 이동하는 등 단순 화면 미리보기를 넘어 인터랙션이 포함된 서비스 체험이 가능하다. 또한 Edit 모드를 통해 실행 중에도 실시간 수정이 가능해, 디자인 검증과 개선 과정을 빠르게 반복할 수 있었다.

번외로 이번 업데이트에서 추가된 흥미로운 기능도 하나 소개하고 싶다. 바로 Predictive Heatmap 기능이다. AI가 사용자의 시선과 상호작용 가능성을 분석해, 어떤 영역에서 인터랙션이 가장 많이 발생할지를 히트맵 형태로 예측해준다.

다만 아직은 정확도나 신뢰도가 충분히 높은 단계라고 보기는 어려워, 실무적인 의사결정 도구라기보다는 참고용 혹은 재미 요소로 가볍게 활용해보는 기능에 가깝다고 느꼈다.

5. MCP 연동으로 실제 웹 구현하기

이제는 완성된 디자인을 실제 코드로 구현할 차례다.예전의 AI 디자인 도구들이 단순한 HTML·CSS 코드 생성 수준에 머물렀다면, 이번 Stitch 2.0에서는DESIGN.md 내보내기와 MCP 연동을 통한 AI Agent 연결까지 지원한다는 점이 가장 큰 변화였다.

1. MCP 연동하기

방법은 매우 간단하다.

우측 상단 Export 버튼을 클릭한 뒤, 내보내기 방식에서 MCP를 선택하면 된다. MCP를 선택하면 화면 하단에 Setup MCP 버튼이 나타나는데, 이는 처음 연동을 위한 API Key 발급 과정이라고 보면 된다. 키 생성과 사용은 무료이며, 발급을 완료하면 다음과 같은 AI 코딩 도구들을 선택할 수 있다.

Claude Code, Codex, Cursor…

즉, Stitch에서 만든 디자인을 원하는 AI 코딩 환경으로 바로 연결할 수 있다.

PLAINTEXT

claude mcp add stitch \
  --transport http \
  --url "https://stitch.googleapis.com/mcp" \
  --header "X-Goog-Api-Key: your key"

툴을 선택하면 연동에 필요한 설정 코드가 제공되는데, 해당 내용을 그대로 복사해 로컬 환경으로 가져오면 된다. 나는 Claude Code를 선택했다. Claude Desktop을 사용할 수도 있지만, 익숙한 CLI 환경을 사용하기로 했다.

복사한 설정 내용을 Claude Code에 그대로 붙여 넣으면, 이후 권한 허가 관련 질문들이 순차적으로 나타나는데 모두 승인해주면 된다. 설정 완료 메시지가 Claude Code를 종료한 뒤 재시작해야 한다.

연동이 정상적으로 끝났다면 프로젝트 내부 .claude 폴더의 settings.local.json 파일에 기본 MCP 설정이 추가된 것을 확인할 수 있다. 이 단계에서는 아직 디자인이 가져와진 상태가 아니므로, 내용이 비어 보이더라도 정상적인 과정이다.

2. Stitch 디자인 가져오기

앞선 Export 과정은 MCP 연결 설정이었다. 이제 실제로 해야 할 일은 디자인을 가져오는 것이다. 다시 Stitch로 돌아가서, 만들고 싶은 디자인 컴포넌트(페이지)를 모두 드래그해 선택한 뒤 동일하게 Export → MCP를 클릭한다. 그러면 하단에 Copy Prompt 버튼이 나타나는데, 이 프롬프트를 복사해 Claude Code에 그대로 붙여 넣으면 된다.

기본 상태로 실행하면 HTML 기반 웹 프로젝트가 생성된다. 나는 React 환경으로 작업하고 싶었기 때문에 다음과 같은 과정을 추가했다.

Vite 프로젝트를 미리 생성
claude.md로 프로젝트 구조 가이드 작성
“React 코드로 생성해달라”는 추가 프롬프트 입력

여기까지 완료한 뒤 npm run dev 또는 yarn dev를 실행하면, Stitch에서 만들었던 디자인이 그대로 동작하는 웹 서비스를 로컬 환경에서 확인할 수 있다. 물론 세부 버그 수정이나 디테일한 구현 작업은 추가로 필요하지만, 디자인 생성부터 실제 동작하는 결과물을 만드는 데까지 2시간도 채 걸리지 않았다는 점이 가장 인상적이었다.

번외) 배포 과정

배포 과정 역시 특별히 어려운 부분 없이 진행할 수 있었다.

AWS 환경을 활용해 배포했으며, 이번 프로젝트의 목표는 성능 최적화보다는 실제 배포 환경에서 동작하는 모습을 확인하는 것이었기 때문에 CI/CD를 자동으로 구성해주는 Amplify를 사용했다.

Amplify는 빌드 단위로 비용이 청구되긴 하지만, Git 저장소만 연결하면 빌드·배포·호스팅까지 한 번에 처리해주기 때문에 빠르게 데모를 공개하기에는 매우 편리한 선택이었다.

한 가지 고려해야 했던 부분은 API Key 보호였다. 클라이언트에서 직접 API를 호출하면 키가 노출될 수 있기 때문에 리버스 프록시 서버가 필요했지만, 별도의 서버 비용을 추가로 발생시키고 싶지는 않았다.

그래서 대신 AWS Lambda 기반 서버리스 프록시를 구성해 해결했다. 필요할 때만 실행되는 구조이기 때문에 비용 부담 없이 API 키를 안전하게 보호할 수 있었다.

추가로 단순히 실행만 되는 서비스는 조금 아쉽게 느껴져 Gemini API도 연동해 보았다. 다만 지인들에게 테스트를 부탁하는 과정에서 API 사용량 한도가 빠르게 소진되어버렸고, 데모 환경에서는 안정적인 동작이 필요했기 때문에 미리 캐싱해둔 데이터를 사용하도록 구성했다.

관련 레포지토리는 아래 링크에서 확인할 수 있다. 중간중간 다른 작업 시간을 제외하고, 이 데모 프로젝트에 순수하게 투자한 시간만 계산해보면 기획부터 배포까지 약 3시간 내에 완료할 수 있었다.

https://github.com/Jaeho-Site/the-auteur

Stitch, 개발자의 시선으로 본 장단점

개발자인 내가 바라본 Stitch는 아직 Beta 버전이며 무료로 제공되고 있음에도 불구하고, “왜 Figma 주가가 흔들린다는 이야기가 나오는지” 이해가 될 정도의 퍼포먼스를 보여주었다.

하지만 그렇다고 해서 디자이너의 역할을 대체할 수 있느냐는 질문에는 “아직은 절대 아니다” 라고 말할 수 있을것 같다. 많은 사람들이 Stitch를 Figma와 직접 비교하지만, 개인적으로는 이 비교 자체가 아직 적절하지 않다고 느꼈다. 여러 회고와 관련 콘텐츠를 찾아보며 인상 깊었던 평가가 있었는데,

Figma는 1에서 100으로 가는 도구이고, Stitch는 0에서 1로 가는 도구다.

나는 이 표현에 크게 공감했다. 두 도구는 경쟁 관계라기보다 상호 보완적인 관계에 가깝다고 생각한다.

Figma는 이미 업계 표준으로 자리 잡은 디자인 툴이다. 방대한 플러그인 생태계, 성숙한 협업 환경, 그리고 검증된 디자인 컴포넌트 라이브러리를 기반으로 프로덕션 레벨 디자인 시스템을 구축하는 영역에서는 여전히 대체하기 어려운 서비스다. 말 그대로 1에서 100까지 완성도를 끌어올리는 도구라고 볼 수 있다.

반대로 Stitch는 0에서 1을 만들어내는 도구다. 팀 내에 디자인 시스템이 존재하지 않거나, 새로운 아이디어를 빠르게 실험해야 하는 초기 단계에서 매우 강력한 역할을 한다.

겉보기에는 0→1보다 1→100이 더 커 보일 수 있지만, “시작이 반”이라는 말처럼 초기 설계가 잘 잡히면 이후의 작업 난이도는 극적으로 낮아진다. Stitch는 바로 이 초기 설계 구간을 혁신적으로 단축시키는 지점을 정확히 파고든 도구라고 느꼈다.

물론 아직 한계도 분명히 존재한다.

개인적으로 느낀 점은, 복잡한 UX 맥락이나 깊은 관계 구조를 가진 컴포넌트에서는 아직 디자인 의도를 완전히 이해하지 못하는 순간들이 있었다. 특히 여러 상태와 사용자 흐름이 얽힌 구조에서는 AI가 표면적인 UI 패턴 중심으로 접근하는 느낌을 받았다. (개인적인 의견이다.)

다만 출시된 지 한 달도 채 되지 않은 시점임을 고려하면, 앞으로의 개선 가능성은 충분히 기대해볼 만하다. 지금의 발전 속도를 보면 머지않아 디자인 초기 단계뿐 아니라 상당 수준의 디자인 작업까지 AI가 자연스럽게 보조하는 시대가 올 수도 있겠다는 생각이 들었다.

Reference

https://litmers.com/blog/구글-스티치-stitch-실무-도입-가이드-피그마-디자인을-코드로-10초-만에-변환하는-법-실제-사용-후기-포함

https://modelcontextprotocol.io/docs/getting-started/intro

https://www.youtube.com/watch?v=bQ5XN9ECBmA&t=44s

https://blog.naver.com/cinews/224111689598