AI 코딩 · 2026년 7월 9일 · 약 7분

GitHub Copilot VS Code 사용법, 브라우저 검증과 세션 비용을 함께 보는 방법

GitHub가 VS Code용 Copilot 2026년 6월 업데이트를 정리했다. 브라우저 도구, 병렬 에이전트 세션, 세션 비용 표시, 모델 제공자 선택을 초보자도 안전하게 시험하는 방법을 정리했다.

• GitHub Copilot VS Code
• VS Code Copilot 사용법
• Copilot agent browser
• AI 코딩 비용
• Copilot 모델 선택

출처: GitHub Changelog

GitHub가 2026년 7월 8일 VS Code용 GitHub Copilot의 6월 업데이트 묶음을 공개했습니다. 이번 업데이트는 단순한 자동완성 개선보다 에이전트 작업을 실제 개발 흐름 안에 넣는 쪽에 가깝습니다. Copilot이 브라우저를 열어 웹앱을 확인하고, 여러 세션을 나눠 진행하며, 세션 단위 비용과 모델 선택 정보를 더 잘 보여주는 변화가 핵심입니다.

해외 개발자 반응도 실사용 쪽에 붙었습니다. VS Code 공식 계정의 안내 글은 하루 안에 2만 7천 회 이상 조회됐고, 댓글과 공유에서는 브라우저 검증, 병렬 세션, 비용 표시를 어떻게 일상 작업에 넣을지 묻는 반응이 보였습니다. 이 글은 새 기능을 모두 외우기보다, 처음 켜볼 때 위험을 줄이는 순서에 맞춰 설명합니다.

핵심 키워드

• GitHub Copilot VS Code 사용법
• VS Code Copilot 브라우저 도구
• Copilot 세션 비용 확인
• GitHub Copilot 병렬 세션
• Copilot 모델 제공자 선택

이번 업데이트의 핵심은 에이전트 작업을 눈에 보이게 만드는 것이다

코딩 에이전트는 편하지만, 무엇을 읽었고 어디까지 실행했으며 얼마를 썼는지 보이지 않으면 팀에서 쓰기 어렵습니다. GitHub가 이번 글에서 강조한 변화는 이 빈칸을 줄이는 방향입니다. 브라우저 도구는 웹앱 확인 과정을 에이전트에게 맡기되 사람이 권한을 통제하게 하고, 비용 표시는 긴 디버깅 대화가 어느 정도 크기로 커졌는지 보여줍니다.

브라우저 검증은 작은 화면부터 맡긴다

브라우저 도구가 켜졌다고 해서 결제, 관리자, 개인정보가 있는 화면부터 맡기면 안 됩니다. 처음에는 로컬 개발 서버의 공개 페이지, 폼 유효성 검사, 반응형 깨짐 확인처럼 되돌리기 쉬운 작업이 좋습니다. 에이전트가 본 화면과 수정한 파일을 사람이 다시 확인할 수 있어야 합니다.

처음 써볼 작업

• 로컬 웹앱을 열고 홈 화면, 목록 화면, 상세 화면이 깨지지 않는지 확인한다.
• 버튼 클릭 후 콘솔 오류가 생기는지 보고, 오류가 있으면 관련 파일 후보만 정리하게 한다.
• 모바일 폭에서 텍스트가 버튼 밖으로 나가는지 스크린샷 기준으로 확인한다.
• 로그인이 필요한 페이지는 더미 계정이나 테스트 환경에서만 공유한다.
• 수정 전에는 에이전트에게 읽을 파일과 실행할 검증 명령을 먼저 쓰게 한다.

세션 비용은 모델 선택보다 먼저 확인한다

Copilot을 에이전트처럼 쓰면 한 번의 요청보다 전체 세션부터 봐야 합니다. 파일을 읽고, 테스트를 돌리고, 실패를 다시 고치는 과정에서 사용량이 커질 수 있기 때문입니다. GitHub는 세션 전체 비용, 월간 사용량, 하위 에이전트 사용량을 더 잘 보이게 했다고 설명합니다. 이 기능은 비용을 줄여주는 마법 버튼이 아니라, 어느 작업이 비싼지 알아내는 계기입니다.

복사해서 쓰는 첫 요청

아래 템플릿은 VS Code 안에서 Copilot에게 브라우저 검증과 코드 수정을 함께 맡길 때 쓸 수 있습니다. 대괄호 안만 현재 프로젝트에 맞게 바꾸면 됩니다.

VS Code Copilot 에이전트 요청 템플릿

• 목표: [로컬 URL 또는 화면]에서 [확인할 문제]를 재현하고 원인을 찾는다.
• 범위: 먼저 [관련 폴더/파일]만 읽고, 다른 영역은 수정하지 않는다.
• 브라우저 확인: 데스크톱과 모바일 폭에서 화면을 열고 콘솔 오류, 깨진 레이아웃, 클릭 실패를 확인한다.
• 수정 전 보고: 바꿀 파일, 예상 원인, 실행할 검증 명령을 먼저 표로 보여준다.
• 비용 관리: 세션이 길어질 것 같으면 바로 수정하지 말고 작업을 더 작은 세션으로 나눌 방법을 제안한다.
• 완료 기준: [npm test / npm run build / 지정 검증]을 실행하고, 실패가 남으면 원인과 다음 행동만 정리한다.

초보자가 자주 하는 실수

에이전트 기능이 늘수록 좋은 요청은 더 짧아지는 것이 아니라 더 분명해져야 합니다. 특히 브라우저, 파일 수정, 자동 진행이 함께 들어가면 권한과 비용을 같이 봐야 합니다.

쉬운 수정법

• 실수: “사이트 전체를 고쳐줘”라고 한다. 수정: 화면 2개와 문제 1개로 시작한다.
• 실수: 로그인된 개인 브라우저 화면을 바로 공유한다. 수정: 테스트 계정과 로컬 환경을 쓴다.
• 실수: 비싼 모델을 기본값처럼 둔다. 수정: 탐색은 가벼운 모델, 어려운 수정만 강한 모델로 나눈다.
• 실수: 세션이 길어져도 계속 이어간다. 수정: 비용 표시를 보고 계획, 구현, 검증 세션을 분리한다.
• 실수: Autopilot에 모든 변경을 맡긴다. 수정: 배포, 결제, 인증 파일은 사람 승인 후에만 바꾼다.

오늘 바로 해볼 한 가지

작은 웹앱이나 사내 도구 하나를 열고, Copilot에게 “모바일 폭에서 첫 화면만 확인하고 수정 계획만 써줘”라고 요청해보세요. 바로 코드를 바꾸게 하지 말고 브라우저 확인 결과, 관련 파일, 예상 비용이 커질 지점을 먼저 받는 것이 좋습니다. 이 순서가 익숙해지면 에이전트를 더 넓은 작업에 맡겨도 통제감을 잃지 않습니다.