Windows에서 VS Code
설치하기

웹 브라우저에서 공식 다운로드 페이지 code.visualstudio.com/download를 엽니다. 화면 왼쪽에 Windows 칸이 있습니다.

큰 Windows 버튼을 그냥 눌러도 됩니다. 그 버튼은 User Installer의 x64 버전을 내려받습니다. 대부분의 PC에서 이것이 맞습니다.

[ 화면 ]

다운로드 페이지code.visualstudio.com/download 화면의 Windows 칸.

[ 화면 ]

시스템 종류 확인Windows 설정 > 시스템 > 정보 화면에서 "시스템 종류" 줄이 보이는 상태.

내려받은 파일은 보통 다운로드 폴더에 있습니다. 더블클릭해 실행합니다.

[ 화면 ]

다운로드 폴더의 설치 파일다운로드 폴더에서 VSCodeUserSetup-x64 실행 파일을 더블클릭하기 직전 화면.

설치 마법사는 다음 순서로 지나갑니다. 앞의 세 화면은 특별히 바꿀 것이 없으니 그대로 다음을 누릅니다.

1. 사용권 계약 화면에서 동의합니다를 고르고 다음.
2. 설치 위치 선택 화면은 기본값 그대로 다음.
3. 시작 메뉴 폴더 선택 화면도 기본값 그대로 다음.

[ 화면 ]

사용권 계약설치 마법사 첫 화면에서 "동의합니다"를 선택한 상태.

그다음 추가 작업 선택 화면이 나옵니다. 이 가이드에서 유일하게 기본값을 바꾸는 곳이니 잠깐 멈춰서 읽어 주세요.

[ 화면 ]

추가 작업 선택체크박스 다섯 개가 보이는 "추가 작업 선택" 화면. 탐색기 상황에 맞는 메뉴 두 항목을 체크한 상태.

체크를 마쳤으면 다음, 이어서 설치를 누릅니다. 설치는 보통 1분 안에 끝납니다.

[ 화면 ]

설치 진행진행 막대가 차오르는 설치 중 화면 또는 설치 완료 화면.

처음 열면 색 테마 화면보다 GitHub 로그인 창이 먼저 뜹니다. GitHub Copilot을 쓰라는 안내인데 이 가이드에서는 필요 없습니다. 오른쪽 아래 Continue without Signing In을 누르고 넘어가세요. 계정은 나중에 필요해질 때 연결하면 됩니다.

그다음 Make It Yours 화면에서 색 테마를 고르라고 합니다. 지금 아무거나 골라도 되고 나중에 언제든 바꿀 수 있습니다. 어두운 배경이 눈이 편하면 Dark 2026, 밝은 쪽이 좋으면 Light 2026을 고른 다음 Continue를 누릅니다.

[ 화면 ]

첫 실행 화면설치 직후 처음 열린 VS Code의 시작(Welcome) 화면.

VS Code는 기본이 영어입니다. Microsoft가 만든 무료 한국어 언어 팩을 설치하면 메뉴와 버튼이 전부 한국어로 바뀝니다.

Windows 표시 언어가 한국어라면, 설치 직후 오른쪽 아래에 한국어로 바꾸겠냐고 묻는 알림이 저절로 뜹니다. 떴다면 설치 및 다시 시작을 누르는 것으로 끝입니다.

알림이 안 떴다면 직접 설치합니다.

1. Ctrl + Shift + X를 눌러 확장 탭을 엽니다.
2. 검색창에 Korean Language Pack을 입력합니다.
3. Microsoft가 만든 Korean Language Pack for Visual Studio Code를 찾아 Install을 누릅니다.
4. 설치가 끝나면 다시 시작하겠냐고 묻습니다. Restart를 누릅니다.

[ 화면 ]

한국어 언어 팩Korean Language Pack for Visual Studio Code 확장 페이지와 Install 버튼.

[ 화면 ]

표시 언어 구성명령 팔레트에 Configure Display Language를 입력해 언어 목록이 뜬 화면.

버튼을 아무거나 눌러 보기 전에, 화면이 어떤 칸으로 나뉘어 있는지 30초만 보고 가면 이후가 훨씬 수월합니다. VS Code 화면은 여섯 덩어리입니다.

• 1
  활동 표시줄 (Activity Bar) 맨 왼쪽 세로 아이콘 줄. 탐색기, 검색, 소스 제어, 확장 사이를 오갑니다.
• 2
  기본 사이드 바 (Primary Side Bar) 활동 표시줄에서 고른 것이 펼쳐지는 칸. 보통은 폴더 안 파일 목록인 탐색기가 떠 있습니다.
• 3
  편집기 (Editor) 실제로 글을 쓰는 가운데 영역. 파일을 여러 개 열면 위에 탭으로 쌓입니다.
• 4
  패널 (Panel) 편집기 아래 칸. 터미널, 출력, 오류와 경고가 여기 나옵니다. 평소엔 접혀 있습니다.
• 5
  보조 사이드 바 (Secondary Side Bar) 오른쪽 칸. 기본으로 채팅 화면이 들어갑니다. 안 쓰면 닫아 두어도 됩니다.
• 6
  상태 표시줄 (Status Bar) 맨 아래 가로 줄. 지금 커서가 몇 번째 줄인지, 파일 인코딩과 종류가 무엇인지 보여 줍니다.

[ 화면 ]

실제 화면의 여섯 영역폴더를 연 상태의 VS Code 전체 창. 위 그림의 여섯 영역이 실제로 어디인지 번호로 표시한 화면.

VS Code는 파일 하나가 아니라 폴더 하나를 여는 방식으로 씁니다. 폴더를 열면 그 안의 모든 파일이 왼쪽 탐색기에 나열되고, 검색도 그 폴더 전체에서 됩니다.

여는 방법은 둘 중 편한 쪽으로 하면 됩니다.

• 탐색기에서 폴더를 오른쪽 클릭하고 Code(으)로 열기. (2단계에서 체크한 그 항목입니다.)
• VS Code 메뉴에서 파일 > 폴더 열기를 고르고 폴더를 선택.

[ 화면 ]

폴더 열기연습 폴더를 연 직후, 왼쪽 탐색기에 폴더 이름이 뜬 화면.

이제 파일을 하나 만들어 봅니다. 탐색기의 폴더 이름 옆에 마우스를 올리면 새 파일 아이콘이 나타납니다. 그것을 누르고 파일 이름을 index.html로 입력한 뒤 Enter를 칩니다.

index.html 에 붙여 넣을 내용

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <title>첫 페이지</title>
</head>
<body>
  <h1>설치 성공</h1>
  <p>VS Code로 만든 첫 파일입니다.</p>
</body>
</html>

붙여 넣었으면 Ctrl + S로 저장합니다. 탭 이름 옆의 흰 점이 사라지면 저장된 것입니다.

[ 화면 ]

첫 파일index.html을 만들고 예제 HTML을 입력해 저장한 편집기 화면. 색이 입혀진 상태.

만든 파일을 브라우저로 보려면, 탐색기에서 index.html을 오른쪽 클릭하고 파일 탐색기에 표시를 고른 뒤 그 파일을 더블클릭하면 됩니다.

1. 명령 팔레트를 열어 봅니다

Ctrl + Shift + P를 누르면 위쪽에 입력창이 열립니다. 여기에 하고 싶은 일을 적으면 해당 기능이 검색됩니다. 메뉴 위치를 외울 필요가 없어서, VS Code에서 가장 먼저 익힐 단축키입니다.

[ 화면 ]

명령 팔레트Ctrl+Shift+P로 명령 팔레트를 열어 명령 목록이 뜬 화면.

2. 터미널에서 설치를 확인합니다

Ctrl + `(숫자 1 왼쪽의 물결 키)를 누르면 아래쪽에 터미널이 열립니다. 지금 연 폴더가 이미 현재 위치로 잡혀 있어서, 폴더를 찾아 들어갈 필요가 없습니다.

설치가 제대로 됐는지 확인하는 명령

code --version

버전 번호 세 줄이 나오면 2단계의 PATH에 추가가 제대로 적용된 것입니다. "명령을 찾을 수 없습니다"가 나오면 아래 자주 막히는 곳을 보세요.

[ 화면 ]

통합 터미널패널의 터미널 탭에서 code --version을 실행해 버전이 출력된 화면.

3. 자동 저장을 켭니다

메뉴에서 파일 > 자동 저장을 켭니다. "고쳤는데 왜 안 바뀌지?"의 절반은 저장을 안 한 것입니다.