안녕하세요, 여러분 개발은 즐겁게 하고 계신가요!

최근 VS Code의 업데이트가 정말 엄청난 속도로 진행되고 있습니다.

특히 주목해야 할 점은, 「통합 브라우저(Integrated Browser)」의 표준 탑재와 GitHub Copilot을 비롯한 AI 에이전트와의 초강력한 네이티브 연동입니다.

단순히 "에디터 옆에서 웹 페이지를 볼 수 있다"는 수준이 아니라, ""AI가 브라우저를 사용하여 알아서 디버깅과 테스트를 끝내버린다""라는, 웹 개발의 상식을 뒤엎는 세계선이 도래하고 있기에 그 충격을 정리해 보았습니다.

지금까지의 웹 개발은 코드를 작성하고 브라우저(Chrome 등)로 전환하여 디버깅한 뒤, 다시 에디터로 돌아오는 「화면 전환과 복사 붙여넣기」의 반복이었습니다.

최신 VS Code에서는 에디터 안에 브라우저가 완전히 녹아들어 있으며, AI와 브라우저 환경이 직결되어 있습니다.

최신 VS Code에서는 내부적으로 Playwright(브라우저 자동화 도구) 메커니즘이 네이티브로 통합되어 있습니다.

AI 에이전트에게 지시를 내리면, 다음과 같은 루프를 완전히 자동으로 돌려줍니다.

구현: AI가 컴포넌트 코드를 작성함 -
기동: AI가 통합 브라우저(Browser: Open Integrated Browser)에서 해당 페이지를 알아서 엶 -
조작: AI가 화면상의 버튼을 스스로 클릭하거나 폼에 입력하여 테스트함 -
수정: 화면이 깨지거나 브라우저 콘솔에서 JavaScript 에러를 감지하면, AI가 해당 로그를 스스로 읽어 들여 코드를 자동 수정하고 재테스트함

인간은 옆에서 브라우저가 척척 자동으로 움직이며 알아서 버그를 고치는 것을 지켜보기만 하면 됩니다.

에디터만으로는 "화면이 깨져 있다", "디자인 컴프(Design Comp)와 다르다"와 같은 시각적인 결함을 알 수 없었습니다. 최신 VS Code 브라우저는 이 「외관」을 AI와 공유할 수 있습니다.

스크린샷 공유: 클릭 한 번으로 브라우저 스크린샷을 AI 채팅의 문맥(Context)으로 첨부 가능. Add Screenshot to Chat

디자인 어긋남 수정: "이 버튼, 모바일에서 보면 글자가 넘치니까 고쳐줘", "디자인 컴프 이미지(원본 데이터)를 줄 테니까 지금 브라우저 화면과 비교해서 어긋난 부분을 수정해줘"와 같이 언어화하기 어려운 UI 조정 요청이 완벽하게 통합니다. -
디바이스 에뮬레이션(Device Emulation): 스마트폰이나 태블릿의 화면 크기를 가상으로 재현하는 툴바도 표준 탑재. AI가 모바일 특유의 버그도 자동으로 찾아줍니다.

AI가 알아서 브라우저를 조작한다고 하면 보안이 걱정될 수 있지만, VS Code는 이 부분도 스마트하게 설계되어 있습니다.

격리된 세션: 인간이 평소 사용하는 브라우저의 Cookie나 비밀번호 기록은 이어받지 않고, 완전히 클린한 공간에서 동작하므로 안전합니다. -
명시적 공유(Share): AI는 사용자가 "이 탭을 공유한다"라고 허가한 탭만 조작 및 열람할 수 있습니다. AI가 새로운 탭을 열려고 할 때도 인간 측의 허가(재사용 제안 등)를 요청하므로, 인간을 소외시키지 않습니다.

지금까지는……

코드를 작성한다 ➡️ 브라우저로 전환한다 ➡️ 새로고침한다 ➡️ 작동하지 않는다 ➡️ 개발자 도구를 연다 ➡️ 에러를 복사한다 ➡️ 에디터로 돌아온다 ➡️ AI에게 붙여넣어 수정 코드를 받는다 ➡️ 코드를 복사 붙여넣기 한다 (이하 무한 루프)

앞으로는……

"브라우저로 열어서 콘솔 에러 나면 전부 다 고쳐놔"라는 한마디로 완결.

Cursor와 같은 AI 네이티브 에디터가 선점했던 「브라우저 연동」이지만, VS Code가 표준 기능(및 공식 Copilot Agent 기능)으로서 이 정도로 견고하고 사용하기 쉽게 도입한 것은 정말 대단하다는 말밖에 나오지 않습니다.

「프로그램적으로 올바르게 작동하는가」라는 엄격한 검증·테스트 자동화에 있어, 최신 VS Code는 현시점에서 틀림없이 최강의 콕핏(Cockpit)이 되었습니다.

여러분은 이 최신 브라우저 기능을 벌써 사용해 보셨나요?

꼭 댓글창에 여러분의 활용 방법이나 감상을 알려주세요!