Claude Code에서 Google Stitch MCP 연동하기: AI로 UI 디자인 자동화

Claude Code에서 Google Stitch MCP 연동하기: AI로 UI 디자인 자동화

Google Stitch를 Claude Code와 연동하여 텍스트 프롬프트만으로 전문가 수준의 UI를 생성하는 방법을 단계별로 알아봅니다.

들어가며

최근 Google이 출시한 Stitch는 텍스트 프롬프트만으로 고품질 UI 디자인을 생성해주는 AI 도구입니다. 이 글에서는 Stitch를 Claude Code(Anthropic의 CLI 도구)와 MCP(Model Context Protocol)를 통해 연동하는 전체 과정을 다룹니다.

이 글에서 다루는 내용

• Google Cloud 프로젝트 설정
• 서비스 계정 생성 및 권한 부여
• Stitch MCP 서버 설정
• 실제 UI 생성 예제

사전 준비물

• Google 계정
• Node.js 18+ 설치
• Claude Code 설치 (또는 다른 MCP 호환 클라이언트)
• gcloud CLI 설치

참고: 이 글에서 사용하는 stitch-mcp 패키지는 이 저장소를 참고했습니다. Google의 공식 방법은 Remote MCP 방식을 사용하지만, Access Token을 1시간마다 수동으로 갱신해야 합니다. 이 글에서 소개하는 방법은 Service Account JSON을 사용해 토큰이 자동 갱신되어 더 편리합니다.

1단계: Google Cloud 프로젝트 생성

1.1 Google Cloud Console 접속

Google Cloud Console에 접속합니다.

1.2 새 프로젝트 생성

1. 상단의 프로젝트 선택 드롭다운을 클릭합니다
2. "새 프로젝트" 버튼을 클릭합니다
3. 프로젝트 이름을 입력합니다 (예: my-stitch-project)
4. "만들기" 버튼을 클릭합니다

프로젝트가 생성되면 자동으로 프로젝트 ID가 할당됩니다. 이 ID는 나중에 필요하니 메모해두세요.

2단계: Stitch API 활성화

2.1 API 라이브러리에서 Stitch API 찾기