본문으로 바로가기

티스토리 스킨에는 갤러리 형태의 카테고리(검색결과) 및 최신글의 이미지를 출력하는 치환자가 공개되지 않았습니다. 물론, 티스토리에서 제공하는 모바일 스킨에는 이를 지원하고 있으나 모바일 스킨은 공개되지 않았기에 일반 스킨 제작자들은 다른 방법을 필요로 합니다.

티스토리 썸네일 치환자 업데이트!

티스토리에서 공식적으로 썸네일 치환자가 업데이트 되었습니다. http://www.tistory.com/guide/skin/step3#2-8-7

Ajax를 이용한 이미지 추출

티스토리 스킨 제작자들은 위와 같은 어려움을 극복하기 위해 Ajax를 사용하여 페이지 전체를 가져오거나 RSS를 이용하여 이미지 추출을 구현하고 있다.

티스토리 Ajax 구현방식은 제작자마다 다를 수 있으나 크게 두가지로 구분된다.

dataType: 'html'

Ajax 사용시 정보를 추출할 URL에 대한 데이터 파싱의 방법으로 dataType: 'html' 을 지정하면, URL에 해당하는 문서 전체를 가져오게 된다.

  • 문서에 존재하는 모든 요소에 접근할 수 있다.
  • 오픈 그래프(Open Graph) 구조의 메타 데이터에 접근할 수 있다(아래에서 설명).
  • jQuery 셀렉터를 이용하기 위해 Ajax에서 넘어온 데이터를 지정하면 해당 문서에 포함된 콘텐츠를 모두 다운로드 해버린다. 즉, Ajax로 받아온 문서에 이미지가 10개 포함되어 있다면 10개 모두 다운로드 해버려서 로딩 속도에 악영향을 준다.
var href = "http://webdir.tistory.com/467"

$.ajax({
    url: href,
    dataType:'html',
    success:function(data){
        var imgSrc = $(data).filter('meta[property="og:image"]').attr('content');
  }
});

위에서 $(data) 가 셀렉터로 지정되는 순간 해당 문서의 모든 정보를 요청하게 된다.

위와 같은 방법 말고 다른 방법으로 jQuery 셀렉터를 이용하여 원하는 요소를 선택하는 방법을 필자는 모르겠다.

용쯔스킨의 구현 방법을 보니 Ajax로 넘어온 데이터를 문자열로 검색하여 이미지의 경로를 추출하는 방법을 사용하고 있다. 이 방식은 위에서 말한 것처럼 문서에 포함된 모든 콘텐츠를 다운로드 하지는 않는다. 다만, 문자열을 검색하고 원하는 부분만 잘라내는 방법이 까다로워 요소에 접근하는 것이 쉽지만은 않다. 최근에 필자가 제작중인 스킨에서는 정규표현식을 이용하여 접근하는 방법을 사용했다.

dataType: 'xml'

Ajax 사용시 정보를 추출할 URL을 티스토리 RSS의 xml 문서로 지정하고 데이터 파싱의 방법으로 data: 'xml' 을 지정하면, 티스토리에서 제공하는 RSS를 이용하여 xml로 파싱된 데이터를 얻게된다. 이를 위해서는 환경설정 → 글설정 → 공개정책 의 RSS 설정부분을 전체공개로 변경해야 한다.

  • RSS 공개 필요
  • xml 문서 자체가 코드만으로 작성되어 있기에 jQuery 셀렉터를 이용한 접근에도 추가적인 다운로드 요소가 없다.
  • RSS 구독자가 많은 경우, RSS 부분 공개인 블로그에 비해 접근률이 떨어질 수 있다.
  • RSS로 파싱된 문서는 정해진 구조에 해당하는 정보만으로 구성되기에 원본 글에서 포함되어 있는 모든 정보를 획득할 순 없다.
  • 대표이미지로 선택된 이미지를 확인할 수 있는 방법이 없기에 문서에서 처음으로 등장하는 이미지를 대표이미지로 인식하고 추출하는 방식으로 진행된다. 이를 극복하려면 대표이지미로 사용될 이미지마다 특정 코드를 추가 입력하던가 항상 글의 본문에서 맨 처음 등장하는 이미지를 대표이미지로 작성해야 한다.
  • 발행 가능한 RSS의 갯수가 한정되어 있기 때문에 위에서 거론한 html 파싱 방법과 함께 사용되어야 한다.

티스토리에서 제공하는 치환자를 제외하고 얻을 수 있는 정보는 글의 마지막 분류에 해당하는 카테고리(전체 카테고리 구조가 아님), 글의 본문에 포함되는 내용, 태그정도 이다.

오픈 그래프(Open Graph) 구조의 메타 데이터 추출

티스토리는 글을 SNS에 공유하기 위해 오픈 그래프 프로토콜을 사용하고 있다. 해당 프로토콜에는 아래와 같은 정보를 메타 태그를 이용해 전달한다.

<meta property="og:type" content="website">
<meta property="og:url" content="http://webdir.tistory.com/465">
<meta property="og:site_name" content="WEBDIR">
<meta property="og:title" content="워드프레스 번역 이해">
<meta property="og:description" content="워드프레스에 관심을 가져본 사람이라면 애매한 한글 번역과 한글화가 안된 플러그인들로 인해 고민이 생길때가 있습니다. 관련 자료들을 검색해보고 알게된 사항들을 정리해 봅니다.  워드프레스의 번역 시스템 이해 워드프레스는 언어파일을 이용해 다국어를 지원하는 시스템을 갖추고 있다. 이는 기본적인 워드프레스 언어파일과 플러그인 언어파일로 나눌 수 있으며, 해당 언어파일들을 번역하여 교체하면 원하는 문구로 수..">
<meta property="og:image" content="http://cfile27.uf.tistory.com/image/2207003455F206D30AD97D">
<meta property="article:section" content="IT 인터넷">
  • 예약된 글, 비공개 글 : 프로토콜을 지원하지 않음
  • 보호된 글 : og:imageog:description 을 제외한 것들을 제공

og:image 는 하나의 글에 포함된 여러 이미지중에서 대표이미지로 선택된 이미지가 출력되게 하는데, RSS를 이용한 이미지 출력 방법에서는 이를 지정할 방법이 따로 없어 문서의 첫번째 이미지를 추출해오던가, 글을 작성할때 대표이미지로 사용될 이미지마다 특정 클래스를 부여하던가 하는 성가신 작업이 뒤따르게 된다.

필자는 대부분의 글을 HTML 모드에서 수동으로 태그를 입력하여 작성하거나 마크다운 문법을 사용하기에 익숙하지만, 일반인들이 이를 달가워 하진 않을꺼라 본다.

이는 Ajax 호출시 html 데이터 파싱 방법을 사용할때 문자열로 접근하여 추출하기에 적당한 정보를 가지고 있다. 아래는 이를 이용하는 예제의 일부이다.

<ul>
    <li class="thumb-list">
        <a class="thumb-link" href="http://webdir.tistory.com/470" >티스토리 최신글, 카테고리 썸네일 추출에 대한 이해</a>
    </li>
</ul>

<script>
$(document).ready(function() {

//Ajax 호출 및 이미지분류함수 실행
var ajaxData = [],
data,
target = $('.thumb-list');  //썸네일의 대상 기준

target.each(function() {
    var $this = $(this),
    link = $this.find('.thumb-link').attr('href');  //Ajax 호출주소

    ajaxData.push(
        $.ajax({
            url: link,
            dataType: "html"
        })
        .done(function (data) {
	    var defin = new $.Deferred();
	    checkSort($this, data);  //분류함수실행
	})        
    );
});

function checkSort(target, data) {
    var loadData = data,
    regImg = '/<meta.*property="og:image".*content=".+cfile.+".*>/'  //오픈그래프구조에서 대표이미지추출위한 정규표현식 
    imgData = loadData.match(regImg) ? loadData.match(regImg)[0] : "none";  //매칭
   ....
}

});
</script>

RSS를 사용해 트래픽 및 로딩 속도의 이점을 조금이라도 챙길 것이냐, 사용자의 대표이미지 선택에 자유를 줄 것인가에 중점을 두고 스킨 제작을 고려하면 되겠다.

최근에 티스토리 공식 반응형 스킨이 공개되면서 새로 생긴 치환자들이 등장했으나 썸네일과 관련된 부분은 사용되지 않은 것으로 보아 한 동안은 Ajax를 이용한 방법이 유일한 대안책이 될 듯 싶다. 그나마 글의 요약본, 카테고리 정도를 얻을 수 있는 치환자의 등장에 반가울뿐!


신고

댓글을 달아 주세요

  1. BlogIcon 뭐하라 2015.11.07 14:55 신고

    안녕하세요 항상 잘 보고있습니다.
    jQuery 셀렉터로 접근하기 전에 src를 모두 NOsrc 등으로 치환하면 컨텐츠를 다운로드 하지 않네요.
    http://nubiz.tistory.com/620

    • BlogIcon 흉내쟁이 2015.11.08 10:15 신고

      글 잘보았습니다. 말씀하신데로 콘텐츠다운 없이 jQuery 선택자 사용이 가능한 방법은 앞으로도 유용하겠습니다. 미처 생각치 못했군요^^; 저 또한 뭐하라님의 많은 글을 참고하고 있습니다!

  2. BlogIcon COCO Media 2016.01.31 22:13 신고

    페이스북 글 보내기시 제대로 썸내일 및 표시 되지 않아서

    블로그 포스팅 본문 마다 html수정편집기로 메타 오픈 그래픽 프로퍼티를 수정 해주어야 하는건가요?!

    궁금합니다. ㅠ 카카오스토리 보내기도 잘 안읽혀 지는 것 같습니다.

    • BlogIcon 흉내쟁이 2016.01.31 22:19 신고

      티스토리에서는 자동으로 대표이미지를 오픈그래프에서 사용할 이미지로 지정합니다. 즉, 티스토리의 에디터를 통해 첨부한 이미지중에 대표이미지로 설정된 것이 페이스북 글보내기시에 썸네일 표시로 사용되어지지요.

      기본은 그러헌데 내부적으로 구현이 어찌되었는지는 저로서는 알도리가 없습니다. 카카오스토리도 API가 어찌되어있는지 살펴본적이 없구요.

    • BlogIcon COCO Media 2016.01.31 22:28 신고

      넵! 답변 감사합니다. 카카오스토리도 자동으로 잘적용되는것 같은데 기존스킨은 유독 페이스북은 썸내일 및 정보가 읽혀지지 않네요. 아무튼 ccz-cross 스킨 가이드도 쭉 살펴보고 있습니다. 스킨 새롭게 적용한다고 ㅠ_ㅠ 밤샐수도 있겠네요 자주 스크립트나 html 관련해서 찾아보고 혹시 모르는것들은 문의 하겠습니다.! 좋은스킨 잘적용해보겠습니다^^

  3. BlogIcon COCO Media 2016.02.06 02:14 신고

    티스토리 ㅠ 치환자가 다양한 썸네일 크기를 지원해주면 좋을텐데...

    R750 사이즈로 갖고오니 ㅠ_ㅠ 아쉽네요.

    Ajax를 이용한 이미지 추출로 작은 썸네일들을 갖고 올 수 있을지 공부를 해봐야겠습니다!!

    • BlogIcon 흉내쟁이 2016.02.06 02:17 신고

      R 은 가로너비만 지정하는 거고 높이는 자동이니 원하시는 크기로 설정하셔도 됩니다. 넉넉히 잡은거예요

    • BlogIcon 흉내쟁이 2016.02.06 02:22 신고

      아 치환자 얘기셨구나 ㅎㅎ. 착각했네요. 썸네일 치환자말고 이번 신규 티스토리 스킨 #2 보시면 썸네일 부분에 치환자말고 주소에 붙여 호출하는 방법이 있습니다.

    • BlogIcon COCO Media 2016.02.06 02:41 신고

      헐.. 소름돋네요 ㅠ_ㅠ 간단하게 한줄 추가로 추출을 할 수있다니!! 바로 적용해서 홈화면 로딩속도를 올려야겠습니다!!+_+ 정말 감사합니다!! 사이즈별로 갖고올수있어서 좋을것같네요!!

    • BlogIcon COCO Media 2016.02.06 03:05 신고

      주소 와 함께 새로운 치환자엿네요! 티스토리도 반응형 웹을 개편하더니! 플랫폼이 좋아지는 것 같습니다. ㅎㅎ

  4. BlogIcon COCO Media 2016.02.06 07:43 신고

    적용하고 글정리한다고 이제 잠드네요 ㅠ_ㅠ ㅋㅋ 설연휴라 무리 한 것같네요. 설연휴 때는 푹 쉬어야겠습니다!!
    새해복 많이 받으시고 설연휴 편히 쉬세요!
    아그리고 네이버 블로그 검색에 썸네일이 나오지 않아서 알아보니깐
    RSS 공개정책을 부분공개로 하면 나오지 않는다고 합니다. ㅠ_ㅠ 전체공개로 해야지 네이버 블로그 검색에서 썸네일이 표시 된다고 하네요.

  5. BlogIcon Ro85 2017.04.20 09:58 신고

    티스토리 블로그 꾸미기는 너무 어려운것 같습니다.

    두개의 블로그에 최신글 설정했는데

    하나는 최신글 이미지가 보이는 반면에 다른 하나는 보이지 않더군요.
    같은 소스로 적용했는데...

    너무 어렵습니다. 그래서 작성자님 글에 답이 있을까 하고 정독 중입니다. ㅎㅎ

티스토리 툴바