Google Antigravity로 빌드

1. 소개

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

기본 요건:

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

2. 사용 사례 정보

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

다룰 사용 사례는 외부 사이트에서 몇 가지 작업을 자동화하는 것부터 프로젝트의 단위 테스트 사례를 생성하고 확인하는 것, 전체 웹사이트 개발에 이르기까지 다양합니다. 시작하기

3. 뉴스 하이라이트

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

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

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

그런 다음 다음 안내를 제공합니다. "news.google.com을 방문하여 현재 하이라이트를 가져와 주세요."

그러면 에이전트 프로세스가 시작되고 브라우저를 실행해야 하는지 등이 결정됩니다. 에이전트의 사고 과정을 주의 깊게 살펴보고 에이전트가 작업을 수행하는 방법을 확인해야 합니다. 모두 잘 진행되면 아래와 같이 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를 선택했는지 확인합니다. 새롭게 시작하려면 새 Playground 채팅을 시작하고 Planning 모드를 선택하여 에이전트가 실행하기 전에 계획을 세우도록 합니다.

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

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.

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

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

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

아래에 제공된 작업 아티팩트는 에이전트가 제공된 작업에 따라 수행해야 한다고 판단한 작업의 초기 시퀀스입니다. 아래는 실행의 샘플 스크린샷입니다.

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

마지막으로 둘러보기 아티팩트가 있습니다. 아래와 같이 에이전트가 수행한 모든 작업이 포함되어 있습니다.

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

편집기로 전환하면 Python Flask 애플리케이션이 생성되는 폴더가 화면에 포함되어 있습니다. 또한 오른쪽에 Agent mode 가 태그되어 있으며 여기에서도 대화를 계속할 수 있습니다.

이제 이벤트에 강연을 더 추가해 보겠습니다. 편집기와 에이전트 패널에서 Add two more talks to the schedule과 같은 안내를 제공할 수 있습니다.

그러면 에이전트가 요구사항을 분석하고, 작업을 업데이트한 후 구현 계획을 업데이트하고, 업데이트된 기능도 검증합니다. 아래는 샘플 대화입니다.

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

시도해 볼 만한 작업

애플리케이션에 원하는 기능을 추가합니다. 에이전트에 세부정보를 제공하고 에이전트가 먼저 작업 목록을 수정한 후 구현 계획 등을 수정하여 작업을 수행하는 방법을 확인합니다.
에이전트에게 애플리케이션의 README 또는 추가 문서를 생성하도록 요청합니다.

5. 간단한 생산성 앱 생성

이제 간단한 Pomodoro 타이머 웹 애플리케이션을 생성해 보겠습니다.

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}