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 프로젝트에 결제가 사용 설정되어 있는지 확인합니다. 프로젝트에 결제가 사용 설정되어 있는지 확인하는 방법을 알아보세요 .
Google Cloud 크레딧: Google Cloud 프로젝트에서 Antigravity를 사용할 수 있도록 이 링크를 사용하여 무료 Google 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 Agent가 설계를 '읽도록' 허용하려면 보안 API 키를 생성하고 Stitch MCP 서버를 추가해야 합니다.
Stitch API 키 생성
- Google 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 디자인을 다시 참고하여 Tailwind 클래스를 업데이트하세요.'라고 안내합니다.
- 에이전트가 디자인 컨텍스트를 다시 가져오고 수정사항을 즉시 적용합니다.
7. 요약 및 다음 단계
축하합니다. Antigravity 및 Stitch MCP를 사용하여 충실도가 높은 디자인과 기능적 코드베이스 간의 격차를 성공적으로 해소했습니다.
한 일 요약:
- Gemini 3를 사용하여 Stitch에서 UI를 설계했습니다.
- 안전한 API 키를 생성하고 Antigravity MCP를 구성했습니다.
- 자율 에이전트를 사용하여 React + Tailwind 사이트를 빌드하고 확인했습니다.