VS Code 개발 생산성 극대화: 필수 확장 프로그램과 최적화 설정 가이드

VS Code를 활용해 개발 생산성을 혁신하는 방법을 공개합니다. 필수 확장 프로그램부터 최적화 설정 팁까지, 실무 경험 기반의 노하우를 확인하세요.

개발자라면 누구나 한 번쯤 "어떻게 하면 더 빠르고 효율적으로 코딩할 수 있을까?" 고민해 보셨을 겁니다. 저 역시 그랬습니다. 수많은 개발 도구와 에디터 사이에서 방황하던 저는 Visual Studio Code (VS Code)에 정착했고, 이 강력한 도구를 활용해 개발 생산성을 비약적으로 끌어올릴 수 있었습니다. 단순히 코드를 작성하는 것을 넘어, 마치 제 손발처럼 움직이는 개발 환경을 구축한 경험을 공유하고자 합니다.

이 글에서는 제가 직접 써보고 효과를 체감한 VS Code의 필수 확장 프로그램들과 최적화 설정 가이드를 상세히 다룰 예정입니다. 혹시 아직도 VS Code의 잠재력을 100% 활용하지 못하고 있다면, 이 글이 여러분의 개발 워크플로우에 혁신을 가져다줄 것이라고 확신합니다.

---

📑 목차

• VS Code, 왜 개발자의 사랑을 독차지할까?
• VS Code 기본 최적화 설정: 쾌적한 개발 환경 만들기
• 1. 자동 저장(Auto Save) 기능 활용
• 2. 시각적 가독성을 위한 설정
• 3. 작업 공간(Workspace) 설정 활용
• 생산성을 폭발시키는 핵심 확장 프로그램
• 1. GitLens — Git supercharged
• 2. Prettier - Code formatter
• 3. ESLint
• 4. Live Share
• 5. Path Intellisense
• 언어별 개발 효율을 높이는 확장 프로그램
• 1. JavaScript/TypeScript 개발자를 위한 확장
• 2. Python 개발자를 위한 확장
• 나만의 VS Code 워크플로우 구축: 효율성 비교
• 1. 효율적인 단축키 활용
• 2. 작업에 따른 확장 프로그램 관리
• 결론: VS Code, 단순한 에디터를 넘어선 동반자

Image by Boskampi on Pixabay

VS Code, 왜 개발자의 사랑을 독차지할까?

수많은 코드 에디터와 IDE(통합 개발 환경)가 존재함에도 불구하고, VS Code는 현재 가장 많은 개발자들이 애용하는 도구 중 하나로 자리매김했습니다. 그 이유는 무엇일까요? 제가 직접 경험해본 결과, 다음과 같은 몇 가지 핵심적인 장점 때문이라고 생각합니다.

• 가벼움과 강력함의 조화: VS Code는 IDE만큼 무겁지 않으면서도, 필요한 기능은 확장 프로그램을 통해 무한히 추가할 수 있습니다. 마치 레고 블록처럼 필요한 기능만 조립하여 나만의 개발 환경을 만들 수 있죠.
• 뛰어난 사용자 경험: 직관적인 UI와 뛰어난 성능은 장시간 코딩 작업에도 피로감을 줄여줍니다. 특히 명령 팔레트(Command Palette)와 같은 기능은 마우스 없이 키보드만으로 대부분의 작업을 처리할 수 있게 해줍니다.
• 풍부한 확장 생태계: VS Code의 가장 큰 강점은 바로 방대한 확장 프로그램(Extensions) 생태계입니다. 코드 작성, 디버깅, 테스트, 배포, 심지어 협업까지 모든 영역에서 여러분의 작업을 도와줄 확장 프로그램이 존재합니다.
• 크로스 플랫폼 지원: Windows, macOS, Linux 등 어떤 운영체제에서도 일관된 개발 경험을 제공합니다.

이러한 장점 덕분에 저는 VS Code를 단순한 에디터가 아닌, 저의 개발 역량을 극대화하는 핵심 도구로 활용하고 있습니다.

---

VS Code 기본 최적화 설정: 쾌적한 개발 환경 만들기

VS Code를 설치하면 기본 설정만으로도 충분히 개발할 수 있지만, 몇 가지 설정을 변경하면 훨씬 쾌적하고 효율적인 환경을 만들 수 있습니다. 저는 주로 settings.json 파일을 직접 편집하여 세밀하게 제어합니다. Ctrl + Shift + P (또는 Cmd + Shift + P)를 눌러 명령 팔레트를 열고 settings.json을 검색하여 여는 것이 가장 빠릅니다.

1. 자동 저장(Auto Save) 기능 활용

코드를 작성하다 보면 깜빡하고 저장을 누르지 않아 작업 내용을 잃어버리는 불상사가 발생할 수 있습니다. 자동 저장 기능은 이런 걱정을 덜어줍니다. 저는 주로 onFocusChange 옵션을 사용하는데, 다른 창으로 포커스를 옮기거나 VS Code 창을 벗어날 때 자동으로 저장됩니다. 실로 편리한 기능이죠.

{
    "files.autoSave": "onFocusChange"
}

다른 옵션으로는 afterDelay (지정된 시간 후 자동 저장)나 onWindowChange (VS Code 창을 닫을 때 자동 저장) 등이 있습니다. 개인의 작업 스타일에 맞춰 선택하시면 됩니다.

2. 시각적 가독성을 위한 설정

장시간 코드를 봐야 하는 개발자에게 가독성은 매우 중요합니다. 저는 다음과 같은 설정을 통해 코드 가독성을 높였습니다.

• 글꼴 (Font): 코딩 전용 폰트(예: D2Coding, Fira Code, JetBrains Mono)를 사용하면 문자 간 구별이 명확하고 가독성이 좋습니다. 저는 D2Coding을 선호합니다.
• 글꼴 크기 (Font Size) 및 줄 높이 (Line Height): 모니터 크기와 개인의 시력에 맞춰 적절한 크기를 설정합니다. 저는 기본값보다 약간 크게, 줄 높이는 여유 있게 설정하여 눈의 피로를 줄입니다.
• 탭 크기 (Tab Size): 일관된 코드 스타일을 위해 탭 크기는 프로젝트 규칙에 맞추는 것이 좋습니다. 저는 주로 4칸을 사용합니다.
• 미니맵(Minimap) 비활성화: 파일 전체의 개요를 보여주는 미니맵은 편리하지만, 때로는 화면 공간을 차지하여 집중을 방해할 수 있습니다. 저는 주로 비활성화하고 전체 화면을 활용합니다.

{
    "editor.fontFamily": "D2Coding, Consolas, 'Courier New', monospace",
    "editor.fontSize": 14,
    "editor.lineHeight": 22,
    "editor.tabSize": 4,
    "editor.minimap.enabled": false
}

3. 작업 공간(Workspace) 설정 활용

여러 프로젝트를 동시에 진행하는 경우, 각 프로젝트마다 다른 설정을 적용하고 싶을 때가 있습니다. 이때 작업 공간(Workspace) 설정을 활용하면 매우 편리합니다. 프로젝트 폴더에 .vscode 디렉토리를 만들고 그 안에 settings.json 파일을 생성하면 해당 프로젝트에만 적용되는 설정을 관리할 수 있습니다. 예를 들어, 특정 프로젝트에서는 탭 크기를 2칸으로, 다른 프로젝트에서는 4칸으로 설정할 수 있습니다.

---

생산성을 폭발시키는 핵심 확장 프로그램

이제 VS Code의 진정한 강력함을 보여줄 확장 프로그램들을 소개할 차례입니다. 제가 수년간의 개발 경험을 통해 엄선한, "없으면 코딩 못 해!"라고 외칠 만한 필수 확장 프로그램들입니다.

1. GitLens — Git supercharged

GitLens는 VS Code에서 Git 버전 관리를 시각적으로 극대화해주는 확장 프로그램입니다. 이 확장 프로그램이 없던 시절로 돌아가라고 하면 개발을 그만둘지도 모른다는 농담을 할 정도로 저에게는 필수 중의 필수입니다.

• CodeLens (Blame annotations): 코드 라인 옆에 해당 라인을 마지막으로 수정한 사람, 커밋 메시지, 시간 등을 표시해줍니다. 특정 코드가 왜 이렇게 작성되었는지, 누가 수정했는지 한눈에 파악할 수 있어 디버깅이나 코드 리뷰 시 엄청난 도움이 됩니다.
• Git History: 파일, 폴더, 심지어 특정 라인에 대한 Git 히스토리를 시각적으로 탐색할 수 있습니다. 변경 사항을 비교하고, 이전 버전으로 되돌리는 등의 작업을 쉽게 할 수 있습니다.
• Changes (Diff): 현재 작업 중인 코드와 Git 저장소의 코드 간의 변경 사항을 인라인으로 쉽게 확인할 수 있습니다.

실제로 GitLens를 사용하면 코드의 맥락을 이해하는 데 드는 시간을 획기적으로 줄일 수 있습니다. 특히 팀 프로젝트에서 다른 개발자가 작성한 코드를 분석할 때 그 진가가 발휘됩니다.

2. Prettier - Code formatter

Prettier는 일관된 코드 포맷팅을 자동으로 적용해주는 확장 프로그램입니다. 팀 프로젝트에서 코드 스타일 가이드라인을 수동으로 지키는 것은 여간 번거로운 일이 아닙니다. Prettier는 이 모든 과정을 자동화하여 개발자의 소중한 시간을 절약해줍니다.

• 자동 포맷팅: 파일을 저장할 때마다 자동으로 코드를 포맷팅하여 일관된 스타일을 유지합니다.
• 다양한 언어 지원: JavaScript, TypeScript, CSS, HTML, JSON 등 대부분의 웹 개발 언어를 지원합니다.

저는 settings.json에 다음 설정을 추가하여 파일을 저장할 때마다 Prettier가 자동으로 실행되도록 설정했습니다. 이 설정 하나로 코드 리뷰 시 스타일 관련 논쟁이 현저히 줄어들었습니다.

{
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
}

3. ESLint

ESLint는 JavaScript 및 TypeScript 코드를 위한 정적 분석 도구입니다. 잠재적인 버그를 미리 찾아내고, 코딩 컨벤션을 강제하여 코드 품질을 향상시킵니다. Prettier가 코드 스타일을 예쁘게 만들어준다면, ESLint는 코드의 건강을 책임진다고 할 수 있습니다.

• 실시간 피드백: 코드를 작성하는 동안 오류나 경고를 실시간으로 표시해줍니다.
• 규칙 사용자 정의: 프로젝트의 필요에 따라 규칙을 자유롭게 설정할 수 있습니다.
• 코드 품질 향상: 잠재적인 문제점을 사전에 발견하여 디버깅 시간을 단축하고, 유지보수성을 높입니다.

Prettier와 ESLint를 함께 사용하면 코드 일관성과 품질이라는 두 마리 토끼를 모두 잡을 수 있습니다. 저는 주로 .eslintrc.js 파일에 프로젝트 규칙을 정의하고, VS Code의 ESLint 확장 프로그램이 이를 인식하여 실시간으로 피드백을 주도록 설정합니다.

4. Live Share

Live Share는 실시간 협업을 위한 혁신적인 확장 프로그램입니다. 마치 Google Docs처럼 여러 개발자가 동시에 같은 코드 파일을 편집하고 디버깅할 수 있습니다. 원격 근무 환경에서 페어 프로그래밍이나 코드 리뷰를 할 때 매우 유용합니다.

• 실시간 코드 공유 및 편집: 호스트가 세션을 시작하면 게스트는 호스트의 VS Code 환경에 연결하여 코드를 보고 편집할 수 있습니다.
• 통합 터미널 및 디버깅: 터미널과 디버거까지 공유하여 마치 한 컴퓨터에서 작업하는 듯한 경험을 제공합니다.
• 오디오 채팅: 내장된 오디오 채팅 기능을 통해 편리하게 소통할 수 있습니다.

실제로 Live Share를 사용해 원격으로 팀원과 함께 문제 해결을 했던 경험이 많습니다. 서로의 화면을 공유하고 설명하는 번거로움 없이, 같은 코드 위에서 바로 소통하며 작업할 수 있어 효율성이 비교할 수 없을 정도로 높았습니다.

5. Path Intellisense

Path Intellisense는 파일 경로를 입력할 때 자동 완성 기능을 제공합니다. 특히 깊은 디렉토리 구조를 가진 프로젝트에서 파일 경로를 일일이 타이핑하는 것은 시간 낭비이자 오타의 원인이 됩니다. 이 확장 프로그램은 이러한 불편함을 해소해줍니다.

• 경로 자동 완성: 파일 경로를 입력하기 시작하면 해당 경로에 있는 파일 및 폴더 목록을 자동으로 제안합니다.
• 오타 방지: 정확한 경로를 빠르게 선택할 수 있어 오타로 인한 오류를 줄여줍니다.

작은 기능 같지만, 매일 수십 번씩 파일 경로를 입력하는 개발자에게는 없어서는 안 될 생산성 도구입니다. 이 외에도 DotENV(.env 파일 구문 강조), REST Client(VS Code 내에서 HTTP 요청 테스트) 등 다양한 확장 프로그램들이 저의 개발 워크플로우를 풍성하게 만들어주고 있습니다.

---

Image by jamesmarkosborne on Pixabay

언어별 개발 효율을 높이는 확장 프로그램

VS Code의 가장 큰 장점 중 하나는 특정 언어에 특화된 확장 프로그램을 통해 어떤 언어든 강력한 IDE처럼 활용할 수 있다는 점입니다. 저는 주로 JavaScript/TypeScript와 Python을 사용하기 때문에 이 두 언어에 대한 확장 프로그램들을 소개합니다.

1. JavaScript/TypeScript 개발자를 위한 확장

VS Code는 기본적으로 JavaScript와 TypeScript에 대한 훌륭한 지원을 제공하지만, 몇 가지 확장 프로그램을 추가하면 더욱 강력해집니다.

• NPM Intellisense: import 문에서 npm 모듈을 자동으로 완성해줍니다. 패키지 이름을 정확히 기억할 필요 없이 빠르게 입력할 수 있습니다.
• Auto Rename Tag: HTML/XML 태그를 수정할 때 여는 태그를 수정하면 닫는 태그도 자동으로 수정해줍니다. 프론트엔드 개발자에게는 필수적인 확장 프로그램입니다.
• Bracket Pair Colorizer (deprecated by VS Code native): 과거에는 이 확장 프로그램이 필수였으나, VS Code 자체적으로 괄호 쌍 색상화 기능을 제공하기 시작했습니다. "editor.bracketPairColorization.enabled": true 설정을 통해 활성화할 수 있습니다. 이처럼 VS Code는 자체적으로 유용한 기능들을 계속 흡수하며 발전하고 있습니다.

// settings.json (괄호 쌍 색상화 설정)
{
    "editor.bracketPairColorization.enabled": true,
    "editor.guides.bracketPairs": "active"
}

2. Python 개발자를 위한 확장

Python 개발 환경을 VS Code에서 구축할 때는 다음 확장 프로그램들이 핵심적인 역할을 합니다.

• Python (Microsoft): Python 개발을 위한 공식 확장 프로그램입니다. 인텔리센스, 디버깅, 테스트, 가상 환경 관리 등 모든 핵심 기능을 제공합니다. 특히 Pylance 언어 서버를 통해 매우 빠른 코드 분석과 자동 완성을 경험할 수 있습니다.
• Jupyter: VS Code에서 Jupyter Notebook을 직접 실행하고 편집할 수 있게 해줍니다. 데이터 과학자나 머신러닝 엔지니어에게는 필수적인 확장 프로그램입니다.

이러한 언어별 확장 프로그램들은 해당 언어의 특성에 맞게 개발 과정을 최적화하여 생산성을 극대화하는 데 크게 기여합니다.

---

Image by Pexels on Pixabay

나만의 VS Code 워크플로우 구축: 효율성 비교

다양한 확장 프로그램과 설정을 알았다면, 이제 이를 바탕으로 나만의 효율적인 워크플로우를 구축하는 것이 중요합니다. 단순히 설치만 하는 것을 넘어, 각자의 개발 방식에 맞춰 최적화해야 합니다.

1. 효율적인 단축키 활용

VS Code의 거의 모든 기능은 단축키로 실행할 수 있습니다. 자주 사용하는 기능들의 단축키를 익히고, 필요하다면 keybindings.json 파일을 편집하여 나만의 단축키를 설정하는 것이 좋습니다. 저는 특히 다음 단축키들을 즐겨 사용합니다.

• Ctrl + P (파일 빠르게 열기)
• Ctrl + Shift + P (명령 팔레트 열기)
• Ctrl + B (사이드바 토글)
• Ctrl + ` (터미널 토글)
• Alt + Up/Down (라인 이동)
• Shift + Alt + Up/Down (라인 복사)

단축키를 활용하면 마우스 사용을 최소화하여 작업 속도를 크게 향상시킬 수 있습니다.

2. 작업에 따른 확장 프로그램 관리

모든 확장 프로그램을 항상 활성화할 필요는 없습니다. 특정 프로젝트나 언어에만 필요한 확장 프로그램은 해당 작업 공간에서만 활성화하고, 나머지는 비활성화하여 VS Code의 성능을 최적화할 수 있습니다. 확장 프로그램이 많아질수록 VS Code의 시작 속도나 동작이 느려질 수 있으므로, 주기적으로 사용하지 않는 확장 프로그램을 검토하고 정리하는 것이 좋습니다.

다음은 제가 직접 경험한, VS Code 확장 프로그램 활용 전후의 개발 효율성 비교입니다.

측면	확장 프로그램 활용 전 (기본 VS Code)	확장 프로그램 활용 후 (최적화된 VS Code)	개선 효과 (주관적)
코드 가독성	기본 문법 강조	테마, 아이콘, 폰트, 괄호 색상화 적용	20% 향상
코드 작성 속도	기본 자동 완성, 수동 경로 입력	NPM/Path Intellisense, 스니펫 활용	30% 단축
코드 품질 및 일관성	수동 포맷팅, 수동 에러 검사	Prettier, ESLint 자동 적용	50% 이상 오류 감소
협업 효율성	화면 공유, 구두 설명	Live Share 통한 실시간 공동 편집	40% 시간 절약
Git 작업 이해도	터미널 명령, Git GUI 도구 별도 사용	GitLens를 통한 코드 라인별 기록 확인	25% 이해도 증진

위 표는 제가 체감한 주관적인 수치이지만, 확장 프로그램과 최적화된 설정을 통해 개발 생산성이 크게 향상될 수 있음을 보여줍니다. 특히 코드 품질과 협업 효율성 측면에서 괄목할 만한 개선을 경험했습니다.

---

결론: VS Code, 단순한 에디터를 넘어선 동반자

지금까지 VS Code를 활용하여 개발 생산성을 극대화하는 방법에 대해 저의 경험을 공유했습니다. 필수 확장 프로그램부터 최적화 설정 가이드, 그리고 나만의 워크플로우 구축까지, VS Code는 단순히 코드를 작성하는 도구를 넘어 개발자의 생산성을 혁신하는 강력한 동반자가 될 수 있습니다.

핵심은 VS Code의 방대한 기능을 맹목적으로 따라가는 것이 아니라, 자신의 개발 환경과 작업 스타일에 맞춰 커스터마이징하는 것입니다. 제가 소개한 확장 프로그램과 설정들이 여러분의 개발 여정에 작은 도움이 되기를 바랍니다. 한 번의 투자로 얻게 될 생산성 향상은 분명 그 이상의 가치를 할 것입니다.

여러분은 어떤 VS Code 확장 프로그램이나 설정을 가장 유용하게 사용하고 계신가요? 여러분만의 VS Code 꿀팁이 있다면 댓글로 자유롭게 공유해주세요! 함께 더 효율적인 개발 환경을 만들어나가는 데 기여할 수 있습니다.

📌 함께 읽으면 좋은 글

• [개발 도구] 터미널 생산성 혁명: Oh My Zsh와 필수 플러그인 완벽 활용 가이드
• [이슈 분석] AI 시대 개발자 필수 역량 변화와 미래 성장 전략 가이드
• [기술 리뷰] Next.js vs Remix: 현대 웹 개발 풀스택 프레임워크 선택 가이드

이 글이 도움이 되셨다면 공감(♥)과 댓글로 응원해 주세요!
궁금한 점이나 다루었으면 하는 주제가 있다면 댓글로 남겨주세요.