서비스 워커 캐시 때문에 수정된 웹페이지가 갱신되지 않을 때 해결 방법

ELIYAHUB 2026년 8월 17일 최종 수정 8월 27일 읽는 시간 약 10분

웹사이트의 글이나 이미지를 수정했는데도 이전 화면이 계속 나타나는 경우가 있다. 단순한 브라우저 캐시가 원인일 수도 있지만, PWA나 일부 최적화 기능을 사용하는 사이트에서는 서비스 워커(Service Worker)가 저장해 둔 파일을 계속 제공하는 것이 원인일 수 있다.

서비스 워커는 브라우저와 서버 사이에서 네트워크 요청을 처리하는 백그라운드 기능이다. 웹페이지를 빠르게 열고 인터넷 연결이 끊겨도 일부 콘텐츠를 보여주는 장점이 있지만, 캐시 관리가 잘못되면 수정된 HTML, CSS, JavaScript와 이미지가 즉시 반영되지 않는다.

1. 일반 캐시와 서비스 워커 캐시의 차이

일반 브라우저 캐시는 방문한 페이지의 이미지와 디자인 파일을 임시로 저장한다. 대부분 강력 새로고침이나 인터넷 사용 기록 삭제로 해결할 수 있다.

서비스 워커는 웹사이트가 설정한 규칙에 따라 요청을 가로채고, Cache Storage에 저장된 파일을 직접 제공할 수 있다. 따라서 일반 캐시를 삭제해도 서비스 워커와 별도의 저장 데이터가 남아 있으면 이전 화면이 다시 나타날 수 있다.

워드프레스 사이트에서 변경 내용이 보이지 않는다면 다음 원인을 함께 살펴봐야 한다.

브라우저 일반 캐시
서비스 워커의 Cache Storage
워드프레스 캐시 플러그인
호스팅 서버의 페이지 캐시
CDN에 저장된 이전 파일
엘레멘터의 CSS 파일
이미지 최적화 플러그인의 변환 파일

특정 브라우저에서만 이전 화면이 보이면 브라우저 캐시나 서비스 워커를 먼저 의심한다. 시크릿 창과 다른 기기에서도 같은 화면이 나타난다면 서버 캐시나 CDN 문제일 가능성이 크다.

2. 강력 새로고침 실행하기

가장 먼저 실행할 방법은 강력 새로고침이다. 일반 새로고침은 저장된 파일을 다시 사용할 수 있지만, 강력 새로고침은 서버에 최신 파일을 요청하도록 유도한다.

Chrome과 Edge에서는 다음 단축키를 사용한다.

Ctrl + F5

또는 다음 단축키를 사용할 수 있다.

Ctrl + Shift + R

개발자 도구를 연 상태에서는 다음 경로도 이용할 수 있다.

F12 → 새로고침 버튼 마우스 오른쪽 버튼 → 캐시 비우기 및 강력 새로고침

이 방법은 일반적인 이미지, CSS와 JavaScript 캐시 문제에 효과적이다. 그러나 서비스 워커가 저장된 자료를 우선적으로 제공하도록 설정되어 있다면 강력 새로고침만으로 해결되지 않을 수 있다.

3. 해당 사이트 데이터만 삭제하기

강력 새로고침 후에도 과거 화면이 보인다면 문제가 발생한 사이트의 데이터만 삭제한다. 브라우저 전체 데이터를 지우면 다른 사이트의 로그인 상태까지 해제될 수 있으므로 특정 사이트만 선택하는 것이 좋다.

사이트 접속 → 주소창 왼쪽 사이트 정보 아이콘 → 사이트 설정 → 데이터 삭제

브라우저 버전에 따라 메뉴가 쿠키 및 사이트 데이터, 기기에 저장된 사이트 데이터 관리 또는 데이터 삭제로 표시될 수 있다.

사이트 데이터를 삭제하면 다음 정보가 함께 제거될 수 있다.

사이트 로그인 쿠키
로컬 저장소
Cache Storage
IndexedDB 자료
사이트별 설정
일부 서비스 워커 정보

삭제하기 전에 관리자 아이디와 비밀번호를 확인한다. 작업 후에는 해당 사이트의 모든 탭을 닫고 브라우저를 다시 실행한 다음 접속한다.

4. Service Worker 등록 해제하기

사이트 운영자라면 개발자 도구에서 현재 페이지를 제어하는 서비스 워커를 직접 확인할 수 있다.

사이트 접속 → F12 → Application → Service Workers

한글 브라우저에서는 Application이 애플리케이션으로 표시될 수 있다. 왼쪽에서 Service Workers를 선택하면 현재 등록된 서비스 워커의 상태와 적용 범위를 확인할 수 있다.

서비스 워커를 제거하려면 해당 항목 옆의 Unregister를 누른다. 그다음 사이트 탭을 모두 닫고 다시 접속한다.

등록 해제만으로 저장된 캐시가 전부 지워지지 않을 수 있으므로 다음 경로에서 사이트 데이터도 정리한다.

F12 → Application → Storage → Cache Storage 선택 → Clear site data

이 작업은 로그인 정보와 오프라인 저장 자료까지 삭제할 수 있다. 작성 중인 자료나 동기화되지 않은 데이터가 있다면 먼저 저장해야 한다.

또한 사이트 안에 서비스 워커 등록 코드가 그대로 남아 있으면 다음 방문 때 다시 등록될 수 있다. 따라서 사이트 운영자는 서비스 워커를 만든 플러그인이나 PWA 기능도 함께 확인해야 한다.

5. 워드프레스 캐시도 함께 비우기

워드프레스에서는 서비스 워커 이외에도 여러 단계의 캐시가 동시에 작동할 수 있다. 브라우저 데이터를 삭제했는데도 수정된 화면이 보이지 않는다면 다음 항목을 순서대로 확인한다.

워드프레스 캐시 플러그인의 캐시를 비운다.
호스팅 관리 화면의 서버 캐시를 삭제한다.
CDN을 사용한다면 저장된 캐시를 갱신한다.
엘레멘터를 사용한다면 CSS 및 데이터 재생성을 실행한다.
이미지 최적화 플러그인이 만든 이전 이미지를 확인한다.
시크릿 창과 휴대전화에서 수정 내용을 비교한다.

서비스 워커를 사용하지 않는데도 등록되어 있다면 PWA, 오프라인 지원 또는 성능 최적화 플러그인이 생성했을 가능성이 있다. 해당 기능을 먼저 중지한 후 서비스 워커 등록과 사이트 데이터를 삭제해야 자동 재등록을 막을 수 있다.

6. 같은 문제의 재발을 방지하는 방법

서비스 워커를 계속 사용한다면 배포할 때마다 캐시 이름에 새로운 버전 번호를 지정하는 것이 좋다.

constCACHE_NAME="site-cache-v2";

새 서비스 워커가 활성화될 때 사용하지 않는 이전 캐시를 삭제하도록 구성하면 과거 파일이 계속 남는 문제를 줄일 수 있다.

HTML이나 자주 변경되는 데이터에 무조건 캐시 우선 방식을 적용하면 오래된 화면이 표시되기 쉽다. 이미지와 글꼴처럼 변경이 적은 파일은 캐시 우선 방식이 효과적이지만, HTML과 중요한 데이터는 네트워크에서 최신 내용을 먼저 확인하는 전략이 적합하다.

새 버전이 설치됐지만 기존 탭 때문에 활성화되지 못하는 경우에는 방문자에게 새로운 버전이 있습니다. 새로고침하세요라는 안내를 제공하는 것이 좋다. 갑자기 페이지를 전환하면 사용자가 작성하던 내용이 사라질 수 있기 때문이다.

빠른 해결 순서

Ctrl+F5 강력 새로고침 → 시크릿 창에서 확인 → 해당 사이트 데이터 삭제 → F12 → Application → Service Workers → Unregister → Storage → Clear site data → 브라우저 재실행

사이트 운영자는 추가로 다음 작업을 진행한다.

캐시 플러그인 삭제 → 서버 캐시 갱신 → CDN 캐시 갱신 → 엘레멘터 CSS 재생성 → 다른 기기에서 확인

장점과 단점 분석

장점

오래된 디자인과 이미지 문제를 빠르게 해결할 수 있다.
특정 사이트의 데이터만 선택해 삭제할 수 있다.
서비스 워커의 상태와 적용 범위를 직접 확인할 수 있다.
잘못 배포된 서비스 워커를 등록 해제할 수 있다.
캐시 버전 관리로 같은 문제의 재발을 줄일 수 있다.

단점

사이트 데이터를 삭제하면 로그인 상태가 해제될 수 있다.
저장되지 않은 오프라인 자료가 사라질 수 있다.
등록 코드가 남아 있으면 서비스 워커가 다시 설치된다.
서버나 CDN 문제는 브라우저 작업만으로 해결되지 않는다.
캐시 설정을 잘못 바꾸면 사이트 속도가 느려질 수 있다.

사용자 평가 및 후기

일반 사용자에게는 강력 새로고침과 특정 사이트 데이터 삭제가 가장 간단한 방법이다. 특정 브라우저에서만 이전 화면이 나타나는 문제라면 이 단계만으로 해결되는 경우가 많다.

사이트 운영자는 개발자 도구의 Service Workers와 Storage 메뉴를 이용하면 문제의 원인을 더 정확하게 찾을 수 있다. 다만 브라우저, 플러그인, 서버와 CDN 캐시가 동시에 사용되면 어느 단계에서 과거 파일을 제공하는지 구분하기 어렵다. 수정 후에는 시크릿 창, 다른 브라우저와 휴대전화에서도 확인하는 과정이 필요하다.