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 찾기

1. 좌측 메뉴에서 "API 및 서비스" > "라이브러리"를 클릭합니다
2. 검색창에 "Stitch API"를 입력합니다
3. "Stitch API"를 클릭합니다

2.2 API 활성화

1. "사용" 버튼을 클릭하여 API를 활성화합니다
2. 활성화가 완료되면 "API 사용 설정됨" 상태가 표시됩니다

3단계: 서비스 계정 생성

서비스 계정은 애플리케이션이 Google Cloud API에 인증할 때 사용하는 특별한 계정입니다.

3.1 서비스 계정 페이지 이동

1. 좌측 메뉴에서 "IAM 및 관리자" > "서비스 계정"을 클릭합니다
2. 상단의 "+ 서비스 계정 만들기" 버튼을 클릭합니다

3.2 서비스 계정 정보 입력

1. 서비스 계정 이름: stitch-mcp (원하는 이름 입력)
2. 서비스 계정 ID: 자동 생성됨
3. 설명: "Stitch MCP 서버용 서비스 계정" (선택사항)
4. "만들고 계속하기" 버튼을 클릭합니다

3.3 역할 부여 (선택사항)

이 단계는 일단 건너뛰어도 됩니다. "완료" 버튼을 클릭합니다.

4단계: 서비스 계정 키(JSON) 생성

4.1 키 생성 페이지 이동

1. 생성된 서비스 계정의 이메일을 클릭합니다
2. "키" 탭을 클릭합니다
3. "키 추가" > "새 키 만들기"를 클릭합니다

4.2 JSON 키 다운로드

1. 키 유형으로 "JSON"을 선택합니다
2. "만들기" 버튼을 클릭합니다
3. JSON 파일이 자동으로 다운로드됩니다

⚠️ 중요: 이 JSON 파일은 민감한 정보이므로 절대 공개 저장소에 커밋하지 마세요!

다운로드된 파일을 프로젝트 폴더에 service-account.json으로 저장합니다.

5단계: gcloud CLI로 MCP 활성화

일반 API 활성화와 별도로, MCP 엔드포인트를 활성화해야 합니다.

5.1 gcloud 로그인

터미널에서 다음 명령어를 실행합니다:

gcloud auth login

브라우저가 열리면 Google 계정으로 로그인합니다.

5.2 gcloud 업데이트

MCP 명령어를 사용하려면 gcloud가 최신 버전이어야 합니다:

gcloud components update

5.3 MCP 엔드포인트 활성화

gcloud beta services mcp enable stitch.googleapis.com --project=YOUR_PROJECT_ID

YOUR_PROJECT_ID를 실제 프로젝트 ID로 변경하세요.

5.4 서비스 계정에 권한 부여

서비스 계정이 API를 사용할 수 있도록 권한을 부여합니다:

gcloud projects add-iam-policy-binding YOUR_PROJECT_ID \
  --member="serviceAccount:stitch-mcp@YOUR_PROJECT_ID.iam.gserviceaccount.com" \
  --role="roles/serviceusage.serviceUsageConsumer"

6단계: MCP 설정 파일 구성

6.1 .mcp.json 파일 생성

프로젝트 루트에 .mcp.json 파일을 생성합니다:

{
  "mcpServers": {
    "stitch": {
      "command": "npx",
      "args": ["-y", "stitch-mcp"],
      "env": {
        "GOOGLE_CLOUD_PROJECT": "YOUR_PROJECT_ID",
        "GOOGLE_APPLICATION_CREDENTIALS": "./service-account.json"
      }
    }
  }
}

6.2 .gitignore에 민감한 파일 추가

# Google Cloud credentials
service-account.json

7단계: Claude Code에서 테스트

7.1 Claude Code 재시작

MCP 서버가 로드되도록 Claude Code를 재시작합니다.

7.2 연결 테스트

Claude Code에서 다음과 같이 테스트할 수 있습니다:

stitch 프로젝트 목록 조회해줘

빈 결과 {}가 반환되면 성공입니다! (아직 Stitch 프로젝트가 없기 때문)

8단계: 실제 UI 생성해보기

8.1 Stitch 프로젝트 생성

"SnapBrand UI"라는 이름으로 Stitch 프로젝트 만들어줘

8.2 화면 생성

대시보드 UI를 만들어줘.
- 왼쪽 사이드바 (다크 테마)
- 통계 카드 3개
- Quick Actions 섹션
- 오렌지색 (#ff6933) 메인 컬러

8.3 코드 가져오기

생성된 화면의 HTML/CSS 코드를 가져와서 React 컴포넌트로 변환할 수 있습니다.

사용 가능한 Stitch 도구들

트러블슈팅

"Stitch API has not been used in project" 오류

MCP 엔드포인트가 활성화되지 않았습니다:

gcloud beta services mcp enable stitch.googleapis.com --project=YOUR_PROJECT_ID

"Permission denied" 오류

서비스 계정에 권한이 없습니다:

gcloud projects add-iam-policy-binding YOUR_PROJECT_ID \
  --member="serviceAccount:YOUR_SERVICE_ACCOUNT_EMAIL" \
  --role="roles/serviceusage.serviceUsageConsumer"

gcloud에서 "mcp" 명령어를 찾을 수 없음

gcloud를 최신 버전으로 업데이트하세요:

gcloud components update

마치며

Google Stitch와 MCP를 활용하면 텍스트 프롬프트만으로 전문가 수준의 UI를 빠르게 생성할 수 있습니다. 특히 Claude Code와 함께 사용하면 생성된 디자인을 바로 React 컴포넌트로 변환하여 프로젝트에 적용할 수 있어 개발 생산성이 크게 향상됩니다.

참고 자료

• stitch-mcp GitHub
• Google Cloud MCP 문서
• Model Context Protocol 공식 문서

태그: Google Stitch, MCP, Claude Code, AI, UI Design, Automation