Cumulus for Tistory 1.21 업데이트!

Cumulus for TiStory 공개을 통해 Cumulus 플러그인 1.20의 티스토리 버전을 공개했었다.

이 플러그인이 얼마 전 1.21로 업데이트 되었는데, 이제야 알았다.
티스토리용 플러그인도 한글 글꼴을 사용할 수 있도록 수정하여 1.21로 업데이트 한다.

제작자인 Roy Tanck가 밝히는 수정된 내용은 아래와 같다.

= Version 1.21 =
+ Adds an option to show the regular tag cloud to non-flash users (used to be hidden through CSS).
+ The widget title is now optional.
+ Adds support for 'target' attribute to the Flash movie.
+ XML path can now be set through a flashvar.
+ Fixed markup errors in the compatibility mode.
+ Several minor fixes.


그리고, 티스토리 플러그인(및 설치과정)의 수정된 내용은 아래와 같다.

- Cumulus 1.21을 기반으로 함
- swfobject 2.2 적용 (구조가 좀 더 안정적으로 변했다)
- 태그에 다음의 문자가 들어있어도 정상적으로 전시: &(amp), '(따옴표)


설치과정은 아래와 같다.

1. 파일의 설치

아래 파일을 다운받아 압축을 풀면 swfobject.jstagcloud.swf 두 개의 파일이 나온다.
이  두 파일을 스킨 직접올리기 기능을 이용해서 올린다.

TiCumulus_v121.zip

엔터 튤립 9 글꼴을 이용해서 만들었다



2. 스킨 수정

우선 헤더에 아래와 같은 한 줄을 추가한다.
swfobject가 2.x 대로 업데이트 되면서 <body>내에 위치하지 않고, <head> 내에 위치하는 것을 권장하고 있다.

<script type="text/javascript" src="./images/swfobject.js"></script>

다음으로, 스킨을 직접 편집해서 아래와 같은 내용을 찾다.
<div id="tagbox" class="module">
  <h3>태그목록</h3>
  <div class="tagboxWrap">
  <ul>
    <s_random_tags>
    <li>
      <a href="[#\#_tag_link_#\#]" class="[#\#_tag_class_#\#]"> [#\#_tag_name_#\#]</a>
    </li>
    </s_random_tags>
  </ul>
  </div>
</div>
스킨에 따라 조금씩 모양이 다르기는 하지만, 꼭 있는 태그가 <s_random_tags>이다.
우선 수정해야하는 부분은 이 <s_random_tags> 밖에 있는 <ul>-</ul>이다.

이 부분을 아래와 같이 수정한다.
<div id="htags" style="display:none;"><tags>
<s_random_tags>
<a href="[#\#_tag_link_#\#]" class="[#\#_tag_class_#\#]">[#\#_tag_name_#\#]</a>
</s_random_tags>
<a href="/"></a></tags></div>
<div id="TiCumulus"><p>Tistory Cumulus Flash tag cloud by <a href="http://zockr.tistory.com">BLUEnLIVE</a> requires Flash Player 9 or better.</p></div>
<script type="text/javascript">
//<![CDATA[
var flashvars = {};
flashvars.tcolor = "0x2970A6";
flashvars.hicolor = "0x462A56";
flashvars.mode = "tags";
flashvars.distr = "true";
flashvars.tspeed = "100";
flashvars.tagcloud = document.getElementById('htags').innerHTML.replace(/&amp;/gi, ' ').replace(/\'/gi, ' ').replace(/%27/gi, ' ').replace(/&quot;/gi, ' ').replace(/class=([\w]+)/gi, 'class="$1"').replace(/\"\"/gi, '"').replace(/class=\"/gi, 'style=\"font-size:').replace(/:cloud([\d])/gi, ':1$1pt;').replace(/TAGS\>/gi, 'tags>').replace(/\<A\s/gi, '<a ').replace(/\<\/A\>/gi, '</a>').replace(/\"/g, "'");
var params = {};
params.allowScriptAccess = "always";
var attributes = {};
attributes.bgcolor = "#f7f7f7"
swfobject.embedSWF("./images/tagcloud.swf", "TiCumulus", "100%", "200", "9.0.0", null, flashvars, params, attributes);
//]]>
</script>
조금 길지만 소스 보기를 한 뒤에 복사하면 된다.

a. 20행"100%", "200"은 각각 가로, 세로의 크기이다.

b. 19행"#f7f7f7"배경의 색상이다.

c. 10행"0x2970A6"태그의 기본색상이다.

d. 11행"0x462A56"선택된 태그의 색상이다.


인자를 통해 속성을 바꿔줄 수 있다. 상세한 인자들의 목록은 여기를 참조하기 바란다.
설치된 화면은 아래와 같다.

사용자 삽입 이미지

당연한 얘기지만... 화면은 전혀 바뀌지 않았다.


Trackback 2 Comment 33
  1. Favicon of http://pennyway.net BlogIcon 페니웨이™ 2009.07.12 21:20 address edit & delete reply

    우왕굿

    • Favicon of http://zockr.tistory.com BlogIcon BLUEnLIVE 2009.07.12 21:49 address edit & delete

      아주 약간 더 업뎃됩니다.
      뒤에 인자를 붙이는 것이 좀 보기 싫고 불편해서, 우아한 쪽으로 수정하고 있습니다.

  2. Favicon of http://minimonk.tistory.com BlogIcon 구차니 2009.07.13 09:34 address edit & delete reply

    화면이 바뀌지 않으면 당연히 업데이트는 하지 않습니다 ㅋㅋㅋ

  3. Favicon of http://loveash.cc BlogIcon 애쉬™ 2009.07.13 11:23 address edit & delete reply

    음..블루님 블로그에도 에러 나온것처럼 보이는데요... 정상적으로 돌아간다 싶으면 업데이트 바로 해 보겠습니다^^

    • Favicon of http://zockr.tistory.com BlogIcon BLUEnLIVE 2009.07.13 12:36 address edit & delete

      티스가 잠시 미친 척 하더니 이제 정상이 된 것 같습니다. ^^;

  4. Favicon of http://loveash.cc BlogIcon 애쉬™ 2009.07.13 14:28 address edit & delete reply

    아직도 태그구름에 Tistory Cumulus Flash tag cloud by BLUEnLIVE requires Flash Player 9 or better. 요렇게 나오시는걸요?

    • Favicon of http://zockr.tistory.com BlogIcon BLUEnLIVE 2009.07.13 14:36 address edit & delete

      reload 해보실래요?
      FF, IE, 크롬 모두에서 잘 나오는 걸 확인했습니다.

    • Favicon of http://loveash.cc BlogIcon 애쉬™ 2009.07.13 14:41 address edit & delete

      아..^^ 리로드하니깐 되네요^^ 저도 적용해 봐야겠습니다.

  5. Favicon of http://loveash.cc BlogIcon 애쉬™ 2009.07.13 15:01 address edit & delete reply

    엔터 튤립 9 글꼴을 이용해서 만들었습니다 란 말에 혹해서 다시 설치해봤는데...변화가 없네요^^
    아, 무조건 다시 설치한 후 F5 눌러서 리로드 하지 않으면 에러메시지 뜨는군요..

  6. 2009.07.15 21:26 address edit & delete reply

    비밀댓글입니다

    • Favicon of http://zockr.tistory.com BlogIcon BLUEnLIVE 2009.07.16 01:33 address edit & delete

      아래 포스트를 읽어보시기 바랍니다.

      http://zockr.tistory.com/563

  7. Favicon of http://e-forever.co.cc BlogIcon Forevler 2009.07.16 09:26 address edit & delete reply

    수정은 나중에 끄끄

    포스팅도 나중에. 8D

  8. sso'-' 2009.07.17 14:41 address edit & delete reply

    클라우드 잘 사용할게요^^ 전부터 적용해봤는데 자꾸 오류 떴는데 오늘 해결하고 가네요^^
    감사합니다!!

  9. 정철우 2009.07.24 12:41 address edit & delete reply

    전 어찌하여 튤립글꼴이 안나오는걸까요? ;ㅁ;

  10. Favicon of http://eluw.textcube.com/ BlogIcon ELUW 2009.07.24 19:09 address edit & delete reply

    안녕하세요^^ 태그구름 많은 도움 되었습니다. ㅎㅎ

    <div id="TiCumulus"><p>Tistory Cumulus Flash tag cloud by <a href="http://zockr.tistory.com">BLUEnLIVE</a> requires Flash Player 9 or better.</p></div>

    이 태그라인 제가 임의로 수정 했습니다. 이에 따른 자바스크립트를 불러들이는 함수도 약간 수정 했습니다.
    고마워요^^

    아참 WWE 좋아하시나봐요 ㅋ 저도 즐겨봐요 ㅎㅎ

  11. Favicon of http://twitter.com/trauma2u BlogIcon trauma2u 2009.07.29 01:27 address edit & delete reply

    'WP-Cumulus'를 활용해 볼려고 이리저리 만지다가 플래시 한글지원 이슈랑 SWFObject 버전 이슈로 고민했었는데 여기 와서 모두 해결해 버렸네요. 너무 감사드립니다. 플래시 용량이 3M에 육박하다보니 트래픽 걱정이 심하다는게 좀 아쉽네요.

  12. Favicon of http://twitter.com/trauma2u BlogIcon trauma2u 2009.07.30 00:56 address edit & delete reply

    BLUEnLIVE 님의 SWF를 이용해서 태그클라우드 습작을 만들어 보고 있습니다. 해당 소스를 주변에라도 배포하게 된다면 배포 전에 허락을 받도록 하겠습니다. 일단 폰트의 용량 때문인지 SWF 크기가 너무 크다는 게 제일 이슈가 되고 있는데요. 용량 대비 효율이 좋은 폰트를 포함시킬 수는 없을런지 하는 바램이 있습니다 ^^ 수고하세요~

  13. Favicon of http://twitter.com/trauma2u BlogIcon trauma2u 2009.07.30 22:21 address edit & delete reply

    배포 전에 BLUEnLive 님의 허락을 받을려고 왔습니다.
    BLUEnLive 님의 SWF를 이용한 TWC(Twitter Word Cloud)입니다.
    http://twitter.trauma2u.com/twc/

    SWF 트래픽은 모 포탈에서 협찬받기는 하는데 그래도 부담스럽네요.
    상용폰트가 아닌 폰트 중에서는 NHN의 나눔고딕이 그나마 용량이 적어서 고려해보고 있습니다.

    수고하세요.

    • Favicon of http://zockr.tistory.com BlogIcon BLUEnLIVE 2009.07.30 22:28 address edit & delete

      1. 주소를 클릭했는데 반응이 없네요.

      2. 배포는 상관 없습니다.

      3. 여러 폰트로 시험해봤는데, 파일 크기가 대동소이하더군요. ㅠ.ㅠ

    • Favicon of http://twitter.com/trauma2u BlogIcon trauma2u 2009.07.30 22:37 address edit & delete

      그러고보니 이전 글에 BLUEnLIVE 뒤쪽을 소문자로 썼군요 ^^ 불행하게도 영타가 익숙치 않습니다.
      네임서버에 이제 막 넣어서 아직 전파가 다 안되었나 봅니다. 내일쯤엔 확인이 가능하실 듯 하구요. 말이 배포지 몇명 정도 볼까말까입니다.
      나눔고딕이 2M 초반이던데 몇백K라도 줄이는데 의의를 ^^;;;;

    • Favicon of http://zockr.tistory.com BlogIcon BLUEnLIVE 2009.07.30 22:56 address edit & delete

      이제 접속이 되는군요. 예쁘긴 한데, 글자가 너무 작은 것 같고, 너무 빨리 돌아 정신이 없습니다.

      글자 크기 조금만 키우고 속도를 조금만 낮추면 좋을 것 같습니다.

    • Favicon of http://twitter.com/trauma2u BlogIcon trauma2u 2009.07.30 23:20 address edit & delete

      속도가 현재 100으로 설정되어 있습니다. 80 정도로 내릴 생각이고 0.3(?) 정도엔 직접 설정할 수 있도록 할까 하구요.

      글자가 너무 작은 이유는 제가 태그 클라우드의 기제를 정확하게 파악하지 못하다 보니, 워드의 갯수를 그대로 스타일로 설정해 버립니다. 즉 한번 나온 워드는 크기가 1이 되어버립니다. 두번 나오면 2, 세번 나오면 3 이렇게 되지요. BLUEnLIVE 님의 경우 워드 갯수가 워낙 적다보니 모든 글자가 작게 나오네요. 트윗 수가 200개가 넘어가면 적당한 크기로 나오기는 하는데, 워드 갯수의 최대값과 최소값을 고려해서 적절하게 글자 크기를 설정해 주는 방식이 필요하다는 생각은 해봅니다. 머리가 돌이 되어서인지 잘 떠오르지 않네요. 티스토리에서 적용해 보셨으니까 조언을 좀 해주시면 감사드리겠습니다.

    • Favicon of http://zockr.tistory.com BlogIcon BLUEnLIVE 2009.07.30 23:41 address edit & delete

      티스토리에 적용할 땐 스타일에 미리 지정되어있는 속성을 그대로 적용했습니다.
      그래서 글자 크기에 대해선 큰 고민을 안 했습니다.

      TWC에선 갯수를 크기로 지정하기 보단 갯수의 분포 비율을 크기로 변환하는 것이 어떨까하는 생각이 듭니다.

    • Favicon of http://twitter.com/trauma2u BlogIcon trauma2u 2009.07.31 00:30 address edit & delete

      조언 감사드립니다. 결국 텍스트큐브 소스를 찾아서 보게 되는군요. 텍스트큐브의 경우 기본크기와 기본크기*2 사이를 다섯단계로 나눠서 표시하는군요. 웹의 한계상 어쩔수 없는 부분인 듯 한데, 플래시의 경우 5단계는 너무 적은 듯한 기분이 드네요. 좀더 고민을 해보겠습니다.

  14. Favicon of http://twitter.com/trauma2u BlogIcon trauma2u 2009.07.31 16:27 address edit & delete reply

    도와주신 덕분에 주변에 그냥 오픈했습니다. 시간을 두고 손을 봐야겠지요.
    글자크기는 가중치 개념을 조금 추가했습니다. BLUEnLIVE 님 계정으로 테스트 해보면서 ^^
    감사드립니다. 트위터에서 뵙겠습니다.

    • Favicon of http://zockr.tistory.com BlogIcon BLUEnLIVE 2009.07.31 18:43 address edit & delete

      멋지구리합니다. 정말 잘 만드셨네요. ^^;

  15. Favicon of http://www.dialagain.com BlogIcon D.A. 2009.08.06 22:45 address edit & delete reply

    정말 수고 많으셨습니다!
    그런데 정작 오리지널 워프에선 한글지원이 안되는 것 같던데
    워프용으로도 하나 만들어주시면 안될까요? 아니면 적용법이 있습니까??

    • Favicon of http://zockr.tistory.com BlogIcon BLUEnLIVE 2009.08.06 22:54 address edit & delete

      제가 워프를 안 쓰기 때문에 뾰족한 답을 드리긴 어렵군요.

    • Favicon of http://www.dialagain.com BlogIcon D.A. 2009.08.06 23:38 address edit & delete

      그..그렇군요!
      워프 플러그인이랑 테마가 보이길래 워프 유저신줄 알았네요 ^^;

  16. Favicon of http://alan.keum.org BlogIcon 금봉이 2009.09.12 00:58 address edit & delete reply

    lightbox로 이미지 볼때 태그 목록이 이미지 위로 오버랩되는 문제가 있어 스크립트 수정을 조금 했습니다. 트랙백 걸었어요. 이거하다가 버전 업그레이드 된거 알았네요. ^^;
    잘 쓰겠습니다.
    아 스킨도 iNove로 전환했답니다. ㅋㅋㅋ

    • Favicon of http://zockr.tistory.com BlogIcon BLUEnLIVE 2009.09.14 02:53 address edit & delete

      오홋! 고맙습니다. 당장 수정해야겠군요.

  17. Favicon of http://junytistory.tistory.com BlogIcon 만송 2010.08.29 19:53 address edit & delete reply

    안녕하세요. 잘 적용해서 멋지게 잘 사용 하고있습니다. 한가지 질문드릴께 있어서요. 다름이 아니라 태그 배경 컬러를 아무리 바꿔도 적용이 안되더라구요. 그래서 상세설명을 위해 링크 해 두신 홈페이지를 가서 보니 "trans"라는 값이 있던데 이것을 true나 false값을 적용해야지 될듯 하더군요. 그래서 위에 적어두신 클라우드 태그를 봤는데 아무리 봐도 "trans"값을 찾을 수 없었습니다. 혹시 뒷배경 적용이 불가능한건 아닌가 싶어 질문을 드립니다. 그럼 수고하세요~^^