1. 소개
이 실무형 실습에서는 Antigravity를 오케스트레이션하여 완전한 클라우드 기반 애플리케이션을 빌드하고 Developer Knowledge MCP 및 에이전트 스킬을 사용하여 에이전트 지식과 출력 품질을 개선하는 방법을 알아봄으로써 최신 개발 스킬을 연습합니다.
Google은 Nano Banana 2라고도 하는 Gemini 3.1 Flash 이미지를 사용하여 고양이 이미지를 생성하는 애플리케이션인 '고양이 배송 시스템'을 빌드하고 있습니다. 애플리케이션 백엔드는 Antigravity SDK를 사용하여 개발되고 Cloud Run에 배포됩니다. 또한 lit 및 vite를 사용하여 최신 프런트엔드를 만들 예정입니다. 이 모든 작업은 코드를 한 줄도 수동으로 작성하지 않고 수행됩니다.
학습할 내용
- 빠른 모드 및 계획 모드에서 Antigravity CLI를 사용하는 방법
- Developer Knowledge MCP 서버를 사용하여 Google 개발자 문서에 대한 Antigravity 액세스 권한을 부여하는 방법
- Antigravity CLI에 커스텀 스킬을 설치하는 방법
- Antigravity를 사용하여 애플리케이션을 배포하고 감사하는 방법
기본 요건
- 터미널 사용 경험
- 코드 읽기 및 이해
- AI 코딩 에이전트에 관한 기본 지식
- 클라우드 개념에 대한 기본 이해
2. 설정
아래 안내에 따라 이 Codelab에 필요한 Google Cloud 프로젝트를 초기화하세요. 프로젝트를 초기화한 후에는 바로 실행하는 데 필요한 모든 도구가 포함되어 있으므로 Cloud Shell에서 이 Codelab을 실행하는 것이 좋습니다.
로컬 환경에서 이 Codelab을 실행하려면 계속하기 전에 Python, uv, 코드 편집기를 설치해야 합니다. 이 Codelab의 모든 안내는 달리 언급하지 않는 한 Cloud Shell에서 실행한다고 가정합니다.
자습형 환경 설정
- Google Cloud Console에 로그인하여 새 프로젝트를 만들거나 기존 프로젝트를 재사용합니다. 아직 Gmail이나 Google Workspace 계정이 없는 경우 계정을 만들어야 합니다.
- 프로젝트 이름 은 이 프로젝트 참가자의 표시 이름입니다. 이는 Google API에서 사용하지 않는 문자열이며 언제든지 업데이트할 수 있습니다.
- 프로젝트 ID는 모든 Google Cloud 프로젝트에서 고유하며, 변경할 수 없습니다(설정된 후에는 변경할 수 없음). Cloud 콘솔은 고유한 문자열을 자동으로 생성합니다. 일반적으로는 신경 쓰지 않아도 됩니다. 대부분의 Codelab에서는 프로젝트 ID (일반적으로
PROJECT_ID로 식별됨)를 참조해야 합니다. 생성된 ID가 마음에 들지 않으면 다른 임의 ID를 생성할 수 있습니다. 또는 직접 시도해 보고 사용 가능한지 확인할 수도 있습니다. 이 단계 이후에는 변경할 수 없으며 프로젝트 기간 동안 유지됩니다. - 참고로 세 번째 값은 일부 API에서 사용하는 프로젝트 번호입니다. 이 세 가지 값에 대한 자세한 내용은 문서를 참고하세요.
- 다음으로 Cloud 리소스/API를 사용하려면 Cloud 콘솔에서 결제를 사용 설정해야 합니다. 이 Codelab 실행에는 많은 비용이 들지 않습니다. 이 튜토리얼이 끝난 후에 요금이 청구되지 않도록 리소스를 종료하려면 만든 리소스 또는 프로젝트를 삭제하면 됩니다. Google Cloud 신규 사용자는 300달러(USD) 상당의 무료 체험판 프로그램에 참여할 수 있습니다.
Cloud Shell 시작
Google Cloud를 노트북에서 원격으로 실행할 수 있지만, 이 Codelab에서는 Cloud에서 실행되는 명령줄 환경인 Google Cloud Shell을 사용합니다.
Google Cloud 콘솔의 오른쪽 상단 툴바에 있는 Cloud Shell 아이콘을 클릭합니다.
환경을 프로비저닝하고 연결하는 데 몇 분 정도 소요됩니다. 완료되면 다음과 같이 표시됩니다.
가상 머신에는 필요한 개발 도구가 모두 들어있습니다. 영구적인 5GB 홈 디렉터리를 제공하고 Google Cloud에서 실행되므로 네트워크 성능과 인증이 크게 개선됩니다. 이 Codelab의 모든 작업은 브라우저 내에서 수행할 수 있습니다. 아무것도 설치할 필요가 없습니다.
3. Antigravity CLI 설정 및 인증
이 실습에서는 Antigravity (AGY)를 사용합니다. Google의 Gemini 모델을 사용하여 소프트웨어를 빌드하는 데 도움이 되는 Google의 코딩 에이전트입니다. AGY 데스크톱 애플리케이션, 명령줄 인터페이스 (AGY CLI), 에이전트와 함께 코드를 보고 수정할 수 있는 통합 개발 환경 (IDE)이 있습니다. 이 실습에서는 AGY CLI를 사용합니다.
또한 Antigravity 에이전트 하네스 (하네스를 Antigravity의 엔진이라고 생각하면 됨)를 사용하여 자체 범용 에이전트를 빌드하는 SDK도 있습니다.
AGY 실행 및 인증
편집기 열기 버튼을 눌러 Cloud Shell 편집기를 엽니다.
편집기가 열리면 메뉴 바의 최대화 버튼을 사용하여 창을 최대화할 수 있습니다.
메뉴 터미널 > 새 터미널 또는 단축키 Ctrl+` (control + 백틱)를 사용하여 터미널 패널을 엽니다.
화면 하단에 bash 프롬프트가 표시된 새 터미널 창이 열립니다.
그런 다음 터미널에서 첫 번째 연습의 작업 디렉터리를 만들고 해당 디렉터리로 변경합니다.
mkdir -p ~/hello-agy && cd ~/hello-agy
이 터미널에서 agy 를 입력하여 Antigravity CLI를 실행합니다.
agy
agy가 실행되면 인증을 요청합니다. Google Cloud 프로젝트 사용:을 선택합니다.
이제 화면에 링크가 표시됩니다. 제공된 링크를 복사하여 시크릿 브라우저의 다른 탭에 붙여넣습니다.
이 실습에 제공된 동일한 학생 사용자 인증 정보를 사용하여 로그인합니다.
승인 코드를 복사하여 agy에 다시 붙여넣습니다.
프로젝트 ID를 묻는 메시지가 표시되면 이 페이지의 측면 패널에 표시된 프로젝트 ID를 사용해야 합니다.
마지막으로 Google Cloud 위치 전역을 선택합니다.
고양이 퀴즈를 반환하는 빠른 스크립트 생성
이제 AGY CLI가 어떻게 작동하는지 파악하기 위해 빠른 스크립트를 생성해 보겠습니다.
AGY에 고양이 관련 정보를 반환하는 짧은 스크립트를 작성하고 실행하도록 요청합니다.
Write a simple node script that returns cat trivia and run it for me
AGY는 잠시 생각한 후 스크립트를 작성합니다.
AGY가 노드 스크립트를 실행할 수 있는 권한을 요청하면 예 를 선택하고 Enter 키를 누릅니다.
권한 요청은 다음과 같이 표시됩니다.
Requesting permission for: node cat-trivia.js Do you want to proceed? > 1. Yes 2. Yes, and always allow in this conversation for commands that start with 'node cat-trivia\.js' 3. Yes, and always allow for commands that start with 'node cat-trivia\.js' (Persist to settings.json) 4. No
스크립트를 실행한 후 AGY는 수행한 작업의 요약을 제공합니다. 다음은 AGY가 제공한 내용입니다.
I have created and executed a simple Node.js script that returns cat trivia.
### Created File
• cat-trivia.js: A standalone Node.js script that fetches random cat facts from a public API ( https://catfact.ninja/fact ) with built-in fallbacks and ASCII art.
### Execution Output
Running the script using node cat-trivia.js produced the following output:
_._ _,-'""`-._
(,-.`._,'( |\`-/|
`-.-' \ )-`( , o o)
`- \`_`"'-
🐱 Here is your Cat Trivia:
----------------------------------------
"In 1987 cats overtook dogs as the number one pet in America."
----------------------------------------
고양이의 ASCII 그림도 추가해 주었습니다.
이제 AGY가 생성한 내용을 자세히 알아볼 수 있습니다. 편집기를 열고 소스 코드를 검사할 수도 있지만 (이렇게 하는 것이 좋습니다) AGY에 코드에 주석을 달고 설명하도록 요청할 수도 있습니다.
Explain the code you generated please
설명을 읽고 자세히 알아보려면 후속 질문을 하세요.
마지막으로 이 작업을 완료하려면 Ctrl+D 를 두 번 눌러 agy를 닫습니다.
4. Google 개발자 문서 연결 및 쿼리
에이전트와 모델은 매일 더 스마트해지고 있지만 응답 품질은 지식의 정확성과 최신 상태에 크게 좌우됩니다. 따라서 에이전트가 권한 있는 소스에서 최신 개발자 문서를 검색할 수 있는 도구를 제공하여 내부 지식이나 추측에 따라 잘못된 결정을 내리지 않도록 하는 것이 중요합니다.
Google Developer Knowledge MCP 서버를 사용하면 코딩 에이전트가 Firebase, Google Cloud, Android, 지도, 기타 여러 Google 제품에 대한 Google의 공식 개발자 문서를 검색할 수 있습니다.
에이전트를 Google의 공식 문서 라이브러리에 직접 연결하면 에이전트가 사용하는 코드와 안내가 최신 상태이고 권한 있는 컨텍스트를 기반으로 합니다.
시작하려면 Developer Knowledge API를 사용 설정하세요.
gcloud services enable developerknowledge.googleapis.com
Developer Knowledge MCP 서버 설정 및 구성
아래 단계에 따라 이 프로젝트의 작업공간을 만들고 Antigravity용 Developer Knowledge MCP 서버를 구성합니다.
사용자의 Antigravity 구성 파일은 홈 디렉터리의 .gemini 폴더에 저장됩니다. 아래 다이어그램은 찾을 수 있는 주요 요소가 포함된 간소화된 버전을 보여줍니다.
~/.gemini
├── antigravity/
├── antigravity-cli/
│ ├── brain/ # Conversations and artifacts
│ └── settings.json # CLI settings
├── config/
│ ├── plugins/ # Global / shared plugins
│ └── mcp_config.json # Global / shared MCP config
├── skills/ # Global / shared skills
│ └── {skill_name}/
│ ├── SKILL.md # Skill definition
│ └── ... # [optional] support files, scripts, etc.
└── GEMINI.md # Global rules
AGY CLI에 Developer Knowledge MCP 서버를 추가하려면 ~/.gemini/config 폴더에서 mcp_config.json 파일을 수정합니다.
먼저 구성 폴더가 있는지 확인하고 빈 mcp_config.json 파일을 만듭니다.
mkdir -p ~/.gemini/config && touch mcp_config.json
그런 다음 아래 명령어를 사용하여 Cloud Shell 편집기에서 이 파일을 엽니다.
cloudshell edit ~/.gemini/config/mcp_config.json
마지막으로 mcp_config.json에 다음 구성을 추가합니다. [[PROJECT_ID]]를 실제 프로젝트 ID로 바꿔야 합니다. 프로젝트 ID는 이 안내의 측면 패널에서 확인할 수 있습니다.
~/.gemini/config/mcp_config.json
{
"mcpServers": {
"google-developer-knowledge": {
"url": "https://developerknowledge.googleapis.com/mcp",
"authProviderType": "google_credentials",
"oauth": {
"scopes": [
"https://www.googleapis.com/auth/cloud-platform"
]
},
"timeout": 30000,
"headers": {
"X-goog-user-project": "[[PROJECT_ID]]"
}
}
}
}
이제 /mcp 슬래시 명령어를 사용하여 MCP 서버가 올바르게 로드되었는지 확인할 수 있습니다. 다음과 같은 결과를 확인할 수 있습니다.
Developer Knowledge MCP가 구성되었습니다. 이제 실제로 어떻게 작동하는지 살펴보겠습니다.
Nano Banana 2를 사용하여 고양이 사진을 만드는 스크립트 생성
Developer Knowledge MCP 기능을 보여주기 위해 Nano Banana 2를 사용하여 고양이 사진을 생성하는 간단한 스크립트를 만들어 보겠습니다.
터미널에서 다음 명령어를 실행해야 합니다. Ctrl+D 를 두 번 눌러 agy를 닫고 셸로 돌아갈 수 있습니다.
먼저 AI Platform API를 사용 설정합니다. 프로젝트에서 Gemini API 호출을 할 수 있도록 하는 API입니다.
gcloud services enable aiplatform.googleapis.com
새끼 고양이 생성기의 작업공간을 만듭니다.
mkdir -p ~/nano-banana-kitten && cd ~/nano-banana-kitten
종속 항목 관리자를 초기화합니다.
uv init
이제 Antigravity를 실행하고 다음 프롬프트를 입력합니다.
Write a script that uses Nano Banana 2 through Vertex AI to generate a picture of a cute kitten, and run the script for me. Use the google-developer-knowledge MCP when researching.
Ctrl+O를 눌러 중간 사고 단계를 펼치고 함께 읽어 보세요. AGY가 google-developer-knowledge 서비스를 사용하여 쿼리를 실행하고 스크립트를 작성하고 운영하고 발견된 오류를 수정하는 것을 확인할 수 있습니다.
고양이 이미지 =^_^= 보기
5. 고양이 배송 에이전트 빌드
Google Developer Knowledge MCP는 공식 문서를 통해 질문에 답변하는 데 유용하지만 필요한 정보가 매우 전문적이고 문서에서 찾을 수 없는 경우도 있습니다. 이러한 경우에는 또 다른 개방형 표준인 에이전트 스킬을 사용할 수 있습니다.
에이전트 스킬은 전문 지식과 워크플로를 통해 AI 에이전트 기능을 확장하는 경량의 개방형 형식입니다. 스킬의 정의 특징은 점진적 공개라고 합니다. 에이전트는 처음부터 모든 스킬 콘텐츠를 로드하는 대신 필요할 때만 스킬을 활성화하여 요청 시 필요한 정보를 로드하고 중요한 토큰을 저장합니다.
고양이 배송 에이전트를 완료하기 위해 Antigravity SDK를 에이전트 하네스로 사용합니다. 마찰을 최소화하고 코딩 에이전트의 구현을 간소화하기 위해 공식 Antigravity SDK 스킬도 활용합니다.
작업공간 만들기 및 종속 항목 설치
먼저 최종 프로젝트의 폴더를 만듭니다.
mkdir -p ~/cat-delivery && cd ~/cat-delivery
그런 다음 uv 패키지 관리자를 사용하여 이 폴더를 초기화하고 몇 가지 종속 항목을 설치합니다.
uv init && uv add fastapi uvicorn
AGY SDK Python 스킬 설치
소스 코드 및 오픈 마켓플레이스에서 스킬을 설치하려면 Vercel의 Skill CLI 를 사용하면 됩니다. 터미널에서 다음 명령어를 실행하여 google-antigravity-sdk 스킬을 설치합니다. 실험실 작업공간 폴더 (~/cdslab)에서 실행해야 합니다.
npx skills add Google-Antigravity/antigravity-sdk-python --skill google-antigravity-sdk --agent antigravity-cli --yes
이 명령어 출력은 다음과 같이 표시됩니다.
npx skills add Google-Antigravity/antigravity-sdk-python 명령어는 GitHub에서 저장소 antigravity-sdk-python을 자동으로 클론했습니다. 이 명령어는 skills 폴더가 있는 한 모든 GitHub 저장소에서 스킬을 설치하는 데 사용할 수 있습니다.
플러그인에서 스킬 설치
스킬을 설치하는 또 다른 방법은 플러그인 시스템을 사용하는 것입니다. Antigravity의 플러그인을 사용하면 스킬뿐만 아니라 MCP 서버, 규칙, 후크도 동일한 패키지에 포함할 수 있습니다. 단일 배포 번들에서 일관성 있는 확장 프로그램을 만드는 데 유용합니다.
웹 애플리케이션을 빌드하고 있으므로 아래 명령어를 사용하여 modern-web-guidance 플러그인을 설치합니다.
agy plugin install https://github.com/GoogleChrome/modern-web-guidance
이 플러그인에는 Google Chrome팀에서 작성한 웹 개발 권장사항이 포함된 스킬이 포함되어 있습니다.
이러한 스킬이 실제로 어떻게 작동하는지 확인할 수 있도록 agy를 다시 실행합니다. agy의 프롬프트에서 /skills를 입력하여 스킬 메뉴를 엽니다.
/skills
다음과 같은 내용이 표시됩니다.
이제 MCP와 에이전트 스킬이 모두 구성되었으므로 Antigravity는 성공에 필요한 모든 정보를 사용하여 프로젝트를 진행할 준비가 되었습니다.
앱 계획
Antigravity에는 빠른 모드와 계획 모드의 두 가지 작업 모드가 있습니다. 빠른 모드에서 Antigravity는 작업을 바로 시작하며 간단한 독립형 작업을 위한 것입니다. 계획 모드는 복잡한 작업을 위해 설계되었으며, 에이전트는 먼저 구현을 시작하기 전에 검토하고 수정할 수 있는 계획을 자세히 설명합니다.
계획 모드를 사용 설정하려면 슬래시 명령어 /planning을 사용하면 됩니다.
/planning
/fast를 사용하여 빠른 모드로 다시 전환할 수 있습니다.
/fast
계획 모드와 빠른 모드 간에 전환할 때는 모델을 전환하는 것도 유용할 수 있습니다. /model 명령어를 사용하여 이 작업을 수행할 수 있습니다.
/model
사용 가능한 모델 목록은 환경 및 인증 모드에 따라 약간 다를 수 있습니다.
이 튜토리얼의 범위에서는 Gemini 3.5 Flash (낮음) 를 선택합니다. 괄호 안의 '낮음'이라는 단어는 모델의 사고 수준 을 의미합니다. 낮음 사고를 사용하는 Gemini 3.5 Flash는 토큰 경제성이 좋은 매우 빠르고 효과적인 모델입니다. 사고 수준으로 중간 또는 높음 을 선택하면 모델이 응답을 반환하기 전에 추론에 더 많은 토큰과 시간이 소요됩니다.
예를 들어 실제 시나리오에서는 계획에 높은 사고 수준의 가장 강력한 모델을 사용하고 구현에 더 빠른 모델을 사용할 수 있습니다. 하지만 프로젝트에서는 Gemini 3.5 Flash (낮음)로 충분합니다.
계획 생성
Antigravity를 계획 모드로 다시 전환합니다.
/planning
그런 다음 다음 프롬프트를 전송하여 구현 계획을 만듭니다.
Create an application named "Cat Delivery System". This application will be an agent that generates cat pictures using Gemini 3.1 Flash Image (aka Nano Banana 2). The user will interact with the agent whenever it feels the need for a cat picture in their life, whether it be to make them smile, laugh or just brighten their day. Cat pictures can take any form the user desires: anime, cartoon, photorealistic, 3D render, etc. The only rule is ABSOLUTELY NO DOGS - steer the user towards cats if necessary. P.S.: capybaras are allowed.
The tech stack should be as follows:
- uv package manager
- Backend: agent using Antigravity SDK
- Frontend: simple chat window, light mode, lit / vite
- Model: Gemini 3.5 Flash for the root agent, Gemini 3.1 Flash Image for image generation
TODO:
- backend should serve a static frontend
- define the contract between frontend and backend before starting implementation
- use Google Cloud Project auth
연구 단계에서 Antigravity는 Developer Knowledge MCP와 하나 이상의 스킬을 모두 호출할 수 있습니다.
계획이 완료되면 검토하라는 메시지가 표시됩니다.
화면 오른쪽 하단에 아티팩트 1개 라는 메시지와 /artifact를 사용하여 검토하라는 힌트가 표시됩니다. Antigravity에서 계획, 작업 목록, 안내와 같은 지원 파일은 솔루션의 일부인 일반 파일 (예: 소스 코드)과 구분하기 위해 '아티팩트'라고 합니다.
프롬프트에 /artifact 명령어를 입력하면 계획을 확인하고 조정해야 하는 경우 계획에 댓글을 달 수 있습니다.
/artifact
다음과 같은 결과를 확인할 수 있습니다.
열기, 승인 또는 거부 옵션이 있는 implementation_plan.md라는 파일이 있습니다. Enter 키를 눌러 엽니다. 다음은 내 시스템에서 계획이 어떻게 표시되는지 보여주는 예입니다.
화살표 키를 사용하여 위아래로 스크롤할 수 있으며, C 키를 눌러 어느 줄에서나 댓글을 추가할 수 있습니다.
확인해야 할 중요한 섹션은 '확인 계획'입니다. 여기에서 모델이 작업을 완료했음을 알 수 있도록 검증 단계를 확인하고 추가할 수 있습니다.
계획이 만족스러울 때까지 댓글을 추가하고 ESC 키를 눌러 돌아갑니다. 그런 다음 Y 키를 눌러 에이전트에 댓글을 전송할지 확인합니다.
Y 키를 누르면 에이전트가 즉시 작업을 시작합니다. 에이전트는 구현이 진행됨에 따라 더 많은 도구 호출 확인을 요청할 수 있습니다.
시간이 지남에 따라 아티팩트 수가 증가하는 것을 확인할 수 있습니다. 계획 외에도 Antigravity는 구현해야 하는 각 항목 또는 수행해야 하는 작업을 추적하기 위해 할 일 목록 (task.md)도 만듭니다. 완료되면 달성된 목표에 대한 설명이 포함된 안내 파일 (walkthrough.md)이 생성됩니다. /artifact 명령어를 다시 사용하여 이 모든 항목을 검사할 수 있습니다.
언제든지 이러한 파일을 열고 댓글을 추가할 수 있으며, 에이전트에 전송하면 대기열에 있는 프롬프트와 마찬가지로 실행 대기열에 추가됩니다. 이러한 파일에 댓글을 달아 에이전트에 요청에 관한 추가 컨텍스트를 제공하는 것이 좋습니다.
6. 클라우드에 에이전트 배포
이제 Cloud Run을 사용하여 클라우드에 배포할 준비가 되었습니다. 이 작업에는 정교한 계획이 필요하지 않으므로 빠른 모드를 사용할 수 있습니다.
/fast를 사용하여 Antigravity를 빠른 모드로 전환합니다.
/fast
다음 프롬프트를 사용하여 Antigravity에 CDS 에이전트를 Cloud Run에 배포하도록 안내합니다.
Deploy the agent and frontend to Cloud Run.
TODO:
- backend should serve a static frontend
- frontend and backend are deployed in the same container
Acceptance Criteria
- Agent is deployed to cloud run
- Frontend is live and renders with no errors
- Backend is live and responds to requests with no errors
7. 수고하셨습니다
이 워크숍에서는 MCP 서버 및 에이전트 스킬을 사용하여 기능을 확장하는 방법을 비롯하여 Antigravity를 사용한 최신 개발을 연습했습니다. 또한 Antigravity SDK 및 Gemini 3.1 Flash 이미지를 활용하여 완전한 애플리케이션을 빌드했습니다. 여기서 학습을 멈출 필요는 없습니다. 이 플랫폼의 다른 Codelab을 확인하고 에이전트 코딩 스킬을 계속 개발하세요.