링크 미리보기가 옛날 이미지로 떠요? '소셜 캐시 버스팅' 완전 정복

분명 바꿨는데 왜 옛날 게 떠?

블로그 글을 수정하고 대표 이미지(썸네일)도 새로 바꿔서 카카오톡이나 슬랙, 트위터에 링크를 붙였더니, 어라? 예전 이미지랑 옛날 제목이 그대로 뜨는 경험 해보신 적 있죠. 분명히 고쳤는데 말이에요. 이건 버그가 아니라 캐시(cache) 때문이에요. 이번 글의 주제인 '소셜 캐시 버스팅'은 바로 이 문제를 어떻게 깔끔하게 해결하는지에 대한 이야기예요.

도대체 왜 이런 일이 생길까

먼저 캐시가 뭔지부터요. 캐시는 '한 번 가져온 데이터를 잠깐 저장해두고 재활용하는 것'이에요. 매번 원본을 다시 불러오면 느리니까, 한 번 본 건 베껴두고 빠르게 보여주는 거죠. 문제는 이게 너무 잘 작동해서 생겨요.

카카오톡이나 페이스북, 트위터 같은 곳은 누가 링크를 붙이면 그 페이지에 슥 방문해서 제목, 설명, 대표 이미지를 긁어와요. 이 정보가 어디 들어있냐면, HTML 안의 OG 태그(Open Graph)라는 부분이에요. og:title, og:image 같은 메타 태그들인데, '이 페이지를 공유하면 이렇게 보여줘'라고 알려주는 정보예요. 그런데 한 번 긁어간 정보를 이 플랫폼들이 자기네 서버에 며칠씩, 길게는 몇 주씩 캐시로 저장해둬요. 그래서 여러분이 원본을 바꿔도, 플랫폼은 '나 이거 전에 봤어, 저장해둔 거 쓸게' 하면서 옛날 걸 계속 보여주는 거예요.

핵심 해법: URL에 살짝 변화 주기

여기서 등장하는 게 캐시 버스팅(Cache Busting), 우리말로 '캐시 깨부수기'예요. 원리는 의외로 단순해요. 플랫폼은 'URL이 같으면 같은 페이지'라고 판단하거든요. 그러니까 URL을 미세하게 다르게 만들어서 플랫폼이 '어, 처음 보는 주소네?' 하고 새로 긁어가게 만드는 거예요.

가장 흔한 방법이 주소 뒤에 쿼리 파라미터를 붙이는 거예요. 예를 들어 example.com/post를 example.com/post?v=2처럼 바꾸는 거죠. 물음표 뒤의 v=2는 페이지 내용엔 아무 영향이 없지만, 플랫폼 입장에선 새 주소라서 캐시를 무시하고 다시 긁어가요. 숫자를 바꿀 때마다(v=3, v=4...) 새로 갱신되는 거고요.

또 다른 방법으로는 각 플랫폼이 제공하는 공식 디버거 도구를 쓰는 거예요. 페이스북은 'Sharing Debugger', 트위터는 'Card Validator' 같은 페이지가 있는데, 여기에 내 URL을 넣고 '다시 긁기(Scrape Again)' 버튼을 누르면 강제로 캐시를 비우고 최신 정보를 다시 가져와요. URL을 더럽히고 싶지 않을 때 이게 깔끔하죠. 다만 카카오톡처럼 공개 디버거가 마땅치 않은 플랫폼은 결국 URL에 변화를 주는 캐시 버스팅이 현실적인 답이 되곤 해요.

업계 맥락에서

캐시 버스팅 개념 자체는 새로운 게 아니에요. 원래 웹 개발에서 CSS나 자바스크립트 파일을 수정했을 때 브라우저가 옛날 파일을 계속 쓰는 걸 막으려고 파일 이름에 style.css?v=1.2 같은 버전을 붙이던 오래된 기법이거든요. 그걸 소셜 미디어 미리보기 영역에 그대로 응용한 거예요. 좋은 기술 패턴은 이렇게 영역을 넘나들며 재활용된다는 게 재밌는 포인트죠.

한국 개발자에게

국내 서비스는 카카오톡 공유가 사실상 필수잖아요. 마케팅 페이지나 이벤트 페이지를 만들 때 '미리보기가 옛날 거로 떠요'라는 컴플레인은 정말 자주 나와요. 이때 당황하지 말고 URL에 버전 파라미터를 붙여 다시 공유해보세요. 더 근본적으로는, 페이지를 자주 수정한다면 OG 이미지 URL 자체에 갱신 시각을 파라미터로 넣어두는 식으로 설계해두면 편해요.