Antigravity에서 Google Stitch MCP 연동하기 — 디자인에서 코드까지, AI가 다리를 놓다

Figma에서 디자인을 뽑고, 코드로 옮기고, 다시 디자인을 확인하고… 이 반복에 지쳤다면? Google Stitch + Antigravity MCP 조합은 "디자인 → 코드" 파이프라인을 AI가 자동으로 연결해주는 새로운 워크플로우를 열어준다. 이 글에서는 GCP 프로젝트 설정부터 Antigravity에서 Stitch MCP를 실제로 사용하기까지의 전체 과정을 초보자도 따라할 수 있게 단계별로 안내한다.

Google Stitch란?

본격적인 설정에 앞서, Google Stitch가 무엇인지 간단히 짚고 넘어가자.

Google Stitch는 Google Labs에서 개발한 AI 기반 UI/UX 디자인 도구다. 텍스트 프롬프트 하나만으로 모바일·웹 UI 디자인과 프론트엔드 코드(HTML/CSS)를 자동 생성해주며, Figma 내보내기와 프로토타이핑도 지원한다. stitch.withgoogle.com에서 무료로 사용할 수 있다.

MCP(Model Context Protocol) 는 AI 에이전트가 외부 도구·데이터 소스와 소통하기 위한 개방형 표준 프로토콜이다. Stitch MCP 서버를 통해 Antigravity의 AI 에이전트가 Stitch 프로젝트에 직접 접근하여 디자인 정보를 가져오거나, 새 화면을 생성하거나, 코드를 추출하는 등의 작업을 수행할 수 있다.

Stitch MCP가 제공하는 주요 도구

도구	기능
`extract_design_context`	화면의 디자인 DNA(폰트, 색상, 레이아웃) 분석
`fetch_screen_code`	화면의 HTML/프론트엔드 코드 추출
`fetch_screen_image`	화면의 고해상도 스크린샷 가져오기
`generate_screen_from_text`	텍스트 프롬프트로 새 화면 생성
`list_projects` / `get_project`	Stitch 프로젝트 목록 조회 및 상세 정보 확인

전체 흐름 한눈에 보기

① GCP 프로젝트 설정 & 인증
      ↓
② Stitch API 활성화
      ↓
③ Node.js & npx 준비
      ↓
④ Antigravity mcp_config.json 에 Stitch MCP 서버 등록
      ↓
⑤ Antigravity 재시작 → Stitch MCP 사용 시작

Step 1: Google Cloud 프로젝트 설정 & 인증

1-1. Google Cloud CLI(gcloud) 설치

아직 gcloud가 없다면, 공식 설치 가이드를 따라 설치한다.

1-2. 로그인 & 프로젝트 설정

터미널(또는 명령 프롬프트)을 열고 다음을 순서대로 실행한다.

# 1) Google 계정 로그인
gcloud auth login

# 2) 사용할 GCP 프로젝트 지정 (YOUR_PROJECT_ID를 실제 프로젝트 ID로 교체)
gcloud config set project YOUR_PROJECT_ID

💡 GCP 프로젝트가 없다면? Google Cloud Console에서 새 프로젝트 만들기를 클릭하면 된다. 프로젝트 이름은 자유롭게 지정 가능하며, 결제 계정 연결이 필요할 수 있다.

1-3. Application Default Credentials(ADC) 생성

Stitch MCP 서버가 GCP 서비스와 통신하려면 인증 정보가 필요하다. 로컬 개발 환경에서는 ADC(Application Default Credentials)를 사용하는 것이 가장 간편하다.

# 3) ADC 생성 — 브라우저가 열리며 Google 로그인을 요청한다
gcloud auth application-default login

# 4) quota 프로젝트 설정 (API 할당량 오류 방지)
gcloud auth application-default set-quota-project YOUR_PROJECT_ID

⚠️ 중요: gcloud auth login만으로는 부족하다. gcloud auth application-default login까지 실행해야 MCP 서버가 ADC를 자동으로 찾아 사용할 수 있다. 이 단계를 빼먹으면 인증 오류가 발생한다.

1-4. 인증 방식 요약

방식	적합한 상황	설정 방법
ADC (사용자 계정)	로컬 개발, 빠른 테스트	`gcloud auth application-default login`
서비스 계정 JSON	자동화, CI/CD, 팀 공유	JSON 키 파일 다운로드 후 `GOOGLE_APPLICATION_CREDENTIALS` 환경 변수 설정

대부분의 개인 개발자는 ADC 방식으로 충분하다. 서비스 계정은 자동화 파이프라인이나 팀 환경에서 필요할 때 도입하자.

Step 2: Stitch API 활성화

GCP 프로젝트에서 Stitch MCP 서비스를 켜야 한다.

gcloud beta services mcp enable stitch.googleapis.com

참고: beta 명령어를 사용하는 이유는 Stitch MCP가 아직 베타(Beta) 단계이기 때문이다. 향후 GA(정식 출시)되면 beta 없이 사용할 수 있을 것이다.

Step 3: Node.js & npx 준비

Stitch MCP 서버는 npx로 실행되므로 Node.js가 필요하다.

Node.js 공식 사이트에서 LTS 버전을 다운로드·설치한다.
설치 확인:

node --version    # v20.x.x 이상 권장
npx --version     # Node.js 설치 시 함께 설치됨

Step 4: Antigravity에 Stitch MCP 서버 등록

4-1. mcp_config.json 파일 위치

Antigravity는 MCP 서버 설정을 전역 설정 파일에서 관리한다.

OS	경로
Windows	`%USERPROFILE%\.gemini\antigravity\mcp_config.json`
macOS	`~/.gemini/antigravity/mcp_config.json`
Linux	`~/.gemini/antigravity/mcp_config.json`

💡 파일이 없다면? Antigravity를 한 번 실행한 적이 없을 수 있다. Antigravity를 실행한 뒤 다시 확인하자. 또는 Antigravity 에이전트 패널에서 ⋯ → Manage MCP Servers → View raw config를 클릭하면 파일이 자동으로 열린다.

4-2. mcp_config.json 작성

파일을 열고 아래 내용을 추가하거나, 기존 mcpServers 객체 안에 "stitch" 항목을 병합한다.

{
  "mcpServers": {
    "stitch": {
      "command": "npx",
      "args": ["-y", "@_davideast/stitch-mcp@latest", "proxy"],
      "env": {
        "GOOGLE_CLOUD_PROJECT": "your-gcp-project-id"
      }
    }
  }
}

각 항목 설명:

"command": "npx" — npx를 통해 MCP 서버를 실행한다.
"-y" — 패키지 설치 확인 프롬프트를 자동 수락한다.
"@_davideast/stitch-mcp@latest" — Stitch MCP 서버 npm 패키지. @latest로 항상 최신 버전을 사용하거나, 특정 버전(예: @0.4.0)을 고정할 수 있다.
"proxy" — 프록시 모드로 실행한다.
"GOOGLE_CLOUD_PROJECT" — 반드시 본인의 실제 GCP 프로젝트 ID로 교체한다.

⚠️ 주의: 인터넷에 돌아다니는 예제 중 @0.0.5 등 오래된 버전이 하드코딩된 경우가 있다. 2026년 3월 기준 최신 버전은 0.4.0이며, 기능과 안정성이 크게 개선되었으므로 @latest 또는 최신 버전 번호를 사용하는 것을 권장한다.

4-3. (선택) 서비스 계정 인증 사용 시

ADC 대신 서비스 계정 JSON 파일을 사용하려면 env에 다음을 추가한다.

{
  "mcpServers": {
    "stitch": {
      "command": "npx",
      "args": ["-y", "@_davideast/stitch-mcp@latest", "proxy"],
      "env": {
        "GOOGLE_CLOUD_PROJECT": "your-gcp-project-id",
        "GOOGLE_APPLICATION_CREDENTIALS": "C:\\path\\to\\service-account.json"
      }
    }
  }
}

Step 5: Antigravity 재시작 & 동작 확인

Antigravity 완전 종료 후 다시 실행한다 (설정 파일 변경은 재시작해야 반영된다).
프로젝트(Workspace)를 연다.
에이전트 패널 → ⋯ → Manage MCP Servers에서 stitch 서버가 목록에 표시되는지 확인한다.
서버 상태가 Connected(또는 녹색 표시)이면 성공이다.

테스트해보기

에이전트 채팅에서 다음과 같이 요청해보자.

Stitch에 있는 내 프로젝트 목록을 보여줘.

Stitch MCP가 정상 작동하면 AI 에이전트가 list_projects 도구를 호출하여 프로젝트 목록을 보여줄 것이다.

실전 워크플로우: "디자인 → 코드" 자동화

Stitch MCP가 연동되면 다음과 같은 워크플로우가 가능해진다.

📐 디자인 분석 → 코드 반영

Stitch 프로젝트에서 로그인 화면의 디자인 컨텍스트(색상, 폰트, 레이아웃)를 가져와서
현재 프로젝트의 CSS 변수로 반영해줘.

AI 에이전트가 extract_design_context로 디자인 DNA를 추출하고, 프로젝트의 CSS 파일에 자동 반영한다.

🖥️ 디자인 코드 직접 가져오기

Stitch의 대시보드 화면 코드를 HTML로 가져와서
components/Dashboard.html 파일로 저장해줘.

fetch_screen_code가 화면의 HTML 코드를 가져오고, 에이전트가 프로젝트에 파일로 저장한다.

✨ 텍스트로 새 화면 생성

"사용자 프로필 편집 페이지"를 Stitch에서 생성하고,
생성된 코드를 React 컴포넌트로 변환해줘.

generate_screen_from_text로 Stitch에서 화면을 생성한 뒤, 에이전트가 해당 코드를 가져와 프로젝트에 맞게 변환한다.

자주 묻는 질문 (FAQ)

Q. "인증 오류가 계속 난다"

A. 가장 흔한 원인은 ADC 미생성이다. 아래 명령어를 순서대로 다시 실행해보자.

gcloud auth application-default login
gcloud auth application-default set-quota-project YOUR_PROJECT_ID

그래도 안 되면 gcloud auth application-default revoke로 기존 인증을 해제한 뒤 다시 시도하자.

Q. "MCP 서버가 인식이 안 된다"

A. 체크리스트:

mcp_config.json의 JSON 문법이 올바른지 확인 (쉼표, 중괄호 누락 등).
Antigravity를 완전히 종료 후 재시작했는지 확인.
Node.js와 npx가 터미널에서 정상 동작하는지 확인 (npx --version).

Q. "프로젝트별로 다른 MCP 설정을 쓰고 싶다"

A. Antigravity는 VS Code 기반이므로 .vscode/mcp.json 파일을 프로젝트 루트에 생성하면 워크스페이스별 MCP 설정이 가능하다. 팀원과 공유하려면 이 파일을 소스 컨트롤에 포함하면 된다.

Q. "Docker가 필요한가?"

A. Stitch MCP는 Docker 없이 npx/Node.js만으로 동작한다. 일부 다른 MCP 서버(예: GitHub MCP)가 Docker를 요구하는 것과 혼동하지 말자.

Q. "Stitch MCP를 Antigravity MCP Store에서 설치할 수 있나?"

A. 2026년 3월 기준, Stitch MCP는 아직 MCP Store에 기본 등록되지 않았다. 위에서 안내한 수동 설정 방식이 필요하며, 공식 등록 요청이 이미 올라가 있어 향후 업데이트될 가능성이 있다.

📝 요약 치트시트

단계	명령어 / 작업
GCP 로그인	`gcloud auth login`
프로젝트 설정	`gcloud config set project YOUR_PROJECT_ID`
ADC 생성	`gcloud auth application-default login`
Quota 프로젝트	`gcloud auth application-default set-quota-project YOUR_PROJECT_ID`
Stitch API 활성화	`gcloud beta services mcp enable stitch.googleapis.com`
Node.js 확인	`node --version` & `npx --version`
설정 파일 편집	`~/.gemini/antigravity/mcp_config.json`에 stitch 블록 추가
재시작	Antigravity 완전 종료 후 재실행

마무리

Google Stitch MCP 연동은 "디자인과 개발 사이의 벽"을 AI가 허무는 대표적인 사례다. Stitch에서 만든 디자인을 일일이 코드로 옮기는 수작업 대신, AI 에이전트가 디자인 컨텍스트를 이해하고 코드로 변환하는 워크플로우는 개발 속도를 획기적으로 높여준다.

설정 자체는 5분이면 끝난다. gcloud 인증, mcp_config.json 한 줄 추가, Antigravity 재시작 — 이 세 단계만 기억하면 된다. 오늘 당장 연동해보고, AI가 디자인과 코드 사이를 자유롭게 오가는 경험을 직접 느껴보자.