사파리(Safari)에서 HTML5 앱캐시로 인해 사이트 간 CSS가 정상적으로 로드되지 않는 문제 해결 방법

HTML5 앱캐시(AppCache)란 무엇인가?

애플리케이션 캐시(Application Cache, 이하 AppCache)는 웹 브라우저가 현재 방문 중인 페이지와 관련된 파일들을 미리 지정하여 저장할 수 있게 해주는 HTML5 기술입니다. 개발자는 캐시 매니페스트 파일을 통해 어떤 리소스를 캐싱할지 명시할 수 있으며, 이를 통해 오프라인 상황에서도 웹 페이지가 동작하도록 만들 수 있습니다.

사파리에서 발생하는 문제

그런데 사파리(Safari)는 다른 브라우저에 비해 AppCache 표준을 훨씬 엄격하게 준수합니다. 그 결과, 캐시 매니페스트에 등록되지 않은 외부 웹 주소에 대한 요청이 허용되지 않아 문제가 발생합니다. 예를 들어 CDN에서 불러오는 CSS 파일처럼 사이트 간(cross-site)에 위치한 스타일시트가 매니페스트에 명시되어 있지 않으면, 사파리는 해당 요청을 차단하고 CSS가 화면에 제대로 적용되지 않는 현상이 나타날 수 있습니다.

해결 방법: NETWORK 섹션에 와일드카드 추가

요청이 차단되는 것을 방지하려면 캐시 매니페스트 파일의 NETWORK 섹션에 아래와 같이 와일드카드를 추가하면 됩니다.

NETWORK:
*
https://*
https://*

NETWORK 섹션은 캐시하지 않고 항상 네트워크를 통해 가져와야 하는 리소스를 지정하는 영역입니다. 위와 같이 별표(*)를 선언하면 매니페스트에 직접 나열되지 않은 모든 리소스에 대한 네트워크 요청이 허용되므로, 외부 CSS 파일이나 기타 리소스가 더 이상 차단되지 않고 정상적으로 로드됩니다.

추가 참고 사항

다만 참고할 점은 AppCache가 HTML5에서 처음 도입된 기술이지만, 현재는 더욱 유연하고 강력한 서비스 워커(Service Worker) API로 대체되어 대부분의 최신 브라우저에서 지원이 중단되었다는 것입니다. 새로운 프로젝트를 진행한다면 가급적 서비스 워커 기반의 캐싱 전략을 사용하는 것이 좋으며, 기존 코드에서 AppCache를 사용 중이라면 마이그레이션을 검토하는 것이 바람직합니다.