갤러리형 스킨 구현, 그 구현 후에 이어지는 고민

Posted by Readiz
2014.03.24 21:05 반응형 티스토리/Tistory

갤러리형 스킨 구현, 그 구현 후에 이어지는 고민



  티스토리가 자유도가 크게 높아 선호는 서비스이지만 항상 2%가 부족하다고 느껴지는 부분이 두가지 있습니다. 하나는 바로 갤러리형 스킨 구현에 관한 문제입니다. 또다른 한가지 문제는 해가 흐르고 흘러 이제 Mobile First라는 단어가 생길 정도로 모바일 기기에 대한 관심도도 높아지고 있는데 이에대한 대응이 완벽하지 못하다는게 제 생각입니다. 오늘은 이 두가지 중에 첫번째에 대해 이야기 해보고자 합니다.


  현재 티스토리 스킨 중 갤러리형 스킨이라고 나와있는 스킨들은 구현방식이 하나로 통일될 수밖에 없습니다. Ajax로 요청을 보내는 것인데, 간단히 기술적인 배경지식이 없는 분들을 소개를 하자면..


Ajax 요청이란?



$.ajax({
	url:i,
	dataType:"html",
	success:function(b){
		var g = '"';
		var tl = b.indexOf('<div class="actionTrail">',0);
		b = b.substring(b.indexOf('<div class="article">',0),tl);
		var a;
		e = 'http://cfile';
		if(b.match(e+"(.*?)"+g)!=null){
			a = b.match(e+"(.*?)"+g)[0];
			a = a.substring(0,a.length-1);
			d.removeClass("dno");
			a = a.replace("image",j);
			a = a.replace("C74x107",j);
			a = a.replace("S74x74",j);
			d.attr("src",a.replace('original',j));
		}
	}
}); 
	

 

ygal.js by yongzz(http://www.yongzz.com/), Modification included.


  이것은 jQuery라는 JS를 사용하는 분들이라면 다들 알고 있을 프레임워크로 페이지를 Ajax요청하는 예제입니다. Ajax요청이란 사용자 모르게 뒷단에서 정보를 받아오는 것이라고 보시면 됩니다.(페이지 이동 없이) 근본적으로 티스토리에서는 이 방법을 쓸 수 밖에 없습니다. 왜냐하면, 갤러리형 스킨을 만들기 위해서는 이미지를 가져와야 하는데, 이 이미지의 주소를 알 수 있는 방법이 직접 찾아들어가는 방법밖에는 없기 때문입니다. 현재 티스토리에서 제공하고 있는 서비스들 중에서 아무리 뒤져봐도 어떤 방법도 글 주소를 알때 대표이미지를 가져올 수 있는 방법을 제공하고 있는 것이 없습니다. 결국은 페이지를 요청해서, 그 페이지를 분석해 이미지 주소를 얻어와서 이미지를 출력하는 방법뿐입니다. 어쩔 수 없이 페이지를 요청하되, 그 속도를 최대한 끌어올린 것이 갤러리형 스킨입니다.


  이에따른 문제점은 명확합니다. 보통때는 어차피 카테고리를 클릭하는 유저의 수가 그리 많지 않기 때문에 상관이 없지만, 운나쁘게 같은 타이밍에 카테고리를 보고 있는 유저가 많다면, 티스토리에서 과도한 요청으로 인식해 가끔은 잠시 차단을 하는 것으로 보입니다. 제가 경험해본 바에 의하면 하루 방문객수가 1000명 남짓한 블로그에는 그다지 문제가 되지 않습니다만, 한 1만명, 2만명 정도 되는 블로그에서는 분명 문제점으로 느낄 수도 있는 문제라고 생각합니다. 결국 간단한 Trade-off 문제입니다.


  갤러리형을 써서 이쁠 것이냐? 아니면 미연에 존재할지도 모르는 차단을 방지할 것이냐?


  일단 1.4버전에서는 고민 끝에 전자를 선택했습니다. 최근에 관찰한 결과로는 한 3000~4000명대 블로그에서도 별다른 문제가 없는 듯 보입니다. 애초에 카테고리를 들어가는 방문자가 별로 없다는 반증이기도 하죠.. 실제 Google Analytic 관찰결과도 그렇구요. 하지만 언제든 다시 이 문제로 질문하시는 분들이 생길 것 같아 제 고민을 같이 고민해주셨으면 해서 포스팅해봅니다.



최근글 목록에 대해서




  추가적으로 최근글 목록에 관해서도 이야기 해보고자 합니다. 최근글 목록에 이미지가 나오고 있는데요, 마크쿼리 스킨 제작자이신 Ungki, H님은 Ajax요청에 대한 문제를 피해가고자 최근글 목록 썸네일에도 Ajax요청을 넣지 않고 RSS주소를 이용한 방법을 사용하고 계시는 것으로 보입니다. 저는 다음버전에서 이 방식과 현재 사용하는 제 방식의 장점을 취합하려는 선택을 하려고 합니다. Ungki, H님이 사용하시는 방식은 심플합니다만 코멘트 개수가 몇개인지 알 수 없고 발행한 글에서만 최근글 목록에 뜨게 된다는 단점이 있습니다. 제가 최근글 목록에서 사용하는 방식은 코멘트 개수가 나오고, 발행여부와 상관없이 글이 목록에 나옵니다만 이미지를 요청할 때 Ajax요청을 하는 문제가 있죠. 개선하고자 하는 방식은 이겁니다. RSS를 이용해 이미지 주소를 얻고, RSS에 등록된 주소와 일치하는 글에 대해서만 image를 가져오는 방식으로 하면 최근글에 대해서는 문제가 안생길듯 합니다. 현버전에서는 제 스킨을 사용할 때 페이지를 하나 요청할 때마다 최근글 목록의 이미지 개수만큼 페이지를 더 요청하고 있는 것으로 보시면 됩니다. 이 부분은 다음 버전때 명확하게 문제를 개선해야겠습니다. xml파싱을 오랜만에 하게 되겠네요.. :)


이 댓글을 비밀 댓글로
  1. 매번 고생이 많으시네요 ㅜㅜ; 티스토리가 자유성 면에서는 높이 살만 하지만,,, 2% 부족한 부분에 대해서는 100% 공감을 많이 하네요. 티스토리 업데이트 및 기본 스킨 업데이트좀 하지.... 초대장만 나눠주고, 세부적인 사항에 대해서는 업데이트가 넘 더디네요 ㅋ

    본문 내용과 관련 된 사항은 저도 고민을 해 보고 의견을 낼 수 있는 부분이 있으면 댓글 남기겠습니다.
    • 글에 접근 안하고도 이미지 주소를 어떻게 얻을 방법이 있으면 참 좋을텐데요. ㅎㅎ
  2. readiz님 블로그 들리면 항상 얻어만가는것 같네요 응원 이라도 아낌없이 하겠습니다^^
  3. 고생이많으십니다. ㅎㅎ
  4. 제발 갤러리 좀 만들어 달라고 징징 댈때가 어언 4년전인데
    미디어 로그라는 아주 괴상한 물건이나 내놓고 아무런 지원을 하지 않고 있습니다. (진짜 구글 뺨치는 벽창호)

    저는 시간나면 미디어로그를 관리하는 티스토리 기본 스크립트를 뜯어서 이미지를 끌어오는 방법을 알아보려고 합니다.
    저 또한 AJAX 요청으로 인한 차단 문제는 어느정도 염려를 하고 있는 부분이라서요
    • 미디어로그가... All flash로 되어있어서.. 참 --;;
      JS가 넘겨주는건 카테고리랑 미디어 정보 뿐이더군요. 이미 뜯어보긴 했습니다...
  5. 글 수정하다 실수로 글이 지워졌군요, 다시 올릴게요^^
    글더보기 메뉴때문에 사용하는 위젯이 있는데요. 아실지 모르지만 http://www.linkwithin.com/learn?ref=widget
    일단 그림과 같이 불러와서 모바일 기능에 있는 인기글 더보기 기능 대신 사용하고 있습니다.
    어떤 원리로 글을 가져오는지는 잘 모르겠구요. 랜덤으로 뿌려준다는 장점이 있더군요.
    글더보기 기능이 카테고리에만 국한 되어 있는것이 아쉽다는 생각에서
    최소한 모바일처럼 인기글보기 기능정도라도 있으면 어떨까 하는 마음으로 이 위젯을 사용하게 되었습니다.
    일단 전 현재 너무 획일화된 카테고리 글 더보기 방식보다는 사진이나 그림컨텐트가 많은 입장에서 볼때 깨끗해 보이는것 같구요.현재 제 블로그에 달아놓았습니다.
    rss방식으로 그림을 가져오는 것이면 지금 다음 뷰에서 글 뽑아가는 방법하고 같은거지요?


    • 이런 종류의 서비스는 RSS받아서 자체적으로 돌리는 것이라.. 아무튼 서버가 있기에 가능한 것이죠. Tistory가 사용자들에게 서버를 제공해주지는 않죠. 그저 HTML만 수정할 수 있을 뿐..

      linkwithin도.. 스킨 사용자들에게 어떤 서비스를 사용하라 라고 강요할 수는 없는 노릇이고.. 유익한 서비스로 보이기는 합니다만 해결책은 못되는군요. ㅠ
    • 음 댓글을 밑에다가 실수로 다신 듯 한데.. 클라우드 하고는 상관없는 이야기입니다. php나 asp같이 서버단에서 데이터를 가져오고 db에 저장하는 것이 가능해야 한다는 이야기입니다. 이래저래 방법을 생각해보고 있지만 티스토리에서 기능추가를 하지 않으면 근본적인 해결은 어려울 것으로 보입니다.
  6. 파튕하세요!!
    • 감사합니다~ ^^
    • 다음 메일계정에 가지고 있는 다음 클라우드를 이용할수 있는 방법은 없을까요? 서버 이야기를 하셔서 불현듯 그럴수 있으면 좋겠다는 생각이 드는군요.
    • 용쯔
    • 2014.03.27 22:02 신고
    대표 이미지 <meta property="og:image" content="http://cfile28.uf.tistory.com/image/22296043532A7AA7201D00"/>
    이런식으로

    meta 태그로 출력 되요

    http://ys0013.tistory.com/10
    • 오 용쯔님께서 직접 방문을.. ㅎㅎ
      확인했습니다. 감사합니다~
      다만 이것역시 ajax를 안 쓸 방도는 되지 않는군요 ㅠ
  7. 컴알못인데 제가 필요한 내용 얻어가는 것 같습니다ㅠㅠ 잘 읽고갑니다!

티스토리 툴바