티스토리 최신글, 카테고리 썸네일 추출에 대한 이해

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

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

티스토리에서 공식적으로 썸네일 치환자가 업데이트 되었습니다. 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="https://t1.daumcdn.net/cfile/tistory/2207003455F206D30A">
<meta property="article:section" content="IT 인터넷">

• 예약된 글, 비공개 글 : 프로토콜을 지원하지 않음
• 보호된 글 : og:image 와 og: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를 이용한 방법이 유일한 대안책이 될 듯 싶다. 그나마 글의 요약본, 카테고리 정도를 얻을 수 있는 치환자의 등장에 반가울뿐!