본문 바로가기

프로젝트 소개

학습 목표

  • 앞에서 배운 기능들을 실제 프로젝트에 적용할 수 있다
  • Planning 모드로 체계적으로 프로젝트를 진행할 수 있다
  • Agent와 협업하여 완성된 웹 애플리케이션을 만들 수 있다

1. 프로젝트 개요

지금까지 배운 Anti-Gravity의 기능들을 활용하여 Todo 웹 애플리케이션을 만들어봅니다.

1.1 활용할 기능

챕터기능이 프로젝트에서의 활용
Chapter 4Tab, Command코드 자동완성, 터미널 명령
Chapter 5Browser웹 애플리케이션 테스트
Chapter 6Agent 모드Planning 모드로 체계적 개발
Chapter 7ArtifactsTask List, Implementation Plan 활용
Chapter 8워크스페이스프로젝트 폴더 관리
Chapter 9프롬프트, 코드 리뷰, 베스트 프랙티스효과적인 요청, 변경 확인, 작업 검토 습관

1.2 완성될 Todo 앱 기능

  • 할 일 추가
  • 할 일 완료 표시
  • 할 일 삭제
  • 로컬 스토리지에 데이터 저장 (새로고침해도 유지)

2. 필요한 준비

  • Anti-Gravity 설치 완료
  • Chrome Extension 설치 완료
  • 프로젝트를 저장할 폴더 준비

💡 코딩 경험이 없어도 괜찮아요
HTML, CSS, JavaScript를 몰라도 Agent가 코드를 작성해줍니다. 이 실습에서는 Agent에게 요청하는 방법을 배우는 것이 핵심입니다.

3. 프로젝트 구조

완성되면 다음과 같은 파일 구조가 만들어집니다.

todo-app/
├── index.html    ← 화면 구조
├── style.css     ← 디자인
└── script.js     ← 기능

4. 1단계: 워크스페이스 준비

4.1 프로젝트 폴더 만들기

  1. 컴퓨터에서 프로젝트를 저장할 위치 선택
  2. 새 폴더 생성: todo-app

4.2 워크스페이스로 열기

  1. Anti-Gravity 실행
  2. Agent Manager 열기 (Cmd/Ctrl + E)
  3. 왼쪽 사이드바에서 "+" 버튼 클릭
  4. 방금 만든 todo-app 폴더 선택

워크스페이스 열기 그림 10-1: 워크스페이스로 폴더 열기

4.3 Editor로 전환

워크스페이스가 열리면 다음과 같이 진행해주세요.

  1. Cmd/Ctrl + E로 Editor 뷰 전환
  2. 왼쪽에 빈 파일 탐색기 확인
  3. 오른쪽에 Agent Side Panel 확인

5. 2단계: Planning 모드로 대화 시작

체계적인 프로젝트 진행을 위해 Planning 모드를 사용합니다.

5.1 모드 선택

  1. Agent Side Panel에서 새 대화 시작
  2. 모드 선택에서 Planning 선택

왜 Planning 모드인가요?

  • Task List로 진행 상황 추적
  • Implementation Plan으로 계획 검토
  • Walkthrough로 결과 요약 확인

5.2 설정 확인

Planning 모드의 장점을 최대한 활용하려면

  1. Settings 열기
  2. Agent 탭 선택
  3. Artifact Review Policy가 "Request Review"인지 확인
옵션설명
Request Review구현 계획 생성 시 승인 대기 (이 실습에서 사용)
Always Proceed승인 없이 바로 진행

"Request Review"를 선택하면 Agent가 구현 계획을 보여주고 승인을 기다립니다.

6. 프로젝트 진행 흐름

이 실전 프로젝트는 다음 순서로 진행됩니다.

1. 전체 프로젝트 요청
    ↓
2. Task List 확인
    ↓
3. Implementation Plan 검토 및 승인
    ↓
4. Agent가 코드 작성
    ↓
5. Review Changes로 코드 확인
    ↓
6. Browser로 테스트
    ↓
7. 필요시 수정 요청

7. 시작하기 전 체크리스트

다음을 확인하고 다음 단계로 넘어가세요.

  • Anti-Gravity가 실행되어 있다
  • todo-app 폴더가 워크스페이스로 열려 있다
  • Editor 뷰에서 Agent Side Panel이 보인다
  • Planning 모드가 선택되어 있다
  • Artifact Review Policy가 "Request Review"이다

8. 다음 단계

준비가 완료되었으면 Agent에게 프로젝트를 요청해봅시다.

Agent에게 프로젝트 요청하기