4단계: Live Server로 실시간 실행 & 자주 발생하는 오류 해결
작성한 웹페이지를 실제 웹 브라우저에서 띄우고, 코드를 수정할 때마다 자동으로 실시간 반영되는 개발 환경을 경험해봅니다. 또한 초보자가 마주치는 단골 오류 대처법도 정리해드립니다.
Live Server 실행하는 2가지 쉬운 방법
VS Code 창 최하단 파란색 상태 표시줄을 보면 무선 안테나 모양 아이콘과 함께 [Go Live] 글자가 있습니다. 이 버튼을 한 번만 클릭하면 됩니다.
index.html 파일 편집기 안의 빈 공간에 마우스 오른쪽 버튼을 클릭하고, 메뉴에서 [Open with Live Server]를 누르거나 단축키 Alt + L을 누릅니다.
실시간 새로고침(Live Reload) 직접 확인해보기:
1. 브라우저가 열리면 주소창에 http://127.0.0.1:5500/index.html 이 나타납니다.
2. 모니터 왼쪽에 VS Code, 오른쪽에 웹 브라우저를 나란히 배치합니다.
3. VS Code에서 <h1> 글자를 "반가워요!"로 수정하고 저장(Ctrl+S)합니다.
4. 브라우저에서 새로고침(F5)을 누르지 않아도 글자가 즉시 바뀌는 마법을 확인하세요!
초보자가 가장 자주 묻는 질문 (FAQ & 트러블슈팅)
질문을 클릭하면 상세한 해결책이 펼쳐집니다.
가장 흔한 원인 2가지:
- 폴더를 열지 않은 경우: 단일 파일만 열려 있으면 버튼이 뜨지 않습니다.
[파일] > [폴더 열기]로 상위 폴더를 열고index.html을 열어보세요. - 확장 프로그램 미설치: 2단계에서 Live Server 확장이 제대로 설치되었는지 확인하세요.
상단 파일 탭 이름 옆에 동그라미 흰 점이 떠 있다면 파일이 아직 저장되지 않은 상태입니다! 키보드 Ctrl + S (Mac: ⌘ + S)를 눌러 저장하거나, 1단계에서 설정한 Auto Save (자동 저장: afterDelay) 옵션이 켜져 있는지 확인하세요.
문자 인코딩(Encoding) 문제입니다. HTML 문서의 <head> 영역 안에 아래 태그가 반드시 들어있는지 확인하세요:
<meta charset="UTF-8">
또한 VS Code 우측 맨 하단에 UTF-8이라고 표시되어 있는지 확인하세요.
파일 이름에 오타가 없는지 확인하세요. 웹 서버는 반드시 소문자 index.html을 시작 페이지로 찾습니다. Index.html (대문자 I)이나 index.htm, 또는 윈도우 탐색기에서 확장자가 숨겨져 index.html.txt로 생성된 경우 404 에러가 발생합니다.
전혀 위험하지 않습니다! 이전에 열어둔 Live Server 창이 남아있을 때 발생하며, Live Server가 자동으로 Port 5501 등 다른 번호로 연결해 줍니다. 닫고 싶다면 하단 상태 표시줄의 Port: 5500을 클릭하면 서버가 종료됩니다.
축하합니다! VS Code 기본 과정을 완주하셨습니다!
이제 전문 소프트웨어 엔지니어들이 실무에서 사용하는 강력한 개발 환경을 갖추게 되었습니다. 나만의 멋진 웹페이지와 애플리케이션을 직접 만들어보세요!