Google Antigravity로 빌드

1. 소개

Google Antigravity (이 문서의 나머지 부분에서는 Antigravity라고 함)는 Google의 에이전트 기반 IDE입니다. Antigravity 시작하기 Codelab에서 Antigravity의 기본사항을 알아볼 수 있습니다. 이 Codelab에서는 Antigravity를 사용하여 실제 애플리케이션을 빌드합니다. 간단한 웹 조사에서 풀 스택 애플리케이션과 엔터프라이즈급 단위 테스트 생성으로 이동합니다.

기본 요건:

Google Antigravity가 설치되고 구성되었습니다.
Google Antigravity에 대한 기본적인 이해 Google Antigravity 시작하기 Codelab을 완료하는 것이 좋습니다.

2. 사용 사례 정보

Antigravity에 대한 기본적인 이해가 있으므로 몇 가지 사용 사례를 살펴보겠습니다. Antigravity는 에이전트 중심 플랫폼입니다. 즉, 대부분의 경우 Google은 에이전트에게 지시를 내리고 에이전트는 자체적으로 작업을 수행하고, 필요한 경우 권한을 요청하고, 아티팩트를 생성한 후 작업이 완료되면 Google에 알립니다. 따라서 다음 사용 사례에서 에이전트 대화의 모든 출력을 생성할 수는 없습니다. 안내와 예상 결과의 필수 스크린샷을 공유해 드리지만 결과는 약간 다를 수 있습니다.

여기에서는 외부 사이트를 사용해 몇 가지 작업을 자동화하는 것부터 프로젝트의 단위 테스트 사례를 생성하고 검증하는 것, 전체 웹사이트 개발에 이르기까지 다양한 사용 사례를 다룹니다. 안내를 시작하겠습니다.

3. 뉴스 하이라이트

간단한 사용 사례이지만 웹브라우저를 사용하여 웹사이트를 방문하고, 정보를 추출하고, 일부 작업을 실행한 다음 사용자에게 데이터를 반환하는 기반이 될 수 있습니다.

이 경우 Google 뉴스 사이트를 방문하여 정보를 추출합니다. 하지만 원하는 사이트를 쉽게 실험해 보고 결과를 확인할 수 있습니다.

아래와 같이 Agent Manager에 있고 Playground를 선택했는지 확인합니다.

그런 다음 다음 안내를 제공합니다.

이렇게 하면 에이전트 프로세스가 시작되고 브라우저를 실행해야 하는지 등이 결정됩니다. 사고 과정에 주의를 기울여 에이전트가 어떻게 작업을 수행하는지 확인하세요. 모든 것이 잘 진행되면 아래와 같이 Antigravity 브라우저가 실행되고 사이트를 방문합니다. 사이트 주변의 파란색 테두리는 에이전트가 이제 브라우저를 제어하고 사이트를 탐색하여 정보를 가져오고 있음을 보여줍니다.

작업이 완료되면 아래와 같이 아티팩트가 생성되는 것도 확인할 수 있습니다.

에이전트의 샘플 실행은 아래와 같습니다.

왼쪽에 생각 과정이 표시됩니다. 포인트를 스크롤하여 재생 및 기타 데이터를 볼 수도 있습니다.

시도해 볼 만한 작업

이 내용을 이해한 후에는 에이전트가 방문하여 데이터를 가져오거나 요약할 수 있는 웹사이트를 선택합니다. 대시보드와 차트가 있는 웹사이트를 고려하여 몇 가지 값을 선택해 달라고 요청합니다.
다음 프롬프트를 사용해 보세요. Visit https://docs.cloud.google.com/release-notes and get me a summary of the release notes, categorized by product.

4. Python + Flask로 동적 웹사이트 생성

이제 완전한 웹 애플리케이션을 생성해 보겠습니다. 만들 웹 애플리케이션은 하루 종일 여러 연사의 강연이 진행되는 1일 기술 행사에 관한 정보를 제공하는 사이트입니다.

다시 한번 Agent Manager에 있고 Playground를 선택했는지 확인합니다.

다음 프롬프트를 입력합니다.

I would like to generate a website that is a 1-day technical conference informational site.

The website should have the following functionality:
        1. A home page that shows the current date, location, schedule and time table.
        2. The 1-day event is a list of 8 talks in total.
        3. Each talk has 1 or 2 max. speakers. 
        4. A talk has an ID, Title, Speakers, Category (1 or 2), Description and time of the talk.
        5. Each speaker has a First Name, Last Name and LinkedIn url.
        6. Allow for users to search by category, speaker, title.
        7. Give a lunch break of 60 minutes.
        8. Use dummy data for events and speakers, come up with a schedule, the event is about Google Cloud Technologies.
        9. Tech Stack: Python and Flask framework on server side. Front-end is basic HTML, CSS and JavaScript. 
        10. Test out the site on your own for all functionality and provide a detailed README on how to setup, run and make any further changes. 
11. Launch the web application for me to review.

위의 프롬프트를 입력하여 대화를 시작할 수 있습니다.

에이전트가 작업을 진행하면서 아티팩트 생성을 진행합니다.

작업 아티팩트
구현 아티팩트
둘러보기 아티팩트

아래에 제공된 태스크 아티팩트는 상담사가 주어진 태스크에 따라 실행해야 한다고 해독한 초기 태스크 시퀀스입니다. 실행의 샘플 스크린샷은 아래에 나와 있습니다.

그런 다음 구현 계획 아티팩트를 클릭합니다. 샘플 스크린샷은 아래에 나와 있습니다.

마지막으로 Walkthrough 아티팩트가 있습니다. 여기에는 아래와 같이 에이전트가 실행한 모든 작업이 포함됩니다.

서버가 시작되었고 URL이 제공되었습니다. URL을 클릭하면 애플리케이션이 표시됩니다. 샘플 스크린샷은 아래에 나와 있습니다.

편집기로 전환하면 Python Flask 애플리케이션이 생성된 폴더가 화면에 표시됩니다. 오른쪽에 Agent mode이 태그되어 있으며 여기에서도 대화를 이어갈 수 있습니다.

이제 이벤트에 몇 가지 강연을 더 추가하고 싶다고 가정해 보겠습니다. 편집기와 에이전트 패널에 머물면서 Add two more talks to the schedule와 같은 명령어를 입력할 수 있습니다.

이렇게 하면 에이전트가 요구사항을 분석하고, 작업과 구현 계획을 업데이트한 다음, 업데이트된 기능을 검증합니다. 샘플 대화는 다음과 같습니다.

원하는 경우 에이전트 관리자로 다시 전환할 수 있습니다. 이 프로세스를 통해 에이전트 관리자에서 편집자로 전환하고 그에 따라 변경하는 등의 프로세스를 이해할 수 있습니다.

시도해 볼 만한 작업

애플리케이션에 원하는 기능을 추가합니다. 세부정보를 에이전트에게 제공하고, 먼저 작업 목록을 수정한 다음 구현 계획 등을 수정하여 작업을 수행하는 방식을 확인합니다.
상담사에게 애플리케이션에 대한 리드미 또는 추가 문서를 생성해 달라고 요청합니다.

5. 간단한 생산성 앱 생성

이제 간단한 포모도로 타이머 웹 애플리케이션을 생성하겠습니다.

Agent Manager에 있고 Playground를 선택했는지 확인합니다. 다음 프롬프트를 입력합니다.

Create a productivity app that features a Pomodoro timer. Give a calm and aesthetic look to the application.

할 일 목록과 구현 계획을 만든 다음 이를 진행하는 방식을 확인하세요. 흐름에 계속 주의를 기울이세요. 검토를 요청하는 상황이 있을 수 있습니다. 샘플 실행은 아래와 같습니다.

이 경우 Antigravity 브라우저도 실행하고 자체 테스트를 실행한 후 테스트가 성공했는지 확인해야 합니다. 이 도구에서 생성한 항목 중 하나는 인증 동영상이 포함된 미디어 아티팩트입니다. 테스트한 내용을 확인하는 데 유용합니다. 또한 스타일이 적용되지 않았고 스타일을 변경할 수 있었기 때문에 스타일 변경을 제안했습니다.

최종 앱은 아래와 같으며 꽤 괜찮아 보입니다.

애플리케이션에 멋진 타이머 이미지를 추가할 수 있습니다. 아래와 같이 후속 안내를 제공하기만 하면 됩니다.

Add an image to the application that displays a timer.

이로 인해 에이전트가 태스크 아티팩트에 새 태스크를 추가했습니다.

그런 다음 작업을 진행하면서 이미지를 생성했습니다.

마지막으로 앱에 요청한 이미지가 표시됩니다.

시도해 볼 만한 작업

애플리케이션의 모래시계 아이콘 배경이 투명하지 않습니다. 에이전트에게 투명하게 만들어 달라고 요청해 보세요.
생성하려는 애플리케이션의 변형을 몇 가지 시도해 보세요. 스타일, 이미지를 사용해 보고 변경을 요청하는 등 다양한 시도를 해 보세요.

6. 단위 테스트 생성, 모의 스텁, 테스트 검증

여기서 시도할 마지막 사용 사례는 특정 코드 파일의 단위 테스트를 생성하고 에이전트가 테스트를 실행하고 검증하는 것입니다.

이를 위해 아래와 같이 단일 Python 파일이 있는 작업공간을 사용합니다.

from typing import Dict

# --- Custom Exceptions ---
class InventoryShortageError(Exception):
    """Raised when there is not enough item stock."""
    pass

class PaymentFailedError(Exception):
    """Raised when the payment gateway rejects the transaction."""
    pass

class InvalidOrderError(Exception):
    """Raised when the order violates business rules."""
    pass

# --- External Service Interfaces (To be Mocked) ---
class InventoryService:
    def get_stock(self, product_id: str) -> int:
        """Connects to DB to check stock."""
        raise NotImplementedError("Real connection required")

    def decrement_stock(self, product_id: str, quantity: int):
        """Connects to DB to reduce stock."""
        raise NotImplementedError("Real connection required")

class PaymentGateway:
    def charge(self, amount: float, currency: str) -> bool:
        """Connects to Stripe/PayPal."""
        raise NotImplementedError("Real connection required")

# --- Main Business Logic ---
class Order:
    def __init__(self, 
                 inventory_service: InventoryService, 
                 payment_gateway: PaymentGateway,
                 customer_email: str,
                 is_vip: bool = False):
        
        self.inventory = inventory_service
        self.payment = payment_gateway
        self.customer_email = customer_email
        self.is_vip = is_vip
        self.items: Dict[str, Dict] = {} # {product_id: {'price': float, 'qty': int}}
        self.is_paid = False
        self.status = "DRAFT"

    def add_item(self, product_id: str, price: float, quantity: int = 1):
        """Adds items to the cart. Rejects invalid prices or quantities."""
        if price < 0:
            raise ValueError("Price cannot be negative")
        if quantity <= 0:
            raise ValueError("Quantity must be greater than zero")

        if product_id in self.items:
            self.items[product_id]['qty'] += quantity
        else:
            self.items[product_id] = {'price': price, 'qty': quantity}

    def remove_item(self, product_id: str):
        """Removes an item entirely from the cart."""
        if product_id in self.items:
            del self.items[product_id]

    @property
    def total_price(self) -> float:
        """Calculates raw total before discounts."""
        return sum(item['price'] * item['qty'] for item in self.items.values())

    def apply_discount(self) -> float:
        """
        Applies business logic:
        1. VIPs get flat 20% off.
        2. Regulars get 10% off if total > 100.
        3. No discount otherwise.
        """
        total = self.total_price
        
        if self.is_vip:
            return round(total * 0.8, 2)
        elif total > 100:
            return round(total * 0.9, 2)
        
        return round(total, 2)

    def checkout(self):
        """
        Orchestrates the checkout process:
        1. Validates cart is not empty.
        2. Checks stock for all items.
        3. Calculates final price.
        4. Charges payment.
        5. Updates inventory.
        """
        if not self.items:
            raise InvalidOrderError("Cannot checkout an empty cart")

        # 1. Check Inventory Logic
        for product_id, data in self.items.items():
            available_stock = self.inventory.get_stock(product_id)
            if available_stock < data['qty']:
                raise InventoryShortageError(f"Not enough stock for {product_id}")

        # 2. Calculate Final Price
        final_amount = self.apply_discount()

        # 3. Process Payment
        try:
            success = self.payment.charge(final_amount, "USD")
            if not success:
                raise PaymentFailedError("Transaction declined by gateway")
        except Exception as e:
            # Catching generic network errors from the gateway
            raise PaymentFailedError(f"Payment gateway error: {str(e)}")

        # 4. Decrement Stock (Only occurs if payment succeeded)
        for product_id, data in self.items.items():
            self.inventory.decrement_stock(product_id, data['qty'])

        self.is_paid = True
        self.status = "COMPLETED"
        
        return {"status": "success", "charged_amount": final_amount}