Yzngal 스킨의 섬네일 이미지 미출력 문제 해결방법 공유

이 시간에 블로그에 글을 적는건 거의 처음인것 같습니다.

티스토리 계정 만든 초기에는 틀이 잡히기 전이라 그때그때 생각나는걸 적어서 바로 올렸는데, 틀이 잡히고 나서는 미리 작성하고 탈고한걸 공개해 오고 있으니 말이죠.

굳이 이렇게 급하게 언급하려 하는 것은 바로 블로그 스킨 중 일부가 오동작해 그 문제 해결방법을 공유하고 싶어서입니다.

지난 금요일(8/31) 티스토리는 예고한 대로 모든 블로그에 https 연결을 활성화했습니다.

그리고 기본적으로 https 연결은 페이지 내 모든 구성요소가 https로 연결되었을때 '보안 연결'을 표시해 줍니다.

8월 초에 올라온 공지를 보고 블로그 스킨의 URL은 처리를 했었는데, 이번과 같이 스킨 내 기능 때문에 문제 생길건 예상을 못했네요.

제가 스킨을 만든것도 아니고, 티스토리 스킨을 만들어본 적도 없지만 개발자도구 덕분에 해당 기능의 어느 부분에 문제가 있는지는 금방 찾을 수 있던걸 다행이라 해야 할지.

시작하기에 앞서, 스킨 제작자는 같더라도 제가 수정할 js파일과 내용이 100% 동일한지 확인할 수 없으므로 수정한 파일이 아닌 소스 수정방법을 공유하겠습니다.

파일을 통채로 올려놓으면 그걸 받아가셔서 어떤 일이 생길지 알수가 없어서 말이죠.

js파일은 티스토리의 '스킨변경' 페이지[바로가기: https://블로그주소.tistory.com/manage/design/skin] 의 상단에서 '스킨 다운로드' 를 하신 뒤 다운로드 받아지는 압축파일 안에서 찾을 수 있습니다.

해당 파일을 끝에 '_180901' 과 같이 문자를 추가하는 식으로 이름을 변경하고 나서 아래 과정을 따라해 주시기 바랍니다.

원래는 동일한 파일을 덮어씌워 올려도 반영이 되어야 하는데, 서버측 캐시 문제인지 계속 이전 파일을 읽어오더군요.

그래서 아예 파일이름을 다르게 새로 올릴 겁니다.

수정은 메모장 보다는 notepad++ 과 같은 에디트 프로그램을 이용하시길 권합니다. 소스 찾기도 편하고 저장시 인코딩 등의 문제가 발생할 가능성이 적습니다.

P.S

2018.9.2 A.M 0:10 추가. 9.7 A.M 12:30 수정.

제가 수정한 js파일을 첨부해둡니다.

이후 수정한 내용을 다시 올립니다.

ygaln_180906.js

참고하시길.

///

여기까지 준비되었다면 가장 먼저, ygaln.js 파일을 찾습니다.

이 이름이 아니라면 y로 시작하는.. yzinit() 과 같이 초기화 함수가 선언되어 있는 파일을 찾아보시면 됩니다.

이 파일에서 필요할 때에 섬네일을 만듭니다. 검색페이지, 카테고리 보기 같은 곳에서 말이죠.

그리고 이 부분을 변경합니다.

섬네일이 떠야 할 글의 URL로 HTML string을 가져와 그 안에서 첫번째 이미지를 찾는데, 최근 https 연결이 가능해지면서 티스토리측이 이미지 주소를 변경했나봅니다.

그에 대한 대응입니다.

그 외에는 위와 같이 https 연결로 URL을 생성하지 않는 부분을 https로 변경해 주었습니다. 임의로 URL을 만들어 보니 접속에 크게 문제는 없는것 같습니다.

여기까지 하고 나서 해당 파일을 저장하시고, 스킨용 파일업로드 영역에 올립니다.

꾸미기 > 스킨편집 [바로가기: https://블로그주소.tistory.com/manage/design/skin/edit#/ ] 의 오른쪽에서 'HTML편집' > 상단 파일업로드 탭 에서 수정한 js파일을 올려줍니다.

그 뒤 상단의 HTML 탭(HTML / CSS / 파일업로드 중 HTML 탭) 으로 와, 이전 js파일 이름으로 'Ctrl + F' 를 눌러 검색합니다.

제 경우는 ygaln.js로 찾았습니다. 그러면 아래와 같은 부분이 나올 것입니다.

그 부분을 새로 올리신 파일명으로 바꿔줍니다.

그 뒤, 저장하시고 블로그 메인으로 나와 섬네일이 뜨는 카테고리 페이지 등에 접근해 보시기 바랍니다.

나오면 성공이고... 안나오면 다른 문제가 있나 살펴봐야겠지요.

여기에 추가적으로, 지금은 해당 글의 첫번째 이미지 원본이 크기만 줄여져서 보여지고 있어 이 부분을 섬네일로 대체할 수 있는 방법을 찾고 있습니다.

이건 딱히 필요하다 하시는 분이 없다면 저만 수정하고 말것 같지만 말이죠.

아래를 참고하시길.

2018.9.7 A.M 12:30 추가.

이미지를 섬네일로 가공해서 표시할 수 있는 방법을 덧붙힙니다.

브라우저는 개발자용 디버그 기능이 좋은 구글 크롬을 기준으로 하겠습니다. 양해해 주시기 바랍니다.

또, 혹시 모르니 성공하기 전까지는 수정전 js파일을 백업해서 보관하시기 바랍니다.

일단, 현재 카테고리 페이지에서 섬네일 이미지가 나오고 있다는 것을 전제로 합니다.

그리고 올리고 계시는 이미지 중에서 가장 많은 비중을 차지하는 비율을 가진 이미지가 있는 카테고리로 갑니다.

이 작업을 하는 이유는, 현재 사용중이신 스킨에서 가장 예쁘게 보이는 이미지 사이즈(가로세로 비율)를 찾기 위해서입니다.

섬네일 URL에 특정 사이즈로 섬네일 이미지 크기가 고정되어 버립니다.

저는 300 x 250으로 최적의 사이즈를 찾았는데, 쓰고계시는 스킨에까지 이 사이즈가 맞을지는 모르는 일이니까요.

카테고리 등, 이미지 섬네일이 나오는 화면으로 들어가신 뒤에 섬네일 이미지를 오른쪽 클릭하여 '검사' 혹은 '요소 검사' 를 클릭합니다.

그러면 하단에(하단이 아니기도 함) 디버그 도구가 열리고 이미지 영역의 소스코드가 보이는데,

파란색으로 된 그 부분에 커서를 가져가면 위와 같이 상단 이미지 영역에 사이즈가 표시됩니다.

제 경우는 원래 300 x 255였습니다.

저건 수정한 뒤라서 사이즈가 약간 줄었습니다만, 어쨌든 300 x 255라고 떴다고 보고 다음 과정으로 가시겠습니다.

이제, 먼저 위에서 섬네일 사이즈를 살폈던 그 글로 들어갑니다. 한번 더 디버그 툴을 써야 하니 디버그 툴은 닫지 마시구요.

그리고 아까 섬네일에 떴던 이미지를 다시 오른쪽 클릭해 '검사' 혹은 '요소 검사' 클릭해줍니다.

아까처럼 그 부분의 스크립트가 표시될텐데, src= 이라는 부분이 이미지의 URL 주소입니다.

바로 옆의 파란 주소부분을 더블클릭하면 복사 가능한 상태가 됩니다. 잘 복사해두시길.

이제 아래의 URL로 테스트를 하겠습니다. 아까 파악한 사이즈를 섬네일 서버가 지원하는지 여부를 확인할 겁니다.

이게.. 무조건 입력한다고 다 받아들이진 않더군요. 사전에 지원하는 사이즈인지 확인이 필요합니다.

https://i1.daumcdn.net/thumb/C300x255/?fname=https://t1.daumcdn.net/cfile/tistory/2406B34658611E8207

위 URL을 복사하셔서, 왼쪽의 '300x255' 부분에는 먼저 위에서 찾은 이미지 사이즈를, 오른쪽의 주소에는 방금 위에서 찾은 이미지 주소를 넣어줍니다.

그리고 브라우저에 입력하고 Enter.

결과는 아래 경우중 하나일 겁니다.

1. 가운데 조그마한 이미지가 뜬다 => 사용 가능한 사이즈

2. 요상한 에러 화면이 뜬다(지원하지 않는 사이즈라는것 같다) => 가로 혹은 세로 픽셀의 일의자리가 0이 아니라면 가장 가까운 0으로 줄여 써본다.

안된다면 십단위로 10씩 줄여본다(가로 혹은 세로 비슷비슷하게 줄이시는게 좋습니다)

제 경우는 2번이었습니다. 그래서 세로 사이즈를 250으로 줄였죠.

https://i1.daumcdn.net/thumb/C300x250/?fname=https://t1.daumcdn.net/cfile/tistory/2406B34658611E8207

이렇게 작동하는 주소를 찾았습니다. 이제 이걸 스크립트에 추가하겠습니다.

이번 수정사항은 먼저 위에서 시도했던 작업보다는 살짝 더 난이도가 있을지도 모르겠습니다.

어쨌든 d.attr("src" 부분에서 넣으려고 하는 a.~~ 의 a 에 있는 첫번째 이미지의 URL을 먼저 찾은 섬네일 서버를 타게 바꿔 주는게 목표지요.

꼭 d.attr 로 안되어 있을수도 있는데, 'src' 에다 무언가 입력하려고 하는것 같은 부분을 찾으시면 됩니다. 그리고 그 앞에 섬네일 서버 URL을 추가해 주는거죠.

그 다음엔 저장하고 이 수정한 파일을 올리시면 됩니다. 바로 윗부분에서 파일 올리는 방법과 동일합니다.

파일명이 동일하면 캐시로 인해 반영에 시간이 걸릴 수 있으니, 바로 결과를 보고 싶으시면 파일명을 바꿔 업로드하신 뒤 'HTML 편집'에서 js 파일명을 수정해주시길.

그리고 카테고리 목록 페이지로 가 봅니다. 정상적으로 적용되었다면 섬네일 서버를 거쳐 이미지가 표시됩니다.

이는 원본 이미지의 사이즈가 살짝 모나더라도(좌우 혹은 상하로 길다던가) 항상 같은 사이즈로 표시되기에 섬네일 화면이 조금 더 깔끔하네요.

확실히 확인하고 싶으시면, 섬네일 이미지를 오른쪽 클릭해 '검사' 혹은 '요소 검사' 클릭한 뒤 src= 부분의 주소를 보면 됩니다.

먼저 입력한 'i1.daumcdn.net/thumb' 부분이 보이면 잘 적용된 것입니다.

..이 부분도 잘 안되면 덧글 남겨주시길. 최대한 도와드리겠습니다.

///

작성시간이 짧은 관계로 비교적 스킨 HTML 수정에 밝으신 분들 위주로 글을 작성하게 된 점은 마음에 걸리네요.

일단 이번 글은 여기까지입니다.

저와 같은 제작자분의 스킨을 쓰고 계신다면, 잘 안되는 부분을 도와드리겠습니다. 덧글 남겨주시길.

그럼 수정에 도움 되셨길 빕니다.