Visual Studio Code는 마이크로소프트에서 무료로 제공하는 오픈소스 코드 편집기로, 웹 개발자와 프로그래머들 사이에서 가장 널리 쓰이는 툴 중 하나입니다. 가볍지만 강력한 기능을 갖추고 있어 초보자부터 전문가까지 모두에게 사랑받고 있죠. 이 글에서는 Visual Studio Code의 기본 사용법, 확장 프로그램 설정 방법, 그리고 실무에 꼭 필요한 단축키 팁까지 한 번에 정리해드리겠습니다. 저 역시 이 도구를 처음 접했을 때 많은 시행착오를 겪었지만, 지금은 매일 사용하는 필수 툴이 되었습니다.
코드 편집기 기본 사용법 익히기
처음 Visual Studio Code(이하 VS Code)를 설치하고 실행하면, 군더더기 없이 깔끔한 인터페이스가 인상적입니다. 좌측에는 탐색기, 검색, 소스 제어, 디버깅, 확장 탭이 있고, 가운데에는 코드 편집 영역이 펼쳐져 있습니다. 저는 HTML과 CSS를 처음 배울 때, 메모장으로 코딩하던 습관이 있었는데 VS Code를 접하고 나서 생산성이 두 배는 늘었습니다.
코드 작성은 매우 직관적입니다. 예를 들어, index.html 파일을 열고 ! 입력 후 Tab 키를 누르면 기본 HTML 문서 구조가 자동 완성됩니다. 이런 기능은 Emmet이라는 내장 기능 덕분인데, 초보자가 문법을 익히기 전에 구조부터 익힐 수 있어 큰 도움이 됩니다.
또한, 코드가 잘못되었을 때 실시간으로 밑줄이 표시되어 오류를 빠르게 파악할 수 있습니다. 예전에는 콘솔에 오류가 떠야 그때서야 알아차렸는데, 이제는 타이핑 하면서 즉시 수정할 수 있어 시간 절약이 큽니다.
파일 간 전환도 매우 빠릅니다. Ctrl + P를 누르면 최근 사용한 파일을 검색해 바로 열 수 있고, Ctrl + \를 사용하면 화면을 분할하여 두 개의 파일을 동시에 볼 수도 있습니다. 저처럼 자주 HTML과 CSS, JS 파일을 번갈아 보면서 작업하는 사람에겐 정말 유용하죠.
처음엔 단순히 "코드를 입력하는 프로그램" 정도로 생각했지만, 쓰면 쓸수록 개발 환경 전체를 커스터마이징 할 수 있는 강력한 툴이라는 걸 깨닫게 되었습니다.
확장 프로그램 설치 및 설정하기
VS Code의 진짜 매력은 다양한 확장 프로그램을 통해 기능을 무한대로 확장할 수 있다는 점입니다. 확장 탭에서 원하는 기능을 검색하고 '설치'만 누르면 바로 사용할 수 있기 때문에 초보자도 부담 없이 접근 가능합니다.
처음 웹 개발을 시작했을 때, 저는 Prettier(자동 코드 정렬기)와 Live Server(HTML 실시간 미리보기)를 설치해 사용했는데, 이 두 개만으로도 개발 속도가 크게 향상되었습니다. 예를 들어 Live Server는 HTML 파일을 저장하면 자동으로 브라우저가 새로고침 되며 결과를 바로 보여줍니다. 예전엔 수동으로 새로고침을 반복했는데, 이젠 저장만 해도 됩니다.
다음으로 추천하는 확장은 ESLint입니다. 자바스크립트 문법 체크 및 스타일 가이드를 자동으로 점검해주는 도구인데, 프로젝트에서 실수를 줄이는 데 큰 도움이 됩니다. 저는 코딩을 배우던 시절, let과 const의 구분도 헷갈렸지만 ESLint가 실시간으로 알려줘서 많은 시행착오를 줄일 수 있었습니다.
확장을 너무 많이 설치하면 무거워질 수 있으니 필요한 것만 선택적으로 설치하는 것이 좋습니다. 제가 자주 사용하는 확장 리스트는 다음과 같습니다:
- Prettier – Code formatter
- Live Server
- ESLint
- GitLens – Git 히스토리 시각화
- Auto Rename Tag – HTML/XML 태그 자동 동기화
이 확장들은 개발 속도를 높이고, 실수를 줄이며, 코드 품질까지 향상시켜 주기 때문에 꼭 설치해보시길 추천드립니다. 설정은 대부분 기본값으로 충분하지만, settings.json을 편집하면 더 세밀한 설정도 가능합니다.
단축키로 생산성 높이기
VS Code의 진짜 실력은 단축키에 있습니다. 마우스로 클릭하는 것보다 단축키를 이용하면 훨씬 빠르게 작업할 수 있기 때문이죠. 처음에는 외우기 어렵다고 생각했지만, 자주 쓰다 보니 손이 먼저 움직이게 되더군요.
제가 가장 자주 사용하는 단축키 몇 가지를 소개합니다:
- Ctrl + Shift + P : 모든 명령어 실행 (Command Palette)
- Ctrl + P : 파일 빠르게 열기
- Ctrl + Shift + F : 전체 프로젝트 내 검색
- Alt + Shift + ↓ or ↑ : 현재 줄 복사
- Ctrl + / : 주석 처리
- Ctrl + Space : 자동 완성
처음에는 이 단축키를 종이에 적어서 모니터 옆에 붙여두고 사용했는데, 어느새 자연스럽게 익숙해졌습니다. 특히 Alt + Shift + ↓는 한 줄을 복사해 아래에 붙여넣는 기능인데, 반복되는 코드 입력 시 매우 유용합니다.
또한 테마 변경도 단축키로 가능해서 시각적으로 작업 환경을 꾸미는 데도 편리합니다. 저는 ‘One Dark Pro’ 테마를 선호하는데, 눈의 피로를 줄여주고 가독성도 좋아서 추천드립니다.
단축키에 익숙해지면 VS Code는 단순한 텍스트 에디터가 아닌, 프로 개발 툴로 변모합니다. 결국 속도가 곧 생산성이기 때문에, 단축키를 익히는 것은 시간 투자 이상의 가치가 있습니다.
Visual Studio Code는 단순한 코드 편집기가 아닌, 개발 환경 전체를 바꿔주는 혁신적인 도구입니다. 기본 기능부터 확장 프로그램, 단축키까지 모든 요소가 초보자에게도 친절하게 설계되어 있어 학습 곡선을 완만하게 만들어 줍니다. 저 역시 이 도구 덕분에 코딩을 보다 즐겁게 배울 수 있었고, 지금은 작업할 때마다 없어서는 안 될 존재가 되었습니다. 여러분도 VS Code를 통해 개발의 즐거움을 경험해보시길 바랍니다!