Antigravity에서 사양 기반 개발 시작하기

1. 이 실습의 목표

이 실무형 실습에서는 Antigravity를 사용하여 Google Antigravity로 애플리케이션을 만들고 Google Cloud에 배포하는 방법을 알아봅니다. 이 실습에서는 사양 기반 개발 개념도 소개합니다.

학습할 내용

• Google Antigravity의 기본사항을 이해합니다.
• 사양 기반 개발의 기본사항 이해
• Cloud Run에서 앱을 쉽게 배포하는 방법을 알아봅니다.

그림 1: Antigravity는 Google에서 개발한 에이전트 중심 개발 도구입니다.

2. 환경 설정

1. Antigravity를 설치합니다.

                      👉Download the  [Google Antigravity](https://antigravity.google/docs/get-started) for your environment from  [here](https://antigravity.google/).
   

👉환경에 Antigravity를 설치합니다.

👉Antigravity가 설치된 폴더로 이동하여 더블클릭하여 설치 프로그램을 엽니다.

👉설치 프로그램 안내에 따라 환경에 Antigravity를 설치합니다.

2. Python 설치

👉https://www.python.org/downloads/로 이동하여 시스템에 Python을 설치합니다.

3. gcloud 설치

👉gcloud는 Google Cloud에서 다양한 작업을 실행할 수 있는 명령줄 도구입니다. 여기의 안내에 따라 환경에 gcloud를 설치합니다.

👉설치가 완료되면 시스템 터미널을 열고 gcloud를 입력하여 설치를 테스트합니다.

그림 2: gcloud를 설치한 후 터미널에 gcloud를 입력하여 설치를 테스트할 수 있습니다.

3. 프로젝트 설정

Google Cloud 크레딧을 받아 이 실습을 실행할 수 있습니다. 여기를 클릭하여 크레딧을 받으세요. 여기에서 Google Cloud 크레딧을 신청하는 방법을 확인하세요.

• 사용할 수 있는 프로젝트가 아직 없으면 GCP 콘솔에서 새 프로젝트를 만들어야 합니다. 프로젝트 선택기 (Google Cloud 콘솔의 왼쪽 상단)에서 프로젝트를 선택합니다.

그림 2: Google Cloud 로고 바로 옆에 있는 상자를 클릭하면 프로젝트를 선택할 수 있습니다. 프로젝트가 선택되어 있는지 확인합니다.

• 이 실습에서는 Cloud Shell 편집기를 사용하여 작업을 수행합니다. Cloud Shell을 열고 Cloud Shell을 사용하여 프로젝트를 설정합니다.
• 이 링크를 클릭하여 Cloud Shell 편집기로 바로 이동합니다.
• 메뉴에서 터미널 > 새 터미널을 클릭하여 터미널을 엽니다(아직 열려 있지 않은 경우). 이 터미널에서 이 튜토리얼의 모든 명령어를 실행할 수 있습니다.
• Cloud Shell 터미널에서 다음 명령어를 사용하여 프로젝트가 이미 인증되었는지 확인할 수 있습니다.

gcloud auth list

• Cloud Shell에서 다음 명령어를 실행하여 프로젝트를 확인합니다.

gcloud config list project

• 프로젝트 ID를 복사하고 다음 명령어를 사용하여 설정합니다.

gcloud config set project <YOUR_PROJECT_ID>

• 프로젝트 ID가 기억나지 않는 경우 다음 명령어를 사용하여 모든 프로젝트 ID를 나열할 수 있습니다.

gcloud projects list

4. API 사용 설정

이 실습을 실행하려면 일부 API 서비스를 사용 설정해야 합니다. Cloud Shell에서 다음 명령어를 실행합니다.

gcloud services enable aiplatform.googleapis.com
gcloud services enable cloudresourcemanager.googleapis.com

API 소개

• Vertex AI API (aiplatform.googleapis.com)를 사용하면 Vertex AI 플랫폼에 액세스할 수 있으므로 애플리케이션이 텍스트 생성, 채팅 세션, 함수 호출을 위해 Gemini 모델과 상호작용할 수 있습니다.
• Cloud Resource Manager API (cloudresourcemanager.googleapis.com)를 사용하면 다른 도구와 SDK에서 프로젝트 ID와 이름과 같은 Google Cloud 프로젝트의 ID와 권한을 확인하는 데 필요한 메타데이터를 프로그래매틱 방식으로 관리할 수 있습니다.

5. 크레딧이 적용되었는지 확인하기

프로젝트 설정 단계에서 Google Cloud의 서비스를 사용할 수 있는 무료 크레딧을 신청했습니다. 크레딧을 적용하면 'Google Cloud Platform 체험판 결제 계정'이라는 새 무료 결제 계정이 생성됩니다. 크레딧이 적용되었는지 확인하려면 Cloud Shell 편집기에서 다음 단계를 따르세요.

curl -s https://raw.githubusercontent.com/haren-bh/gcpbillingactivate/main/activate.py | python3

성공하면 아래와 같은 결과가 표시됩니다. '프로젝트가 연결되었습니다'가 표시되면 결제 계정이 올바르게 설정된 것입니다. 위 단계를 실행하면 계정이 연결되어 있는지 확인할 수 있으며, 연결되어 있지 않은 경우 연결됩니다. 프로젝트를 선택하지 않은 경우 프로젝트를 선택하라는 메시지가 표시되거나 프로젝트 설정의 단계에 따라 미리 선택할 수 있습니다.

그림 3: 연결된 결제 계정 확인

6. Google Antigravity 소개

Google Antigravity는 Google DeepMind에서 개발한 AI 우선 소프트웨어 개발 도구입니다. Google Antigravity는 최첨단 AI와 오랜 기간 축적된 소프트웨어 개발 노하우를 활용하여 개발자에게 원활하고 매끄러운 AI 기반 개발 환경을 제공합니다.

Google Antigravity의 주요 기능은 다음과 같습니다.

아래 그림은 Google Antigravity의 기본 요소를 보여줍니다.

1. 👉브라우저를 열고 브라우저의 다양한 부분을 살펴봅니다.

그림 4: Google Antigravity의 기본 요소, 세부정보는 표 1 참고

표 1: Google Antigravity의 기본 구성요소 세부정보

Component Index	Component Name	Function
1	Agent Manager	Provide access to your agent manager where you can manage all your agents
2	Toggle Agent Pane	Toggles and untoggles your agent pane
3	New Session	Starts a new Agent Conversation while keeping old ones separately.
4	Past Conversations	Retrieve previous conversations
5	Agent Pane	The agent pane where you can have conversation with the AI agent
6	Explorer	File explorer

1. 내장된 Gemini 3 및 Nanobanana 모델: Google Antigravity를 사용하면 Gemini 3, Nanobanana와 같은 최신 Google 플래그십 모델을 사용할 수 있습니다. 이러한 모델과 함께 Claude와 같은 서드 파티 모델을 사용할 수도 있습니다.

그림 5: Google Antigravity 2에서는 다양한 모델을 사용할 수 있습니다. 에이전트 기반 코딩: Antigravity는 개발자의 생산성을 방해하지 않으면서도 생산성을 유지할 수 있는 네이티브 에이전트 기반 코딩 환경을 제공합니다.

1. 계획 및 완전한 사용자 제어: 에이전트는 사용자의 입력을 받아 작업을 실행하기 전에 승인을 요청하는 계획으로 변환합니다. 이렇게 하면 사용자가 작업을 실행하기 전에 언제든지 에이전트의 방향을 변경할 수 있습니다.
2. 사용자 피드백:에이전트 실행 중에 사용자에게 에이전트에 추가 안내를 제공해야 하는 경우 사용자에게 에이전트에 피드백을 제공할 수 있습니다.
3. 여러 에이전트: 여러 에이전트를 생성하여 다양한 작업을 동시에 처리할 수 있습니다. 예를 들어 에이전트 A는 인증 로직을 리팩터링하고 에이전트 B는 새 API의 단위 테스트를 작성하며 에이전트 C는 백그라운드에서 라이브러리를 조사할 수 있습니다.
4. 편집기, 터미널, 브라우저 전반의 에이전트: Google Antigravity 에이전트는 여러 표시 경로에서 작동합니다.
5. 편집자: Google Antigravity 에이전트가 코드를 작성하고 편집기에 작성된 코드를 표시합니다.
6. 터미널: Google Antigravity 에이전트가 일부 명령어를 실행하기 위해 터미널에 액세스해야 할 수 있습니다. 필요한 경우 상담사가 명령어를 실행해 줄 수 있습니다.
7. 브라우저: 상담사는 브라우저를 사용하여 문제를 해결할 수도 있습니다. 웹 애플리케이션을 테스트해야 하는 경우 특히 유용합니다. 에이전트가 웹브라우저에서 애플리케이션을 실행하고 테스트하고 디버그할 수 있습니다.

7. AI 사양 기반 개발 소개

사양 기반 개발은 구조화된 사양과 AI 에이전트를 개발 수명 주기의 핵심에 배치하는 새로운 소프트웨어 엔지니어링 패러다임입니다. 기본 AI 코딩에서 흔히 사용되는 '프롬프트 및 패치' (시행착오) 접근 방식과 달리 SDD는 세심한 요구사항 수집, 시스템/아키텍처 설계, 테스트 계획을 우선시합니다. 폭포 모델의 설계 단계의 엄격함을 차용하지만 자동화를 통해 최신 애자일 반복 루프에 통합합니다. 이 프로세스에서는 사전에 세심한 계획과 문서화가 필요하지만, AI 에이전트가 빠른 구현과 테스트를 지원하므로 실제로 반복적인 프로세스입니다. 이를 통해 문서를 개선하는 데 사용할 수 있는 빠른 의견을 받을 수 있습니다.

핵심 철학

이 모델에서 인간 엔지니어는 '코드 작성자'에서 '시스템 설계자'로 전환됩니다. 주요한 인간의 책임은 문제와 해결책을 충실하게 설명하는 것입니다. 이 상세한 출력은 AI 에이전트가 코드베이스를 생성, 검증, 개선하는 데 사용하는 단일 소스 저장소 (SSOT) 역할을 합니다.

SDD 수명 주기

이 프로세스에는 다음 구성요소가 있습니다. 1~3단계는 사람에 초점을 맞추고 4~5단계는 AI 에이전트에 초점을 맞춥니다. 이는 사이클이 끝난 후 피드백을 사용하여 사양을 개선할 수 있는 반복적인 프로세스입니다.

1. 요구사항 수집: 비즈니스 로직, 사용자 요구사항, 시스템 제약 조건의 명확한 식별
2. 아키텍처 설계: 시스템 구조, 데이터 모델, 통합 지점을 정의합니다.
3. 시스템 및 테스트 사양: 시스템이 무엇을 하는지, 어떻게 검증할지 정의하는 기계 판독 가능 (또는 고도로 구조화된) 문서를 만듭니다.
4. 자동 코드 생성: AI 에이전트가 사양을 사용하여 프로덕션에 사용할 수 있는 코드를 생성합니다.
5. 테스트 및 검증: 자동화된 모음은 테스트 사양에 대해 생성된 코드를 검증합니다.

주요 운영 원칙

1. 설계-구현 루프

1~5단계는 선형 경로가 아니라 지속적인 피드백 루프입니다. 코드 생성 (4단계)과 테스트 (5단계)는 대부분 자동화되어 있으므로 엔지니어링팀은 대부분의 대역폭을 처음 세 단계로 전환할 수 있습니다. 버그가 발견되거나 기능이 변경되면 엔지니어는 코드가 아닌 사양을 업데이트하고 루프를 다시 트리거합니다.

2. 모듈 세부사항

시스템 무결성을 유지하려면 모놀리식 블록이 아닌 세부 모듈에 SDD를 적용해야 합니다.

• 격리: 특정 모듈의 유효성 검사에 실패하면 해당 모듈만 다시 지정하고 다시 생성하면 됩니다.
• 확장성: 작고 명확하게 정의된 모듈은 AI '환각'을 방지하고 AI 에이전트의 컨텍스트 창이 집중되고 정확하게 유지되도록 합니다.

3. 품질관리

이 패러다임에서 시스템 사양은 청사진이고 테스트 사양은 심판입니다. 테스트 사양을 사용하면 생성된 코드가 항상 미리 정해진 품질 요구사항을 준수합니다. 전체 프로세스를 기존 CICD 파이프라인에 원활하게 통합하여 전체 시스템 상태가 품질 요구사항을 충족하는지 확인할 수 있습니다.

이 실습에서는 Google Antigravity를 사용하여 사양 기반 개발의 기본사항을 살펴봅니다.

8. Google Antigravity로 웹 애플리케이션 개발

이 실습에서는 간단한 사진 갤러리 애플리케이션을 만듭니다. 이미지 생성 모델인 Nanobanana는 Google Antigravity 내에 구축되어 있습니다. Nanobanana를 사용하여 필요한 이미지를 만듭니다.

웹브라우저 설정

웹브라우저는 앱의 자동 테스트에 사용됩니다. 아래 단계에서는 Antigravity가 애플리케이션을 자동으로 테스트할 수 있도록 브라우저를 설정합니다.

1. 👉오른쪽 상단의 설정 버튼(톱니바퀴 아이콘)을 클릭하고 'Open Antigravity User Settings'(Antigravity 사용자 설정 열기)을 선택합니다.
2. 👉왼쪽 창에서 '에이전트'를 클릭하고 '아티팩트' 섹션에서 '정책 검토'를 선택한 후 '항상 진행'을 선택합니다.
3. 👉왼쪽 창에서 브라우저를 클릭하고 브라우저 도구 사용이 사용 설정되어 있는지 확인합니다.

Google Antigravity로 애플리케이션 만들기

1. 👉Google Antigravity 아이콘을 클릭하여 Google Antigravity를 엽니다.
2. 👉개인 폴더 폴더에 '갤러리'라는 폴더를 만듭니다(예: 데스크톱
3. 👉Antigravity에서 폴더 열기를 누르고 갤러리 폴더를 선택합니다. 그러면 갤러리 폴더에 새 워크스페이스가 열립니다.
4. 👉아직 에이전트 창이 열려 있지 않은 경우 '에이전트 창 전환' 버튼을 클릭하여 엽니다. 그림 4, 버튼 2번을 참고하세요.
5. 👉에이전트 창에 안내를 입력하여 코딩을 시작할 수 있습니다. 안내를 최대한 명확하게 작성하는 것이 매우 중요합니다. 에이전트 창에 다음을 입력합니다.

    **English Version:**
   

Create a photo granary with following specs.

1. Visual Design & Layout
Title: The gallery must prominently display the title "My photo gallery" at the top.
Modern Grid: Images will be arranged in a responsive grid that spans the full width of the browser.
Clean Aesthetic: Use a minimalist design with consistent spacing (margins/padding) between photos and no heavy borders or shadows.
Image Scaling: Photos will automatically adjust their size to fit any screen (mobile to desktop) while maintaining their focus using modern CSS cropping techniques.

2. Photo Content
Quantity: The page will feature a total of 20 photos. 
Nature Themes: The collection will include a diverse range of nature photography:
Landscape: Mountains, deserts, and forests.
Water: Waterfalls, oceans, and lakes.
Atmosphere: Northern lights, sunsets, and starry skies.
Macro: Close-ups of flowers, leaves, and moss.
Generate all the needed photos

3. Core Functionality (The "Lightroom" Effect)
Full-Screen View: Clicking any photo triggers a "Lightbox" mode where the background dims and the selected image appears in high resolution at the center of the screen.
Manual Navigation:
Right Arrow: Swaps the current view to the next image.
Left Arrow: Swaps the current view to the previous image.
Infinite Loop: Navigation is continuous; moving "next" from the 20th photo returns the user to the 1st photo.
Exit Strategy: Users can exit the full-screen view by clicking a "Close" button or tapping the dimmed area outside the image.

4. Technical Constraints (Strict)
Vanilla JavaScript Only: Absolutely no external libraries or frameworks (like jQuery, React, or Bootstrap). All logic must be written in raw, standard JavaScript.
Native HTML & CSS: Use only the built-in capabilities of modern web browsers to handle the layout and animations.
Zero Dependencies: The app should function perfectly as a standalone project with no need to download or link to outside scripts.

5. Perform the following tests
Open the App in a web browser
Click on the images and see the image opens in the lightbox
Check the navigation

일본어 버전:

以下の仕様でフォトギャラリーを作成してください。
1. ビジュアルデザインとレイアウト
タイトル: ページ上部に「My photo gallery」というタイトルを大きく表示すること。
モダンなグリッド: ブラウザの全幅に広がる、レスポンシブなグリッドレイアウトで画像を配置すること。
クリーンな審美性: ミニマリストなデザインを採用し、写真間の余白（マージン/パディング）を一定に保つこと。重い枠線やドロップシャドウは使用しない。
画像のスケーリング: モダンなCSSのトリミング技術（object-fitなど）を使用し、モバイルからデスクトップまで、フォーカスを維持したまま画面サイズに合わせて自動調整されるようにすること。

2. 写真の内容
枚数: 合計20枚の写真を掲載。
自然のテーマ: 多様な自然写真のコレクションにすること。
風景: 山、砂漠、森林。
水: 滝、海、湖。
空気・雰囲気: オーロラ、夕焼け、星空。
マクロ: 花、葉、苔の接写。
画像生成: 2枚の画像を生成し、それらを繰り返して20箇所に配置すること。

3. コア機能（ライトボックス・エフェクト）
全画面表示: 写真をクリックすると「ライトボックス」モードが起動し、背景が暗転して選択された画像が画面中央に高解像度で表示されること。
手動ナビゲーション:
右矢印: 次の画像に切り替え。
左矢印: 前の画像に切り替え。
無限ループ: ナビゲーションは連続的であること。20枚目の写真で「次へ」を押すと1枚目に戻る仕様。
終了方法: 「閉じる」ボタンをクリックするか、画像外の暗転したエリアをタップすることで全画面表示を終了できること。

4. 技術的制約（厳守）
純正JavaScript限定: 外部ライブラリやフレームワーク（jQuery、React、Bootstrapなど）は一切使用禁止。すべてのロジックは標準のJavaScript（生コード）で記述すること。
ネイティブのHTML & CSS: レイアウトやアニメーションには、モダンブラウザの標準機能のみを使用すること。
依存関係ゼロ: 外部スクリプトのダウンロードやリンクを必要とせず、単体で完全に動作するプロジェクトにすること。

5. 以下のテストを実行します
ウェブブラウザでアプリを開きます
画像をクリックすると、ライトボックスで画像が開きます
ナビゲーションを確認します

6. 👉실행 버튼을 클릭합니다. 에이전트를 실행하면 아래와 같이 실행 계획이 표시됩니다.

그림 5: Antigravity 에이전트가 구현 계획을 보여줍니다.

7. 👉확인하라는 메시지가 표시되면 아래와 같이 확인하세요. Antigravity는 Nanobanana와 선택한 LLM 모델을 자동으로 사용하여 작업을 실행합니다.

그림 6: Antigravity가 명령어를 실행하려고 합니다. 실행을 눌러 실행을 허용합니다.

그림 7: 메시지가 표시되면 모두 수락을 누릅니다.

8. 👉코드가 생성되면 Antigravity가 브라우저를 열고 테스트를 시작합니다. 테스트 후 테스트 결과를 제공해야 합니다. 그림 8: Antigravity에 테스트 결과가 표시됩니다.
9. 👉메시지가 표시되면 '모두 수락'을 눌러 에이전트 창에 생성된 코드를 모두 저장합니다.
10. 👉Antigravity의 탐색기 창에 새로 생성된 코드가 표시됩니다. 그림 9: 최종 코드
11. 👉애플리케이션을 테스트하려면 index.html을 마우스 오른쪽 버튼으로 클릭하고 파일 경로를 가져와 웹브라우저 URL 표시줄에 붙여넣습니다.

그림 10: 앱을 테스트하려면 웹브라우저에서 index.html 파일의 경로를 복사하면 됩니다.

9. 배포 환경 설정

1. 👉Google Cloud 프로젝트 ID 가져오기: https://console.cloud.google.com으로 이동합니다.
2. 👉왼쪽 상단을 클릭하고 프로젝트 ID를 어딘가에 복사합니다. 다음 단계에서 이 ID를 사용합니다. 그림 11: 프로젝트 ID를 복사하여 나중에 참조할 수 있도록 어딘가에 보관합니다.
3. 👉Antigravity에서 메뉴에서 터미널->새 터미널을 클릭하여 터미널을 엽니다.
4. 👉Windows와 Mac/Linux의 환경 변수를 설정해야 합니다. 'YOUR CLOUD PROJECT'를 2단계에서 기록한 프로젝트로 바꿉니다. Windows Powershell 사용자 참고사항: 관리자 모드에서 Powershell 열기

#This is only for Powershell users.

Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser

#For Windows (Powershell) follow the following steps.
$env:GOOGLE_CLOUD_PROJECT="YOUR CLOUD PROJECT"
$env:GOOGLE_CLOUD_LOCATION="us-central1"

#For Windows Command Prompt  follow the following steps.
set GOOGLE_CLOUD_PROJECT="YOUR CLOUD PROJECT"
set GOOGLE_CLOUD_LOCATION="us-central1"


#for Mac/Linux follow the following steps.
export GOOGLE_CLOUD_PROJECT="YOUR CLOUD PROJECT"
export GOOGLE_CLOUD_LOCATION="us-central1"

5. 👉메시지가 표시되면 콘솔에 로그인하고 브라우저에서 Google Cloud에 로그인합니다.

gcloud auth login
gcloud auth application-default login
gcloud config set project YOUR CLOUD PROJECT

그림 12: 인증 실행

6. 👉Cloud Run MCP 서버를 설치합니다. Antigravity 창의 오른쪽 상단에서 '...'을 클릭합니다. 'MCP 서버' 옵션이 표시되면 클릭합니다. MCP 서버는 에이전트가 외부 데이터와 도구에 액세스할 수 있도록 지원하는 에이전트의 확장 프로그램과 같습니다.
7. 👉검색창에 'Cloud Run'을 입력하고 'Cloud Run'을 클릭합니다. 그림 13: Cloud Run MCP 서버
8. 👉MCP 서버 제목 옆에 있는 뒤로 화살표 키를 눌러 상담사 창으로 돌아갑니다. 이제 Google Cloud Run과 상호작용할 수 있습니다. 에이전트 창에 다음을 입력합니다. 이렇게 하면 Cloud Run MCP 서버가 자동으로 사용되고 Cloud Run에서 실행되는 서비스 목록이 표시됩니다.

Find me the list of services running in Cloud Run.

9. 👉다음 명령어를 사용하여 앱을 배포합니다. 자연어를 사용하여 간단하게 배포할 수 있습니다. Antigravity는 MCP 서버를 사용하여 자동으로 배포합니다.

Deploy this gallery static web application to cloud run with service name "photogallery". Use nginx and assume nginx will use port 80

10. 👉에이전트가 앱이 배포된 위치를 표시해야 합니다. 예: https://photogallery-85469421903.us-central1.run.app Cloud MCP 서버를 사용하면 웹 앱을 Cloud Run에 매우 간단하게 배포할 수 있습니다.

10. 삭제

이제 방금 만든 항목을 정리해 보겠습니다.

1. 👉방금 만든 Cloud Run 앱을 삭제합니다. Cloud Run에 액세스하여 Cloud Run으로 이동합니다 . 이전 단계에서 만든 앱이 표시됩니다. 앱 옆의 체크박스를 선택하고 삭제 버튼을 클릭합니다.

그림 38: Cloud Run 앱 삭제

11. 결론

축하합니다. 사양 기반 개발 관행에 따라 Google Antigravity를 사용하여 앱을 성공적으로 만들었습니다.또한 Cloud Run에 애플리케이션을 배포하는 방법도 배웠습니다. 이는 최신 클라우드 네이티브 애플리케이션의 핵심 수명 주기를 다루는 중요한 성과로, 자체 복잡한 시스템을 배포하기 위한 견고한 기반을 제공합니다.

요약

이 실습에서는 다음 작업을 수행하는 방법을 배웠습니다.

• Google Antigravity를 사용하여 멀티 에이전트 애플리케이션 만들기
• Cloud Run에 애플리케이션 배포

유용한 리소스

• 공식 Google Antigravity 문서
• Cloud Run