VS Code 확장프로그램 추천 7가지와 설치·관리 방법

안녕하세요. 사랑받는 IT 프로덕트의 첫걸음, 똑똑한개발자입니다.

VS Code 확장프로그램은 편집기에 언어 지원, 코드 정리, 미리보기 같은 기능을 추가하는 도구입니다. 프로젝트에서 사용하는 언어와 작업 방식에 따라 필요한 확장이 달라집니다. 이 글에서는 자주 쓰는 확장 7가지와 설치·관리 방법을 소개합니다.

VS Code 확장프로그램 설치 방법, 단축키 하나면 됩니다

확장 탭은 Ctrl+Shift+X로 엽니다.

맥은 Cmd+Shift+X입니다. 이름을 검색해 Install을 누르면 대부분 바로 적용됩니다. VS Code 공식 문서에 따르면 1.97 버전부터는 처음 보는 게시자의 확장을 설치할 때 신뢰 여부를 묻는 창이 뜹니다. 확인을 누르기 전에 게시자 이름부터 읽어보세요.

처음 깔 VS Code 확장프로그램 추천, 용도별 7가지

한국어 언어팩은 표시 언어를 바꿔야 적용됩니다.

Ctrl+Shift+P로 명령 팔레트를 열고 Configure Display Language에서 한국어를 고른 뒤 재시작합니다.

Prettier는 모양을, ESLint는 실수를 잡습니다.

ESLint 확장은 프로젝트에 ESLint 라이브러리가 깔려 있어야 동작합니다.

Live Preview로 HTML 미리보기

Live Server를 오래 써온 분도 많지만, Microsoft의 Live Preview는 편집기 안에서 웹 페이지를 미리 볼 수 있는 선택지입니다. 마크다운은 확장 없이 Ctrl+Shift+V로 볼 수 있습니다.

AI 코딩 확장프로그램의 기능과 선택

Claude Code는 에디터 패널에서 일을 맡깁니다.

Anthropic이 낸 이 확장은 VS Code 1.98 이상에서 돌아가고, Pro·Max·Team·Enterprise 요금제나 종량제 결제가 필요합니다. 앞서 클로드 코드 설치 글에서 터미널 설치를 다뤘다면, 이 확장은 같은 기능을 편집기 안에서 쓰게 해줍니다.

GitHub Copilot의 자동완성과 채팅

GitHub Copilot은 VS Code에서 AI 채팅과 코드 작성 보조 기능을 제공합니다. 설치 구성과 무료 이용 범위는 공식 확장 페이지에서 확인할 수 있습니다. 여러 AI 확장을 사용할 때는 자동완성 등 겹치는 기능을 조정할 수 있습니다.

확장프로그램을 너무 많이 깔면 생기는 문제

느려지고, 기능끼리 부딪힙니다.

성능 영향은 확장의 개수뿐 아니라 수행하는 작업과 프로젝트 크기에 따라 달라집니다. 코드 정리 확장이 둘이면 저장할 때마다 서로 다르게 고치기도 합니다.

범인은 Extension Bisect로 찾습니다.

명령 팔레트에서 Help: Start Extension Bisect를 실행하면 확장을 절반씩 꺼가며 원인을 찾습니다. 당장 안 쓰는 확장은 삭제 대신 사용 안 함으로 꺼두면 됩니다.

VS Code 확장프로그램 보안, 공식 게시자부터 확인하세요

파란 체크는 검증된 게시자라는 표시입니다.

VS Code 공식 문서는 도메인 소유를 증명하고 마켓플레이스에서 6개월 이상 문제없이 활동한 게시자에게 파란 체크가 붙는다고 설명합니다. 검증 표시와 설치 수만으로 코드의 안전성이 보장되지는 않습니다. 공식 배포 링크, 게시자, 요청 기능과 업데이트 내역을 함께 살펴볼 수 있습니다.

세부 설정과 지원 범위는 VS Code 확장 관리 안내를 참고해 보세요.

만들어본 화면을 서비스로 이어갑니다

편집기에서 작은 화면을 만들다 보면 로그인이나 데이터 저장처럼 더해보고 싶은 기능이 생깁니다. 어디까지 구현할지 함께 정리하면 다음 단계가 한결 분명해집니다.

똑똑한개발자는 기획·디자인·개발을 함께하며 화면의 모습과 실제 동작을 연결합니다. 필요한 기능과 사용 흐름을 살펴 서비스에 맞는 구현 범위를 정리합니다.

직접 만든 화면이나 구현하고 싶은 아이디어가 있다면 아래 똑똑한개발자 링크로 편하게 이야기 남겨주세요. 함께 살펴보겠습니다. 감사합니다. :)