VSCode 10배 빨라지는 설정: 생산성 향상 꿀팁

솔직해집시다. 우리 모두 경험해봤을 겁니다. 작업에 몰두해서 코딩이 술술 풀리는데... VSCode가 느려지기 시작합니다. 커서는 버벅거리고, 자동 완성은 커피 브레이크를 즐기고, 노트북 팬은 이륙 준비를 하는 소리를 냅니다. 답답하고, 집중력을 깨뜨리며, 솔직히 말해서 엄청난 생산성 저해 요인입니다.

오랜 시간 동안 저는 이것을 강력하고 확장 가능한 편집기를 사용하는 대가로 받아들였습니다. 한숨을 쉬고, 몇 개의 탭을 닫고, 기적을 빌었죠. 제가 VSCode의 심장부로 깊이 파고들어 설정을 체계적으로 최적화하기로 결정하기 전까지는 말이죠. 그 결과는 어땠을까요? 단순히 약간의 속도 향상에 그치지 않았습니다. VSCode를 느리고 리소스를 많이 잡아먹는 도구에서 거의 10배 더 빠른 날렵하고 강력한 코딩 머신으로 탈바꿈시켰습니다.

이 과정은 단순히 포럼에서 설정을 맹목적으로 복사하는 것이 아니었습니다. VSCode가 느려지는 이유를 이해하고 체계적으로 해결책을 적용하는 것이었습니다.

그리고 개발자 워크플로우 최적화에 대해 이야기하는 김에, API 작업을 위해 Postman, Swagger, Mock 서버 사이를 오가는 것에 지쳤다면 Apidog를 꼭 확인해보세요.

💡

Apidog는 믿을 수 없을 정도로 빠르고 간소화된 올인원 API 개발 플랫폼으로, API를 한 곳에서 설계, 디버그, 모의 및 테스트할 수 있습니다. 잘 튜닝된 VSCode처럼, 당신의 길을 방해하지 않고 작업을 할 수 있게 해주는 그런 도구입니다.

button

이 게시물에서는 제가 사용한 정확한 설정과 전략을 안내해 드릴 것입니다. 기본적인 "확장 프로그램 한두 개 비활성화"를 넘어 파일 감시, TypeScript 최적화, 숨겨진 성능 저해 요인 등 세부 사항을 다룰 것입니다. 개발 환경을 되찾을 준비를 하세요.

범인들: 왜 VSCode가 그렇게 느릴까요?

수정을 시작하기 전에, 우리가 무엇에 맞서고 있는지 이해하는 것이 중요합니다. 자동차를 진단하는 것과 같다고 생각해보세요. 부품을 무작위로 교체하기 시작하지 않습니다. 어떤 소리가 나는지 원인을 알아야 합니다.

조사를 통해 저는 VSCode의 성능 문제를 일으키는 세 가지 주요 원인을 밝혀냈습니다:

확장 프로그램 과부하: 이것은 단연코 가장 큰 원인입니다. 설치하는 모든 확장 프로그램은 VSCode 내에서 실행되는 작은 앱과 같습니다. 일부는 잘 작동하고 가볍지만, 다른 일부는 전체 편집기를 무릎 꿇게 만들 수 있는 리소스 집약적인 괴물입니다. 새로운 확장 프로그램을 추가할 때마다 문제는 더욱 커집니다.
파일 감시의 광란: VSCode에는 프로젝트 파일의 변경 사항을 지속적으로 감시하는 내장 서비스가 있습니다. 이것이 실시간 파일 탐색기 업데이트 및 사이드바의 Git 상태와 같은 기능을 가능하게 합니다. 그러나 특히 대규모 node_modules, dist 또는 build 폴더가 있는 대규모 프로젝트에서는 이 파일 감시기가 과도하게 작동하여 수천, 수만 개의 파일을 추적하려고 시도하면서 엄청난 양의 CPU와 메모리를 소비할 수 있습니다.
TypeScript & 언어 서버 부담: TypeScript/JavaScript 세계에 있는 우리에게 언어 서버(IntelliSense, 오류 검사 및 리팩토링을 제공)는 기적을 행하는 존재입니다. 하지만 그 힘에는 대가가 따릅니다. 대규모 코드베이스에서는 지속적인 타입 검사 및 분석이 성능에 상당한 부담을 줄 수 있습니다.

이제 적을 알았으니, 전투 계획을 세워봅시다. 영향력 순서대로 이 문제들을 해결할 것입니다.

1단계: 확장 프로그램 제거 – 가장 강력한 수단

이 단계에서 가장 극적인 개선을 보게 될 것입니다. 저는 게으르게 설치했던 40개의 확장 프로그램을 20개의 필수 확장 프로그램으로 줄였고, 그 차이는 측정 가능할 뿐만 아니라 체감할 수 있었습니다.

1단계: 리소스 잡아먹는 확장 프로그램 식별

먼저, 어떤 확장 프로그램이 실제로 속도를 저하시키는지 확인해야 합니다. 다행히 VSCode에는 이를 위한 훌륭한 내장 도구가 있습니다.

Ctrl+Shift+P (Mac에서는 Cmd+Shift+P)로 명령 팔레트를 엽니다.
Developer: Show Running Extensions를 입력하고 실행합니다.

이것은 실행 중인 모든 확장 프로그램과 가장 중요하게는 "활성화 시간"을 보여주는 패널을 엽니다. 이것은 확장 프로그램이 시작하는 데 걸리는 시간입니다. 활성화 시간이 긴 확장 프로그램은 종종 시작 성능에 가장 큰 영향을 미치는 확장 프로그램입니다. 이 목록을 처음 보았을 때 저는 정말 놀랐습니다.

2단계: 확장 프로그램 이분법을 이용한 정밀 타격

어떤 확장 프로그램이 문제의 원인인지 모른다면 어떻게 해야 할까요? 하나씩 수동으로 비활성화하는 것은 고통스러운 일입니다. VSCode의 가장 잘 알려지지 않은 비밀 중 하나인 확장 프로그램 이분법(Extension Bisect)을 소개합니다.

다시 명령 팔레트를 열고 Developer: Start Extension Bisect를 실행합니다.

이 놀라운 기능은 이진 탐색 알고리즘을 사용합니다. 확장 프로그램의 절반을 비활성화하고 문제가 여전히 존재하는지 묻습니다. 예 또는 아니오라고 답하면, 다른 절반을 비활성화/활성화하여 몇 단계 만에 범인을 빠르게 찾아냅니다. 마치 형사가 확장 프로그램 목록에서 악당을 체계적으로 찾아내는 것과 같습니다.

3단계: 무자비한 가지치기 및 작업 공간 관리

문제가 있거나 단순히 사용하지 않는 확장 프로그램을 식별했다면, 이제 무자비해질 시간입니다.

전역적으로 비활성화: 전혀 사용하지 않는 확장 프로그램은 마우스 오른쪽 버튼을 클릭하여 전역적으로 비활성화합니다.
작업 공간별 비활성화: 이것은 판도를 바꾸는 기능입니다. React 프로젝트에서 Python 린터가 활성화될 필요가 없으며, 그 반대도 마찬가지입니다. 확장 프로그램을 마우스 오른쪽 버튼으로 클릭하고 "비활성화(작업 공간)"를 선택합니다. 이렇게 하면 다른 프로젝트에서는 활성화된 상태를 유지하지만 현재 프로젝트에서는 꺼져서 귀중한 리소스를 절약할 수 있습니다.

또한, 내장 확장 프로그램을 잊지 마세요. 확장 프로그램 보기에서 @builtin을 검색해보세요. 사용하지 않는 언어나 프레임워크에 대한 기본 확장 프로그램을 찾을 수 있습니다. 이것들을 비활성화하는 것도 좋은 성능 향상을 제공할 수 있습니다.

확장 프로그램 제거 결과

숫자로 이야기해봅시다. 저는 대규모 확장 프로그램 제거 전후의 VSCode 시작 성능을 측정했습니다. 결과는 엄청났습니다:

성능 지표	이전 (확장 프로그램 40개)	이후 (확장 프로그램 20개)	개선
등록된 확장 프로그램	2104 ms	1548 ms	26% 더 빠름
워크벤치 준비	1130 ms	961 ms	15% 더 빠름
확장 프로그램 등록 & 확장 호스트 생성	780 ms	495 ms	37% 더 빠름

제 편집기는 더 빨리 시작했을 뿐만 아니라 전반적으로 더 반응성이 좋게 느껴졌습니다. 이 단일 단계가 가장 높은 투자 수익률을 가진 조치입니다.

2단계: 파일 시스템 감시자 길들이기

확장 프로그램을 처리한 후, 다음으로 가장 큰 성과는 VSCode의 끊임없는 파일 감시자를 제어하는 것에서 나옵니다. 이 서비스는 필수적이지만, 프로젝트의 모든 파일을 감시할 필요는 없습니다.

`files.watcherExclude` 강력한 설정

이 설정은 당신의 가장 친한 친구입니다. VSCode에게 자주 변경되지만 핵심 개발 작업에 영향을 미치지 않는 폴더를 감시하는 데 리소스를 낭비하지 말라고 지시합니다.

다음은 제 settings.json에 추가하여 CPU 및 메모리 사용량에 엄청난 차이를 만든 구성입니다:

json

{
  "files.watcherExclude": {
    ".git/objects": true,
    ".git/subtree-cache": true,
    "node_modules/*": true,
    "dist": true,
    "build": true,
    ".vscode": true,
    "coverage": true,
    "__generated__": true,
    "tmp": true,
    ".cache": true
  }
}

이것이 하는 일: node_modules 내부의 모든 혼란, 빌드 출력(dist, build), Git 내부, 기타 캐시 디렉토리를 특별히 무시합니다. 이 폴더들은 패키지 관리자와 빌드 도구에 의해 업데이트되며, 당신이 직접 업데이트하는 것이 아니므로 VSCode가 이것들을 감시하느라 지칠 필요가 없습니다.

보너스 정리: `files.exclude` 및 `search.exclude`

이 기회에 사이드바를 정리하고 검색 속도를 높여봅시다.

files.exclude: 탐색기 사이드바에서 파일과 폴더를 숨깁니다. 이것이 성능을 엄청나게 절약하지는 않지만, 프로젝트 트리를 훨씬 깔끔하게 만듭니다.
search.exclude: 이것은 성능을 향상시킵니다. VSCode가 node_modules 및 기타 빌드 디렉토리의 수천 개의 관련 없는 파일을 색인화하고 검색하는 것을 방지하여 검색 기능을 엄청나게 빠르게 만듭니다.

제 구성:

json

{
  "files.exclude": {
    ".git": true,
    ".DS_Store": true,
    "node_modules": true,
    "__pycache__": true,
    ".next": true,
    "dist": true,
    "build": true
  },
  "search.exclude": {
    "node_modules": true,
    "bower_components": true,
    ".code-search": true,
    "dist": true,
    "build": true,
    ".next": true,
    "coverage": true
  }
}

3단계: TypeScript 엔진 최적화

TypeScript 개발자라면 언어 서버가 조용히 리소스를 소모할 수 있습니다. 다음은 이를 더 효율적으로 만드는 방법입니다.

`tsconfig.json` 강화

가장 먼저 살펴볼 곳은 프로젝트의 tsconfig.json입니다. 여기에 적절한 구성은 TypeScript 컴파일러(그리고 VSCode)가 불필요한 작업을 피하도록 돕습니다.

json

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": [
    "src/"
  ],
  "exclude": [
    "node_modules",
    "dist",
    "build",
    ".spec.ts",
    ".test.ts",
    "coverage"
  ]
}

skipLibCheck: true 옵션은 특히 중요합니다. node_modules의 선언 파일 타입 검사를 건너뛰어 컴파일 및 분석 시간을 크게 줄일 수 있습니다.

VSCode 특정 TypeScript 설정

다음으로, VSCode settings.json에 다음 성능 중심 설정을 추가합니다:

json

{
  "typescript.tsserver.log": "off",
  "typescript.disableAutomaticTypeAcquisition": true,
  "typescript.tsserver.experimental.enableProjectDiagnostics": false
}

"typescript.tsserver.log": "off": 내부 로그 출력을 중지하여 디스크 I/O를 절약합니다.
"typescript.disableAutomaticTypeAcquisition": true: VSCode가 node_modules에 대한 타입 정의를 자동으로 다운로드하려는 시도를 방지합니다. 이 과정은 느리고 예측 불가능할 수 있습니다.
"typescript.tsserver.experimental.enableProjectDiagnostics": false: 진단 부하를 줄여 매우 큰 프로젝트에서 유용합니다.

최후의 수단: TypeScript 캐시 지우기

때때로 TypeScript 언어 서버의 캐시가 손상되거나 비대해질 수 있습니다. 이를 지우면 이상한 성능 문제와 높은 메모리 사용량을 해결할 수 있습니다.

Windows: C:\\Users\\<사용자이름>\\AppData\\Local\\Microsoft\\TypeScript
macOS: ~/Library/Caches/Microsoft/TypeScript
Linux: ~/.cache/typescript

주의: 이것은 공식적인 절차가 아니므로 자신의 책임 하에 수행하십시오. 그러나 제 경험상, 이 폴더들을 삭제하는 것은 안전하며 종종 "거미줄을 제거하는" 효과를 주어 더 빠르게 만듭니다.

4단계: 사용자 인터페이스 간소화

VSCode의 UI는 기능이 풍부하지만, 모든 픽셀을 렌더링할 필요는 없습니다. 사용하지 않는 UI 요소를 비활성화하면 렌더링 리소스를 확보하여 편집기가 더 부드럽게 느껴질 수 있습니다.

다음은 제가 선호하는 UI 최적화입니다:

json

{
  "editor.minimap.enabled": false,
  "breadcrumbs.enabled": false,
  "editor.codeLens": false,
  "workbench.activityBar.visible": false,
  "window.menuBarVisibility": "toggle"
}

저는 미니맵이 큰 파일에서 특히 리소스를 많이 소모하는 것을 발견했습니다. 이것을 끄는 것은 즉각적인 이득이었습니다. 마찬가지로, 코드렌즈(함수 위에 참조 및 구현과 같은 실행 가능한 링크)는 계산하고 렌더링하는 데 비용이 많이 들 수 있습니다.

5단계: 자동 동작 미세 조정

자동화는 방해가 될 때까지는 훌륭합니다.

자동 저장 및 서식 지정

과도한 자동 저장 및 서식 지정은 입력할 때 미세한 지연을 유발할 수 있습니다. 저는 다음 설정에서 최적의 지점을 찾았습니다:

json

{
  "files.autoSave": "onFocusChange",
  "files.autoSaveDelay": 1000,
  "editor.formatOnSave": true,
  "editor.formatOnType": false,
  "editor.formatOnPaste": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  }
}

이것은 현재 파일에서 벗어날 때만 저장하고, 모든 키 입력이나 붙여넣기 시가 아닌 저장 시에만 서식을 지정합니다. 이것은 제가 생각하고 입력하는 동안 포맷터가 백그라운드에서 계속 실행되는 것을 방지합니다.

Git 통합

VSCode의 Git 통합은 편리하지만, 지속적인 폴링은 부담이 될 수 있습니다.

json

{
  "git.enabled": true,
  "git.autorefresh": false,
  "git.autofetch": false,
  "git.decorations.enabled": false
}

이것은 Git을 활성화된 상태로 유지하지만, 자동 새로 고침 및 가져오기를 끕니다. 필요할 때 언제든지 수동으로 가져오고 새로 고칠 수 있습니다. 장식(사이드바의 색상 선)을 비활성화하는 것도 렌더링 오버헤드를 약간 줄여줍니다.

모든 것을 종합하기: 궁극의 `settings.json`

자, 모든 것을 통합해봅시다. 다음은 제 10배 더 빠른 VSCode 경험의 중추를 이루는 완전하고 주석이 달린 settings.json입니다. 이것은 "모든 것을 지배하는 하나의 복사-붙여넣기"입니다.

json

{
  // ===== 파일 감시 제외 (CPU & 메모리 절약) =====
  "files.watcherExclude": {
    ".git/objects": true,
    ".git/subtree-cache": true,
    "node_modules/*": true,
    "dist": true,
    "build": true,
    ".vscode": true,
    "coverage": true,
    "__generated__": true
  },

  // ===== 탐색기 사이드바 정리 =====
  "files.exclude": {
    ".git": true,
    ".DS_Store": true,
    "node_modules": true,
    "dist": true,
    "build": true
  },

  // ===== 검색 성능 향상 =====
  "search.exclude": {
    "node_modules": true,
    "dist": true,
    "build": true,
    ".next": true,
    "coverage": true
  },

  // ===== TYPESCRIPT 최적화 =====
  "typescript.tsserver.log": "off",
  "typescript.disableAutomaticTypeAcquisition": true,

  // ===== UI 경량 모드 =====
  "editor.minimap.enabled": false,
  "breadcrumbs.enabled": false,
  "editor.codeLens": false,

  // ===== 스마트 자동 저장 & 서식 지정 =====
  "files.autoSave": "onFocusChange",
  "editor.formatOnSave": true,
  "editor.formatOnType": false,
  "editor.formatOnPaste": false,

  // ===== 효율적인 GIT 통합 =====
  "git.autorefresh": false,
  "git.autofetch": false,
  "git.decorations.enabled": false,

  // ===== 대용량 파일 처리 =====
  "files.maxMemoryForLargeFilesMB": 4096
}

고급 진단 및 최종 생각

이 모든 설정을 적용했는데도 여전히 궁금하다면, VSCode에는 또 다른 강력한 도구가 있습니다.

명령 팔레트에서 Developer: Startup Performance를 실행합니다.

이것은 VSCode 시작 중에 발생하는 상황을 밀리초 단위로 자세히 분석하여 마지막으로 남아있는 고질적인 병목 현상을 정확히 찾아내는 데 탁월합니다.

성능에 대한 전체론적 접근 방식

VSCode 최적화는 훌륭한 단계이지만, 느린 개발 환경에는 여러 원인이 있을 수 있다는 것을 기억해야 합니다. 코드 편집기를 간소화했듯이, 워크플로우의 다른 부분을 간소화하는 도구를 사용하는 것이 좋습니다. 이것이 제가 Apidog를 제 프로세스에 통합한 이유입니다. 도구가 느리거나 연결되어 있지 않으면 API 관리가 엄청난 시간 소모가 될 수 있습니다. API 설계, 디버깅 및 테스트를 위한 빠르고 올인원 솔루션은 고성능 코딩 환경을 완벽하게 보완하여 전체 개발 루프를 긴밀하고 효율적으로 유지합니다.

결론적으로, 빠른 VSCode는 마법에 관한 것이 아닙니다. 의도적인 접근에 관한 것입니다. 우리가 사용하는 도구와 확장 프로그램의 장단점을 이해하고 의식적인 선택을 하는 것입니다. 확장 프로그램을 제어하고, 파일 감시자를 길들이고, TypeScript를 최적화하고, UI를 간소화함으로써 "10배 더 빠른" 느낌을 확실히 얻을 수 있습니다.

자, 무엇을 기다리고 있습니까? VSCode 설정을 열고 자신만의 최적화 여정을 시작하세요. 당신의 CPU(그리고 당신의 정신 건강)가 당신에게 감사할 것입니다.

button

범인들: 왜 VSCode가 그렇게 느릴까요?

1단계: 확장 프로그램 제거 – 가장 강력한 수단

1단계: 리소스 잡아먹는 확장 프로그램 식별

2단계: 확장 프로그램 이분법을 이용한 정밀 타격

3단계: 무자비한 가지치기 및 작업 공간 관리

확장 프로그램 제거 결과

2단계: 파일 시스템 감시자 길들이기

files.watcherExclude 강력한 설정

보너스 정리: files.exclude 및 search.exclude

3단계: TypeScript 엔진 최적화

tsconfig.json 강화

VSCode 특정 TypeScript 설정

최후의 수단: TypeScript 캐시 지우기

4단계: 사용자 인터페이스 간소화

5단계: 자동 동작 미세 조정

자동 저장 및 서식 지정

Git 통합

모든 것을 종합하기: 궁극의 settings.json

고급 진단 및 최종 생각

성능에 대한 전체론적 접근 방식

`files.watcherExclude` 강력한 설정

보너스 정리: `files.exclude` 및 `search.exclude`

`tsconfig.json` 강화

모든 것을 종합하기: 궁극의 `settings.json`