> ## Documentation Index
> Fetch the complete documentation index at: https://docs.baeum.ai.kr/llms.txt
> Use this file to discover all available pages before exploring further.

# Visual Studio Code

Visual Studio Code(줄여서 VS Code)는 Microsoft가 만든 **무료 코드 편집기**입니다. 코드 자동 완성, 문법 하이라이팅, 디버깅 등 개발에 필요한 기능을 지원하며, 현재 전 세계에서 가장 많이 사용되는 코드 편집기입니다.

<Note>
  VS Code는 "Visual Studio"와 다른 프로그램입니다. Visual Studio는 훨씬 무겁고 큰 개발 도구이고, VS Code는 가볍고 빠른 코드 편집기입니다. 여기서는 VS Code를 설치합니다.
</Note>

## 사전 요구사항

* **운영체제**: Windows 10 이상
* **디스크 공간**: 약 500MB 이상의 여유 공간

## 설치 과정

<Steps>
  <Step title="공식 웹사이트에서 다운로드">
    웹 브라우저에서 [code.visualstudio.com](https://code.visualstudio.com)에 접속합니다.

    <img src="https://mintcdn.com/ddok/u-wdFw6DcFUUAg_e/images/environment-setup/windows/vscode/01-website.png?fit=max&auto=format&n=u-wdFw6DcFUUAg_e&q=85&s=0729b3e6a3f19cd77aba14681f1c57c5" alt="VS Code 공식 웹사이트 - Download for Windows 버튼" width="2560" height="1392" data-path="images/environment-setup/windows/vscode/01-website.png" />

    페이지 중앙에 있는 **"Download for Windows"** 버튼을 클릭하여 설치 파일을 다운로드합니다.
  </Step>

  <Step title="다운로드 확인">
    버튼을 클릭하면 자동으로 다운로드가 시작되고, "Thanks for downloading VS Code!" 페이지가 표시됩니다.

    <img src="https://mintcdn.com/ddok/u-wdFw6DcFUUAg_e/images/environment-setup/windows/vscode/02-download-initiated.png?fit=max&auto=format&n=u-wdFw6DcFUUAg_e&q=85&s=b6993455125e2c210e30d26fb67a48f9" alt="다운로드 시작 페이지 - Thanks for downloading VS Code!" width="2560" height="1392" data-path="images/environment-setup/windows/vscode/02-download-initiated.png" />

    브라우저 상단 또는 하단에 다운로드 진행 상태가 표시됩니다. 다운로드가 완료되면 설치 파일을 클릭하여 실행합니다.
  </Step>

  <Step title="라이선스 동의">
    설치 프로그램이 실행되면 **사용권 계약** 화면이 표시됩니다. Microsoft 소프트웨어 라이선스 계약서 내용입니다.

    <img src="https://mintcdn.com/ddok/u-wdFw6DcFUUAg_e/images/environment-setup/windows/vscode/04-license-agreed.png?fit=max&auto=format&n=u-wdFw6DcFUUAg_e&q=85&s=4ce6f3241468ffc68ffed1a184764d14" alt="라이선스 동의 화면 - 동의합니다(A) 선택" width="598" height="464" data-path="images/environment-setup/windows/vscode/04-license-agreed.png" />

    화면 아래쪽에서 \*\*"동의합니다(A)"\*\*를 선택한 후 **다음(N)** 버튼을 클릭합니다.

    <Warning>
      "동의합니다"를 선택하지 않으면 다음 버튼이 활성화되지 않습니다. 반드시 "동의합니다(A)"를 선택합니다.
    </Warning>
  </Step>

  <Step title="설치 경로 선택">
    VS Code가 설치될 폴더를 지정하는 화면입니다.

    <img src="https://mintcdn.com/ddok/u-wdFw6DcFUUAg_e/images/environment-setup/windows/vscode/05-destination-folder.png?fit=max&auto=format&n=u-wdFw6DcFUUAg_e&q=85&s=bc1b1ee0bfa0e519411118694c52ecde" alt="설치 경로 선택 - 기본 경로 표시됨" width="598" height="464" data-path="images/environment-setup/windows/vscode/05-destination-folder.png" />

    기본 경로(보통 `C:\Users\사용자이름\AppData\Local\Programs\Microsoft VS Code`)를 그대로 사용하면 됩니다. **다음(N)** 버튼을 클릭합니다.
  </Step>

  <Step title="시작 메뉴 폴더 선택">
    Windows 시작 메뉴에 VS Code 바로가기를 만들 폴더 이름을 정하는 화면입니다.

    <img src="https://mintcdn.com/ddok/u-wdFw6DcFUUAg_e/images/environment-setup/windows/vscode/06-start-menu.png?fit=max&auto=format&n=u-wdFw6DcFUUAg_e&q=85&s=d2f7503b53667e2fc0a548b908c64be8" alt="시작 메뉴 폴더 선택 - 기본값 Visual Studio Code" width="598" height="464" data-path="images/environment-setup/windows/vscode/06-start-menu.png" />

    기본값 "Visual Studio Code"를 그대로 두고 **다음(N)** 버튼을 클릭합니다.
  </Step>

  <Step title="추가 작업 선택">
    VS Code 설치 시 함께 설정할 추가 옵션들을 선택하는 화면입니다. 이 설정들은 나중에 VS Code를 더 편리하게 사용할 수 있게 해줍니다.

    <img src="https://mintcdn.com/ddok/u-wdFw6DcFUUAg_e/images/environment-setup/windows/vscode/07-additional-tasks.png?fit=max&auto=format&n=u-wdFw6DcFUUAg_e&q=85&s=fdddd66dc95a02291602841e25dee506" alt="추가 작업 선택 - 바탕 화면 바로가기, 파일 연결, PATH 추가 옵션" width="598" height="464" data-path="images/environment-setup/windows/vscode/07-additional-tasks.png" />

    각 옵션의 의미:

    * **바탕 화면에 바로가기 만들기**: 바탕 화면에 VS Code 아이콘을 추가합니다.
    * **"Code(으)로 열기" 작업을 Windows 탐색기 파일의 상황에 맞는 메뉴에 추가**: 파일을 마우스 오른쪽 버튼으로 클릭했을 때 "Code로 열기" 메뉴가 나타납니다.
    * **Code를(을) 지원되는 파일 형식에 대한 편집기로 등록합니다**: 지원되는 파일을 더블클릭하면 VS Code에서 열립니다.
    * **PATH에 추가 (다시 시작한 후 사용 가능)**: 터미널에서 `code` 명령어를 입력하여 VS Code를 실행할 수 있게 합니다.

    <Warning>
      **"PATH에 추가"는 반드시 체크해야 합니다.** 이 옵션이 체크되어야 나중에 터미널에서 `code .` 명령어로 현재 폴더를 VS Code에서 열 수 있습니다. 개발 작업에 매우 자주 사용됩니다.
    </Warning>

    <Tip>
      "Code(으)로 열기" 작업 추가 옵션도 체크하면, 파일 탐색기에서 바로 VS Code를 열 수 있어 편리합니다.
    </Tip>

    원하는 옵션을 선택한 후 **다음(N)** 버튼을 클릭합니다.
  </Step>

  <Step title="설치 준비 완료 확인">
    지금까지 선택한 설치 설정의 요약 정보가 표시됩니다. 설치 위치, 시작 메뉴 폴더, 추가 작업 등이 한눈에 보입니다.

    <img src="https://mintcdn.com/ddok/u-wdFw6DcFUUAg_e/images/environment-setup/windows/vscode/08-ready-to-install.png?fit=max&auto=format&n=u-wdFw6DcFUUAg_e&q=85&s=21d80a474946c7579b34190e605984fe" alt="설치 준비 완료 요약 - 설치 위치, 시작 메뉴 폴더, 추가 작업 정보" width="598" height="464" data-path="images/environment-setup/windows/vscode/08-ready-to-install.png" />

    내용을 확인한 후 **설치(I)** 버튼을 클릭하여 설치를 시작합니다.
  </Step>

  <Step title="설치 진행">
    파일이 추출되면서 설치가 진행됩니다. 녹색 진행 바가 표시됩니다.

    <img src="https://mintcdn.com/ddok/vpYxTFFktlX5a4TM/images/environment-setup/windows/vscode/09-installing.png?fit=max&auto=format&n=vpYxTFFktlX5a4TM&q=85&s=804e2ae4ce61055858c421f38fec555e" alt="설치 진행 중 - 파일 추출 진행 바 표시" width="598" height="464" data-path="images/environment-setup/windows/vscode/09-installing.png" />

    보통 1\~2분 정도 소요됩니다.
  </Step>

  <Step title="설치 완료">
    설치가 완료되면 "Visual Studio Code 설치 마법사 완료" 화면이 표시됩니다.

    <img src="https://mintcdn.com/ddok/vpYxTFFktlX5a4TM/images/environment-setup/windows/vscode/10-install-complete.png?fit=max&auto=format&n=vpYxTFFktlX5a4TM&q=85&s=d031dc7a788fce93a9673bc7ca6af867" alt="설치 완료 - Visual Studio Code 실행 체크박스와 종료 버튼" width="598" height="464" data-path="images/environment-setup/windows/vscode/10-install-complete.png" />

    **"Visual Studio Code 실행"** 체크박스가 체크된 상태에서 **종료(F)** 버튼을 클릭하면 VS Code가 바로 실행됩니다.
  </Step>

  <Step title="첫 실행 및 초기 설정">
    VS Code가 처음 실행되면 **"Get started with VS Code"** 워크스루(안내) 화면이 표시됩니다.

    <img src="https://mintcdn.com/ddok/vpYxTFFktlX5a4TM/images/environment-setup/windows/vscode/11-first-launch-walkthrough.png?fit=max&auto=format&n=vpYxTFFktlX5a4TM&q=85&s=b391c59af219feaebf5755fbf189c489" alt="첫 실행 - Get started with VS Code 워크스루 화면" width="1200" height="800" data-path="images/environment-setup/windows/vscode/11-first-launch-walkthrough.png" />

    이 화면에서는 다음과 같은 초기 설정을 할 수 있습니다:

    * **Use AI features with Copilot for free**: GitHub Copilot AI 기능을 무료로 사용할 수 있습니다. 관심이 있다면 "Use AI Features" 버튼을 클릭합니다.
    * **Choose your theme**: VS Code의 색상 테마(밝은 배경/어두운 배경)를 선택합니다.
    * **Watch video tutorials**: VS Code 사용법 동영상을 볼 수 있습니다.

    워크스루를 따라 설정하거나, "Mark Done"을 클릭하여 건너뛸 수 있습니다.

    워크스루를 닫으면 **Welcome** 탭이 표시됩니다.

    <img src="https://mintcdn.com/ddok/vpYxTFFktlX5a4TM/images/environment-setup/windows/vscode/12-welcome-tab.png?fit=max&auto=format&n=vpYxTFFktlX5a4TM&q=85&s=6e0e5e0420b81f8343615f80eded4853" alt="Welcome 탭 - Start 옵션과 Walkthroughs 목록" width="1200" height="800" data-path="images/environment-setup/windows/vscode/12-welcome-tab.png" />

    여기서 새 파일 만들기, 폴더 열기, Git 저장소 복제 등의 작업을 시작할 수 있습니다.
  </Step>
</Steps>

## 설치 확인

**PowerShell** 또는 **명령 프롬프트**를 **새로** 열고 (이미 열려 있던 것은 닫고 다시 여세요) 다음 명령어를 입력합니다.

```bash theme={null}
code --version
```

버전 번호가 출력되면 VS Code가 성공적으로 설치된 것입니다.

<Tip>
  터미널에서 특정 폴더를 VS Code로 열고 싶다면, 해당 폴더로 이동한 후 `code .`을 입력합니다. 점(.)은 "현재 폴더"를 의미합니다.
</Tip>

<Warning>
  만약 `code` 명령어가 인식되지 않는다면, 설치 과정에서 "PATH에 추가" 옵션을 체크하지 않았을 수 있습니다. 이 경우 VS Code를 다시 설치하면서 해당 옵션을 체크하거나, 터미널을 완전히 닫았다가 다시 열어보세요.
</Warning>

## 설치 점검 목록

* 관리자 권한/필수 도구 등 사전 요구사항을 먼저 확인했습니다.
* 설치 후 버전 확인 명령어(`--version`)를 실행해 정상 설치를 검증했습니다.
* PATH/환경변수 변경이 필요한 경우 터미널을 다시 열어 적용 여부를 확인했습니다.
* 문제가 생겼을 때를 대비해 설치 로그 또는 스크린샷을 남겼습니다.

## 문제 해결 가이드

* 설치 파일이 실행되지 않으면 관리자 권한으로 다시 실행합니다.
* 명령어가 인식되지 않으면 터미널을 새로 열고 PATH 반영 여부를 확인합니다.
* 버전이 맞지 않으면 기존 설치를 정리한 뒤 권장 버전으로 재설치합니다.
* 설정 변경 후 동작이 이상하면 시스템 재시작 후 다시 확인합니다.

## 관련 문서

<CardGroup cols={2}>
  <Card title="Setup 홈" icon="house" href="/setup/index">
    운영체제별 설치 흐름을 다시 확인합니다.
  </Card>

  <Card title="다음: Node.js" icon="arrow-right" href="/setup/windows/nodejs">
    다음 설치 단계를 이어서 진행합니다.
  </Card>
</CardGroup>