Visual Studio Code에 대해서

컬럼월드·2025년 9월 6일

먼저 Visual Studio Code란?
이크로소프트에서 개발한, 가볍고 강력하며 다양한 프로그래밍 언어를 지원하는 무료 코드 편집기(Code Editor)입니다.

개발 공부를 시작하기전 VSCode, Notepad++나 Visual Studio, IntelliJ IDEA, PyCharm 같은 이름들을 들어보셨나요?

맞습니다! 대표적인 IDE와 Code Editor들입니다.

IDE (Integrated Development Environment) - 통합 개발 환경

IDE는 프로그래밍에 필요한 다양한 도구를 통합한 소프트웨어로,

개발자가 코드 작성, 디버깅, 테스트, 빌드 등을 한 곳에서 수행할 수 있도록 해줍니다.

IDE는 프로그래밍 생산성을 높이기 위해 코드 자동 완성, 디버깅, 코드 내비게이션, 빌드 및 실행 도구 등 다양한 개발 지원 기능을 포함하고 있습니다.

IDE에는 Visual Studio, IntelliJ IDEA, PyCharm 등이 대표적입니다.

즉, 통합 개발 환경의 약자로, 개발자들이 프로그래밍을 할 때 필요한 다양한 도구를 한곳에 모아둔 소프트웨어입니다.

Code Editor - 코드 편집 도구

코드 에디터는 텍스트 파일을 작성하고 편집하는 도구입니다.

코딩을 할 때는 주로 소스 코드를 작성하는 데 사용됩니다.

IDE처럼 추가적인 기능이 많지는 않지만, 플러그인을 통해 기능을 확장할 수 있는 제품들이 있고,

시스템 자원을 거의 사용하지 않고 빠른 실행속도를 가지고 있습니다.

Code Editor에는 Visual Studio Code, Notepad++,Vim 등이 대표적입니다.

개인적으로 저는 코디 에디터를 처음 접할 때, Visual Studio Code를 썼습니다.

Visual Studio Code 란?

우리는 Visual Studio Code라는 코드 편집 도구를 사용합니다.

Visual Studio Code는 Microsoft가 개발한 가볍고 빠르면서도 강력한 소스 코드 편집기입니다. 무료여서 개발은 원하는 모든 사람들이 쓸 수 있습니다.

Visual Studio Code의 대표 이미지 입니다.

Visual Studio와 이름이 비슷하지만, VS Code가 있는데요.
풀 기능의 IDE(통합 개발 환경) 보다는 코드 편집기에 가깝습니다.

그러나 다양한 확장 기능을 설치하면, 사실상 IDE처럼 사용할 수 있습니다.

코드 작성 화면입니다.

그럼 IDE를 사용하면 될텐데 왜 VS Code를 사용할까요?

Visual Studio Code는

경량성과 확장성 덕분에 개발 생산성을 높일 수 있는 도구입니다.
- 모든 프로그래밍 언어에 맞춰 사용자가 원하는 대로 환경을 설정할 수 있습니다.
- 다양한 언어 및 프로젝트에 맞는 확장 기능을 쉽게 설치할 수 있습니다.
현재 많은 개발자들이 사용하고 있는 에디터 이기도 합니다.
다양한 개발 환경에 적합합니다.
- 웹 개발: HTML, CSS, JavaScript, TypeScript 등의 웹 개발
- 백엔드 개발: Node.js, Python, Go 등의 백엔드 개발
- 모바일 및 클라우드 개발: Flutter, React Native, Azure와 같은 모바일과 클라우드 서비스 활용가능

결론적으로

VS Code는 경량성과 확장성을 동시에 제공하여 개발자의 요구에 맞게 커스터마이징할 수 있는 코드 편집기입니다.

다양한 언어와 플랫폼을 지원하므로, 많은 개발자들에게 인기 있는 선택지입니다.

이제 Visual Studio Code를 설치하고 환경설정을 진행해 보겠습니다.

에디터 설치하기

VSCode 설치 가이드

Window, MAC, Ubuntu 의 운영체제 별 설치 방법이 다릅니다. 다운로드를 각각 알아보도록 하겠습니다.

설치 방법 안내

Visual Studio Code 공식 다운로드

먼저 VSCode의 공식 다운로드 페이지에 접속하여 자신의 운영체제에 맞는 다운로드를 클릭합니다.

아래의 내용을 확인하며 운영체제에 맞는 방법에 따라 설치를 진행합니다.

Windows
- 다운로드한 .exe 설치 파일을 실행합니다.
- 설치 마법사에 따라 다음 단계를 진행합니다.
  - 사용권 계약 동의.
  - 설치 경로 설정.
  - 원하는 경우 "시작 메뉴에 추가", "Windows 탐색기에서 열기", "코드 편집기 기본 설정" 등의 옵션 선택.
- "설치" 버튼을 클릭하여 설치를 진행합니다.
- 설치 완료 후 "Visual Studio Code 실행"을 선택한 후 "완료" 를 클릭합니다.
- 이후 바탕화면 또는 시작 메뉴에서 정상적으로 실행되는지 확인합니다.
MAC
- 다운로드한 .zip 파일을 열어 압축을 해제 합니다.
- "Visual Studio Code.app" 파일을 "응용 프로그램" 폴더로 드래그하여 이동합니다.
- 응용 프로그램 폴더에서 Visual Studio Code를 실행합니다.
- 정상적으로 실행되는지 확인합니다.
- Optional : 터미널에서 code 명령어로 편집기 열기 사용 가능하게 설정
  - VS Code를 실행한 후, 상단 메뉴에서 View > Command Palette로 이동.
  - Shell Command: Install 'code' command in PATH 명령을 실행.
  - 이제 터미널에서 code 명령어로 Visual Studio Code를 실행 할 수 있습니다.
Ubuntu
- 다운로드한 .deb 파일을 파일 관리자에서 찾아 더블 클릭합니다.
- Ubuntu Software 또는 Gdebi 패키지 설치기가 실행됩니다.
- "Install" 버튼을 클릭하여 설치를 진행합니다.
- 설치가 완료되면 애플리케이션 메뉴에서 "Visual Studio Code"를 검색하여 실행합니다.

정상실행 확인

Window환경에서 VSCode가 정상적으로 설치된 모습입니다.

모든 설치를 완료하고 바로 위의 사진과 유사한 화면이 나오는지 확인합니다.

만약, 설치가 잘 진행되지 않는다면,

자신의 운영체제에 맞는 다운로드 파일을 받았는지 확인.
다운로드 파일과 기 설치된 내용을 지우고 다시 설치 진행.

위의 두가지를 실행해보세요!

다 되셨다면 축하드립니다!!👏👏👏 설치를 완료하셨어요.

자 이제 코드작성을 할 수 있게 되었습니다. 그런데 처음부터
작성하긴 어려우시니 개발할 때 자신의 개발환경을 원활하게
진행해줄 익스텐션, 즉 확장팩을 소개해드리고 마치겠습니다.

익스텐션 다운로드 방법

익스텐션은 매우 간단한 설치를 지원합니다.

아래 설명을 통해 설치 방법을 확인하고 익스텐션 소개를 확인하며 필요한 익스텐션을 직접 설치해 보세요.

익스텐션 접근하기

- 빨간 박스는 VSCode의 익스텐션 아이콘입니다.
- 해당 아이콘을 선택하여 익스텐션들을 확인하세요.

익스텐션 설치하기

원하는 익스텐션을 검색 및 선택 합니다.
그리고 사진의 빨간 박스를 선택하면 익스텐션의 설치가 완료 됩니다.

코드 가독성이 좋아지는 익스텐션 소개

1. Indent Rainbow

코드의 들여쓰기를 색상으로 구분하여 들여쓰기 오류를 쉽게 발견할 수 있게 해주는 플러그인입니다.
주요 기능 :
- 들여쓰기를 레벨별로 색상으로 구분
- 들여쓰기 오류를 쉽게 식별 가능
적용 예시 이미지

2. Better Comments

주석을 카테고리별로 색상으로 구분해주는 플러그인입니다. 중요한 부분, TODO, 경고 등을 눈에 띄게 하여 코드 리뷰나 디버깅 시 가독성을 높여줍니다.
주요기능 :
- TODO, ?, ! 등 특정 단어를 강조해 색상 구분
- 질문이나 경고 주석을 쉽게 식별 가능
- 다양한 주석 스타일을 지원
사용방법 :
- 사용중인 언어에 맞는 주석을 연뒤
- *, ! ,?, TODO 등의 키워드를 입력하고 주석을 작성한다.
적용 예시 이미지

3. Bracket Pair Colorizer → 더 강력한 VSCode 내장기능으로 변경!

중괄호, 대괄호, 소괄호 등의 짝을 색깔로 구분해주는 플러그인입니다. 복잡한 코드에서 괄호의 짝을 구분하기 쉽게 해줍니다.
주요기능 :
- 중첩된 괄호에 다양한 색상 적용
- 사용자가 색상 설정을 커스터마이즈 가능
✨내장된 기능 설정방법 :
- 1. VSCode 에디터내의 설정 버튼을 선택합니다.

- 2. Settings 에서 bracket pair 를 검색합니다.

- 3. 사진과 같이 설정합니다.
적용 예시 이미지