브라우저 캐시란? 홈페이지가 빨리 열리는 원리와 캐시 삭제가 필요한 이유 쉽게 이해하기

「캐시를 삭제하고 다시 확인해 주세요」「브라우저 캐시 때문에 이전 화면이 보일 수 있습니다」라는 안내를 자주 듣습니다. 브라우저 캐시(Cache)는 홈페이지에서 한 번 받은 이미지, CSS, JavaScript 같은 파일을 브라우저가 임시로 저장해 두었다가 다시 방문할 때 재사용하는 기능입니다.

책상 서랍에 비유하면

매일 쓰는 서류를 매번 지하 창고에서 가져오면 느립니다. 자주 쓰는 것은 책상 서랍에 복사해 둡니다. 처음 방문 때는 서버에서 HTML·CSS·JS·이미지 등을 받고, 일부를 브라우저에 저장합니다. 다음 방문에서는 저장된 파일을 쓸 수 있으면 캐시에서 불러 더 빠르게 화면을 보여 줍니다.

왜 빨라지고 데이터가 줄까?

로고처럼 모든 페이지에서 같은 이미지는 매번 다시 받을 필요가 없습니다. 용량이 큰 배너도 일정 기간 재사용하면 로딩이 줄고, 전송량·서버 부담도 줄일 수 있습니다.

그런데 왜 문제가 생길까?

서버에서 로고·CSS·JS를 바꿨는데 브라우저가 예전 파일을 계속 쓰면, 수정이 안 된 것처럼 보입니다. 개발자 PC에는 새 화면, 고객 PC에는 옛 화면이 보이는 흔한 원인 중 하나가 캐시입니다. CSS는 디자인, JS는 메뉴·슬라이드·폼 동작이라 오래된 파일이면 화면이 깨지거나 기능이 예전처럼 남을 수 있습니다.

그래서 「캐시 삭제 후 확인해 주세요」라고 합니다. 오래된 복사본을 버리고 서버에서 최신 문서를 다시 가져오는 것과 같습니다.

새로고침 ≠ 캐시 삭제

일반 새로고침은 캐시를 계속 쓸 수 있습니다. 개발에서는 캐시에 덜 의존하는 강력 새로고침(Hard Refresh)을 쓰기도 합니다. 일반 사용자는 「수정이 안 보이면 캐시 문제도 점검」 정도로 이해하면 충분합니다.

캐시된 이미지·파일만 지우면 쿠키는 남을 수 있습니다. 쿠키·사이트 데이터까지 함께 지우면 로그아웃될 수 있습니다.

쿠키 · 로컬·세션 스토리지와 다른가?

• 쿠키 — 로그인·장바구니 식별 등 상태(번호표)
• 캐시 — 이미지·CSS·JS·웹폰트 파일 복사본(창고)
• 로컬 스토리지 / 세션 스토리지 — JS가 값을 직접 읽고 쓰는 저장소(theme=dark 등)

Cache-Control · 캐시 버스팅

서버는 HTTP 헤더 Cache-Control로 「얼마나 보관해도 되는지」를 알려 줄 수 있습니다. 예: max-age=3600(약 1시간). 길수록 빠르지만, 자주 바뀌는 파일까지 오래 두면 최신이 안 보입니다. 로고처럼 거의 안 바뀌는 것과 실시간 데이터는 정책을 나눕니다. 자세한 내용은 Cache-Control이란?을 참고하세요.

파일이 바뀌면 style.v2.css나 style.css?v=3처럼 URL을 바꿔 새 파일로 인식하게 하기도 합니다. 이를 캐시 버스팅(Cache Busting)이라고 합니다.

ETag · Last-Modified · 304

ETag는 파일 버전 번호표, Last-Modified는 마지막 변경 시각에 가깝습니다. 브라우저가 「내가 가진 게 최신인가?」를 물었을 때 서버가 「같다」면 304 Not Modified로 답하고, 전체를 다시 보내지 않고 기존 캐시를 쓰게 할 수 있습니다. 처음에는 200 OK로 파일을 받고, 이후 확인만 할 때 304가 자주 쓰입니다. ETag는 ETag란?, 수정일은 Last-Modified란?, 상태 코드는 304 Not Modified란?을 참고하세요.

CDN · 서버 캐시 · 여러 층

브라우저 캐시는 내 기기, CDN 캐시는 동네 물류창고처럼 중간 서버에 둡니다. 브라우저 캐시를 지워도 CDN에 옛 파일이 남으면 예전 이미지가 보일 수 있습니다. 웹서버·프로그램·DB 앞에도 캐시가 있을 수 있어, 「캐시 문제」라고만 하면 어느 층인지 확인이 필요합니다.

무엇을 얼마나 캐시할까?

같은 작업을 매번 처음부터 하지 않으려는 목적입니다. 비용·서버 부담 완화에 도움이 되지만, 가격·재고처럼 바뀐 정보가 오래 보이면 문제입니다. 화면 표시용으로 잠깐 캐시해도, 최종 결제·권한은 서버가 다시 검증해야 합니다.

HTML도 캐시할 수 있지만, 회원마다 다른 마이페이지를 잘못 캐시하면 타인 정보가 노출될 수 있습니다. 민감 페이지는 no-store 등으로 저장을 제한하기도 합니다. no-cache는 이름과 달리 「아예 저장 금지」가 아니라, 쓰기 전에 서버에 확인하라는 쪽에 가깝습니다.

캐시 삭제를 언제 할까?

평소에 자주 지울 필요는 없습니다. 수정이 안 보이거나 이미지·CSS·JS가 이상할 때 확인 방법입니다. 삭제 직후 첫 방문은 다시 받아와 잠깐 느릴 수 있습니다. 서버 500, DNS 오류 등은 캐시만으로 해결되지 않습니다. 시크릿 창·다른 기기에서 최신이 보이면 내 브라우저 캐시를 의심할 수 있습니다.

검색결과에 수정이 바로 안 반영되는 것은 사용자 캐시만의 문제는 아닙니다. 검색엔진이 다시 수집·처리하는 시간도 필요합니다. 캐시로 로딩을 돕는 것과 SEO는 연결될 수 있지만, 「캐시만 길게」가 SEO 정답은 아닙니다.

자주 묻는 질문

새로고침하면 캐시가 삭제되나요?

일반 새로고침만으로 모든 캐시가 삭제되는 것은 아닙니다.

캐시를 삭제하면 로그아웃되나요?

캐시된 파일만 지우면 쿠키가 남을 수 있습니다. 쿠키·사이트 데이터까지 지우면 로그아웃될 수 있습니다.

쿠키와 같은가요?

아닙니다. 쿠키는 상태·식별, 캐시는 파일 재사용입니다.

항상 삭제해 두는 게 좋은가요?

아닙니다. 문제는 수정이 반영되지 않을 때 점검하는 방법입니다.

정리

브라우저 캐시 = 자주 쓰는 홈페이지 파일을 가까이 보관하는 창고입니다. 속도·전송량·서버 부담을 줄이지만, 오래된 파일이 남으면 수정 전 화면이 계속 보일 수 있습니다.

브라우저가 이미 가진 파일에 대해 「아직 최신인가요?」를 물었을 때, 변경이 없으면 전체를 다시 보내지 않고 기존 파일을 쓰라고 알려 줄 수 있습니다. 이때 등장하는 상태 코드가 바로 304 Not Modified입니다. 자세한 내용은 304 Not Modified란?을 참고하세요.