VS Code, 제대로 쓰고 계신가요?

Visual Studio Code(이하 VS Code)는 2026년 현재 전 세계에서 가장 많이 사용되는 코드 에디터입니다. 개발자는 물론이고, 마크다운으로 문서를 작성하는 기획자, 데이터를 다루는 분석가, 심지어 블로그 글을 쓰는 분들까지 폭넓게 사용하고 있죠. 하지만 대부분의 사용자가 VS Code의 기본 기능만 사용하고 있다는 사실, 알고 계셨나요?

VS Code의 진짜 힘은 풍부한 확장 프로그램 생태계와 강력한 단축키 시스템에서 나옵니다. 적절한 확장 프로그램 몇 개와 핵심 단축키 조합만 익혀도 작업 속도가 체감상 두 배 이상 빨라집니다. 오늘은 2026년 기준으로 정말 쓸모 있는 확장 프로그램과 반드시 외워야 할 단축키, 그리고 숨겨진 생산성 팁까지 총정리해 드리겠습니다.

설치 직후 반드시 해야 할 초기 세팅 5가지

확장 프로그램을 설치하기 전에, VS Code 자체의 설정부터 최적화하면 체감 속도가 확 달라집니다. 아래 다섯 가지는 설치 직후 가장 먼저 해두면 좋은 세팅입니다.

1. 자동 저장 켜기

파일 수정 후 Ctrl+S를 매번 누르는 습관, 이제 버려도 됩니다. File → Auto Save를 활성화하면 포커스를 옮기거나 일정 시간이 지나면 자동으로 저장됩니다. settings.json에서 “files.autoSave”: “afterDelay”로 설정하고, “files.autoSaveDelay”: 1000으로 1초 후 자동 저장되게 하면 실수로 저장을 깜빡하는 일이 사라집니다.

2. 글꼴과 글자 크기 조정

장시간 코딩할 때 눈의 피로를 줄이려면 글꼴 설정이 중요합니다. “editor.fontSize”: 15 정도로 살짝 키우고, 글꼴은 합자(ligature)를 지원하는 Fira Code나 JetBrains Mono를 추천합니다. 합자 기능을 켜면 !=, =>, == 같은 연산자가 하나의 기호로 보여서 코드 가독성이 좋아집니다. “editor.fontLigatures”: true로 활성화할 수 있습니다.

3. 미니맵 끄기

오른쪽에 표시되는 미니맵은 파일이 길 때 유용할 것 같지만, 실제로는 화면 공간만 차지하는 경우가 많습니다. “editor.minimap.enabled”: false로 끄면 코드 영역이 더 넓어져서 오히려 집중력이 올라갑니다.

4. 괄호 색상 구분 활성화

VS Code에 내장된 괄호 색상 구분 기능은 “editor.bracketPairColorization.enabled”: true로 켤 수 있습니다. 중첩된 괄호가 각각 다른 색으로 표시되어 짝이 맞지 않는 괄호를 쉽게 찾을 수 있습니다. 별도 확장 프로그램 없이 기본 기능으로 지원되니 반드시 켜두세요.

5. 탭 크기와 포맷 설정

“editor.tabSize”: 2 또는 4로 프로젝트에 맞게 설정하고, “editor.formatOnSave”: true를 켜면 저장할 때마다 코드가 자동으로 정렬됩니다. Prettier 같은 포맷터와 함께 사용하면 팀 내 코드 스타일이 자연스럽게 통일됩니다.

2026년 필수 확장 프로그램 TOP 15

VS Code 마켓플레이스에는 수만 개의 확장 프로그램이 있지만, 정말 생산성에 도움이 되는 것은 한정되어 있습니다. 용도별로 정리해 드리겠습니다.

코드 품질 & 포맷팅

• Prettier – Code Formatter: JavaScript, TypeScript, HTML, CSS, JSON, Markdown 등 거의 모든 언어의 코드 포맷을 자동으로 맞춰줍니다. 저장 시 자동 포맷과 함께 사용하면 코드 스타일 논쟁이 사라집니다. 팀 프로젝트에서는 .prettierrc 파일로 규칙을 공유할 수 있습니다.
• ESLint: JavaScript/TypeScript 코드의 잠재적 오류와 안티패턴을 실시간으로 잡아줍니다. 빨간 밑줄이 뜨는 곳을 클릭하면 왜 문제인지 설명과 함께 자동 수정 옵션도 제공합니다. Prettier와 함께 사용하면 포맷은 Prettier가, 로직 검사는 ESLint가 담당하는 이상적인 조합이 됩니다.
• Error Lens: 기본적으로 VS Code는 오류를 밑줄로만 표시하지만, Error Lens를 설치하면 오류 메시지가 해당 줄 옆에 인라인으로 바로 표시됩니다. 마우스를 올려 확인할 필요 없이 한눈에 문제를 파악할 수 있어서 디버깅 시간이 크게 줄어듭니다.

생산성 & 편의 기능

• GitHub Copilot: 2026년 현재 코딩 생산성 도구의 대명사입니다. 주석이나 함수 이름만 적어도 AI가 나머지 코드를 제안합니다. 인라인 채팅 기능으로 코드 설명, 리팩토링, 테스트 생성까지 에디터 안에서 바로 할 수 있습니다. 월 10달러의 구독료가 있지만, 개인 개발자에게도 투자 대비 효과가 뛰어납니다.
• GitLens: 코드 한 줄 한 줄에 누가, 언제, 왜 수정했는지를 바로 보여줍니다. 줄 끝에 희미하게 표시되는 blame 정보로 히스토리를 즉시 파악할 수 있고, 파일 히스토리, 브랜치 비교, 커밋 검색 등 Git 관련 거의 모든 작업을 VS Code 안에서 처리할 수 있습니다.
• Project Manager: 여러 프로젝트를 오가며 작업하는 분에게 필수입니다. 즐겨찾기 프로젝트를 등록해두면 단축키 하나로 프로젝트 간 전환이 됩니다. 매번 File → Open Folder를 클릭하며 폴더를 찾아 헤매는 시간이 사라집니다.
• Todo Tree: 코드 속에 TODO, FIXME, HACK 같은 주석을 남기는 습관이 있다면, Todo Tree가 이것들을 트리 뷰로 모아서 보여줍니다. 프로젝트 전체에서 남은 작업을 한눈에 파악할 수 있어 관리가 편리합니다.

웹 개발 특화

• Live Server: HTML/CSS/JS 파일을 수정하면 브라우저가 실시간으로 반영됩니다. 웹 개발 입문자에게 특히 유용한데, 저장할 때마다 수동으로 새로고침할 필요가 없습니다. 우클릭 메뉴에서 “Open with Live Server”만 클릭하면 로컬 개발 서버가 바로 실행됩니다.
• Auto Rename Tag: HTML이나 JSX에서 여는 태그 이름을 바꾸면 닫는 태그도 자동으로 바뀝니다. 단순하지만 반복 수정 작업을 크게 줄여주는 확장 프로그램입니다.
• CSS Peek: HTML에서 클래스 이름에 마우스를 올리거나 Ctrl+클릭하면 해당 CSS 정의로 바로 이동합니다. 별도로 CSS 파일을 열어 검색할 필요가 없어서 스타일 작업이 빨라집니다.

테마 & 시각적 편의

• One Dark Pro: Atom 에디터에서 유래한 어두운 테마로, 장시간 사용해도 눈이 편한 색상 조합이 특징입니다. 다운로드 수 1위를 오랫동안 유지하고 있는 검증된 테마입니다.
• Material Icon Theme: 파일과 폴더에 아이콘을 붙여줍니다. 탐색기에서 파일 종류를 색상과 모양으로 즉시 구분할 수 있어서 파일 찾기가 훨씬 빨라집니다. 특히 파일이 많은 프로젝트에서 효과가 큽니다.
• indent-rainbow: 들여쓰기 단계마다 다른 색상을 입혀줍니다. Python처럼 들여쓰기가 문법인 언어에서 특히 유용하지만, 어떤 언어든 코드 구조를 시각적으로 파악하는 데 도움이 됩니다.

기타 강력 추천

• Path Intellisense: 파일 경로를 입력할 때 자동 완성을 제공합니다. import 문이나 파일 참조를 작성할 때 경로를 일일이 기억하거나 탐색기에서 확인할 필요가 없습니다.
• Thunder Client: VS Code 안에서 REST API를 테스트할 수 있는 경량 HTTP 클라이언트입니다. Postman을 따로 열 필요 없이 API 요청을 보내고 응답을 확인할 수 있어서 백엔드 개발 시 워크플로우가 끊기지 않습니다.

반드시 외워야 할 핵심 단축키 20선

마우스를 사용하면 그만큼 손이 키보드를 떠나는 시간이 생깁니다. 아래 단축키를 하루에 두세 개씩 익히면 2주 안에 작업 속도가 눈에 띄게 빨라집니다. Windows/Linux 기준으로 정리했으며, Mac 사용자는 Ctrl을 Cmd로 대체하면 됩니다.

파일 탐색 & 이동

• Ctrl + P: 빠른 파일 열기. 프로젝트 내 어떤 파일이든 이름 일부만 입력하면 즉시 열 수 있습니다. 탐색기에서 파일을 찾아 클릭하는 것보다 5배는 빠릅니다. 가장 자주 쓰게 될 단축키입니다.
• Ctrl + Shift + P: 명령 팔레트 열기. VS Code의 모든 기능을 검색하고 실행할 수 있는 만능 입구입니다. 메뉴 위치를 몰라도 기능 이름만 입력하면 찾을 수 있습니다.
• Ctrl + G: 특정 줄 번호로 이동. 에러 로그에서 “line 42″라고 나오면 이 단축키로 바로 이동합니다.
• Ctrl + Shift + O: 현재 파일 내 심볼(함수, 클래스, 변수) 목록을 보여줍니다. 긴 파일에서 원하는 함수를 찾을 때 스크롤 대신 이것을 사용하세요.
• Alt + ← / →: 이전/다음 커서 위치로 돌아갑니다. 정의를 확인하러 갔다가 원래 위치로 돌아올 때 매우 유용합니다.

편집 & 선택

• Ctrl + D: 현재 선택한 단어와 같은 다음 단어를 추가 선택합니다. 연속으로 누르면 하나씩 추가되며, 동시에 수정할 수 있습니다. 변수명을 일괄 변경할 때 찾아 바꾸기보다 직관적입니다.
• Ctrl + Shift + L: 현재 선택한 단어와 같은 모든 단어를 한 번에 선택합니다. Ctrl+D의 “전부 선택” 버전입니다.
• Alt + ↑ / ↓: 현재 줄을 위아래로 이동합니다. 줄을 잘라내고 붙여넣는 대신 한 번의 단축키로 순서를 바꿀 수 있습니다.
• Ctrl + Shift + K: 현재 줄 전체를 삭제합니다. 줄을 선택하고 Delete를 누르는 것보다 훨씬 빠릅니다.
• Ctrl + /: 선택한 줄을 주석 처리하거나 해제합니다. 어떤 언어든 해당 언어의 주석 문법으로 자동 처리됩니다.
• Ctrl + Shift + Enter: 현재 줄 위에 빈 줄을 삽입합니다. 커서가 줄 중간에 있어도 위에 새 줄이 추가되므로 줄 끝으로 이동할 필요가 없습니다.
• Alt + 클릭: 여러 위치에 동시에 커서를 생성합니다. 멀티커서 편집으로 반복적인 수정 작업을 한 번에 처리할 수 있습니다.

패널 & 레이아웃

• Ctrl + B: 사이드바를 토글합니다. 코드에 집중할 때 사이드바를 숨기면 편집 영역이 넓어집니다.
• Ctrl + `: 내장 터미널을 토글합니다. 외부 터미널을 오갈 필요 없이 VS Code 안에서 명령어를 실행할 수 있습니다.
• Ctrl + \: 에디터를 좌우로 분할합니다. HTML과 CSS를 동시에 보면서 작업하거나, 테스트 코드와 소스 코드를 나란히 놓고 비교할 수 있습니다.
• Ctrl + 1/2/3: 분할된 에디터 그룹 간 포커스를 이동합니다.

검색 & 바꾸기

• Ctrl + Shift + F: 프로젝트 전체에서 텍스트를 검색합니다. 정규식, 대소문자 구분, 파일 필터링 등 강력한 옵션을 지원합니다.
• Ctrl + H: 찾아 바꾸기. 정규식과 함께 사용하면 복잡한 패턴의 일괄 변환도 가능합니다.
• F12: 정의로 이동. 함수나 변수가 선언된 위치로 바로 점프합니다. Alt + F12를 누르면 별도 탭 없이 인라인 팝업으로 정의를 미리 볼 수 있습니다.

고급 사용자를 위한 숨겨진 생산성 팁

기본 단축키와 확장 프로그램을 넘어서, VS Code를 한 단계 더 활용하는 방법들이 있습니다.

스니펫(Snippet)으로 반복 코드 자동 생성

자주 사용하는 코드 패턴이 있다면, 사용자 정의 스니펫으로 등록해두면 몇 글자만 입력하고 Tab을 누르는 것으로 전체 코드 블록이 생성됩니다. File → Preferences → Configure User Snippets에서 언어별로 등록할 수 있습니다.

예를 들어, React 컴포넌트를 자주 만든다면 “rfc”라고 입력하면 함수형 컴포넌트 템플릿이 자동 생성되도록 설정할 수 있습니다. 스니펫에는 탭 스탑($1, $2)을 지정해서 Tab 키로 입력 위치를 순서대로 이동할 수 있고, $TM_FILENAME_BASE 같은 변수로 파일명을 자동 삽입할 수도 있습니다.

워크스페이스 설정으로 프로젝트별 환경 분리

VS Code의 설정은 사용자 설정(전역)과 워크스페이스 설정(프로젝트별) 두 계층으로 나뉩니다. 프로젝트 루트에 .vscode/settings.json 파일을 만들면 해당 프로젝트에서만 적용되는 설정을 지정할 수 있습니다. Python 프로젝트에서는 탭 크기 4, 웹 프로젝트에서는 탭 크기 2를 자동으로 적용하는 식입니다.

또한 .vscode/extensions.json에 권장 확장 프로그램 목록을 적어두면, 프로젝트를 처음 여는 팀원에게 필요한 확장 프로그램 설치를 자동으로 제안합니다. 팀 전체의 개발 환경을 일관되게 유지하는 데 매우 효과적입니다.

태스크(Tasks)로 빌드·실행 자동화

.vscode/tasks.json에 빌드, 테스트, 린트 등의 명령을 등록하면 Ctrl + Shift + B로 빌드를 바로 실행하거나, 명령 팔레트에서 태스크를 선택해 실행할 수 있습니다. 터미널에서 매번 긴 명령어를 입력하는 대신, 단축키 하나로 처리할 수 있습니다.

예를 들어 프론트엔드 프로젝트에서는 npm run dev, 백엔드에서는 gradle bootRun 같은 명령을 태스크로 등록해두면 프로젝트를 열자마자 바로 개발 서버를 실행할 수 있습니다.

멀티루트 워크스페이스로 모노레포 관리

프론트엔드와 백엔드가 별도 폴더에 있는 프로젝트라면, File → Add Folder to Workspace로 여러 폴더를 하나의 VS Code 창에서 동시에 열 수 있습니다. 각 폴더별로 독립된 설정과 확장 프로그램을 적용할 수 있어서 모노레포(monorepo) 구조의 프로젝트 관리에 적합합니다.

내장 Git 기능 200% 활용하기

GitLens 없이도 VS Code의 내장 Git 기능만으로 상당히 많은 작업을 할 수 있습니다. 소스 제어 패널(Ctrl + Shift + G)에서 변경된 파일 목록 확인, 스테이징, 커밋이 가능하고, 인라인 diff로 변경 내용을 줄 단위로 비교할 수 있습니다.

특히 유용한 기능은 타임라인 뷰입니다. 탐색기 하단의 Timeline 패널을 열면 현재 파일의 Git 히스토리와 로컬 저장 히스토리를 시간순으로 볼 수 있습니다. 실수로 코드를 날렸을 때 로컬 히스토리에서 이전 버전을 복구할 수 있어서 Git 커밋 전이라도 안심할 수 있습니다.

나만의 단축키 커스터마이징

VS Code의 모든 단축키는 변경할 수 있습니다. Ctrl + K → Ctrl + S를 누르면 단축키 설정 화면이 열리고, 여기서 기존 단축키를 수정하거나 새로운 단축키를 추가할 수 있습니다.

자주 쓰는 커스텀 단축키 추천

• 파일 탐색기 포커스: 기본적으로 Ctrl+Shift+E인데, 한 손으로 누르기 어렵습니다. Ctrl+E 같은 편한 조합으로 변경하면 탐색기와 에디터 간 전환이 수월해집니다.
• 터미널 간 전환: 여러 터미널을 열어 사용한다면, 터미널 간 이동 단축키를 Ctrl+Tab 등으로 지정하면 편리합니다.
• 사이드바 전환: 탐색기, 검색, Git, 확장 프로그램 등 사이드바 뷰를 전환하는 단축키(Ctrl+Shift+E, Ctrl+Shift+F, Ctrl+Shift+G, Ctrl+Shift+X)를 먼저 외워두세요.

단축키를 커스터마이징할 때는 기존 단축키와 충돌하지 않도록 주의해야 합니다. 설정 화면 상단의 검색창에 키 조합을 입력하면 이미 할당된 명령이 있는지 확인할 수 있습니다.

키맵 확장으로 다른 에디터 단축키 가져오기

이전에 Sublime Text, Atom, IntelliJ, Vim을 사용했던 분이라면, 해당 에디터의 단축키 체계를 그대로 VS Code에 적용하는 키맵 확장 프로그램이 있습니다. 마켓플레이스에서 “keymap”으로 검색하면 찾을 수 있습니다. 기존 근육 기억을 버리지 않고 VS Code로 자연스럽게 전환할 수 있는 방법입니다.

실전 워크플로우: 이 모든 것을 조합하면

지금까지 소개한 설정, 확장 프로그램, 단축키를 실제 작업에 어떻게 조합하는지 구체적인 시나리오로 보여드리겠습니다.

시나리오 1: 버그 수정

에러 로그에서 “TypeError at UserService.js:87″이라는 메시지를 봤다고 가정합니다.

• Ctrl + P → “UserService” 입력 → 파일 열기 (1초)
• Ctrl + G → 87 입력 → 해당 줄로 이동 (1초)
• Error Lens가 오류 원인을 인라인으로 표시 (0초)
• 코드 수정 후 자동 저장 (files.autoSave) → 수동 저장 불필요
• Ctrl + `로 터미널 열어 테스트 실행 (2초)
• Ctrl + Shift + G로 Git 패널 열고 커밋 (5초)

마우스 없이 10초 이내에 버그를 찾고, 수정하고, 커밋까지 완료할 수 있습니다.

시나리오 2: 변수명 일괄 변경

userName이라는 변수명을 accountName으로 바꿔야 하는 상황입니다.

• userName을 선택 → F2(심볼 이름 변경) → 프로젝트 전체에서 해당 심볼의 모든 참조가 일괄 변경됩니다.
• 또는 Ctrl + D를 반복 눌러 현재 파일 내 같은 단어를 하나씩 추가 선택한 뒤 동시에 수정할 수 있습니다.
• 범위를 한정하고 싶으면 Ctrl + H로 찾아 바꾸기를 사용하되, 정규식 옵션을 활용해 정확한 패턴만 매칭할 수 있습니다.

시나리오 3: 새 기능 개발

• Ctrl + \로 화면 분할 → 왼쪽에 기존 코드, 오른쪽에 새 파일
• 스니펫으로 보일러플레이트 자동 생성 → Tab으로 입력 위치 이동하며 핵심 로직만 작성
• GitHub Copilot이 다음 줄을 제안 → Tab으로 수락 또는 수정
• Path Intellisense로 import 경로 자동 완성
• 저장 시 Prettier가 포맷 자동 정리, ESLint가 잠재적 오류 표시
• Live Server로 브라우저에서 실시간 확인

이 모든 과정에서 VS Code 밖으로 나갈 필요가 없습니다. 에디터 안에서 코드 작성, 테스트, 디버깅, 버전 관리, API 테스트까지 모든 것이 완결됩니다.

마무리: 작은 습관이 큰 차이를 만든다

VS Code의 생산성을 높이는 비결은 거창한 것이 아닙니다. 오늘 소개한 내용 중에서 당장 세 가지만 실천해 보세요.

• 첫째, Ctrl + P로 파일을 여는 습관을 들이세요. 탐색기 클릭을 줄이는 것만으로도 체감 속도가 달라집니다.
• 둘째, Prettier + 저장 시 자동 포맷을 설정하세요. 코드 정리에 쓰는 시간이 제로가 됩니다.
• 셋째, Error Lens를 설치하세요. 오류를 찾으려고 마우스를 올려보는 시간이 사라집니다.

나머지는 하루에 단축키 하나씩, 확장 프로그램 하나씩 추가하면 됩니다. 한 달 뒤에는 마우스 없이도 코드를 자유자재로 다루는 자신을 발견하게 될 것입니다. VS Code는 단순한 텍스트 에디터가 아니라 여러분의 작업 방식을 바꿔줄 수 있는 강력한 도구입니다. 이미 설치되어 있다면, 오늘부터 제대로 써보세요.

이미지는 Leonardo AI 로 생성되었습니다.

이미지는 Claude AI 로 생성되었습니다.