핫 리로드가 뭐야 — 저장하면 화면이 바로 바뀌는 것

핫 리로드는 코드를 고쳐서 저장하면 브라우저를 새로고침하지 않아도 바뀐 부분이 화면에 바로 나타나는 기능입니다. 2026년 7월 기준으로 웬만한 개발 도구에는 기본으로 들어 있고, AI로 코딩을 시작한 초보라면 처음 며칠 안에 반드시 마주치게 됩니다. 이 글을 읽으면 "핫 리로드"라는 말이 정확히 뭘 가리키는지, 왜 이게 개발 속도를 크게 바꾸는지, AI로 코딩할 때 왜 특히 편해지는지를 한 번에 정리할 수 있습니다.

핫 리로드는 코드 저장 순간 화면에 결과가 즉시 뜨는 "실시간 미리보기"입니다. 예전처럼 고칠 때마다 새로고침하고 기다릴 필요가 없어, 수정하고 바로 확인하는 과정이 훨씬 빨라집니다.

예전엔 왜 불편했을까

코드를 조금 고쳐서 화면이 어떻게 바뀌는지 보고 싶다고 해봅시다.
예전 방식은 이랬습니다.
코드를 저장하고, 브라우저로 넘어가서, 새로고침 버튼을 누르고, 화면이 다시 그려질 때까지 기다립니다.
글자 색 하나 바꾸는 데도 이 과정을 매번 반복해야 했습니다.
하루에 수백 번씩 고친다고 생각하면, 새로고침과 기다림에만 꽤 많은 시간이 쌓입니다.
특히 화면 깊숙이 들어가서 확인하던 중이라면, 새로고침 한 번에 그 위치가 처음으로 돌아가 버리는 것도 번거로웠습니다.

핫 리로드는 정확히 뭘까

핫 리로드는 이 반복을 없애줍니다.
코드를 저장하는 그 순간, 개발 도구가 바뀐 부분을 감지해서 화면에 바로 반영합니다.
새로고침 버튼을 누를 필요도, 기다릴 필요도 없습니다.
쉽게 말하면 코드 편집 창과 화면이 실시간으로 연결된 "미리보기"라고 보면 됩니다.
한쪽에서 글자를 고치면 다른 쪽 화면이 곧바로 따라 바뀌는 식입니다.
참고로 개발자들은 이걸 HMR(핫 모듈 리플레이스먼트)이라고도 부르는데, 초보 입장에선 "저장하면 바로 반영되는 것" 정도로 이해하면 충분합니다.

수정 후 할 일	브라우저에서 직접 새로고침	저장만 하면 끝, 자동 반영
반영 속도	새로 그려질 때까지 대기	거의 즉시
보던 화면 위치	처음으로 초기화되기 쉬움	대체로 그대로 유지

어디서 만나게 될까

핫 리로드는 따로 설정하는 기능이 아니라, 개발 서버를 켜면 대부분 자동으로 딸려 옵니다.
AI가 만들어 준 프로젝트를 실행할 때 아래 같은 명령을 자주 보게 됩니다.

npm run dev

이 명령은 "개발용 서버를 켜라"는 뜻입니다.
이렇게 켜진 개발 서버가 코드 변화를 계속 지켜보다가, 저장이 감지되면 화면에 바로 반영해 줍니다.
요즘 널리 쓰이는 Vite 같은 개발 도구는 이 핫 리로드를 기본으로 제공합니다.
그래서 초보가 특별히 뭔가를 켜지 않아도, 개발 서버만 실행하면 자연스럽게 실시간 미리보기가 작동합니다.

입력하던 값이 안 날아간다

핫 리로드가 단순한 자동 새로고침보다 나은 점이 하나 더 있습니다.
화면에서 입력하던 값이 대체로 그대로 유지된다는 것입니다.
예를 들어 회원가입 폼을 절반쯤 채워 넣은 상태에서 코드를 고쳐 저장한다고 해봅시다.
보통의 새로고침이라면 채워 둔 값이 전부 사라져서 처음부터 다시 입력해야 합니다.
핫 리로드는 화면 상태는 그대로 두고 바뀐 부분만 갈아 끼우는 방식이라, 입력값을 지키면서 디자인이나 동작만 갱신되는 경우가 많습니다.
개인적으로는 이 "상태 유지" 덕분에 화면 안쪽을 손볼 때 확인 속도가 확 빨라진다고 봅니다.

---

AI로 코딩할 때 왜 특히 좋을까

AI로 코딩하는 흐름은 대개 "고쳐 달라고 요청 → 결과 확인 → 다시 요청"의 반복입니다.
AI에게 "버튼 색을 좀 더 진하게 바꿔줘"라고 부탁하면, 코드가 수정되고 저장됩니다.
이때 핫 리로드가 켜져 있으면 바뀐 결과가 화면에 바로 뜹니다.
마음에 안 들면 다시 "조금만 더 밝게"라고 요청하고, 또 바로 확인합니다.
수정과 확인 사이의 간격이 짧아질수록, 이런 시행착오가 훨씬 가볍고 편해집니다.
결국 핫 리로드는 AI와 주고받으며 화면을 다듬는 작업의 속도를 받쳐 주는 셈입니다.

자주 묻는 질문

핫 리로드랑 새로고침은 뭐가 다른가요

새로고침은 화면 전체를 처음부터 다시 그리는 것이고, 핫 리로드는 바뀐 부분만 골라 갈아 끼우는 것입니다.
그래서 핫 리로드는 더 빠르고, 입력하던 값이나 보던 위치가 유지되는 경우가 많습니다.
이 차이 때문에 개발 중에는 수동 새로고침보다 핫 리로드가 훨씬 편합니다.

핫 리로드는 제가 따로 켜야 하나요

대부분은 따로 켤 필요가 없습니다.
Vite 같은 요즘 개발 도구는 개발 서버를 실행하면 핫 리로드가 기본으로 함께 작동합니다.
즉 AI가 만들어 준 프로젝트에서 개발 서버 실행 명령만 제대로 돌리면, 실시간 미리보기는 자연스럽게 켜져 있는 상태가 됩니다.

정리

핫 리로드는 코드를 저장하는 순간 화면이 즉시 바뀌는 실시간 미리보기 기능입니다.
새로고침과 기다림을 없애 주고, 입력하던 값도 대체로 지켜 줍니다.
개발 서버를 켜면 대부분 자동으로 따라오니, 초보라면 "저장하면 바로 반영되는 것"으로만 기억해도 충분합니다.
AI로 코딩할 때는 수정하고 바로 확인하는 루프가 빨라져서 시행착오가 한결 편해집니다.
 
 

참고한 자료

개발 서버와 실시간 미리보기가 어떻게 동작하는지는 Vite 공식 문서(vite.dev)와 MDN 웹 문서의 설명을 참고했습니다. 개발 도구의 버전과 기본 제공 기능은 발행 전 공식 문서 확인이 필요합니다.