본문 바로가기

  • 교재 소개

  • 10장 실전 프로젝트

  • 10.2 Agent에게 프로젝트 요청하기

Agent에게 프로젝트 요청하기

학습 목표

  • Agent에게 전체 프로젝트를 요청할 수 있다
  • Task List와 Implementation Plan을 확인할 수 있다
  • 계획을 검토하고 승인할 수 있다

1. 프로젝트 요청하기

1.1 좋은 프롬프트 작성

Chapter 9에서 배운 것처럼 구체적으로 요청합니다.

Agent Side Panel에서 다음과 같이 입력합니다.

Todo 웹 애플리케이션을 만들어주세요.

기능:
1. 할 일을 입력하고 추가할 수 있다
2. 할 일을 완료 표시할 수 있다 (체크박스)
3. 할 일을 삭제할 수 있다
4. 새로고침해도 데이터가 유지된다 (로컬 스토리지)

기술:
- HTML, CSS, JavaScript
- 외부 라이브러리 없이 순수 JavaScript

파일:
- index.html: 화면 구조
- style.css: 디자인 (모던하고 깔끔하게)
- script.js: 기능 구현

프로젝트 요청 그림 10-2: Agent에게 Todo 앱 요청

1.2 요청 전송

메시지를 작성한 후 Enter 또는 전송 버튼을 클릭합니다.

2. Task List 확인

Planning 모드에서 Agent가 작업을 시작하면 Task List가 생성됩니다.

2.1 Task List 보기

  1. Agent Manager로 전환 (Cmd/Ctrl + E)
  2. 현재 대화 선택
  3. Artifacts 패널에서 Task List 확인

또는 Editor의 Agent Side Panel에서도 확인할 수 있습니다.

2.2 Task List 예시

Agent가 생성한 Task List는 다음과 비슷할 수 있습니다.

## Todo 웹 애플리케이션 개발

- [ ] HTML 구조 작성 (index.html)
- [ ] CSS 스타일 작성 (style.css)
- [ ] JavaScript 기능 구현 (script.js)
  - [ ] Todo 추가 기능
  - [ ] Todo 완료 토글
  - [ ] Todo 삭제 기능
  - [ ] 로컬 스토리지 저장/불러오기

Task List 그림 10-3: 생성된 Task List

3. Implementation Plan 검토

Agent가 코드를 작성하기 전에 Implementation Plan(구현 계획)을 보여줍니다.

3.1 계획 내용 확인

Implementation Plan에서 확인할 내용은 아래와 같습니다.

항목설명
파일 목록생성/수정할 파일들
구현 방식어떤 방법으로 구현할지
코드 구조함수, 클래스 등의 설계

3.2 계획 예시

## 구현 계획

### 1. index.html
- 기본 HTML5 구조
- 입력 폼: 텍스트 입력 + 추가 버튼
- Todo 목록 컨테이너

### 2. style.css
- CSS 변수로 색상 관리
- Flexbox 레이아웃
- 반응형 디자인

### 3. script.js
- TodoApp 클래스로 구현
- localStorage API 사용
- 이벤트 위임 패턴 적용

Implementation Plan 그림 10-4: Implementation Plan 확인

4. 계획 승인 또는 수정

4.1 계획이 마음에 들면

"Proceed" 버튼을 클릭하여 Agent가 구현을 시작하도록 합니다.

4.2 수정이 필요하면

피드백을 남겨 계획을 수정할 수 있습니다.

예시 1: 디자인 변경 요청

CSS에서 파란색 대신 초록색 계열을 사용해주세요.

예시 2: 기능 추가 요청

Todo 항목을 편집하는 기능도 추가해주세요.

예시 3: 구현 방식 변경

클래스 대신 함수형으로 구현해주세요.

피드백을 입력한 후 Agent가 계획을 수정할 때까지 기다립니다.

5. Agent가 코드 작성

계획을 승인하면 Agent가 코드를 작성합니다.

5.1 진행 상황 확인

  • Task List: 완료된 항목에 체크 표시
  • Agent Side Panel: 실시간 진행 상황

5.2 작성 완료 대기

Agent가 모든 파일을 작성할 때까지 기다립니다. 작업이 완료되면 아래와 같이 진행될 수 있습니다.

  • Walkthrough Artifact 생성
  • 변경된 파일 목록 표시
  • Review Changes에서 확인 가능

💡 Walkthrough의 스크린샷

Walkthrough에 스크린샷이 포함되려면 Browser Subagent가 웹 페이지 작업을 수행해야 합니다. 코드 작성만 진행한 경우에는 스크린샷 없이 변경 요약만 표시됩니다.

6. 생성된 파일 확인

6.1 Editor에서 확인

  1. Editor 뷰로 전환 (Cmd/Ctrl + E)
  2. 왼쪽 파일 탐색기에서 생성된 파일 확인:
    • index.html
    • style.css
    • script.js
  3. 각 파일을 클릭하여 내용 확인

6.2 Review Changes로 확인

  1. Agent Side Panel 하단의 "Review Changes" 클릭
  2. 변경된 파일 목록 확인
  3. 각 파일의 코드 변경 내용 확인

Review Changes 그림 10-5: Review Changes로 코드 확인

💡 "작동한다"를 너무 빨리 수락하지 않기

Agent가 "완료되었습니다"라고 해도 Review Changes에서 왜, 어떻게 구현되었는지 확인하세요. 코드를 이해하면 나중에 수정이나 확장이 쉬워집니다.

7. 문제 해결

7.1 Implementation Plan이 안 나와요

원인해결 방법
Fast 모드 사용 중새 대화를 Planning 모드로 시작
설정이 "Always Proceed"Settings → Agent → "Request Review"로 변경

7.2 파일이 생성되지 않아요

  • Agent가 아직 작업 중인지 확인
  • Task List에서 진행 상황 확인
  • 오류 메시지가 있는지 대화 내용 확인

7.3 원하는 대로 구현되지 않았어요

Agent에게 아래와 같이 수정을 요청합니다.

[구체적인 문제점]을 수정해주세요.
[원하는 결과]로 변경해주세요.

8. 다음 단계

파일이 생성되었으면 Browser에서 실제로 동작하는지 테스트해봅시다.

Browser로 테스트하기
Agent에게 프로젝트 요청하기 - Google Antigravity 에센셜 | 위니버시티