Browser tools for GitHub Copilot가 GA가 되어, 계산기 앱을 만들어 테스트해 보았습니다

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임을 확인했다

테스트를 계속 진행하던 중, 에이전트가 5 ÷ 0을 실행합니다.

Infinity가 표시되었다. 0으로 나누기(zero division) 체크가 누락됨

에이전트가 "5 ÷ 0을 실행한 결과 Infinity가 표시되었습니다. 0으로 나누기 처리가 구현되어 있지 않습니다"라고 보고해 줍니다.

버그를 수정해 주세요.

에이전트가 script.js를 수정합니다.

case '÷':
- result = a / b;
- break;
...

수정 후, 에이전트가 브라우저를 새로고침하여 동일한 조작을 재실행하고, "고쳐졌다"는 것을 확인합니다.

5 ÷ 0에 대해 에러가 올바르게 표시되게 되었다

프롬프트를 몇 번 던지는 것만으로 "만들기 → 테스트 → 버그 발견 → 수정 → 재테스트"의 사이클이 완결되었습니다!

"AI가 브라우저를 조작할 수 있다면, 내 탭도 전부 볼 수 있는 거 아냐?"

아니요, 그렇지 않습니다. 설계는 다음과 같습니다.

로그인이 필요한 조작을 에이전트에게 맡기는 경우에는, 직접 로그인한 탭을 Share with Agent로 명시적으로 공유해야 합니다.

Browser tools for GitHub Copilot의 GA를 통해, 프론트엔드 개발의 "확인하는" 작업을 AI에게 맡길 수 있게 되었습니다.

「만든 것이 제대로 작동하는지 확인하는 것은 나의 일」이라는 전제가 바뀌고 있습니다. 시도해 볼 가치가 있다고 생각합니다.

Insights