- [Cloudways 필수 팁] 코드 수정 후 모바일에 반영이 안 되나요? 범인은 ‘강력한 캐시’입니다!
- 워드프레스 개발자가 Cloudways에서 꼭 알아야 할 ‘Purge Cache’의 중요성
- “왜 내 폰에서는 안 바뀌지?” Cloudways 서버 캐시 정복하기
안녕하세요! 오늘은 제가 워드프레스 게임을 개발하며 삽질(?) 끝에 얻어낸, Cloudways 사용자라면 피가 되고 살이 될 아주 중요한 팁을 공유하려 합니다.
최근 열심히 코드를 수정해서 데스크탑 브라우저에서는 완벽하게 동작하는 것을 확인했습니다. 그런데 설레는 마음으로 스마트폰을 열어 접속해보니… 어라? 수정 전 그대로인 겁니다.
브라우저 새로고침을 수십 번 누르고, 시크릿 모드로 들어가 봐도 요지부동. ‘내 코드가 잘못됐나?’ 한참을 의심하다가, 결국 범인을 찾아냈습니다.
범인은 바로 **Cloudways의 너무나 강력한 ‘서버 캐시(Varnish)’**였습니다.
1. 왜 이런 일이 발생할까요? (캐시의 역설)
우리가 사랑하는 호스팅인 Cloudways는 사이트 속도를 극대화하기 위해 **’Varnish’**라는 강력한 서버 레벨 캐싱 기술을 사용합니다.
쉽게 설명하면 이런 겁니다. 방문자가 사이트를 요청할 때마다 매번 코드를 새로 해석하고 DB를 뒤지는 대신, 서버가 미리 만들어둔 완성된 페이지의 ‘사본(스크린샷)’을 아주 빠르게 보여주는 방식입니다. 이 덕분에 우리 사이트가 엄청나게 빠른 것이죠.
문제는 우리가 ‘개발’을 할 때 발생합니다.
우리는 열심히 원본 코드(HTML/CSS/JS)를 수정했지만, Cloudways 서버는 여전히 예전에 찍어둔 ‘사본’을 방문자들에게 (특히 모바일 기기들에게) 보여주고 있었던 것입니다. 데스크탑에서는 개발자 도구를 켜는 등의 이유로 캐시가 쉽게 무시되곤 하지만, 모바일 환경은 캐시를 훨씬 공격적으로 유지하는 경향이 있어 이 현상이 더 두드러집니다.
2. 해결책: “Purge Site Cache” (캐시를 비워라!)
해결 방법은 아주 간단합니다. 서버에게 “원본이 바뀌었으니, 옛날 사본은 다 버려!”라고 명령을 내려야 합니다. Cloudways에서는 이것을 **’Purge(퍼지)’**라고 합니다.
코드를 수정했는데 화면에 반영되지 않는다면, 무조건 이 단계를 수행해야 합니다.
[따라 하기 단계]
- Cloudways 플랫폼에 로그인합니다.
- 상단 메뉴에서 Servers를 클릭하고 내 서버를 선택합니다.
- Applications 메뉴로 이동해 해당 워드프레스 앱을 선택합니다.
- 왼쪽 사이드바에서 Application Settings를 클릭합니다.
- 화면 우측 상단(또는 Varnish Settings 영역)에 있는 파란색 [Purge Site Cache] 버튼을 클릭합니다.
(여기에 Cloudways 설정 화면 스크린샷을 한 장 첨부하면 완벽합니다!)
이 버튼을 누르면 서버에 저장되어 있던 모든 구버전 사본이 삭제됩니다. 이제 다시 사이트에 접속하면 서버가 우리가 수정한 최신 코드를 바탕으로 새로운 페이지를 만들어 보여주게 됩니다.
3. 관리자의 통찰 (Pro Tip)
매번 Cloudways에 로그인해서 버튼을 누르는 게 귀찮으신가요?
- Breeze 플러그인 활용: Cloudways에서 기본 제공하는 캐시 플러그인인 ‘Breeze’를 사용 중이라면, 워드프레스 관리자 상단 바의 Breeze 메뉴에서 **’Purge All Cache’**를 누르는 것만으로도 동일한 효과를 볼 수 있습니다.
- 개발 중에는 Varnish 끄기: 만약 디자인이나 기능을 대대적으로 수정하는 개발 집중 기간이라면, Application Settings에서 Varnish 기능을 잠시 Disable(비활성화) 해두는 것이 정신건강에 좋습니다. (단, 개발이 끝나면 속도를 위해 꼭 다시 켜야 합니다!)
마무리하며
“데스크탑에선 되는데 모바일에선 안 돼요.”
앞으로 이 말을 듣거나 경험하게 된다면, 당황하지 말고 외치세요.
“Cloudways 가서 Purge 버튼 눌렀어?”
이 작은 버튼 하나가 여러분의 소중한 개발 시간을 아껴줄 것입니다. 저처럼 헤매지 마시고 스마트하게 관리하세요!
English version: Read this article in English
