본문 바로가기

  • 교재 소개

  • 5장 Chrome Extension 및 Browser

  • 5.2 Browser 실습 예제

Browser 실습 예제

학습 목표

  • Agent에게 Browser 작업을 요청할 수 있다
  • Browser Subagent의 작업 과정을 관찰할 수 있다
  • Browser 녹화 기능을 활용할 수 있다

1. 실습 전 확인사항

  • Chrome Extension 설치 완료
  • 인터넷 연결 상태 확인

💡 아직 설치하지 않았나요?
::a[Browser 기능 이해하기]{class='btn-link' href="05-01"}에서 Chrome Extension을 먼저 설치하세요.

2. 실습 1: Agent에게 웹 탐색 요청하기

가장 기본적인 Browser 사용법입니다. Agent에게 직접 웹 탐색을 요청합니다.

2.1 1단계: Agent Side Panel 열기

  1. Editor에서 Cmd/Ctrl + L로 Agent Side Panel 열기
  2. 또는 오른쪽 사이드바 아이콘 클릭

2.2 2단계: Browser 작업 요청

Agent에게 다음과 같이 요청합니다.

https://www.python.org 웹사이트를 열고
Python의 최신 버전 정보를 알려주세요.
  1. Setup 버튼을 클릭하면 브라우저가 열립니다.

Python의 최신 버전 정보 요청

2.3 3단계: Browser Subagent 관찰

요청 후 일어나는 일은 다음과 같습니다.

  1. Chrome 자동 실행: Anti-Gravity 전용 브라우저가 열림
  2. 파란색 테두리 표시: Browser Subagent가 작업 중임을 표시
  3. 작업 패널: 현재 수행 중인 작업 설명 표시
  4. 결과 반환: Agent가 수집한 정보 전달

Browser Subagent 작업 중 그림 5-2: Browser Subagent가 웹 페이지에서 작업 중인 화면

Browser Subagent 작업 결과

💡 팁
Browser Subagent가 작업하는 동안 다른 탭에서 자유롭게 작업할 수 있습니다.

3. 실습 2: 개발 서버 테스트하기

Browser의 가장 유용한 기능 중 하나는 로컬 개발 서버 테스트입니다.

3.1 1단계: 간단한 HTML 파일 만들기

Agent에게 요청합니다.

간단한 HTML 페이지를 만들어주세요.
제목은 "My First Page"이고 "Hello, Anti-Gravity!"를 표시합니다.

3.2 2단계: 로컬 서버 실행

Agent에게 요청합니다.

방금 만든 HTML 파일을 로컬 서버로 실행해주세요.

Agent가 터미널에서 서버를 실행합니다.

python -m http.server 8000
# 또는
npx serve .

3.3 3단계: Browser로 테스트 요청

Agent에게 요청합니다.

localhost:8000에서 실행 중인 페이지를 열고
제대로 표시되는지 확인해주세요.

Browser Subagent가 다음 작업을 수행합니다.

  1. localhost:8000 페이지 열기
  2. 화면 스크린샷 캡처
  3. 내용이 올바른지 확인
  4. 결과 보고

로컬 서버 테스트 화면 그림 5-3: Browser가 localhost 페이지를 테스트하는 화면

4. 실습 3: 웹에서 정보 수집하기

4.1 시나리오: API 문서 참조

개발 중에 API 문서를 참조해야 할 때 Browser를 활용할 수 있습니다.

Agent에게 요청합니다.

MDN 웹 문서를 열고 JavaScript의 fetch() 함수 사용법을 찾아서
간단한 예제 코드와 함께 정리해주세요.

Browser Subagent가 자동으로 다음을 수행합니다.

  1. MDN 웹 문서 접속
  2. fetch() 문서 페이지 탐색
  3. 관련 내용 읽기
  4. 정보 정리하여 반환

웹 정보 수집 화면 그림 5-4: Browser가 MDN 문서에서 정보를 수집하는 화면

4.2 결과 활용

Agent가 수집한 정보를 바탕으로 코드를 작성해달라고 요청합니다.

방금 찾은 fetch() 사용법을 참고해서
JSONPlaceholder API에서 데이터를 가져오는 코드를 작성해주세요.

fetch 사용법

5. 실습 4: Browser 녹화 확인하기

Browser Subagent는 작업 과정을 녹화할 수 있습니다.

5.1 녹화 확인 방법

  1. Browser 작업이 완료된 후
  2. Agent 대화창에서 Browser 단계 확인
  3. Playback available 영역 확인
  4. View 버튼을 클릭하여 Subagent의 작업 과정을 동영상으로 확인

Browser 녹화 재생 화면 그림 5-5: Browser 작업 녹화 재생 화면

5.2 녹화가 유용한 경우

  • 복잡한 웹 작업 과정 확인
  • 자동화 작업 검증
  • 문제 발생 시 디버깅

6. 실습 정리

이 실습에서 배운 내용은 다음과 같습니다.

기능사용 방법
웹 탐색Agent에게 URL 열기 요청
로컬 테스트localhost 페이지 확인 요청
정보 수집웹에서 문서/데이터 수집 요청
녹화 확인Browser 작업 녹화 재생

7. 추가 연습

7.1 연습 1: 웹사이트 스크린샷

Agent에게 요청합니다.

https://github.com 메인 페이지의 스크린샷을 찍어주세요.

7.2 연습 2: 폼 자동 작성

Agent에게 요청합니다.

테스트 폼 페이지에서
이름: "테스트", 이메일: "test@example.com"을 입력해주세요.

7.3 연습 3: 여러 페이지 탐색

Agent에게 요청합니다.

Python 공식 문서에서
1. 튜토리얼 페이지로 이동
2. 첫 번째 챕터의 제목을 알려주세요

8. 다음 단계

Browser 기능을 익혔다면, Agent를 더 효과적으로 활용하는 방법을 배워봅시다.

Agent 활용하기