디자인 조정, 콘텐츠 업데이트, JavaScript 기능 수정 등 웹사이트를 변경하면 해당 변경 사항이 즉시 표시되기를 기대하게 돼요. 하지만 웹사이트를 업데이트했는데도 앱에 변경 사항이 반영되지 않는 답답한 문제가 발생할 때가 있어요.
대부분의 경우 원인은 캐싱이에요. 웹사이트를 앱으로 변환하면 앱은 브라우저와 마찬가지로 웹사이트의 캐싱 설정을 사용해요. 웹사이트 리소스가 너무 오래 캐시되도록 설정되어 있으면 앱이 계속 이전 버전의 파일을 불러오기 때문에 변경 사항이 적용되지 않은 것처럼 보여요.
이 글에서는 캐싱이 작동하는 방식, 이 문제가 발생하는 이유, 해결 방법을 설명해 드릴게요.
캐싱이 문제의 원인인지 확실하지 않나요? 웹사이트 변경 사항이 앱에 표시되지 않는 원인을 진단하는 가이드를 확인해 보세요.
캐싱이란 무엇인가요?
캐싱은 웹사이트 리소스(CSS, JavaScript, 이미지 등)의 사본을 저장하여 다음 방문 시 더 빠르게 불러오는 방식이에요. 동일한 파일을 매번 다시 다운로드하는 대신 브라우저(이 경우에는 앱)가 로컬 저장소에서 파일을 가져올 수 있어요.
캐싱은 성능 향상에 매우 유용하지만, 웹사이트의 파일을 업데이트한 후에도 앱이나 브라우저가 캐시된 버전을 계속 사용하면 문제가 발생할 수 있어요. 이 경우 방문자는 최신 변경 사항을 즉시 확인하지 못하고 캐시된 파일이 만료된 후에야 확인할 수 있어요.
문제를 일으킬 수 있는 캐싱 설정
Cache-Control 헤더: 이 HTTP 헤더는 브라우저와 웹뷰가 리소스를 캐시할 기간을 지정해요. 파일을 오랫동안 캐시하도록 이 헤더가 설정되어 있으면 캐시가 만료될 때까지 앱이 업데이트된 버전을 가져오지 않아 변경 사항이 눈에 띄게 늦게 반영돼요.
ETag: 일부 웹사이트에서는 리소스가 변경되었는지 확인하기 위해 ETag(Entity Tag)를 사용해요. 하지만 파일을 업데이트할 때 ETag가 변경되지 않으면 앱이 새 버전을 다시 다운로드하지 않을 수 있어요.
이러한 캐싱 문제를 방지하는 방법
웹사이트 변경 사항이 앱에 빠르게 표시되도록 하는 몇 가지 방법은 다음과 같아요.
리소스에 버전 관리 사용하기
캐싱 문제를 방지하는 가장 좋은 방법 중 하나는 CSS 및 JS 파일 URL에 버전 번호나 고유한 쿼리 매개변수를 추가하는 것이에요. 예를 들면 다음과 같아요.
<link rel="stylesheet" href="style.css?version=1.2">
<script src="main.js?version=1.2"></script>이렇게 하면 파일을 업데이트할 때 버전 번호(version=1.3 등)를 변경할 수 있고, 앱은 이를 새 파일로 인식하여 이전에 캐시된 버전을 사용하지 않아요.
이 기법은 캐시 버스팅(cache busting)이라고도 해요. 가장 큰 단점은 해당 파일을 참조하는 모든 HTML 파일을 수정해야 한다는 점이며, 파일 유형에 따라 상당히 번거로울 수 있어요. 예를 들어 기본 CSS 파일이 웹사이트 전반의 여러 HTML 파일에 연결되어 있다면, 모든 파일을 하나씩 확인하며 링크를 변경해야 하므로 많은 작업이 필요해요.
Cache-Control 헤더 업데이트하기
서버에서 Cache-Control 헤더를 구성하여 리소스가 캐시되는 기간을 제어할 수 있어요. 캐시 시간을 짧게 설정하면(예: 1일 또는 1시간) 업데이트가 앱에 더 빨리 반영되도록 할 수 있어요. 하지만 캐시 시간이 너무 짧으면 웹사이트 성능에 부정적인 영향을 줄 수 있으므로 적절한 균형이 중요해요.
웹 서버에서 엔터티 태그를 사용하면 캐시 시간을 짧게 설정했을 때 발생하는 영향을 줄일 수 있어요. 만료 시간이 지난 후 파일이 필요해지면 앱은 웹 서버에 해당 파일을 요청해요. 이 요청에는 캐시된 이전 파일의 엔터티 태그가 포함돼요. 웹 서버가 파일의 엔터티 태그가 요청에 포함된 엔터티 태그와 여전히 동일하다고 판단하면, 파일이 변경되지 않았으므로 캐시된 파일을 계속 사용해도 된다고 앱에 알려줘요. 따라서 캐시 시간이 짧아지면 서버 요청 횟수는 늘어나지만, 파일이 실제로 변경되지 않았다면 전송해야 하는 데이터가 거의 없기 때문에 요청의 크기가 매우 작고 처리 속도도 빨라요.
수동으로 캐시 지우기
iOS에서는 앱을 삭제한 후 다시 설치하여 앱의 캐시를 지울 수 있어요.
이 방법은 Android에서도 사용할 수 있지만, Android에서는 앱 정보 화면을 열고 "저장공간"을 누를 수도 있어요. 그런 다음 앱 데이터를 삭제할 수 있어요. 앱을 삭제한 후 다시 설치하는 것과 같은 효과가 있지만 훨씬 더 빨라요.
결론
웹사이트 기반 앱에 최신 CSS 또는 JS 변경 사항이 표시되지 않는다면 캐싱이 원인일 가능성이 높아요. 캐싱이 작동하는 방식을 이해하고 리소스에 버전을 지정하거나 캐시 헤더를 구성하는 등의 권장 방법을 따르면 이러한 불편한 문제를 방지하고 업데이트가 항상 앱에 반영되도록 할 수 있어요.
