HTML5 applicationCache란 무엇인가?
HTML5 applicationCache(애플리케이션 캐시)는 웹 애플리케이션 자체를 캐싱하여, 인터넷에 연결되어 있지 않은 상황에서도 앱에 접근하고 사용할 수 있도록 해주는 기술입니다.
쉬운 예로, 웹 메일 클라이언트나 온라인 문서 편집기가 네트워크 연결 없이도 실행되는 경우를 생각해 볼 수 있습니다. 필요한 리소스를 미리 로컬에 저장해 두기 때문에, 오프라인 환경에서도 애플리케이션이 정상적으로 동작하는 것입니다.
애플리케이션 캐시의 주요 장점
- 오프라인 사용 가능: 인터넷 연결이 끊겨도 사용자가 애플리케이션을 계속 이용할 수 있습니다.
- 빠른 로딩 속도: 캐시된 리소스는 서버에서 다시 내려받지 않으므로 훨씬 빠르게 로드됩니다.
- 서버 부하 감소: 요청 횟수가 줄어들어 서버의 트래픽과 부담이 줄어듭니다.
참고로 applicationCache는 과거 널리 사용되었지만, 현재 대부분의 최신 브라우저에서는 지원이 중단(deprecated)되었으며, 더 유연하고 강력한 Service Worker 기반 캐싱으로 대체되었습니다. 레거시 코드 분석 시에는 여전히 중요한 개념입니다.
브라우저 캐시(Browser Cache)란?
브라우저 캐시는 웹 브라우저가 방문했던 HTML 페이지의 사본(copy)을 저장해 두는 방식입니다. 사용자가 해당 페이지를 다시 방문하면, 매번 서버에 새로 요청하지 않고 저장해 둔 사본을 이용해 화면을 렌더링합니다.
덕분에 같은 사이트를 재방문할 때 로딩 속도가 눈에 띄게 빨라지고, 불필요한 네트워크 트래픽도 크게 줄일 수 있습니다.
두 캐시 방식의 핵심 차이
| 구분 | applicationCache | 브라우저 캐시 |
|---|---|---|
| 캐시 대상 | 웹 애플리케이션 전체(매니페스트에 명시된 리소스) | 방문한 개별 페이지 및 정적 파일 |
| 오프라인 동작 | 오프라인에서도 앱 실행 가능 | 재방문 시 로딩 가속화 목적 |
| 제어 방식 | 개발자가 매니페스트 파일로 직접 제어 | 브라우저 및 HTTP 헤더 정책에 따름 |
정리하면, 브라우저 캐시가 '페이지 재방문 시 성능 향상'에 초점을 맞춘 반면, applicationCache는 '오프라인 상태에서도 웹 애플리케이션을 동작시키는 것'이 핵심 목적이라는 점에서 근본적인 차이가 있습니다.