VS Code에서 Live Server가 제대로 동작하지 않을때

며칠 전, 간단한 HTML 테스트 파일을 하나 만들어 웹에서 확인해보려 했습니다.
사용한 툴은 Visual Studio Code, 그리고 실행 도구는 Live Server였습니다.

웹 코드를 수정하고 저장할 때마다 브라우저에 실시간으로 반영되는

이 Live Server 기능은 평소에도 자주 활용하던 유용한 도구입니다.

그런데 이상한 일이 생겼습니다.

분명 svg_drawing.html이라는 파일을 만들고 저장한 후 Live Server를 실행했는데,

브라우저에 뜨는 화면은 엉뚱한 내용이었습니다.

예전에 작업하던 다른 HTML 파일이 자꾸 열리는 겁니다.

Live Server가 잘못 동작하는 건가 싶어 재시작도 해보고,

파일을 다시 저장해보기도 했지만 문제는 여전했습니다.

당황한 마음에 VS Code의 상태 표시줄을 다시 살펴보니,

하단 오른쪽에 **"Go Live" 대신 "Port:5500"**이라는 표시가 떠 있었습니다.

이건 Live Server가 이미 실행 중이라는 의미인데,

도대체 왜 내가 만든 최신 파일이 아닌 예전 파일이 열리는 걸까 의문이 들었습니다.

조금 더 살펴보면서 알게 된 핵심 원인은 의외로 단순했습니다.
VS Code에서 Live Server는 '파일' 단위가 아니라,

'폴더' 단위로 작동한다는 점이었습니다.

저는 그동안 단일 HTML 파일만 열어서 작업하는 경우가 많았고,

이번에도 마찬가지였습니다.

그런데 VS Code는 파일 하나만 열었을 경우,

그 파일이 어느 폴더에 속해 있는지를 기준으로 웹 루트를 설정하지 못해,

이전에 열려 있던 다른 세션을 기준으로 작동하고 있었던 것입니다.

문제의 해결은 간단했습니다.
VS Code에서 File > Open Folder를 선택한 후,

제가 작업한 svg_drawing.html 파일이 들어 있는 폴더 전체(예: D:\SVG_test)를 열었습니다.

이후 그 폴더 내에서 해당 HTML 파일을 열고,

다시 "Open with Live Server"를 실행했습니다.

그러자 브라우저에는 정확히 제가 만든 HTML 파일이 정상적으로 출력되기 시작했습니다.

작은 차이가 만든 큰 차이

처음엔 단순한 Live Server 오류라고 생각했지만,

이번 경험을 통해 도구의 기본 구조를 이해하는 것이 얼마나 중요한지 다시 느끼게 되었습니다.

Live Server는 분명히 편리한 도구이지만,

기본 사용 방식이 폴더 기반이라는 점을 모른 채 사용하면 오히려 혼란을 겪을 수도 있습니다.

혹시 저처럼 단일 HTML 파일만 열어놓고 작업하는 습관이 있으셨다면,

앞으로는 반드시 작업 폴더 전체를 열고 Live Server를 실행하는 습관을 들이시는 걸 권해드립니다.

그 작은 차이 하나가 웹 개발의 흐름을 훨씬 부드럽고 안정적으로 만들어 줄 겁니다.

감사합니다.

함께 읽어보세요.