수정했는데 화면이 그대로? 브라우저 캐시 때문에 코드가 안 바뀌는 이유와 해결법
“분명 코드를 수정했는데 브라우저에서는 예전 화면이 그대로 나옵니다.”
바이브코딩을 하다 보면 꽤 자주 만나는 문제입니다.
CSS 색상을 바꾸고 JavaScript 함수도 수정했는데 화면이 전혀 달라지지 않거나, AI가 고쳐 준 코드를 적용했는데 이전 동작이 계속 나타나는 경우가 있습니다.
이럴 때 초보자는 코드가 틀렸다고 생각해 다시 수정하기 쉽습니다.
하지만 실제 원인이 브라우저 캐시(Cache)일 수도 있습니다.
브라우저는 웹페이지를 더 빠르게 보여 주기 위해 CSS, JavaScript, 이미지 같은 파일을 임시로 저장합니다. 문제는 개발 중에도 예전 파일을 계속 보여 줄 수 있다는 점입니다.
그래서 바이브코딩에서는 코드 수정 → 저장 → 브라우저 반영 확인이라는 과정을 따로 생각해야 합니다.
브라우저 캐시는 왜 필요할까?
웹사이트를 열 때마다 모든 파일을 처음부터 다시 받아오면 시간이 오래 걸릴 수 있습니다. 그래서 브라우저는 자주 사용하는 파일을 임시로 저장합니다.
예를 들어
style.css
app.js
logo.png
같은 파일을 저장해 두었다가 다시 방문하면 빠르게 보여 줍니다.
일반 사용자에게는 매우 유용한 기능입니다.
하지만 개발 중에는 문제가 될 수 있습니다.
브라우저가 새 파일 대신 저장해 둔 예전 파일을 보여 주면 수정한 코드가 반영되지 않은 것처럼 보이기 때문입니다.
CSS를 수정했는데 색상이 그대로라면 캐시를 의심해 보세요
가장 흔하게 나타나는 상황입니다.
예를 들어 버튼 색상을
파란색 → 빨간색
으로 변경했습니다.
CSS 파일도 저장했습니다.
그런데 브라우저에는 계속 파란색 버튼이 보입니다.
이때 바로 CSS 코드를 다시 작성하지 마세요.
먼저 새로고침을 해보고, 그래도 그대로라면 브라우저가 이전 CSS 파일을 사용하고 있는지 확인하는 것이 좋습니다.
화면이 전혀 바뀌지 않을 때는 코드보다 캐시부터 의심하는 편이 빠를 수 있습니다.
일반 새로고침과 강력 새로고침은 다릅니다
일반 새로고침은 브라우저가 캐시된 일부 파일을 계속 사용할 수 있습니다. 그래서 개발 중에는 강력 새로고침이 도움이 될 수 있습니다.
- 윈도우는 Ctrl + F5 또는 Ctrl + Shift + R
- 맥은 Command + R 또는 Command + Shift + R
브라우저와 운영체제에 따라 단축키가 다를 수 있지만 일반적으로 개발자 도구를 활용해 캐시를 무시한 새로고침을 할 수 있습니다.
핵심은 단축키를 외우는 것이 아닙니다.
“새로고침했는데도 그대로라면 캐시를 무시하고 다시 불러와야 할 수 있다”는 원리를 이해하는 것입니다.
파일을 저장하지 않은 경우도 많습니다
캐시 문제라고 생각하기 전에 아주 기본적인 부분도 확인해야 합니다.
코드를 수정했지만 파일 저장을 하지 않았다면 브라우저에는 당연히 이전 코드가 표시됩니다.
초보자는 AI가 만들어 준 코드를 붙여넣은 뒤 바로 브라우저로 이동하면서 저장을 깜빡하는 경우가 많습니다.
그래서 가장 먼저
코드 수정
파일 저장
브라우저 새로고침
순서를 확인하세요.
저장하지 않은 코드와 캐시된 코드는 사용자 눈에는 비슷하게 보일 수 있습니다.
다른 CSS 파일을 수정하고 있을 수도 있습니다
프로젝트가 커지면 CSS 파일이 여러 개 생길 수 있습니다.
예를 들어
style.css
home.css
mobile.css
theme.css
가 함께 있을 수 있습니다.
사용자는 style.css를 수정했지만 실제 화면에서는 theme.css가 버튼 색상을 결정하고 있을 수도 있습니다.
이런 경우 아무리 새로고침해도 결과가 바뀌지 않습니다.
그래서 수정한 파일이 실제 HTML에서 연결되어 있는지 확인해야 합니다.
캐시 문제처럼 보여도 실제로는 잘못된 파일을 수정하고 있는 경우가 있습니다.
JavaScript도 캐시 때문에 예전 코드가 실행될 수 있습니다
CSS뿐 아니라 JavaScript도 마찬가지입니다.
예를 들어 버튼 클릭 함수를 수정했는데 브라우저에서는 예전 동작이 계속될 수 있습니다.
이때 사용자는
“AI가 수정했는데 왜 그대로지?”
라고 생각합니다.
하지만 브라우저가 이전 app.js를 계속 사용하고 있을 수 있습니다.
JavaScript 수정이 반영되지 않는다면
파일 저장 여부
스크립트 경로
브라우저 캐시
실제 실행 파일
을 함께 확인해야 합니다.
개발자 도구에서 캐시를 끄고 테스트할 수 있습니다
개발 중에는 브라우저 개발자 도구를 활용하면 편합니다.
개발자 도구의 네트워크 관련 설정에서 캐시를 비활성화할 수 있는 경우가 있습니다.
이렇게 하면 개발자 도구가 열려 있는 동안 브라우저가 최신 파일을 다시 불러오도록 테스트할 수 있습니다.
매번 캐시를 삭제하는 것보다 편리합니다.
개발 단계에서는 최신 파일이 확실히 반영되는 환경을 만드는 것이 중요합니다.
파일 이름에 버전 값을 붙이는 방법도 있습니다
웹서비스에서는 캐시 문제를 줄이기 위해 파일 주소에 버전 값을 붙이는 방법을 사용하기도 합니다.
예를 들어
style.css?v=1
처럼 구분할 수 있습니다.
파일을 크게 수정한 뒤
style.css?v=2
로 바꾸면 브라우저는 다른 주소의 파일로 인식해 새로 불러올 수 있습니다.
JavaScript에도 같은 원리를 적용할 수 있습니다.
다만 초보자라면 처음부터 이 방법을 남발하기보다 왜 캐시가 남는지 이해한 뒤 필요할 때 사용하는 것이 좋습니다.
개발 서버 자체가 최신 파일을 반영하지 않을 수도 있습니다
브라우저만 문제라고 생각하면 안 됩니다.
프로젝트를 개발 서버로 실행하고 있다면 서버가 변경 사항을 제대로 반영하지 못하는 상황도 생길 수 있습니다.
이때는
개발 서버 재시작
현재 실행 중인 폴더 확인
빌드 상태 확인
이 필요할 수 있습니다.
예를 들어 같은 프로젝트 복사본이 여러 개 있는데 예전 폴더의 서버를 실행하고 있을 수도 있습니다.
내가 수정한 프로젝트와 브라우저가 보여 주는 프로젝트가 같은지 확인해야 합니다.
배포된 사이트는 캐시가 더 복잡할 수 있습니다
내 컴퓨터에서는 새 코드가 잘 보이는데 배포된 사이트에서는 예전 화면이 계속 나타나는 경우도 있습니다.
이때는 브라우저 캐시뿐 아니라 배포 환경이나 CDN 캐시가 영향을 줄 수 있습니다.
그래서 배포 후에는
새 파일이 실제로 배포됐는지
올바른 빌드가 올라갔는지
캐시 정책이 어떻게 설정됐는지
확인해야 할 수 있습니다.
초보 단계에서는 먼저 로컬 문제와 배포 문제를 구분하는 것이 중요합니다.
수정한 코드가 반영되지 않을 때 확인할 체크리스트
- 파일을 실제로 저장했는가?
- 브라우저를 새로고침했는가?
- 강력 새로고침을 해봤는가?
- 수정한 CSS나 JavaScript 파일이 실제로 연결되어 있는가?
- 비슷한 이름의 다른 파일을 수정한 것은 아닌가?
- 다른 CSS 규칙이 값을 덮어쓰고 있지 않은가?
- 개발자 도구에서 최신 파일이 로드되는지 확인했는가?
- 개발 서버가 현재 프로젝트 폴더를 실행하고 있는가?
- 배포 환경이라면 최신 빌드가 올라갔는가?
- 캐시를 지운 뒤에도 같은 문제가 발생하는가?
이 순서로 확인하면 불필요하게 코드를 다시 작성하는 일을 줄일 수 있습니다.
AI에게 캐시 문제를 확인시키는 프롬프트
아래 문장을 그대로 활용해도 좋습니다.
“코드를 수정하고 저장했지만 브라우저에서 이전 화면과 동작이 계속 나타납니다. 전체 코드를 다시 작성하지 마세요. 먼저 브라우저 캐시 가능성, 실제 연결된 CSS와 JavaScript 파일, 파일 저장 여부, 다른 파일을 수정했을 가능성, 개발 서버 실행 경로를 순서대로 확인해 주세요. 최신 파일이 실제로 브라우저에 로드되는지 확인하는 방법도 설명해 주세요. 기존 기능은 변경하지 말고 캐시나 파일 연결 문제가 확인된 경우에만 필요한 조치만 알려 주세요.”
핵심은 코드 수정 전에 브라우저가 어떤 파일을 보고 있는지부터 확인하는 것입니다.
캐시 문제인데 코드를 계속 바꾸면 더 큰 오류가 생길 수 있습니다
브라우저 캐시 때문에 수정 사항이 반영되지 않는 상황에서 코드를 계속 바꾸는 것은 위험합니다.
정상적으로 수정된 코드를 다시 고치고,
CSS 선택자를 추가하고,
JavaScript 함수를 또 변경하다 보면
원래는 캐시 하나만 해결하면 됐던 문제가 실제 코드 오류로 커질 수 있습니다.
그래서 바이브코딩에서는 다음 순서를 기억해 보세요.
코드 수정 → 저장 확인 → 일반 새로고침 → 캐시 무시 새로고침 → 실제 로드 파일 확인 → 그래도 안 되면 코드 분석
이 순서가 중요합니다.
화면이 그대로라고 해서 항상 코드가 틀린 것은 아닙니다.
브라우저가 아직 새 코드를 보고 있지 않을 수도 있습니다.
이 차이를 이해하면 “분명 수정했는데 왜 그대로지?”라는 답답한 상황에서 훨씬 빠르게 빠져나올 수 있습니다.