드디어 이 거지같은 티스토리 움짤 문제해결 했습니다.
뭐가 문제였는지 결론부터 말씀드리자면 <img> 태그 내에 들어가 있는 srcset속성이 일으키는 문제였습니다.
>> 원인에 대해서 알고 싶으시면 해당 게시글을 봐주세요.
그래서 문제를 해결하기 위해
구글링 하다가 이제 '반응형 웹스킨 최적화 플러그인'을 알게 됐는데
그 내용은 다음과 같습니다:
예전부터 반응형 스킨이 인기 많아서 티스토리는
티스토리에서는 '반응형 웹스킨 최적화 플러그인'을 출시했는데
이 플러그인은 모바일 환경에서의 데이터 소비를 줄여주는데 초점이 맞춰져 있습니다.
그래서 보통 글을 쓰면, PC버전의 출력 환경에 레이아웃을 맞춰서 고해상도 이미지가 업로드되는데
모바일에서는 어차피 눌러서 확대해서 보지 않는 한 고해상도 이미지가 본문 글에 있을 필요는 없겠죠?
이렇게 되면 불필요하게 크기가 크니까 쓸데없이 이미지 로딩만 길어지기 때문에 이런 옵션이 있다고 합니다.
그래서 모바일 환경을 위해 해상도나 화질을 낮춘 이미지를 제공하고 이를 편리하게 구별하여 나타내기 위해 <img> 태그 요소에 srcset라는 속성을 넣었다고 합니다.
모 블로그에서 이 플러그인을 쓰면 'srcset 속성이 생기는 거다.'라고 서술된 바가 있습니다.
(자세한 블로그는 언급하지 않겠습니다.)
그렇다는 이야기는 만약 해당 플러그인을 사용 중이지 않을 때는
정상적으로 이미지가 안 끊기고 잘 보여야겠죠? 이게 제 블로그의 플러그인 상태입니다.
그런데 실제로는 그렇지 않은데요. 제 블로그만 그런 건지는 모르겠습니다만
여기 블로그 말고도 서브 블로그에서 테스트했을 때도 같은 문제가 발생했었습니다.
+) 우선 제 블로그가 아닌 다른 블로그에서도 신 에디터에 문제가 있다는 걸 확인했습니다.
아무튼 이 문제 때문에 여태껏 골머리를 썩이고 있었는데요.
다행히도, 이 블로그에서 정보를 얻었습니다.
|
1
2
3
|
<script> $(document).ready(function() {
$("img[data-filename*='.gif']").removeAttr("srcset");
});
|
이 스크립트를 복사해서...
저 스크립트 내용을 <head> 태그 안 쪽에 선언해주시면 됩니다.
저는 아래에 두었지만 어느 위치에 넣으셔도 상관없습니다.
다른 방법도 있습니다. srcset요소는 모바일에는 유리하다고 했습니다.
자 그러면 생각해봅시다. 첫번째 방법에서는 removeAttr(요소)를 이용해서 지우지만,
반대로 이 값을 변경해서 srcset의 기능을 살리면서도 움짤이 잘 보이게 가능합니다.
따라서 javascript랑 jquery를 같이 이용해서
이미지 태그 내 'R1280'를 -> 'R300'으로 변경한 다음에 값을 넣어주게 되면 srcset의 기능도 살리면서, 움짤이 멈춰있거나 일정 프레임 구간에서 반복되는 현상을 없앨 수 있습니다.
따라서 srcset요소를 유지하면서 움짤이 안 끊기려면...
|
1
2
3
4
5
6
7
8 |
<script> $(document).ready(function() {
var thumbImgSize = [];
var test = $("img[data-filename*='.gif']").attr('srcset', function(index, value){
thumbImgSize[index] = value.replace("R1280", "R300");
return thumbImgSize[index]
});
});
</script> |
이런 식으로 스크립트를 추가해주시면 됩니다. 넣는 위치는 아까와 똑같습니다.
단점은 두 가지가 있는데요 크기가 기준으로 정한 부분으로 모든 gif 파일을 처리하게 됩니다
예를 들어 'R300'으로 해놨으면 보일 때도 300만큼 작아진 사이즈로 보이게 됩니다.
이런 식으로요.
두 번째는 페이지 로딩에 좀 시간이 걸리는 것 같습니다.'R1280'부분을 바꿨기 때문에
티스토리 서버 내에서 이미지를 재처리하는 과정을 거칩니다.
제가 작성한 스크립트는 수정하는 절차가 들어가 있기 때문에 초기 이미지 로딩이 좀 지연될 수 있습니다.
제 블로그로 테스트 삼은 결과로는 딱히 성능으로써 개발자 도구에 있는 lighthouse에
크게 영향은 없는 것 같고 눈에 거슬릴 정도는 아닙니다.
우선 저는 그냥 첫 번째 방법을 썼습니다. 딱히 여태껏 올린
gif 이미지 크기가 크지 않아서 모바일 성능까지 고려할 필요는 없죠.
여러분들도 취사선택하시면 됩니다. 첫 번째 방법이 가장 깔끔합니다.
=========================================
문제는 해결했지만 의문이 남을 수밖에 없는 문제입니다.
이전에 제가 티스토리 블로그에 대해서 불만을 이야기한 적이 있었고
이 플러그인이 모 블로그에서 언급한 사실이 맞다고 가정하면,
구 에디터에서는 분명 잘 작동했을 겁니다. 물론 저런 문제가 있었겠지만 적어도 선택의 개념은 남아있습니다.
내가 사용자가 보는 화면을 이런 식으로 뚝뚝 끊기는 움짤을 사용해서 보여주고 싶은 사람은 아마 없을 겁니다.
따라서 대부분 저런 문제가 생기면 해당 플러그인을 사용 해제하겠죠?
하지만 어이없는 사실은 해당 플러그인 사용 여부와 관계없이
신 에디터에서는 저런 기능을 자동으로 지원한다는 소리입니다.
그러면 "구 에디터를 쓰면 되지 않냐?"라는 말을 할 수도 있겠지만
아쉽게도 티스토리 내에서 공식적으로 구 에디터 지원을 없애버렸습니다.
물론 강제로 쓸 수 있습니다. 주소는 살아있으니까요.
하나 그건 정상적인 방법이 아니고 특히나 신 에디터를 밀어주는데
플러그인 일부 기능이 맛탱이 간 상태로 지원하고 있으니 어이없을 따름이죠.
개인적으로 카카오 전환되면서 계정도 강제 전환하라고 압박 넣는 것도 조금 마음에 안 들었습니다 만,
신 에디터 불만은 지금도 블로그 사용자들이 겪는 문제입니다.
(가보시면 좋은 글은 안 쓰여있습니다.)
티스토리는 이 문제를 좀 더 눈여겨보고 구 에디터의 환경을 최대한
살릴 수 있도록 하는 게 좋다고 생각합니다. 아직 구 에디터가 그립다는 사람들이 많습니다...
네이버 블로그에서 과감히 티스토리 넘어왔던 시절을 생각해봅시다. 사용자 친화적인 환경
티스토리만의 장점이었죠. 하나 이제는 티스토리가 그런 장점을 밀고 나갈 수 있는지는
모르겠습니다... 더 이상 기능적인 문제의 주제로 포스팅 쓸 일이 없었으면 합니다.
'자유 > 나를골탕먹이는티스토리' 카테고리의 다른 글
| 2년간 많이 갈아치웠네요 (부제: 티스토리의 현실) (0) | 2023.08.24 |
|---|---|
| 티스토리 기능 추가에 몇몇 문제땜에 강의가 지연되네요. (0) | 2021.02.14 |
| 새벽에 왜 이런글을 쓰냐면 (0) | 2021.02.05 |