안녕하세요 오늘은 가장 많은 개발자들이 사용하는 코드 편집기, Visual Studio Code (VS Code) 설치 방법을 알아보겠습니다.
왜 VS Code를 사용하는가?
개발을 시작할 때 가장 먼저 필요한 도구가 바로 코드 편집기(Code Editor) 입니다. VS Code는 마이크로소프트에서 개발한 오픈 소스 편집기로, 현재 전 세계 개발자들이 가장 많이 사용하는 도구 중 하나입니다.
여러 코드 편집기 중에서도 VS Code를 추천하는 이유는 크게 세 가지 입니다.
첫째, 완전 무료이며 프로그램이 가벼워 저사양 PC에서도 빠르게 실행됩니다. 둘째, Windows, macOS, Linux 등 모든 운영체제(OS)에서 동일한 환경으로 사용할 수 있습니다. 셋째, 확장 기능(Extensions)을 통해 필요한 기능을 자유롭게 추가할 수 있어 나만의 최적화된 작업 환경을 만들 수 있습니다.
이러한 이유로 처음 개발을 시작하는 분들께 VS Code를 입문 편집기로 추천합니다.
VS Code의 주요 핵심 기능은 이렇습니다.
- IntelliSense(자동 완성): 코드를 입력할 때 함수, 변수명 등을 자동으로 추천하여 오타를 줄이고 개발 속도를 높여줍니다.
- 디버깅 지원: 코드 내의 오류를 쉽게 찾고 수정할 수 있는 도구가 내장되어 있습니다.
- 내장 터미널: 별도의 명령 프롬포트(CMD)를 띄울 필요 없이 편집기 안에서 직접 명령어를 입력할 수 있습니다.
- Git 연동: 소스 코드 버전 관리 도구인 Git을 시각적으로 쉽게 사용할 수 있는 인터페이스를 제공합니다.
그럼 지금부터 VS Code 설치 방법과 기초 설정을 단계별로 소개해 드리겠습니다.
VS Code 설치 가이드
1. 공식 사이트 접속 및 파일 다운로드
먼저 https://code.visualstudio.com/ 에 접속합니다.
Visual Studio Code - The open source AI code editor | Your home for multi-agent development
Visual Studio Code redefines AI-powered coding with GitHub Copilot for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.
code.visualstudio.com
페이지 첫 접속 화면 입니다.
- 기본 다운로드: 메인 화면 중앙의 [Download for Windows] 버튼을 클릭하면 현재 운영체제에 맞는 설치 파일이 즉시 다운로드 됩니다.
- 운영체제 선택: 만약 MacOS나 Linux 등 다른 환경을 사용 중이라면 오른쪽 상단의 [Download] 버튼을 클릭하여 본인의 OS와 시스템 아키텍처(x64, Arm64 등)에 맞는 버전을 선택할 수 있습니다.
2. 설치 프로그램 실행 및 옵션 설정
다운로드한 설치 파일을 실행한 후 사용권 계약에 동의하고 설치를 진행합니다.
'추가 작업 선택' 단계에서는 아래 항목들의 역할을 참고하여 본인에게 필요한 항목을 선택하세요.
- 바탕 화면에 바로가기 만들기: 자주 사용한다면 체크해 두면 편리합니다. 필요 없다면 건너뛰어도 됩니다.
- "Code(으)로 열기" 작업을 탐색기 메뉴에 추가: 폴더나 파일을 우클릭하면 VS Code로 바로 열 수 있어 유용합니다.
- PATH에 추가: 터미널에서 code 명령어로 편집기를 실행할 수 있게 해주는 옵션입니다. 되도록 체크하는 것을 권장합니다.
설정이 끝났다면 [설치] 버튼을 눌러 과정을 마무리합니다.
프로젝트 시작하기: 폴더 열기
코드를 작성하기 전, 작업 내용이 저장될 프로젝트 폴더(작업 디렉토리) 를 먼저 만들어야 합니다.
1. 원하는 경로(예: C:\practice)에 새 폴더를 생성합니다.
저는 C드라이브에 practice 라는 이름의 폴더를 만들었습니다.
2. VS Code를 실행한 후 왼쪽 상단 메뉴에서 [File] > [Open Folder...] 를 클릭합니다.
3. 방금 만든 폴더를 선택하면 이제 해당 폴더 안에서 자유롭게 파일을 만들고 코딩을 시작할 수 있습니다.
탐색기 패널에서 폴더명 오른쪽의 아이콘을 클릭하면 새 파일 또는 새 폴더를 바로 추가할 수 있습니다.
VS Code 액티비티 바(Activity Bar) 설명
VS Code 왼쪽에는 세로로 나열된 아이콘들이 있는데, 이를 액티비티 바(Activity Bar)라고 합니다. 개발 시 가장 자주 사용하는 메뉴들로 구성되어 있으며, 각 아이콘의 역할을 다음과 같습니다.
| 아이콘 | 명칭 (영문) | 주요 기능 |
| 📄 | 탐색기 (Explorer) | 새 파일·폴더를 만들고 프로젝트 구조를 확인합니다. 파일을 클릭하면 오른쪽 편집창에 내용이 표시됩니다. |
| 🔍 | 검색 (Search) | 프로젝트 전체 파일에서 특정 단어, 함수, 변수가 어디에 사용됐는지 찾을 때 유용합니다. |
| 🌿 | 소스 제어 (Source Control) | Git을 사용하여 코드의 변경 사항을 추적하고 관리합니다. |
| 🐞 | 실행 및 디버그 (Run and Debug) | 코드를 실행하고 오류(버그)를 찾아 수정하는 도구를 실행합니다. |
| 🧩 | 확장 (Extensions) | 새로운 기능을 추가하기 위해 확장 프로그램을 검색하고 설치합니다. |
효율을 높여주는 필수 확장 프로그램(Extensions) 추천
액티비티 바의 확장(Extensions) 탭에서 생산성을 높여주는 다양한 도구를 설치할 수 있습니다. 그중에서도 처음 시작할 때 특히 유용한 확장 프로그램 두 가지를 소개합니다.
1. Live Server
작성한 HTML/CSS 코드를 실제 브라우저에서 어떻게 보이는지 즉시 확인할 수 있게 해주는 도구입니다.
- 사용법: 코드 편집창에서 마우스 우클릭 후 [Open with Live Server]를선택합니다.
- 특징: 로컬 서버를 실행하여 파일을 저장할 때마다 브라우저 화면이 자동으로 새로고침(Auto Reload) 됩니다.
2. Live Preview
VS Code 편집기 내부에서 브라우저 화면을 실시간으로 미리 볼 수 있는 기능입니다.
- 사용법: 편집기 우측 상단의 돋보기 아이콘(Show Preview)을 클릭합니다.
- 특징: 별도로 브라우저 창을 띄우지 않고 화면을 분할하여 코드 수정과 결과 확인을 동시에 할 수 있어 작업이 훨씬 편리합니다.
마치며
지금까지 VS Code의 설치 방법과 기초적인 설정에 대해 알아보았습니다. 확장 프로그램을 활용하면 본인의 개발 스타일에 맞게 환경을 더욱 편리하게 꾸밀 수 잇으니, 여러 가지 도구를 직접 써보면서 자신만의 작업 환경을 만들어 보세요. 궁금한 점이 있다면 댓글로 남겨주세요!