VSCode 확장과 Claude 크롬 익스텐션

이 장에서는 클로드 코드를 더 편하게 쓰도록 도와주는 VSCode 확장과, 작업 결과를 검증하는 데 유용한 Claude 크롬 익스텐션을 소개합니다.

1. VSCode 확장

클로드 코드는 VSCode 확장(extension)으로도 사용할 수 있습니다. 터미널에서 입력이 잘 되지 않는 환경(3장 에러 참고)이거나, 코드 변경을 에디터에서 바로 보며 작업하고 싶을 때 특히 유용합니다.

확장을 쓰면 클로드가 제안한 변경 사항을 diff(변경 전후 비교)로 바로 보면서 승인할 수 있어, 어떤 부분이 어떻게 바뀌는지 파악하기 쉽습니다.

VSCode 확장과 터미널 버전은 같은 클로드 코드입니다. 표시 방식만 다를 뿐이니, 이 책에서 배운 명령어·모드·확장 기능이 모두 동일하게 적용됩니다. 편한 쪽을 쓰면 됩니다.

Claude는 웹 브라우저(크롬)에서 동작하는 익스텐션도 제공합니다. 클로드가 브라우저를 직접 조작하며 화면을 보고 작업할 수 있게 해줍니다.

이것이 클로드 코드와 만나면 강력한 검증 도구가 됩니다(10장). 클로드 코드가 만든 웹 페이지를 크롬 익스텐션으로 직접 열어 클릭해보고, UI가 의도대로 동작하는지 확인한 뒤, 문제가 있으면 고치는 흐름을 만들 수 있습니다.

프론트엔드 작업의 품질은 "직접 눈으로 보고 클릭해보는 검증"에서 크게 갈립니다. 크롬 익스텐션이나 브라우저 자동화 MCP(9장)를 활용해 검증 루프를 만들어두면, 클로드가 스스로 화면을 점검하고 다듬습니다.

이 책을 통해 클로드 코드의 설치부터 활용까지 한 바퀴를 돌았습니다. 정리하면 다음과 같습니다.

클로드 코드는 빠르게 변합니다. 새 기능이 나오면 이 책의 원리 위에 얹어 익히면 됩니다. 궁금한 점은 위니빌리지 커뮤니티에서 함께 나눠요.

여러분의 바이브 코딩을 응원합니다. 🚀