하늘이의 생각나무

글과 글 사이의 소셜 네트워크의 구현

3 04

하늘이블로그칵테일 올블로그, 올블릿, 워드프레스, 태그, 태터툴즈, 플러그인 33 Comments

아직 올블로그에서 태그를 수집한지 이제 겨우 몇 달째에 접어들고 있기 때문에, 그렇게 많은 태그들이 쌓여있지 않지만, 그래도 이제 어느 정도 유용하게 활용할 수 있는 만큼의 데이터는 쌓여있어서 참 행복합니다.

특히 이전에 가상 태그, 또는 대표 태그라는 개념으로 통합 시키는 작업 결과 전체 태그 중 상위 20-30개 정도는 정말로 저희가 의도하는 대로, 많은 관심사들을 통합할 수 있는 태그들이 노출되고 있으며, 이것과의 연관 태그 순위 역시 영화의 경우 [왕의 남자, 스크린쿼터 등등의 순위]로 굉장히 밀접하게 연관되고 있는 것들을 볼 수 있었습니다.

대표 태그 개념 덕분에 연관된 태그들끼리의 연결 고리를 만들게 되었고, 이제는 그것에서 더 나아가서 ‘왜 글에 태그를 달면 좋은가?’ 라는 질문에 답하고 싶었습니다. 아직도 태그를 붙이면 그 태그 링크를 눌러서 다른 태그의 글들을 찾아본다거나, 또는 테크노라티, 올블로그와 같은 사이트를 통해서 태그로 글을 찾아올 수 있다거나 합니다만, 궁극적으로 그렇게 이용하시는 분들이 많이 없다는 것이 아쉬운 점이죠.

그렇다 보니, 왜 태그를 써야 하는지, 쓰긴 쓰는데, 이게 어떻게 유용하게 될 수 있을지에 대해서 고민하게 되었고, 태그를 이용한 [연관 글]을 도입하게 되었습니다. 태그를 입력한 글에서 그 글과 관련된 태그의 최근 글들을 찾아서 노출해주게 됩니다.

특히 [인텔의 맥 미니에 대한 글]을 쓸 때, 저처럼 아래 맥에 대한 태그들을 적어주면 해당 태그들 모두와 연관된 글들을 보여주게 되고, 이건 단순히 글을 쓰는 사람뿐만이 아니라, 읽는 사람에게까지 이 글과 비슷한 이야기를 하고 있는 다른 글을 읽을 수 있게 해줍니다.

단순히 글을 통해서 태그와 연결되고 태그를 통해서 글을 읽는 것이 아니라, 태그를 통해서 글과 글 사이에 유기적인 연결 고리를 생성해준다는 것이 이것의 가장 큰 의미라고 생각합니다. 특히 서두에 이야기 했던 것처럼 [맥 미니]가 되었든 [mac mini]가 되었든 동일한 대표 태그로 엮어지게 되므로 그 효과는 더욱 큽니다.

백문불여일견이라고, 이런 시스템이 왜 중요할 수 있는지에 대해서는 조금 더 이후에 생각해보기로 하고, 과연 그럼 이러한 구현은 어떻게 하면 될까요? 라는 질문에 먼저 대답해보도록 할께요.

올블로그에서는 이런 블로그를 꾸밀 수 있는 위젯과 같은 도구들을 점차 [올블릿]이라는 이름을 통해서 제공하게 될 것 이고, 지금 이야기하고 있는 것도 바로 이 올블릿의 하나랍니다. (오른쪽에 있는 올블로그 최근 글과 같은 올블릿도 제공될거에요. )

올블릿은 전부 자바스크립트로 구현되어 있어서, 애드센스와 같이 간단하게 소스코드를 붙여 넣는 것만으로도 설치가 가능합니다. 다만, 이 자바스크립트에 인자 값으로 현재 글의 고유주소(파머링크)를 넣어줘야 한다는 점만 다르다고 할 수 있어요. 태터툴즈의 경우, 예전에 있었던 추천이나 포켓 담기 등의 기능과 비슷하게 구현할 수 있고, 워드프레스 역시 쉽게 구현할 수 있습니다.

1. 우선 올블릿 설치하기
워드프레스의 경우, 올블릿 링크를 설치하고자 하는 위치에 아래의 코드를 입력합니다.

<script language="JavaScript" src="http://www.allblog.net/Allblet/Libraries/GetReleationPostList.html?<?php echo get_permalink() ?&rt;" type="text/javascript"&rt;</script&rt;</code&rt;

태터툴즈의 경우 블로그 주소가 fermat.golbin.net인 경우 아래와 같은 코드를 입력합니다.

<script language="JavaScript" src="http://www.allblog.net/Allblet/Libraries/GetReleationPostList.html?http://fermat.golbin.net[##_article_rep_link_##]" type="text/javascript"&rt;</script&rt;

즉, http://www.allblog.net/Allblet/Libraries/GetReleationPostList.html? + [각 글의 고유 주소] -> 단, RSS에 있는 고유 주소와 일치될 수 있도록!

실제로 위 코드의 결과물은 아래와 비슷합니다.

document.write('<ul class="post-items"&rt;');
document.write('<li class="post-item"&rt;<a href="http://www.allblog.net/GoPage/720231.html" title="AllBlog Related Post 출력 플러그인 0.1" class="post-title"&rt;AllBlog Related Post 출력 플러그인 0.1</a&rt;<div class="post-content"&rt;082님이 소개해 주신 inline ajax comments 플러그인을 설치하고 북마크 해놓은 블로그 순례나 한 번 할까 하고 돌아다니다 골빈해커님 블로그에서 재미난 것</div&rt;<a href="http://ktc.kunsan.ac.kr/~unfusion/word" class="post-writer"&rt;절망클럽</a&rt;</li&rt;');
document.write('<li class="post-item"&rt;<a href="http://www.allblog.net/GoPage/718567.html" title="웅컁컁컁 컁컁" class="post-title"&rt;웅컁컁컁 컁컁</a&rt;<div class="post-content"&rt;웅캬라걍컁 컁컁~ 이것은 훼이크고.요즘 태터센터에 들어가기가 싫어진다. 가봤자 가쉽, 어떤 쇼핑몰의 홍보성 블로그의 도배, 긁어온 IT 뉴스 등이 넘</div&rt;<a href="http://dolufy.web-bi.net/tatter/ysy/" class="post-writer"&rt;dolufy</a&rt;</li&rt;');
document.write('<li class="post-item"&rt;<a href="http://www.allblog.net/GoPage/718344.html" title="3/3 : Tag랑 Category랑" class="post-title"&rt;3/3 : Tag랑 Category랑</a&rt;<div class="post-content"&rt;전에는 카테고리 하나쯤이면 불편함이 없이 나의 목록을 정리한다던가 분류를 해놓았다..그런데 요즘들어 약간씩 불편함을 느낀다...카테고리를 최</div&rt;<a href="http://sting.egloos.com" class="post-writer"&rt;스팅구리</a&rt;</li&rt;');
document.write('<li class="post-item"&rt;<a href="http://www.allblog.net/GoPage/717318.html" title="일련의 고민에 대한 결론?" class="post-title"&rt;일련의 고민에 대한 결론?</a&rt;<div class="post-content"&rt;요 몇일 새에 많은 분들을 만나뵙고, 이야기를 듣고, 또 생각해보니블로거들에게 무엇인가를, 특히 좀 더 합당한 보답을 하기 위해서는먼저 우리가 보</div&rt;<a href="http://hacker.golbin.net/wp/" class="post-writer"&rt;골빈해커</a&rt;</li&rt;');
document.write('<li class="post-item"&rt;<a href="http://www.allblog.net/GoPage/717245.html" title="TeaPaper와 올블로그의 컬럼." class="post-title"&rt;TeaPaper와 올블로그의 컬럼.</a&rt;<div class="post-content"&rt;원래 Digg.com과 비슷한 모델을 구상하였던 TeaPaper 프로젝트는 한동안 서비스 이용의 이유를 주기 위한 많은 문제점들로 인해서 잠시 중단되어 있는 상</div&rt;<a href="http://ceo.blogcocktail.com/wp/" class="post-writer"&rt;하늘이의 생각나무</a&rt;</li&rt;');
document.write('</ul&rt;');

즉, 연관된 글 목록을 ul + li 태그를 이용해서 제목, 본문 요약, 블로그 링크를 출력해 줍니다.

2. CSS 수정하기
위 올블릿에서 사용하는 CSS Class는 post-items, post-item, post-title, post-content, post-writer 입니다. 각, 글 목록 전체, 각각 글 1개, 글 제목, 글의 본문 요약, 블로그 이름 순으로 되며, 이 중에서 필요한 것들만 클래스를 정의해 주시면 됩니다.
저는 스킨의 스타일시트에 글 제목과 블로그 이름만 표기하기 위해서 아래와 같이 정의했습니다.

.post-items
{
margin-top: 5px;
}
.post-content
{
display: none;
width:0;
height:0;
}
.post-writer
{
margin-left: 15px;
color: black;
}

이렇게 하고 사용자들이 알 수 있게 연관 된 글 목록입니다. 등등을 꾸며주면, 설치가 완료됩니다. 태터툴즈나 워드프레스의 플러그인으로 쉽게 만들어버리고 싶었는데, 제가 아직 그것까지는 도전하기 힘드네요. T_T 라고 생각하고 있었는데, 워드프레스의 경우 절망클럽, 김승엽님이 멋지게 구현해주셨습니다. 감사합니다.

그럼 다 함께 동참해보아요~ 더불어서, 태터툴즈의 멋진 플러그인이나 스킨들 만들어주실 분들도 기다릴게요. +_+)/

ps. 이렇게 설치하고 나면, 앞으로는 태그를 입력할 때 이렇게 생각이 바뀐답니다. ‘이 글과 연관해서 보여줄 태그들을 입력해야겠구나.’ 라고 말이죠. 그것만으로도 제가 원하는 것은 만쉐인거죠!+_+)/

ps2. 아직 태그를 보여주는 페이지는 개편이 되지 않았지만, 내부적으로는 이미 다 연결되어 있어서, 그전 처럼 굳이 [올블로그/allblog]의 2개 태그를 모두 입력하지 않아도, 알아서 연결되게 되어있습니다. [웹2.0]과 [web 2.0]과 같은 경우도 말이죠.