2026년 7월 1일 Browser tools for GitHub Copilot가 VS Code에서 GA(General Availability)되었습니다.
한마디로 말하면, AI 에이전트가 실제 브라우저를 자율적으로 조작할 수 있게 된 기능입니다.
지금까지 Copilot에게 "이 페이지를 확인해 줘"라고 부탁해도 AI는 코드만 읽었지만, 이제부터는 에이전트가 스스로 브라우저를 열고, 버튼을 클릭하고, 버그를 찾아내어 코드 수정까지 일관되게 수행할 수 있게 됩니다.
이 기사에서는 실제로 에이전트에게 계산기 앱을 만들게 하고 브라우저로 테스트하게 한 경험을 작성합니다.
외부의 MCP 서버가 필요 없으며, VS Code에 표준 탑재되어 있습니다.
| 툴 | 할 수 있는 일 |
|---|
openBrowserPage / navigatePage | URL 열기 · 페이지 이동 |
readPage / screenshotPage | 페이지 내용 읽기 · 스크린샷 |
clickElement / typeInPage / hoverElement / dragElement | 클릭 · 입력 · 호버 · 드래그 |
handleDialog | alert / confirm / prompt에 대한 응답 |
runPlaywrightCode | 복잡한 자동화를 스크립트로 일괄 실행 |
VS Code를 최신 버전으로 업데이트하는 것만으로 사용할 수 있습니다 (GA로 기본 활성화).
채팅을 Agent 모드로 전환하고, 툴 피커(tool picker)에서 "Built-in > Browser"가 활성화되어 있는지 확인해 둡니다.
빈 폴더를 VS Code로 열고, 이 프롬프트를 던집니다.
0~9까지의 숫자, 사칙연산 (+−×÷), Clear, Equal 버튼을 가진 계산기를
HTML · CSS · JavaScript로 만들어 주세요.
에이전트가 index.html, styles.css, script.js 등을 생성합니다.
에이전트가 openBrowserPage 툴로 통합 브라우저에서 index.html을 엽니다.
모든 동작이 올바르게 작동하는지 확인해 주세요.
에이전트가 clickElement를 호출하여 실제로 버튼을 눌러 테스트합니다. 7 + 3 = 10 확인부터 시작하여, 각 연산을 순서대로 검증해 나갑니다.
7 + 3 = 10 のテスト
에이전트가 7→+→3→= 순으로 클릭하여 결과가 10임을 확인했다
테스트를 계속 진행하던 중, 에이전트가 5 ÷ 0을 실행합니다.
5 ÷ 0 = Infinity のバグ
Infinity가 표시되었다. 0으로 나누기(zero division) 체크가 누락됨
에이전트가 "5 ÷ 0을 실행한 결과 Infinity가 표시되었습니다. 0으로 나누기 처리가 구현되어 있지 않습니다"라고 보고해 줍니다.
에이전트가 script.js를 수정합니다.
case '÷':
- result = a / b;
- break;
...
수정 후, 에이전트가 브라우저를 새로고침하여 동일한 조작을 재실행하고, "고쳐졌다"는 것을 확인합니다.
修正後：エラーが正しく表示された
5 ÷ 0에 대해 에러가 올바르게 표시되게 되었다
프롬프트를 몇 번 던지는 것만으로 "만들기 → 테스트 → 버그 발견 → 수정 → 재테스트"의 사이클이 완결되었습니다!
"AI가 브라우저를 조작할 수 있다면, 내 탭도 전부 볼 수 있는 거 아냐?"
아니요, 그렇지 않습니다. 설계는 다음과 같습니다.
- 내가 열어둔 탭: 툴바의 "Share with Agent" 버튼을 누르지 않는 한, AI에게는 보이지 않음 -
- 에이전트가 연 탭: 자신의 Cookie · 스토리지와 완전히 분리된 세션에서 동작함 -
- 카메라 · 마이크 · 위치 정보: AI가 자동으로 승인할 수 없음
로그인이 필요한 조작을 에이전트에게 맡기는 경우에는, 직접 로그인한 탭을 Share with Agent로 명시적으로 공유해야 합니다.
Browser tools for GitHub Copilot의 GA를 통해, 프론트엔드 개발의 "확인하는" 작업을 AI에게 맡길 수 있게 되었습니다.
「만든 것이 제대로 작동하는지 확인하는 것은 나의 일」이라는 전제가 바뀌고 있습니다. 시도해 볼 가치가 있다고 생각합니다.
