웹 개발을 처음 시작할 때 가장 먼저 해야 할 일은 바로 개발 환경 세팅입니다.
그중에서도 많은 개발자와 입문자들이 사용하는 대표적인 도구가 바로 **VS Code(Visual Studio Code)**입니다.
이 글에서는 HTML, CSS, JavaScript 웹 개발을 위한 VS Code 설치 및 기본 설정 방법을 단계별로 정리해드립니다.
비전공자도 따라할 수 있는 쉬운 설명으로 구성했으니, 지금 바로 웹 개발을 위한 첫걸음을 시작해보세요.
✅ VS Code란 무엇인가?
**Visual Studio Code(VS Code)**는 마이크로소프트에서 개발한 무료 코드 편집기로,
웹 개발, 파이썬, 자바 등 다양한 언어를 지원하는 **가볍고 강력한 통합 개발 환경(IDE)**입니다.
- 완전 무료
- 한글 지원
- HTML, CSS, JS 자동 완성
- 다양한 확장 기능 제공
🔰 입문자에게 가장 적합한 에디터로, 실무 개발자들도 널리 사용합니다.
✅ 1단계: VS Code 설치하기
- 웹 브라우저에서 https://code.visualstudio.com 접속
- 운영체제에 맞는 버전 선택 후 다운로드
- Windows: Stable 설치 파일 (.exe)
- macOS: .zip 또는 .dmg
- Linux: .deb 또는 .rpm
- 설치 마법사의 안내에 따라 설치 진행
설치가 완료되면 바탕화면 또는 시작 메뉴에서 VS Code 실행 가능
✅ 2단계: VS Code 한글로 설정하기
처음 실행 시 영어로 되어 있어 불편할 수 있습니다. 한글로 바꾸려면:
- 상단 메뉴에서 View > Extensions 클릭 (또는 단축키 Ctrl + Shift + X)
- 검색창에 Korean Language Pack 입력
- Korean Language Pack for Visual Studio Code 설치
- 설치 후 하단 팝업에서 "Change Language and Restart" 클릭
재시작 후 VS Code가 한글로 변경됩니다.
✅ 3단계: 웹 개발에 필요한 확장 프로그램 설치
추천 확장 프로그램 (Extensions)
| Live Server | HTML 파일을 실시간으로 브라우저에 반영 |
| Prettier | 코드 자동 정리 및 포맷팅 |
| Auto Rename Tag | HTML 태그 자동 짝 수정 |
| CSS Peek | 클래스 이름 클릭 시 정의된 CSS 위치로 이동 |
설치 방법
- 좌측 확장 아이콘(또는 Ctrl + Shift + X) 클릭
- 원하는 확장 프로그램 검색
- [설치] 버튼 클릭
- 설치 후 자동 활성화
✅ 4단계: 기본 사용자 설정 (Settings)
상단 메뉴에서 파일 > 기본 설정 > 설정 또는 Ctrl + ,을 눌러 사용자 설정에 진입하세요.
자주 사용하는 기본 설정
- 자동 저장 설정
- 검색창에 auto save 입력
- "파일 저장 시 자동 저장" → "afterDelay"로 설정
- 탭 간격 설정
- editor.tabSize → 2 또는 4 (개인 취향에 맞게)
- 폰트 변경
- editor.fontFamily → 'Noto Sans Mono', 'D2Coding', Consolas 등
✅ 5단계: 웹 프로젝트 폴더 만들고 연결하기
- 컴퓨터 바탕화면 또는 원하는 위치에 새 폴더 생성 (예: my-web-project)
- VS Code에서 파일 > 폴더 열기 클릭
- 생성한 폴더 선택 후 열기
- 폴더 안에서 HTML, CSS, JS 파일을 자유롭게 생성하고 작성 가능
앞으로 웹 개발은 이 폴더 안에서 시작되고 구성됩니다.
✅ 6단계: Live Server로 HTML 미리보기
- Live Server 확장 프로그램이 설치되어 있다면,
- HTML 파일을 열고, 우클릭 → "Live Server에서 열기" 클릭
- 브라우저에서 실시간 반영된 결과 확인 가능
- 저장(Ctrl + S) 시 즉시 브라우저에 반영됨
💡 추가 팁: VS Code 사용을 더 편하게 만드는 단축키
| Ctrl + B | 사이드바 열기/닫기 |
| Ctrl + ~ | 터미널 열기 |
| Ctrl + P | 파일 빠르게 검색 |
| Ctrl + Shift + E | 탐색기 열기 |
| Ctrl + / | 주석 처리 |
자주 사용하는 기능은 단축키를 익히면 작업 속도가 훨씬 빨라집니다.
마무리: 개발 환경 세팅이 첫걸음입니다
HTML과 CSS, JavaScript를 배우기 위해 가장 먼저 해야 할 일은 개발 환경을 제대로 세팅하는 것입니다.
VS Code는 무료이면서도 강력한 기능을 제공하는 도구로,
처음 웹 개발을 배우는 사람에게 최적의 선택지입니다.
이 글의 내용을 따라 설치 및 설정을 완료했다면,
이제 여러분은 자신의 첫 웹페이지를 만들 준비가 된 것입니다.
웹은 환경 설정부터 실습까지 직접 해보며 익힐 때 가장 빠르게 성장합니다.