VSCode에는 훌륭한 확장 프로그램이 많지만, 그중에서도 Live Server는 단연 최고의 확장 프로그램 중 하나로 꼽힙니다.
Live Server를 사용하면 몇 번의 클릭만으로 실제 브라우저에서 웹 페이지를 실시간으로 확인할 수 있습니다. 게다가 실시간 리로딩(live reloading) 기능을 지원하기 때문에 코드를 수정하면 변경 사항이 브라우저에 자동으로 반영됩니다.
사용 방법도 매우 간단합니다. 확인하고 싶은 HTML 파일에서 마우스 오른쪽 버튼을 클릭한 후 'Open with Live Server'를 선택하기만 하면 됩니다.
▲ 실행 중인 Live Server
그런데 Live Server가 예상대로 브라우저를 열어 페이지를 보여주지 않는다면 어떻게 해야 할까요? 이런 문제가 발생한다면 아래의 방법들을 하나씩 순서대로 시도해 보세요.
1. VSCode 재시작하기
때로는 가장 단순해 보이는 방법, 즉 VSCode를 완전히 새로 시작하는 것이 가장 효과적일 수 있습니다.
먼저 진행 중인 모든 작업을 저장하세요. 그다음 VSCode를 종료하면 설치된 확장 프로그램들도 함께 중지됩니다.
이후 VSCode를 다시 열고 재시도해 보세요. 확인하려는 HTML 파일로 이동한 뒤 마우스 오른쪽 버튼을 클릭하고 'Open with Live Server'를 선택하면 됩니다.
2. Live Server에 사용할 브라우저 지정하기
확장 프로그램 자체는 정상적으로 작동하지만, 시스템에 기본 브라우저가 설정되어 있지 않아 문제가 발생하는 경우도 있습니다.
운영체제에 기본 브라우저를 이미 설정했더라도, Live Server에 어떤 브라우저를 사용할지 명시적으로 알려주는 것이 좋습니다.
먼저 F1 키를 눌러 명령 팔레트(Command Palette)를 연 후 Preferences: Open Settings (JSON)을 입력하고 해당 옵션을 선택하세요.
그러면 VSCode의 settings.json 파일이 열립니다.
파일의 맨 아래로 스크롤한 후 마지막 설정 항목 뒤에 쉼표(,)를 추가하고, 다음 내용을 붙여넣으세요.
"liveServer.settings.CustomBrowser": "chrome"
참고로 "liveServer.settings.CustomBrowser" 값에는 "chrome" 외에도 "firefox", "safari" 등 다른 브라우저 이름을 지정할 수 있습니다.
마지막으로 settings.json 파일을 저장한 뒤 Live Server를 다시 실행해 보세요.
3. 운영체제의 기본 브라우저 설정하기
Live Server에 사용할 브라우저를 지정했음에도 불구하고 여전히 해당 브라우저에서 페이지가 제대로 열리지 않을 수 있습니다.
이럴 때 다음으로 시도해 볼 것은 운영체제 자체의 기본 브라우저를 설정하는 것입니다.
설정 방법은 운영체제마다 조금씩 다르므로, 잘 모르겠다면 사용 중인 운영체제의 기본 브라우저 변경 방법을 검색해 보는 것이 좋습니다.
다음은 Windows에서 기본 앱을 설정하는 화면의 예시입니다.
▲ Windows 기본 브라우저 설정 화면 (출처: Advitya-sharma)
4. 라이브 페이지에 직접 접속하기
어떤 이유에서든 Live Server가 브라우저에서 페이지를 자동으로 열어주지 않더라도 걱정할 필요는 없습니다. 언제든지 원하는 브라우저를 직접 열어 페이지를 확인할 수 있기 때문입니다.
선호하는 브라우저를 연 후 다음 주소로 접속하기만 하면 됩니다.
https://127.0.0.1:5500/<파일_이름>
예를 들어 파일 이름이 index.html이라면 https://127.0.0.1:5500/index.html로 접속하면 됩니다.
Live Server가 실행 중인 동안에는 이 주소를 통해 페이지를 정상적으로 확인할 수 있습니다.
마치며
지금까지 Live Server가 기대대로 작동하지 않을 때 시도해 볼 수 있는 몇 가지 대표적인 해결 방법을 살펴보았습니다. 대부분의 경우 위 방법 중 하나로 문제가 해결될 것입니다.
즐겁고 편안한 실시간 코딩 되세요!
freeCodeCamp의 오픈소스 커리큘럼은 지금까지 4만 명 이상이 개발자로 취업하는 데 도움을 주었습니다. 무료로 코딩 학습을 시작해 보세요.