[Antigravity #4] 내 손안의 브라우저: 에이전트에게 웹서핑 시키기
Editor’s Note
개발하다 보면 브라우저를 켜야 할 일이 정말 많습니다.
“API 문서 확인하고, 로컬 서버 띄워서 테스트하고, 로그 보고…”
Antigravity의 Browser Agent는 이 귀찮은 일을 대신해줍니다. 에이전트에게 ‘마우스’와 ‘키보드’를 쥐여주는 법을 배워봅시다.
1. Browser Agent가 뭔가요?
한마디로 “Antigravity 안에 내장된 크롬(Chrome)”입니다. 하지만 사람만 볼 수 있는 게 아니라, AI 에이전트가 직접 클릭하고 타이핑할 수 있는 특별한 브라우저입니다.
- Human: 브라우저를 열고 -> 주소창에 치고 -> 눈으로 보고 -> 코드를 고친다.
- Agent: “이 사이트 접속해서 에러 확인해”라고 시키면 -> 알아서 다 한다.
조금 더 정확히 말하면 Browser Agent는 에이전트가 웹 화면을 보면서 검증할 수 있게 해주는 표면입니다. 코드 수정만 하고 끝나는 것이 아니라, 실제 페이지를 열고 버튼을 눌러보고, 화면 결과나 콘솔 오류를 근거로 다시 코드를 고치는 흐름을 만들 수 있습니다.
이때 중요한 것은 “브라우저를 대신 조작한다”보다 검증 증거를 남긴다는 점입니다. 좋은 요청에는 항상 아래 조건을 같이 넣어주세요.
- 접속할 URL
- 테스트할 계정이나 더미 데이터
- 성공 기준
- 실패했을 때 남길 산출물
2. 실습 1: “이 뉴스 기사 좀 요약해줘” (Crawling)
가장 쉬운 크롤링부터 해볼까요? 매니저 뷰(채팅창)에 이렇게 입력해 보세요.
1
2
"https://news.ycombinator.com (해커뉴스)에 접속해서,
오늘 가장 인기 있는 기사 3개의 제목과 링크를 가져와서 'news.md' 파일로 저장해줘."
그러면 에이전트가 실제로 브라우저를 띄우고(화면 오른쪽 아래에 보여요!), 빠르게 스크롤하면서 정보를 긁어옵니다. 크롤링 코드(BeautifulSoup 같은 거)를 짤 필요가 없습니다. 그냥 “가져와”라고 하면 됩니다.
다만 외부 사이트를 대상으로 할 때는 몇 가지 예의를 지켜야 합니다.
- 로그인이나 결제가 필요한 페이지는 임의로 자동화하지 않기
- 짧은 시간에 너무 많은 요청을 보내지 않기
- 가져온 내용을 그대로 복사하지 말고 요약과 출처 중심으로 정리하기
- 서비스 약관이나 robots 정책이 있는 사이트는 먼저 확인하기
블로그 글 소재 조사처럼 가벼운 탐색에는 좋지만, 대량 수집 도구처럼 쓰면 문제가 될 수 있습니다.
3. 실습 2: “로그인 페이지 테스트해줘” (E2E Testing)
개발자라면 매번 “로그인 -> 비밀번호 입력 -> 버튼 클릭 -> 마이페이지 확인” 하는 과정이 지겹죠. 이걸 자동화해보겠습니다.
1
2
3
"http://localhost:3000 접속해.
ID: testuser, PW: password123 으로 로그인 시도해 봐.
로그인 성공하면 'Welcome' 메시지가 뜨는지 확인해주고, 실패하면 스크린샷 찍어."
에이전트는 군말 없이 시키는 대로 클릭하고 타자를 칩니다. 만약 에러가 나면? “로그인 버튼 눌렀는데 500 에러 떴어요”라며 빨간색 에러 로그를 보여줍니다.
요청을 더 실무적으로 만들려면 성공 조건을 구체화하세요.
1
2
3
4
로그인 후 /dashboard로 이동해야 하고,
상단 사용자 이름이 testuser로 보여야 하며,
콘솔에 error 레벨 로그가 없어야 해.
실패하면 스크린샷과 재현 순서를 남겨줘.
이렇게 적으면 에이전트가 단순히 “로그인 버튼을 눌러봤다”에서 멈추지 않고, 사람이 리뷰할 수 있는 재현 가능한 결과를 남깁니다.
4. 200% 활용 꿀팁: Console Log 읽기
Browser Agent의 진짜 강력함은 개발자 도구(Console)를 볼 줄 안다는 것입니다. 화면은 멀쩡해 보여도 뒤에서 자바스크립트 에러가 터지고 있을 수 있잖아요?
“사이트 전체를 돌아다니면서 자바스크립트 에러(Console Error)가 뜨는 페이지가 있는지 찾아줘.”
이 명령어 하나면, 여러분은 퇴근 전에 ‘무료 QA’를 돌리는 셈이 됩니다.
콘솔 로그를 읽을 때는 네트워크 오류도 함께 확인하면 좋습니다.
1
2
주요 페이지를 이동하면서 console error와 failed network request를 확인해줘.
문제가 있으면 페이지 URL, 에러 메시지, 재현 순서를 표로 정리해줘.
특히 SPA에서는 화면이 정상처럼 보여도 API가 401, 404, 500으로 실패하는 경우가 많습니다. 브라우저 에이전트에게 화면과 네트워크를 함께 보게 만들면 이런 숨은 문제를 더 빨리 찾을 수 있습니다.
5. 안전하게 쓰는 기준
Browser Agent는 강력하지만, 그래서 더 조심해서 써야 합니다.
- 실제 결제, 삭제, 메일 발송 같은 파괴적 작업은 사람이 최종 클릭
- 테스트 계정과 더미 데이터를 우선 사용
- 비밀번호, 토큰, 개인 정보가 화면에 남지 않게 주의
- 결과는 스크린샷, 콘솔 로그, 재현 절차로 확인
에이전트에게 브라우저를 맡길 때의 목표는 “내가 안 보기”가 아니라 “내가 더 좋은 증거를 보고 결정하기”입니다.
6. 오늘의 요약
- Antigravity에는 AI가 조종하는 브라우저가 있다.
- 외부 사이트 탐색은 예의와 정책을 지키면서 사용한다.
- 클릭 테스트는 성공 기준, 콘솔 로그, 스크린샷까지 함께 남겨야 실무에 쓸 수 있다.
다음 편 [Antigravity #5] 에서는, 개발자의 영원한 숙적! 버그(Bug)를 AI와 함께 사냥하는 초스피드 디버깅 기술을 알려드리겠습니다.