VS Code 업데이트: 통합 브라우저·기기 에뮬레이션·Mermaid 다이어그램 정리

핵심 메시지

• 최근 몇 주간의 VS Code 릴리스는 통합 브라우저 강화에 초점을 맞춰 방문 기록, URL 검색, 즐겨찾기(북마크) 기능을 추가했다.
• 통합 브라우저에서 전체 화면이나 특정 영역을 캡처해 채팅으로 바로 보내, AI에게 시각적 맥락을 전달할 수 있다.
• Playwright를 활용한 기기 에뮬레이션으로 휴대폰·태블릿·데스크톱 등 여러 화면 크기에서 사이트를 테스트한다.
• 머메이드 다이어그램이 내장 확장(Mermaid Markdown features)으로 병합돼 마크다운 미리보기·노트북·채팅에서 렌더링된다.
• 이슈 리포팅 마법사와 에이전트를 다루는 신규 VS Code Learn 강좌가 함께 추가됐다.

쉽게 이해하기

마이크로소프트의 코드 에디터 VS Code가 최근 몇 주간 내놓은 릴리스는 에디터 안에 들어온 통합 브라우저를 한층 쓸 만하게 다듬는 데 집중했다. 개발자가 별도의 웹 브라우저를 오가지 않고도 에디터 안에서 웹을 확인하고, 그 내용을 그대로 개발·AI 워크플로에 연결하도록 하는 방향이다.

통합 브라우저에는 방문한 페이지를 기록으로 남기는 히스토리 기능이 생겼고, 각 항목은 X 버튼으로 삭제할 수 있다. 주소창에서 일반 웹페이지처럼 검색할 수 있게 됐으며, 마음에 드는 페이지는 주소창에서 바로 즐겨찾기에 추가해 다음 방문 때 히스토리 아래에서 찾을 수 있다.

페이지 내용을 캡처해 채팅으로 보내는 기능도 추가됐다. 우측 상단 드롭다운에서 전체 화면 캡처를 채팅에 넣거나, 특정 영역만 잡아 보내는 것도 가능하다. UX 개발이나 일반 작업에서 시각적인 부분을 캡처해 AI에게 질문하고 의견을 구할 때, 그 맥락이 시각적으로 함께 전달된다.

통합 브라우저는 기기 에뮬레이션도 지원한다. 기기를 고르고 사용자 에이전트를 설정한 뒤 여러 기기·창 크기에서 사이트를 테스트할 수 있으며, 이 과정은 Playwright를 활용한다. 또한 머메이드 다이어그램 지원이 'Mermaid Markdown features'라는 내장 확장으로 병합돼, 머메이드 펜스 코드 블록으로 마크다운 미리보기와 노트북, 채팅에서 다이어그램을 그릴 수 있다.

이 밖에 문제를 더 정확히 신고하도록 돕는 이슈 리포팅 마법사가 도입돼 관련 정보·스크린샷·영상 녹화를 포함한 고품질 이슈를 에디터에서 바로 만들 수 있다. 학습 플랫폼 VS Code Learn에는 에이전트를 다루는 새 강좌가 추가돼, 에이전트와 도구 사용, MCP 서버로 에이전트 확장, 에이전트 플러그인, 서드파티 에이전트 활용을 다룬다.

주요 인사이트

• 화면 캡처를 채팅으로 바로 전달하는 기능은 UX 개발 시 AI에게 시각적 맥락을 주는 과정을 단순화한다.
• 기기 에뮬레이션이 에디터 안으로 들어오면서 별도 도구 없이도 반응형 화면을 점검할 수 있게 됐다.
• 머메이드 내장은 추가 확장 설치 없이 문서·노트북·채팅에서 다이어그램을 그릴 수 있게 한다.
• 에이전트 전용 강좌 신설은 VS Code가 에이전트·MCP 중심 개발을 정식 학습 주제로 편입하고 있음을 보여준다.

자주 묻는 질문

관련 AI 소식