본문으로 바로가기

안녕하세요. 오늘은 티스토리 블로그에 새롭게 추가된 썸네일 스킨 치환자에 대해서 알아보겠습니다.


기존에 티스토리는 썸네일 API를 공개하지 않았기 때문에

포스팅 본문의 썸네일을 추출하기가 쉽지 않았습니다.


그래서 기존의 스킨 개발자 분들은 Ajax를 이용한 이미지 추출을 하였습니다.

다만 이방식을 했을때는 바로 썸네일이 나타나지 않고 시간이 소요되며

RSS를 전체공개 설정을 해야하는 단점이 있습니다.


그러던 중 티스토리에서 썸네일 이미지 주소의 스킨 치환자를 추가 합니다.

 [##_article_rep_thumbnail_url_##]


티스토리_스킨가이드_스킨치환자


기존의 썸네일 스킨 치환자


<img src="[##_article_rep_thumbnail_url_##]">

하지만 이 방식 또한 치명적인 단점이 있었습니다. 


바로 썸네일의 크기를 조절하지 못하고

썸네일의 이미지 사이즈 크기가 가로값이 750px인 썸네일로 제공된다는 점입니다.


제가 사용하는 블로그 본문의 내용 사이즈가 800px로 작성되는데

고작 50px줄어드니 이미지 크기가 거의 동일한 것과 마찬가지겠죠?


기존의 썸네일 치환자를 사용 했을 경우

홈 화면에 썸네일이 작은 것 처럼 보여도 750px 사이즈를 추출해서 갖고

오기 때문에 매우 큰 이미지를 로딩하는 셈입니다.


이게 뭐가 문제냐고 할 수 있겠지만


모바일과 PC에서 반응형웹에서는 특히 모바일은 페이지 로딩속도가 급격하게 늘어나

매우 치명적입니다.


웹페이지 속도를 확인 할 수 있는

https://developers.google.com/speed/pagespeed/insights/

에서도 가장 큰 문제점이 이미지 최적화를 거론 하였습니다.


그래서 불편을 감수하더라도 대부분의 개발자분들은

Ajax를 이용한 이미지 추출을 하고 있었습니다.


저도 페이지 로딩 속도 향상을 위해서 고민하던중


제가 사용하는 CCZ-CROSS 스킨의 제작자이신 흉내내기 님께서 엄청난 정보를 주십니다.!

이번에 새롭게 공개된 티스토리 반응형 웹 #2번에


썸네일을 주소와 함께 호출 할 수 있는 방법이 있다고 하셨습니다.


아니!!! 티스토리가 2015년 반응형 웹 스킨 공모전도 하고나서


자체 반응형 웹스킨을 출시하더니!!

이번에 2번째로 공개한 스킨에서 코드가 존재하다니!!

바로 확인을 해보았습니다.


새로운 썸네일 스킨 치환자 [##_article_rep_thumbnail_raw_url_##]


<img src="//i1.daumcdn.net/thumb/C210x150/?fname=[##_article_rep_thumbnail_raw_url_##]">

와 진짜 핵소름...


그동안 이것 때문에 얼마나 복잡한 코드를 사용 하였던가..

ㅠ_ㅠ 손쉽게 썸네일 사이즈를 조절 할 수있는 스킨치환자를 만들어다니...

서운하기까지 합니다. 스킨가이드에는 새로운 치환자를 소개하지 않았거든요!!



썸네일 치환자 하나만 바꿨을 뿐인데 기존 사이트 맞나요?

PC환경은 무려 80이상 속도 점수까지 확득합니다



기존에도 썸네일 사이즈 크기는 여러 사용자들에 의해서 공개가 되었습니다.

썸네일 싸이즈의 코드를 살펴보면


이건 원본 파일입니다.

http://cfile1.uf.tistory.com/image/2311913A56B501C1356014 - 5.54MB


기존 썸네일 스킨치환자 적용시 이미지

http://cfile1.uf.tistory.com/R750x0/2311913A56B501C1356014 5.54MB

이미지 파일이 750px 이하기 때문에 원본과 썸네일의 파일 용량은 똑같습니다 ㅡ_ㅡ

기존 치환자로 위 이미지를 대표이미지로 지정해놓았다면 홈화면은.. 상상도 하기 싫군요.


P0x0 원본 비율 살리고 그대로 가져오는 방식입니다.

http://cfile1.uf.tistory.com/P200x200/2311913A56B501C1356014 - 606KB (약 10분의 1수준 입니다)


R0x0 - 원본 비율 살리고 세로 및 가로 길이 많큼 그대로 가져오는 방식입니다.

http://cfile1.uf.tistory.com/R200x0/2311913A56B501C1356014 604KB

http://cfile1.uf.tistory.com/R0x160/2311913A56B501C1356014 762KB


C0x0 - 원본 비율을 무시하고 지정된 비율로 잘라서 그대로 가져오는 방식입니다.

http://cfile1.uf.tistory.com/C74x107/2311913A56B501C1356014 -238KB

http://cfile1.uf.tistory.com/C150x150/2311913A56B501C1356014 - 520KB

http://cfile1.uf.tistory.com/C150x100/2311913A56B501C1356014 - 360KB


S0x0 원본 비율을 무시하고 자릅니다. GIF도 멈춥니다.

http://cfile1.uf.tistory.com/S150x150/2311913A56B501C1356014 - 7.6KB

(썸네일 이미지를가장 줄이는 코드S 입니다.)


지원하는 썸네일 크기는 아직 전체를 잘모르지만

4:3 사이즈는 대부분 지원합니다.


이렇게 4종류의 썸네일을 제공합니다.

아직 썸네일 사이즈는 수치가 공개되지않아서 일일히 값을 대입해보는 방식 밖에 없습니다.


늦게나마 썸네일 스킨치환자를 만들어준 티스토리가 정말 고맙네요!!


그럼 다들 썸네일로 블로그를 이쁘게 꾸미시고 더빠른 로딩을 위해서 바꾸시길 바랍니다.

신고

댓글을 달아 주세요

  1. BlogIcon 세모뷰 2016.02.17 14:22 신고

    썸네일 치환자만 바꿔도 로딩 속도가 많이 빨라지네요.
    현재 300x200 사이즈로 썸네일 사진을 만들어서 사용중인데요..
    프롤로그 화면에서 썸네일이 상단이 꽉 안차게 출력이 되는건 혹시 어떻게 설정해야하는지 궁금합니다. >ㅁ<

    • BlogIcon COCOSOFT COCO Media 2016.02.17 15:57 신고

      해결하신거 같네요!!

      ccz-cross 썸네일의 사이즈는 4:3 사이즈라서
      저같은 경우에는 74X54 사이즈를 강제로 늘려서 사용하고 있어요
      아래 썸네일 부분에서 width="216px" height="162px" class="img-responsive" 설정 해주시면 될거에요. 이렇게만 해줘도 사이즈가 깍 차게 나올거에요! img-responsive 이건 부트스트랩 기반이라서 자동으로 반응형맞춰서 해상도에 맞게 나올거에요!!

      깨끗하게 보이고 싶으시다면 C240x180 사이즈로 주셔도 좋구요! 4:3 사이즈를 찾아서 적용하시는게 깔끔하게 나와요 ㅎㅎ

      <img src="//i1.daumcdn.net/thumb/C240x180/?fname=" width="216px" height="162px" class="img-responsive">

    • BlogIcon 세모뷰 2016.02.17 17:19 신고

      아...제가 썸네일용 사진을 제작하면서 4:3으로 제작하지 않아서 생기는 문제였네요..ㅠㅠ

    • BlogIcon 세모뷰 2016.02.17 20:17 신고


      저부분을 적용시키면 기존의 ">
      이부분을 어떻게 처리해야하나요?

    • BlogIcon COCOSOFT COCO Media 2016.02.17 20:19 신고

      <img src="//i1.daumcdn.net/thumb/C75x54/?fname=[샵샵_article_rep_thumbnail_raw_url_샵샵]" width="216px" height="162px" class="img-responsive">


      이게 치환자라서 정확하게 표현이 안됬었군요 이렇게 하면 됩니다!! ㅎㅎ

    • BlogIcon 세모뷰 2016.02.17 20:26 신고

      아...썸네일 이미지를 제가 가로폭을 300으로 만들어서...
      비율이 4:3이 되는 300x225로 변경을했어도..
      C240x180으로 설정할때 가로길이가 240을 초과해버려서..이미지가
      안맞은것 같네요. 하아...다시한번 감사합니다..!!!

  2. BlogIcon 세모뷰 2016.02.17 20:18 신고

    아...아래의 소스코드에서
    저부분을 적용시키면 기존의 [샾샾_article_rep_thumbnail_raw_url_샾샾]">
    이부분을 어떻게 처리해야하나요?
    아..샾이 화면에 출력이 안되서 다른분들도 샾이라고 바꾸시는거였네요.

  3. BlogIcon SONYLOVE 2016.02.18 15:54 신고

    썸네일 치환자 바꿔보니 확실히 빨라진것도 같아요.
    저는 S200x150 으로 했어요.
    유용한 정보 감사드려요.
    블로그가 완전 빨라질 그날까지 ㅋㅋ

    • BlogIcon COCOSOFT COCO Media 2016.02.18 17:30 신고

      그러니깐요 ㅠ_ㅠ 빨라지는 그날까지!! 이게 블로그가 이미지 크기도 중요하고! 플러그인들을 줄이는게 중요한 것 같아요. 최근에 소셜 채널 구독이라든지 각종 버튼을 많이 달았는데 스크립트 읽는속도가 느려서 그런지 엄청 느려졌네요 ㅠ 최대한 중복된 것들은 지워가면서 올려야겠어요!! ㅎㅎ

    • BlogIcon SONYLOVE 2016.02.18 17:57 신고

      스크립트 고치는게 속도에 가장 영향을 많이 받는거 같긴해요.
      저는 main.js 에서도 사용하지 않는 네이버나 비메오 동영상 관련된부분들이라던가 프리로더 부분도 모두 지워버렸어요.
      오늘은 스킨 html 에서 헤더 부분에 breadcrum 도 별로 필요없어보여서 날려버렸다는요. ㅋㅋㅋ 참 처절해 보입니다 제가 봐도 제 모습이 ㅋㅋ

    • BlogIcon COCOSOFT COCO Media 2016.02.18 21:39 신고

      네 정말 글런거 같아요 ㅠ_ㅠ 유투브 구독 버튼을 달았는데 페이지 로드 요구가 급격하게 올라가더라구요.ㅠ_ㅠ 일딴 때버렸는데 되도록 스크립트는 줄이면서 최소하만 사용하면서 별로 사용 안하는 것들은 지우면서 해야겟어요!!

      이제 당분간 ㅋㅋ 스킨 고치는건 자제해야지 글은안적고 페이지 로드 속도 때문에 ㅠ 스킨만 하루종일 고치고있네요 ㅎㅎ

  4. 2016.04.16 13:22

    비밀댓글입니다

    • BlogIcon COCOSOFT COCO Media 2016.04.19 17:58 신고

      죄송합니다. ㅠ 제가 요 몇일 바빠서 제대로 블로그를 보지못했네요 ㅠㅠ 지금 수정을 하셨나요? ㅠㅠ 정상적으로 나오는데 ㅠ 이게

      짤리는것없이 비율 그대로 유지하는 방법이면 괜찮으신가요? ㅠ

    • BlogIcon Helios℠ 2016.04.19 20:59 신고

      바쁘신 것이 좋지요^^
      제대로 나오는 것 처럼 보이지만..실제로는 제가 원하는 비율이 아닌 것이 더 많아요;;;
      네네....짤리는 것이 없이 비율 그대로 유지하는 방법이 느므느무 알고 싶어요^^

  5. BlogIcon 구름강아지 2016.04.25 22:25 신고

    오... 한동안 티스토리 스킨에 손을 대지 않았더니..
    신세계가 열려있었군요!

    다시 공부할게 많아진 기분입니다... 만세! (??)

    • BlogIcon COCOSOFT COCO Media 2016.04.26 10:23 신고

      티스토리도 계속 새로운 것을 +_+ 추가하는 것 같아서 좋은 것 같아요.

      카테고리부분의 썸네일도 제공해주면 좋을 것 같은데 아직 그것은 안되네요 ㅠ

  6. BlogIcon 카페노트 2016.07.28 11:03 신고

    문의드립니다. 이제 막 티스토리 블로그를 시작했는데, 처음에는 문제 없더니 얼마전 부터 포스팅을 올리면 다음에서 제 블로그 글 검색 시, 썸네일이 보이지 않는 경우가 발생하네요. 이는 어떻게 해결하는지 아시는지요..

  7. BlogIcon 10626 서현교 2016.07.28 22:24 신고

    오오 속도가 꽤 많이 향상되네요! 저도 언젠가는 안 쓰는 기능들 정리하고 스킨 소스 압축해야겠습니다. 그게 귀차니즘으로 차일피일 미뤄지고 있지만요(...)

  8. BlogIcon 인포몬 2016.11.24 11:47 신고

    아래 처럼 html 에 티스토리 썸네일 치환자 코드를 입력했는데

    ##article_rep_thumbnail_raw_url##
    이미지를 불러 올 수 없다고 나오고

    글 내용 일부 치환자도 맞게 입력한 것 같은데
    ##article_rep_summary##
    글 내용 일부가 출력되지 않네요..ㅠㅠ

    어떤 오류가 있는 걸까요??

    참고 : http://infoseek.pe.kr/category/Information%20Technology

    블로그 새로 시작했는데 답답하네요..ㅠㅠ
    답변 좀 꼭 부탁드립니다.

    전체 코드는 네이버 지식인 질문 참조해 주세요^^
    이미지를 올릴 수가 없어서ㅠㅠ
    http://kin.naver.com/qna/detail.nhn?d1id=1&dirId=10605&docId=264951322

  9. BlogIcon 라오꽁 2017.03.24 22:59 신고

    좋은 글 잘읽었습니다~!

  10. BlogIcon 좋은아침♥T 2017.05.11 09:58 신고

    P로 수정하고나서 제가 원하는 정사각형 썸네일이 제대로 보이게 되었습니다.
    정말 감사드려요~ ^^
    덕분에 스트레스에서 한결 해소되었어요. ㅋ

  11. 2017.07.17 10:47

    비밀댓글입니다

티스토리 툴바