시스매

윈도우에서 vscode 5배 빨라지는 wsl 셋팅법

13 min read

2025-08-12 22:14

Tags:

윈도우에서 vscode 5배 빨라지는 wsl 셋팅법

네, 그럼요! 5단계 WSL2 사용법에 대해 더 자세하고 알기 쉽게 설명해 드릴게요. 이 방법은 Windows 환경에서 웹 개발을 할 때 겪는 속도 문제를 근본적으로 해결해 주는 가장 확실한 방법입니다.

🤔 왜 WSL2를 사용해야 할까요?

가장 큰 이유는 파일 시스템의 처리 속도 차이 때문입니다.

  • Windows (NTFS 파일 시스템): 수많은 작은 파일을 읽고 쓰는 작업(예: node_modules 폴더 접근)에 상대적으로 느립니다. 백신 예외 처리를 해도 근본적인 구조의 차이는 남아있습니다.

  • Linux (ext4 파일 시스템): 이런 종류의 작업에 매우 효율적으로 설계되었습니다. Next.js 개발 서버가 수천 개의 파일을 순식간에 읽고 변경 사항을 감지하는 데 훨씬 빠릅니다.

**WSL2 (Windows Subsystem for Linux 2)**는 Windows 안에서 실제 리눅스 커널을 실행하는 기술입니다. 단순히 흉내 내는 것이 아니라, Windows와 리눅스가 긴밀하게 통합되어 돌아가죠. 덕분에 우리는 Windows의 편리함은 그대로 누리면서, 웹 개발에 최적화된 리눅스의 강력한 성능을 함께 사용할 수 있습니다.

🚀 WSL2 설치 및 개발 환경 구축 (단계별 가이드)

차근차근 따라오시면 어렵지 않습니다.

1단계: WSL2 설치하기

가장 간단한 방법은 터미널을 이용하는 것입니다.

  1. 시작 메뉴에서 PowerShell 또는 터미널을 찾아 마우스 오른쪽 버튼을 클릭한 후, **‘관리자 권한으로 실행’**을 선택하세요.

  2. 열린 터미널 창에 아래 명령어를 입력하고 Enter를 누릅니다.

    Bash

    wsl --install

    이 명령어 하나로 WSL2 기능 활성화와 기본 리눅스 배포판(보통 Ubuntu) 설치가 모두 진행됩니다. 설치가 끝나면 컴퓨터를 재부팅해야 할 수 있습니다.

  3. 재부팅 후 Ubuntu가 자동으로 실행되면, 사용할 **사용자 이름(username)**과 **비밀번호(password)**를 설정하라는 메시지가 나옵니다. (Windows 계정과 달라도 됩니다. 잊어버리지 않게 잘 기억해두세요!)

2단계: VS Code와 WSL 연결하기

이제 VS Code가 WSL 안에 있는 리눅스 환경에 직접 연결되도록 설정합니다.

  1. VS Code를 실행합니다.

  2. 왼쪽의 확장 프로그램 탭(네모 블록 모양 아이콘)을 엽니다.

  3. 검색창에 WSL을 검색하여 Microsoft에서 만든 ‘WSL’ 확장 프로그램을 설치합니다.

3단계: WSL 환경에서 Node.js 설치하기

Windows에 설치된 Node.js가 아닌, WSL(Ubuntu) 내부에 Node.js를 새로 설치해야 합니다. nvm(Node Version Manager)을 사용하면 버전 관리가 매우 쉬워집니다.

  1. Ubuntu 터미널을 엽니다. (시작 메뉴에서 Ubuntu를 검색하여 실행)

  2. 아래 명령어를 차례대로 입력하여 nvm을 설치합니다.

    Bash

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
  1. 터미널을 닫았다가 다시 열거나, 아래 명령어를 실행하여 nvm을 활성화합니다.
source ~/.bashrc
  1. nvm을 이용해 최신 LTS 버전의 Node.js를 설치합니다.
nvm install --lts

4단계: 프로젝트 실행하기 (새로운 개발 워크플로우)

이제 모든 준비가 끝났습니다! 개발할 때의 순서는 다음과 같습니다.

  1. Ubuntu 터미널을 실행합니다.

  2. 리눅스 홈 디렉터리로 이동하여 프로젝트 폴더를 만듭니다.

    Bash

    cd ~  # 홈 디렉터리로 이동
mkdir projects # projects 폴더 생성
cd projects # projects 폴더로 이동

  3. 이곳에 git clone으로 프로젝트를 받거나, npx create-next-app@latest로 새 프로젝트를 시작합니다.

  4. 프로젝트 폴더로 들어간 후, 마법의 명령어를 입력하세요.

    Bash

    code .

    이 명령어는 WSL에 연결된 상태로 VS Code 새 창을 열어줍니다. VS Code 왼쪽 하단을 보면 WSL: Ubuntu 라고 표시된 것을 볼 수 있습니다. 이게 가장 중요합니다!

  5. 이제 VS Code에 내장된 터미널(Ctrl + \``)을 열면, 그 터미널은 Windows의 PowerShell이 아닌 **WSL의 Ubuntu 터미널**입니다. 여기서 npm run dev`를 실행하고 개발을 시작하면 됩니다.

⚠️ 가장 중요한 규칙: 파일 저장 위치

프로젝트 파일은 반드시 WSL 파일 시스템 내부에 저장해야 합니다.

  • 올바른 위치 (빠름 🚀): /home/사용자이름/projects/내프로젝트 (Ubuntu 터미널에서 ~/projects/내프로젝트 경로)

  • 잘못된 위치 (매우 느림 🐢): /mnt/c/Users/사용자이름/projects/... (Windows의 C 드라이브)

Windows 탐색기에서 WSL 파일에 접근하고 싶다면, 주소창에 \\wsl$을 입력하면 네트워크 드라이브처럼 접근할 수 있습니다. 이 설정이 처음에는 조금 낯설 수 있지만, 한번 익숙해지면 비교할 수 없이 쾌적한 개발 속도를 경험하게 되실 겁니다.

원리가 뭔가요? 🧑‍💼

가장 큰 이유는 Windows와 Linux가 파일을 관리하는 방식이 다르기 때문입니다.

  • Windows의 파일 시스템 (NTFS): 일반적인 문서나 사진, 프로그램 파일 등을 다루는 데는 훌륭하지만, node_modules 폴더처럼 수만 개의 아주 작은 파일들을 한 번에 읽고 쓰는 작업에는 상대적으로 비효율적입니다.

  • Linux의 파일 시스템 (ext4): 바로 그런, 수많은 작은 파일을 처리하는 작업에 매우 최적화되어 있습니다. 파일의 생성, 수정, 삭제, 조회 속도가 훨씬 빠릅니다.

WSL2는 에뮬레이터가 아니라 **실제 리눅스 커널(운영체제의 핵심)**을 Windows 위에서 직접 실행하는 방식입니다. 따라서 프로젝트 파일을 WSL 내부에 두면, 모든 개발 관련 작업(패키지 설치, 서버 실행 등)이 이 효율적인 리눅스 파일 시스템 위에서 돌아가게 됩니다.

도서관 사서 비유 analogy

Windows 사서는 한 번에 한 권씩 대출/반납 처리를 꼼꼼히 하는 스타일이라면, Linux 사서는 수만 개의 작은 쪽지(코드 파일)를 분류하고 찾는 데 특화된 자신만의 정리 시스템을 가진 전문가와 같습니다. Next.js 개발은 후자의 상황과 같아서 Linux 사서가 훨씬 빨리 일을 처리하는 것이죠.

얼마나 빨라지나요? 🚀

성능 향상 폭은 프로젝트의 크기나 컴퓨터 사양에 따라 달라질 수 있지만, 일반적으로 웹 개발 작업에서 2배에서 5배, 많게는 그 이상의 성능 향상을 경험하는 경우가 많습니다.

  • 패키지 설치 (npm install): 수많은 파일을 다운로드하고 설치하는 이 작업에서 가장 큰 속도 차이를 느낄 수 있습니다. 설치 시간이 절반 이하로 줄어드는 것은 흔한 일입니다.

  • 개발 서버 시작 (npm run dev): 프로젝트를 분석하고 실행하는 초기 구동 속도가 눈에 띄게 빨라집니다.

  • 핫 리로딩 (HMR): 코드를 수정한 후 저장했을 때 브라우저에 변경사항이 반영되는 속도가 거의 **‘즉시’**에 가깝게 느껴질 정도로 반응성이 좋아집니다.

결론적으로, WSL2는 Windows 환경에서 웹 개발을 할 때 겪는 고질적인 파일 I/O 병목 현상을 해결해 주는 가장 확실하고 효과적인 방법입니다. 쾌적한 개발 환경을 제대로 구축하신 셈이죠!

PC를 쾌적하게 만드는 일반 꿀팁 ✨

개발 환경 외에 컴퓨터 자체의 반응 속도를 높이는 방법들입니다.

1. 시작프로그램 정리하기

컴퓨터를 켤 때 자동으로 시작되는 불필요한 프로그램들을 꺼두면 부팅 속도와 전반적인 시스템 반응 속도가 빨라집니다.

  • 방법: 작업 관리자(Ctrl + Shift + Esc) 실행 → 시작 앱 탭으로 이동 → 불필요한 앱(특히 ‘높음’으로 표시된 것들)을 선택하고 ‘사용 안 함’으로 변경

2. Windows 시각 효과 줄이기

화려한 애니메이션 효과를 줄이면 시스템 리소스를 아껴 체감 성능이 확 올라갑니다.

  • 방법: Win + R 키 누름 → sysdm.cpl 입력 후 Enter → 고급 탭 → 성능 섹션의 설정 버튼 클릭 → ‘최적 성능으로 조정’ 선택

이때 글꼴을 부드럽게 표시하는 ‘폰트 안티에일리어싱(Anti-aliasing)’ 기능까지 함께 꺼져서 텍스트가 깨진 것처럼 울퉁불퉁하게 보이는 것입니다. 얘만 켜주면 나머지는 대부분 적응하면 괜찮다.

3. 전원 관리 옵션 ‘최고 성능’으로 설정하기

노트북이 전원에 연결되어 있을 때는 성능을 최대로 발휘하도록 설정하는 것이 좋습니다.

  • 방법: 설정 → 시스템 → 전원 및 배터리 → 전원 모드를 **‘최고 성능’**으로 변경

이 팁들은 작아 보이지만, 매일 사용하는 컴퓨터의 경험을 완전히 바꿔줄 수 있습니다.

References

그래프 뷰