1. 소개
이 Codelab에서는 AI 기반 디자인과 에이전트 우선 개발 환경을 연결하여 프로덕션 준비가 완료된 웹사이트를 빌드합니다. Google Stitch 를 사용하여 충실도가 높은 UI를 생성한 다음 모델 컨텍스트 프로토콜 (MCP) 을 통해 Antigravity IDE 에 연결합니다. 마지막으로 자율 에이전트를 사용하여 '디자인 DNA'를 가져오고 픽셀 완벽한 React 애플리케이션을 구현합니다.
실행할 작업
- Stitch에서 UI 생성: 자연어를 사용하여 Google Stitch에서 전체 규모의 웹 디자인을 만듭니다.
- MCP로 연결: 모델 컨텍스트 프로토콜을 사용하여 Antigravity를 Stitch 프로젝트에 연결합니다.
- 자율 구현: Antigravity의 '에이전트 탭'을 사용하여 디자인 토큰을 가져오고 React/Tailwind 프로젝트를 스캐폴딩합니다.
- 확인 및 수정: 통합 브라우저를 사용하여 원본 디자인과 비교하여 코드의 '분위기'를 확인합니다.
학습할 내용
- Google Stitch를 사용하여 충실도가 높은 UI 디자인을 빠르게 프로토타입 제작하는 방법
- Antigravity IDE 내에서 MCP 서버를 구성하는 방법
- 자율 에이전트를 사용하여 시각적 디자인 메타데이터를 모듈식 코드로 변환하는 방법
필요한 항목
- Chrome 웹브라우저
- Antigravity IDE가 설치됨
- Google Stitch 계정
- Stitch API 키
- Node.js (v18 이상)가 로컬에 설치됨
시작하기 전에
- Google Cloud 콘솔의 프로젝트 선택기 페이지에서 Google Cloud 프로젝트를 선택하거나 만듭니다.
- Cloud 프로젝트에 결제가 사용 설정되어 있는지 확인합니다. 프로젝트에 결제가 사용 설정되어 있는지 확인하는 방법을 알아보세요 .
- stitch.withgoogle.com으로 이동하여 로그인할 수 있는지 확인합니다.
- Antigravity IDE (antigravity.google에서 사용 가능)가 설치되어 있는지 확인합니다.
2. Google Stitch에서 디자인 만들기
에이전트가 따라야 할 시각적 '신뢰할 수 있는 소스'가 필요합니다. 코드를 작성하기 전에 미적 감각을 정의해야 합니다.
- 플랫폼 액세스: stitch.withgoogle.com으로 이동합니다.
- 프로젝트 유형 선택: 기본 대시보드에서 새 디자인 시작 전환 버튼을 찾습니다. 웹 을 클릭하여 디자인이 브라우저 기반 레이아웃에 최적화되도록 합니다.
- 모델 선택: 프롬프트 상자 내에서 모델 드롭다운 메뉴 (현재 3.0 Flash 표시)를 클릭합니다. 가장 고급 추론 및 레이아웃 생성을 위해 Gemini 3 이 선택되어 있는지 확인합니다.
- 비전 설명: "디자인 설명" 이라는 텍스트 영역에 프롬프트를 입력합니다.
"LaunchPad라는 우주 기술 스타트업을 위한 최신 SaaS 방문 페이지를 디자인합니다. 미드나잇 블루 및 네온 퍼플 팔레트를 사용합니다. '시작하기' 버튼이 있는 히어로 섹션, 3열 기능 그리드, 글래스모피즘 가격표를 포함합니다." 5. 생성: 화살표 아이콘 (모델 선택기 옆)을 클릭하여 생성 프로세스를 시작합니다. 6. 수정 및 이름 지정: UI가 생성되면 상단 헤더에서 프로젝트 이름을 지정합니다. 이름을 LaunchPad로 지정합니다. 채팅 사이드바를 사용하여 IDE로 이동하기 전에 특정 요소를 수정할 수 있습니다.
[!TIP] 다음에서 선택할 수도 있습니다.
"이러한 프롬프트 사용해 보기"
섹션을 사용하면 빠르게 시작할 수 있습니다.
3. Antigravity MCP 구성
Antigravity 에이전트가 디자인을 '읽을' 수 있도록 하려면 보안 API 키를 생성하고 Stitch MCP 서버를 추가해야 합니다.
Stitch API 키 생성
- Google Stitch에서 오른쪽 상단의 프로필 사진 을 클릭합니다.
- 드롭다운 메뉴에서 Stitch 설정 을 선택합니다.
- API 키 섹션으로 이동합니다.
- 키 만들기 버튼을 클릭합니다.
- 키 복사: 생성된 키를 즉시 복사하여 안전하게 보관합니다. 다음 단계에서 필요합니다.
Antigravity에서 Stitch MCP 구성
- Antigravity IDE 를 엽니다.
- 에이전트 관리자 를 엽니다.
언제든지 CMD+E (Mac) 또는 CTRL+E (Windows)를 누르거나 메뉴 표시줄 오른쪽 상단의 편집기 열기 및 에이전트 관리자 열기 버튼을 통해 에이전트 관리자와 편집기 간에 전환할 수 있습니다. .
- + 작업공간 열기 를 클릭합니다.
작업공간 내에서 새 대화를 시작하려면 대화 시작 탭에서 원하는 작업공간을 선택하거나 사이드바의 작업공간 이름 옆에 있는 더하기 버튼을 누릅니다.
- 새 작업공간 열기를 클릭하고 작업공간 이름을
LaunchPad-Project로 지정한 후 로컬 디렉터리를 선택합니다. 이렇게 하면 에이전트가 다른 프로젝트를 어수선하게 만들지 않고 파일을 스캐폴딩할 특정 루트 폴더를 갖게 됩니다.
Stitch MCP 구성
- 새 작업공간 내에서 에이전트 관리자 (Mac의 경우 CMD+E, Windows의 경우 CTRL+E)로 돌아가 MCP 서버 를 선택합니다.
편집기의 에이전트 창 상단에 있는 '...' 드롭다운을 통해 MCP 스토어를 엽니다.
Antigravity는 편집기가 로컬 도구, 데이터베이스, 외부 서비스에 안전하게 연결할 수 있도록 지원하는 표준인 모델 컨텍스트 프로토콜 (MCP)을 지원합니다. 이 통합은 AI에 편집기에서 열려 있는 파일 외에도 실시간 컨텍스트를 제공합니다.
MCP는 Antigravity 와 Google Stitch 간의 브리지 역할을 합니다. 디자인 토큰을 수동으로 내보내거나 16진수 코드 및 레이아웃 메타데이터를 편집기에 복사하는 대신 MCP를 사용하면 Antigravity가 필요할 때 Stitch 프로젝트에서 디자인 DNA를 직접 가져올 수 있습니다.
- "Stitch" 를 검색하고 설치 를 클릭합니다.
- 메시지가 표시되면 Stitch API 키 를 구성 필드에 붙여넣습니다.
- 확인: 에이전트 채팅에서
List my Stitch projects.를 입력합니다.LaunchPad가 반환되면 준비가 완료된 것입니다.
- 확인: 에이전트 채팅에서
List my Stitch projects.를 입력합니다. 에이전트가LaunchPad를 반환하면 브리지가 성공적으로 구성된 것입니다.
4. 디자인 컨텍스트 가져오기
이제 에이전트가 코드 정확성을 보장하기 위해 디자인 메타데이터를 수집해야 합니다.
- Antigravity 채팅에서 'Stitch MCP를 사용하여 'LaunchPad' 프로젝트를 가져옵니다. 색상 팔레트와 타이포그래피를 추출한 다음 루트 디렉터리에
DESIGN.md파일을 생성합니다.'를 입력합니다. - 검토: 새로 생성된
DESIGN.md를 열어 에이전트가 추출한 16진수 코드와 레이아웃 규칙을 확인합니다.
5. 구현 (빌드)
에이전트를 사용하여 디자인을 작동하는 React 애플리케이션으로 변환합니다.
- '빌드' 프롬프트를 제공합니다.
"이제 이 전체 웹사이트를 빌드하려고 합니다. React 및 Tailwind CSS를 사용합니다. 구성요소가 모듈식인지 확인합니다. 완료되면 개발 서버를 실행하고 통합 브라우저에 표시합니다." 2. 에이전트 관찰: 터미널에서 프로젝트를 스캐폴딩하고 편집기에서 구성요소를 작성하며 통합 브라우저에서 미리보기를 엽니다.
6. 검토 및 수정
출력을 확인하고 에이전트를 사용하여 시각적 불일치를 수정합니다.
- 통합 브라우저 출력을 원래 Stitch 디자인과 비교합니다.
- 버튼 패딩 또는 글꼴 굵기와 같은 요소가 일치하지 않으면 에이전트에게 '시작하기' 버튼 패딩이 약간 벗어났습니다. Stitch 디자인을 다시 참조하고 Tailwind 클래스를 업데이트하세요.'라고 프롬프트를 표시합니다.
- 에이전트가 디자인 컨텍스트를 다시 가져오고 수정을 즉시 적용합니다.
7. 요약 및 다음 단계
수고하셨습니다 Antigravity 및 Stitch MCP를 사용하여 충실도가 높은 디자인과 기능적 코드베이스 간의 격차를 성공적으로 해소했습니다.
실행한 작업 요약:
- Gemini 3을 사용하여 Stitch 에서 UI를 디자인했습니다.
- 보안 API 키 를 생성하고 Antigravity MCP 를 구성했습니다.
- 자율 에이전트를 사용하여 React + Tailwind 사이트를 빌드하고 확인했습니다.