방문자 브라우저에 강제 cache 적용하기

§

웹사이트를 신규구축해서 운영 중 사이트를 부분 수정할 경우, 아니면 리뉴얼을 하는 경우, 기존 cache 가 방문자들의 브라우저에 남아 있어서 사이트가 깨져 보이는 현상이 발생합니다.

예전에 어느 개발자 커뮤니티를 보면 그 회사에서 일하시는 분이 코딩을 조금씩 변경하면, 꼭 “이거 왜 깨져요?” “이거 작동이 안되요.” 이런글들이 올라오는 걸 보게 되곤 했습니다. 그리고 혼자 실소.

“ㅋㅋㅋ 저거 cache 를 강제 refresh 해주면 되는데..” (php header 날짜 조정으로 새로운 cache 를 받게 한다던지 js 와 css 에 versioning 을 달아준다든지 하는 방식등 방법은 여러가지가 존재합니다.)

그렇지만 그 걸 모르는지 답글은 항상 “cache 삭제하고 다시 보세요.” 아니면 “ctrl+F5 눌러” 뭐 이런식의 댓글이었던 기억이 납니다. 한달전쯤에도 한번 본듯 합니다.

그런데 바로 어제 어느 사이트에 SNS (소셜미디어) 공유 버튼을 달아줘야 할 일이 생겨 이걸 제 사이트에 실험적으로 달았는데, 뜨~아…

강제_cache_적용

cache 를 강제로 refresh 해도 제가 제작한 아이콘 폰트들은 새로 갱신이 되지 않는겁니다!!! 이럴수가!!!

순간 당황.

js 나 css 와 달리 아이콘폰트는 잘 죽지 않는? 뭐 그런건가봅니다.

그래서 부랴 부랴 방법을 찾기 시작했는데, 다행이 htlm5 기능 중, application cache 를 swap 해주는 기능이 존재하고,

https://html.spec.whatwg.org/multipage/browsers.html#dom-appcache-swapcache

이 application 의 cache 를 swap 해주면 아이콘 폰트도 갱신이 되더라구요. (어쩌면 당연한 결과겠죠. application 의 cache 를 flush 해주는 거니까.)

제가 stackoverflow 에서 구해서 사용한 code snippet 은 여기서 퍼다가 쓰시면 됩니다.

https://hackya.com/us/how-to-force-cache-flush/

특수한 상황이고 (보통 아이콘 폰트를 사용하시는 개발자 분들은 아이콘 폰트를 직접 만드시지 않고 font awesome 같은 미리 만들어진 제품을 사용하시니 이런 경우가 드물겠죠.)

그래서 이런 해결책이 필요한 경우는 매우 드물 것 같지만, 혹시라도, 어느 한분이라도 이 방법으로 도움을 받게 되실 분이 계시지 않을 까 싶어 공유 합니다.

*한국에서는 방문자들로 부터 사이트 깨진다고 컴플레인 들어오면 “바보야, ctrl+F5 하라고!!” 라며 대응하시는 경우가 대부분이지만, 미국같은 경우, cache 가 갱신되지 않아 사이트가 깨지면 욕을 바가지로 먹게 되서요… ㅎㅎㅎ

hackya 는

Attorney, front-end developer, digital media artist, WordPress enthusiast, & a father of 4 wonderful children.

Tags: , ,

카테고리: ,

Ω

34 Comments

  • codei says:

    헬조선도 그래요 ㅜㅜ
    캐시 때문에 적용 안되면 매번 패치 때마다 삐걱 거리냐고 한소리 듣게 됩니다.
    특히 CDN 을 적용 시켜놓으면 애가 정말 잘 안 죽어요 ( ..)
    심지어 해당 파일을 삭제해도 살아 있죠! [당연하죠. 라우터에서 받아가는데 스토리지에 있는 원본 파일 지운다고 해도 ㅋㅋ]

    그래서 versioning 방법으로 해결 하고 있습니다.
    그런데 요런 것도 있었군요.
    한번 실험해봐야겠어요.

    • Matthew says:

      “캐시 때문에 적용 안되면 매번 패치 때마다 삐걱 거리냐고 한소리 듣게 됩니다.” – 아 그렇군요.

      s모모.kr 은 아무래도 개발자 분들이 주를 이루는 커뮤니티라서 사장님이 크게 신경을 쓰시지 않으시나 봅니다. 개발자 분들이야 사이트 깨지면 cache 때문에 그러나보다 하고 알아서들 각자 cache 를 갱신하시니까요.

      그렇지만 사이트 방문자가 일반인이 대부분 이라면 한국이나 미국이나 조인트 까이는건 같나봅니다. ㅋㅋㅋ

  • 7사단 says:

    핵캬님! 잘 지내고 계시죠?

    다름이 아니옵고, 혹시 이글에 보이는 공유버튼 어떤 플러그인을 쓰셨는지 알려주실 수 있으신지요? ㅎㅎ

    아는분 요청으로 한국 SNS 공유버튼 플러그인을 하나 찾아서 달아봤는데 사이트 속도도 약간 느려지고 그것보다 php 에러 메세지가 뜨네요. 에러메세지야 감추면 그만인데 좀 찜찜해서요.

    핵캬님이 쓰시는 플러그인이야 당근 믿고 쓸수 있는거라 생각되서 여쭤봅니다. ㅎㅎ

    • Matthew says:

      작년에 보내 드렸던 코프레스 튜토리얼 테마를 보시면 “inc” 폴더안에 social_share.php 라는 파일이 있습니다.

      이 social_share.php 라는 파일을 functions.php 에서 활성화 시키시면 공유버튼이 활성화 됩니다.

      카카오 공유버튼이 포함되어 있지 않지만, 페이스북 공유 url 이 포함된 것 과 동일한 방식으로 카카오 공유 링크를 추가하시면 됩니다.

      페이지로딩이 늦어지는 이유는 기존 플러그인들이 각 소셜미디어 api 가 제공하는 javascript 을 끌어다 로딩하기 때문인데, 사실 그 부분이 맘에 들지 않아서 작년에 소셜버튼 api 를 javascript 필요 없이 끌어오는 방식으로 구축했던거거든요.

      시간이 나면 이 부분에 대한 글을 써볼 생각도 있긴한데, 언제 글을 쓰게 될지, 아니면 아예 쓰지 않을지도 모르겠습니다.

      • WordCracker says:

        저는 인터넷에 공개되어 있는 소스를 조금 수정하여 소셜 공유 버튼을 만들었습니다. http://www.thewordcracker.com/intermediate/add-social-sharing-buttons-in-wordpress-without-using-any-plugin/ 글에 나와 있는데요, 네이버 공유 버튼은 쉽게 추가가 가능했습니다.

        하지만 카카오톡 공유 버튼은 추가하지 않았습니다. 그 이유는 제가 카톡을 사용을 하지 않아서 제대로 작동하는지 확인할 수 없기 때문입니다ㅎㅎ 카톡 공유 버튼을 추가하려면 https://story.kakao.com/share?글주소 형식으로 링크만 걸어주면 되나요?

        • Matthew says:

          href="https://www.facebook.com/sharer/sharer.php?u=href=ID)); ?>

          이렇게 되어 있는걸

          href="https://story.kakao.com/share??u=href=ID)); ?>

          이렇게 주소만 바꿔줬습니다. 작동 잘 되더라구요. ㅎㅎㅎ

          훔… php 코드가 제대로 보이지 않고 깨져보이네요.

          다른 분들을 위해 짤막하게 글을 작성해 보겠습니다.

          • WordCracker says:

            네이버 블로그로 공유가 됩니다. 주소 부분을 페북처럼 처리하면 한글이 깨져서 그 부분을 수정한 내용이 위에 링크된 글에 설명되어 있습니다.

          • Matthew says:

            아… 네이버 블로그 와 공유요… 그런데 언뜻 이해는 되지 않네요.

            네이버 블로그는 구글에서 검색도 거의 되지 않는데 네이버 블로그와 공유를 해야 하는 이유가…..

            쉽게 이해하기 어렵습니다.

          • WordCracker says:

            워드프레스 글이 네이버에 쉽게 노출이 안 되고 네이버 블로그가 우선적으로 노출되므로 더더욱 네이버 블로그 공유가 필요하지 않을까 생각됩니다. 네이버 블로그에 내 글을 퍼나르면 네이버에서 유입되는 사용자가 증가하지 않을까요? 물론 큰 효과는 없을 수도 있겠지만요…

          • Matthew says:

            음.. 큰 트래픽 증가는 없을 것 같습니다. 왜냐하면 잘 노출이 안되는건 차후로 치더라도, 네이버 블로그는 개별적인 entity 니까요.

            제 글하나가 올해초 페이스북에 공유되면서 하루에 만명이 넘는 방문자가 그 페이스북 공유 하나에서 발생하기도 했었습니다. (물론 그렇게 달갑지는 않은. 왜냐하면 그 만명되는 분들 거의다가 개발자나 웹에 관련해서 일하시는 프로그래머 분들이라서.. ㅎㅎㅎ)

            소셜미디어가 위력적인 이유는 이렇게 어떤 특정부류내에 파급력이 매우 높기 때문인데 블로그는 그런 파급력을 갖지 못합니다. 더구나 네이버 블로그는 대다수 그냥 파리날리는 장소라서…

            같은 이유로 같은 카카오라도, 카카오 스토리는 소셜미디어거든요. 글 하나 올리면 최소 수십에서 수백명이 보게되는.

            반면 카카오톡은 1:1의 대화에 가깝기 때문에 카카오톡 공유버튼을 다는 거는 엄청나게 비효율적인거죠.

          • WordCracker says:

            사실 네이버 블로그 공유 버튼은 제 개인적인 용도로 단 것입니다.
            말씀을 듣고 보니 카카오 스토리 공유 버튼을 추가해보아야겠네요ㅎㅎ

          • WordCracker says:

            카카오 스토리 공유 버튼을 추가했습니다.ㅎㅎ

            그런데 트위터의 경우 이 hackya 사이트도 그렇고 제 블로그에서도 한글 주소의 경우 제대로 링크가 되지 않는 문제가 발생하네요.

            즉, 그림처럼 영문 부분까지만 링크가 되고 한글 부분은 링크에 포함되지 않네요. 이 문제를 해결하려면 한글 URL 부분을 다른 방식으로 표시되도록 해야 할까요? 다른 Twitter 공유에서도 마찬가지인 것 같습니다.

          • Matthew says:

            작년에 코프레스 튜토리얼 제작할때 그 문제로 골머리를 조금 앓았었습니다.

            그래서 워드님이 말씀하신데로 저도 작년에 urlencode 를 적용해서, url 전체가 감싸지도록 했었거든요.

            아래 주소 상단 왼쪽에 “Tweet” 을 눌러보시면 tweet url 전체가 hyperlink 화 되는걸 확인하실 수 있으세요.

            http://hackya.com/themekopress/2015/09/04/이-테마의-성격에-대한-설명/

            그런데 캐릭이 다 깨져버리는… 물론 링크는 제대로 작동하구요.

            그래서 urlencode 적용했던걸 다시 빼버린거죠. 한글 url 주소가 제대로 보일 수 있도록.

            둘다 가장 이상적인 해결책은 아니라고 생각합니다. ㅎㅎㅎ

            가장 이상적인 해결책을 찾아야 하는데, 아직 제 홈피 말고는 이문제가 있는 사이트가 없어서… 언젠가는 방법을 찾긴 찾아야 겠죠. (발등에 불이 떨어졌을때) ㅋㅋㅋ

          • WordCracker says:

            예. 그런 것 같습니다. 한글도 표시되면서 링크도 작동하는 방법은 없을까요?

          • Matthew says:

            작년에 구글링을 했을때는 이 문제에 대한 해결책을 내놓으신 분이 없으셨어요. 그럼 결국 직접 삽질을 해야 한다는 얘기인데…

            제가 직접 삽질을 해보고 싶은 생각은/해야할 이유가 아직 없었습니다. ㅋㅋㅋ

          • urldecode( get_permalink() ) 로 하면 한글도 문제없이 잘 작동됩니다.

          • WordCracker says:

            랭커님 안녕하세요? 오랜만이네요.

            urldecode( get_permalink() )로 테스트해보니 그냥 get_permalink()와 동일하게 작동하네요. 즉, 한글은 제대로 표시되지만 링크는 영문 부분만 작동하여 결국 엉뚱한 링크로 연결됩니다ㅠㅠ

          • 흠… 이상하네요. 저는 똑같은 구문으로 적용해서 사용하고 있는데 잘 되는데요.

            그리고, 답글 달기전에 혹시나 하고(잘못 올렸다가 메튜님께 까일까봐 ㅋㅋ) 실제로 트윗 테스트도 해봤는데, 안 깨지고 잘 올라가는데요. ^^;;;

            물론 링크 자체도 한글로 잘 표시되고, 트윗 된 링크도 한글로 잘 올려져 있습니다.

          • WordCracker says:

            @랭커 님아마 구현하는 방식이 달라서 그렇지 않나 생각되네요. 랭커님이 사용하신 코드도 코프레스 튜토리얼 테마에서 이용한 코드인가요?

            @Matthew 님
            hackya 사이트는 테스트해보니 아예 주소를 기본 고유주소 형태로 바꾸어서 트윗되도록 만들었네요. 이렇게 주소를 기본 고유주소 형태로 바꾸는 방법을 얼마 전에 사용했었는데 어디서 사용했는지 기억이 나지 않네요…. (이제 자주 깜박하네요ㅠㅠ)

            그냥 아래와 같이 /?p=post-id 형태로 직접 만들어야 할까요?

            $domain = get_site_url();
            $id = get_the_ID();
            $url = $domain.’/?p=’.$id;

          • 튜토리얼 테마 아니고… 그냥 제가 임의로 만든 링크이구요. 고유주소는 category/post_name (한글) 형태로 쓰고 있습니다. <= 아~~ 사이트가 없다보니 테스트 서버에서요. ㅋㅋ

            $url = get_the_guid();

          • WordCracker says:

            기본 고유주소를 표시하는 방법이 갑자기 생각이 났습니다:
            wp_get_shortlink(get_the_ID())

            get_the_guid()는 어떻게 작동할지 궁금하네요. Codex 페이지를 찾아보니 별 정보는 없네요.

          • Matthew says:

            저는

            get_the_ID() + global = get_the_guid();

            로 이해하고 있습니다. 랭커님처럼 get_the_guid(); 를 쓰지 않은 이유가/써보지 못한 이유가 이걸 쓰면 제 테마에서는 화면이 어제 계속 하얗게 떠서. ㅋㅋㅋ

            에러메세지도 안뜨고 그냥 whiteout 되버리더라구요.

            그래서 워드님처럼 get_the_ID() 로 트위터에 주소 보내고 끝냈습니다.

          • WordCracker says:

            Matthew님 사이트에 구현된 트윗 공유 버튼에 영감(inspiration?)을 받아서 저도 기본 고유주소 형태로 트윗하도록 수정했습니다.^^

            그런데 오늘 코프레스 사이트에 로그인이 되지 않네요. 저만 그런지 모르겠네요.

          • Matthew says:

            저는 로그인 할 일이 없어서 확인은 안해봤는데, 혹시 비밀번호를 잊어버리셨나요? ㅋㅋㅋㅋ

          • WordCracker says:

            혹시나 해서 브라우저를 바꾸어서 해봐도 동일하네요.
            로그인 아뒤/비번을 넣으면 아무런 메시지 출력 없이 로그인이 되지 않는 현상이 나타나네요.ㅎㅎ

          • 헉~ 두분께 혼란을 드려 죄송합니다. ㅠㅠ

            사실… 실제로 사용할때는 global $post; $post->guid; 이렇게 사용하는데 이걸 한방에 줄여서 표현하고자, 확인도 안하고 get_the_guid() 라고 답변 드렸네요. ^^;;;

          • Matthew says:

            이래저래 global $post; 나 get_the_guid() 나 둘다 화면 하얗게 뜨고 죽더라구요. (제 경우는 안되더라구요.)

            멀티사이트에서 테스트 해보셨는지 궁금합니다.

          • 네~ 멀티사이트에서 실제로 사용하고 있습니다.

          • Matthew says:

            네. 지금 확인해 보니 그렇네요. 엄청난 꼼수시네요. ㅋㅋㅋ 역쉬 랭커님의 내공이 느껴집니다. (구축한 방식이/꼼수가 신박합니다. 저 이런거 좋아하는데. 완전 제 맘에 든다는…. ㅎㅎㅎㅎ)

            단점이 공유를 하고 나면 pop-up 창이 계속 떠있지 않고 사라져 버리네요.

            랭커님은 엄청 까다로운 클라 하고 잘 어울리실 듯. 이것 저것 이상하거 다 해달라는 (그리고 돈은 무진장 짜게 주고) 클라를 항상 만나시기 기원하겠습니다. ㅋㅋㅋㅋㅋ

  • Estoque says:

    공유하기 버튼 좋네요 ㅎㅎ 세계로 뻗어나가는 카카오 스토리? ㅋㅋㅋ

    제 블로그 테마는 처음으로 커스텀 폰트를 제조해서 적용했습니다. 아이콘 폰트부터 한글/ 영문 폰트 전부다 woff로 변환해서 base64로 인코딩해서 넣었네요

    구글폰트를 쓰면 좋지만 구글에서 제공 안하는 무료폰트를 쓰려고 하다보니 어쩔수가 없었습니다.

    특히 한글 폰트의 경우 완성형은 1만1천자가 넘어가는데 폰트파일만 weight 별로 해도 300메가가 넘죠 -ㅁ-

    그래서 2700자로 줄이고, 거기에 제가 안쓰는 문자는 추가로 줄여서 약 1900자 정도로 만들어서 스킨에 심어 놓았습니다. 그래도 폰트 용량이 4메가나 되네요 쩝…

    웹폰트 용량 문제를 어떻게 해결한다면 노벨상감인데 말이죠 ㅋㅋ

    저도 오늘 블로그 리뉴얼을 단행했는데 컴퓨터야 커맨드+쉬프트+R 연타하면 케시가 날아가는데 휴대폰에서는 케시가 잘 안날아가서 죽는줄 알았습니다… 결국 사파리 설정 들어가서 케싱 다 지우니 제대로 뜨네요 -ㅁ-;;;

    • Matthew says:

      작년말쯤, 한국의 어느 스타트업 회사가 개발한 한글웹폰트를 접한적이 있는데 특징이 기존 한글 폰트에 비해 용량이 1/10도 안될 정도로 작고 나눔고딕하고 비슷하게 생겼는데 모양도 이뻤습니다. 무료구요. 1/10 이 아니라, 그보다도 훨씬 더 작았습니다.

      제가 이거 노벨상 감이다 싶은 생각이 들 정도로 엄청난 경량화에 성공했더라구요. 모바일을 고려해서 이렇게 작게 만들었던 것 같았는데.

      충분히 홍보가 안되서, 사람들이 몰라서 이 폰트를 안쓰는 것 같았습니다.

      그래서 관련글을 쓰려다가 워낙 시간이 없어서 결국 못썼는데, 지금 다시 찾지도 못하고 있는… (꼭 찾으려면 찾을수야 있겠죠.)

      • Estoque says:

        스포카 한 산스 말씀하시는군요… 나눔고딕이랑 동일한 개발회사인 산돌커뮤니케이션에서 개발해서 그렇습니다. 근데 노토 산스 기반이라… 개인적으로는 그냥 노토산스 오리지널이 좋더군요

        http://spoqa.github.io/spoqa-han-sans/#section-download

        스포카 한 산스는 노토산스를 포크해서 만든거랍니다.

        여기서 배포하는 웹폰트 서브셋은 파일당 440kb인데, 제가 만든 서브셋도 450~460근처입니다. 웃긴건 파일을 base64로 전환하면 오히려 용량이 늘어나더군요(…)

        그래서 스타일 4개 사용해서(thin / light / bold / black) 노토산스 웹폰트만 한 1.5mb 됩니다.

        게다가 bebas neue/playfair/montserrat 스타일별로 쭉쭉 넣으니 폰트만 다합쳐서 3~4메가 나오네요 ㅋㅋㅋ

  • Word says:

    W3 total cache를 잘 사용하고 있었는데, 얼마 전부터 캐시가 삭제되지 않아서 사용자들이 오래된 페이지가 표시되는 문제가 발생하여 W3를 비활성화하고 다른 캐시 플러그인으로 바꾸었습니다.

    캐시 플러그인이 사이트 속도 향상에는 도움이 되는 경우가 많지만 예기치 않은 문제를 야기하네요. 잘 되다가 갑자기 안 되니…ㅠㅠ

Leave a Reply

Your email address will not be published. Required fields are marked *