[강좌] 태그 클라우드 만들기 2

먼저 xml 을 짜야합니다. 제가 짜고선 그쪽 웹개발자에게 이런이런 식으로 뿌려달라고 해야겠죠
.

그럼 테스트용 xml이니깐 다음과 같은 태그를 뿌린다고 치겠습니다.


            인기도  중요도  링크
김민환     100      100     http://www.minarto.com

미나토     100      100     http://www.minarto.com

플래시       30      70      http://www.adobe.com


이걸 xml 로 늘어놔보자면,

<tag>
     <data label="김민환" rank="100" imp="100" link="http://www.minarto.com" />
     <data label="미나토" rank="100" imp="100" link="http://www.minarto.com" />
     <data label="플래시" rank="70" imp="30" link="http://www.adobe.com" />
</tag>

뭐, 이런 식이 되겠죠

그런데 여기서 어플리케이션의 기능 중 일부를 다시 늘어놓자면,

3. 태그의 유저 인기도를 시각적으로 표시해야 한다 (컨텐츠로서의 기능)
4. 노출의 중요도를 (태그를 기업 광고의 연장으로 생각할 수도 있다) 시각적으로 표시해야 한다 (상업적으로서의 기능)
5. 사용자 이벤트는 태그 클릭시 페이지 이동으로 한다


인기도와 중요도를 시각적으로 표시해야 한다고 했습니다.

특정 태그를 타 태그와 시각적으로 달리 하려면 어떤 방법이 있을까요?


1. 폰트의 차이 (종류, 크기, 색, bold, italic)
2. 배경색
3. 특정 디자인의 박스로 꾸미기

이 세가지가 일단 떠오르는 생각이겠죠... 3번은 제가 디자인 재주가 없으니 빼겠습니다
1번과 2번이 네이버에서 사용하는 방법이지요...

대신 저는 다른 한가지를 추가하겠습니다. 위치입니다. 단지 순서대로 뿌려주는 것이 아니고 태그클라우드의 가운데 위치시킨다는 것입니다.
마치 키보드의 자주 사용하는 알파벳의 키가 중앙에 배치되듯이 말입니다.

이걸 생각한 이유는 인기도야 색이나 크기로 표현을 하면 유저들이 쉽게 인지하게 할 수 있어 좋지만 중요도를 그렇게 표현하면 컨텐츠가 상업적으로 유저들에게 비춰질 수 있다는 생각이 들어서입니다.
위치는 상대적으로 상업적으로 보이지는 않을테니까요... 단, 색이나 크기에 비해 부각되기가 힘든 점이 있습니다. 매우 많이요...


뭐, 사실 이런건 이제 클라이언트의 팀장이나 디자이너가 판단할 문제죠. 하지만 자신이 다니는 회사의 프로젝트라면 이런 저런 아이디어를 내보고 실험해보는 정신도 필요하겠죠...

이 이외에도 많은 방법이 있을 수 있겠지만 강좌가 길어지면 제가 귀찮으니 1번(중요도 - 폰트 색)과 2번(인기도 - 크기와 배경색)만으로 어플을 만들겠습니다.


이렇게 정해졌다면 디자이너와의 협의에 따라 xml을 수정할 필요가 있을 수 있습니다

모든 인기도나 중요도의 색 변경을 한가지 색으로 통일할 수도 있겠지만 제각각일 수도 있으니까요. 나중에 수정의 귀찮음이 없어지도록 xml 안에 rgb color 값을 박는 식으로 변경하겠습니다.


<tag>
     <data label="김민환" color="ffcc00" rank="100" imp="100" link="http://www.minarto.com" />
     <data label="미나토" color="000000" rank="100" imp="100" link="http://www.minarto.com" />
     <data label="플래시" color="ff0000" rank="70" imp="30" link="http://www.adobe.com" />
</tag>

자 끝났느냐... 뭐, 끝낼 수도 있겠지만 저는 만약에 대비해 id 라는 값을 하나 더 넣겠습니다.
id는 db의 인덱스처럼 고유한 값을 말합니다. 특정 코드가 될 수도 있고요.

이건 혹시 클릭 이벤트를 자바스크립으로 할 경우에 인수를 던지기 위함일 수 있고 어떠한 특정기능에서 태그의 동음이의어의 구분을 위함일 수도 있습니다.

이부분은 사전에 클라이언트쪽 개발자와 협의가 확실히 끝났다면 전혀 불필요한 부분일 수도 있습니다만 어쨌든요...


그럼 다음과 같이 다시 써보겠습니다.


<tag>
     <data label="김민환" id="111" color="ffcc00" rank="100" imp="100" link="http://www.minarto.com" />
     <data label="미나토" id="aaa" color="000000" rank="100" imp="100" link="http://www.minarto.com" />
     <data label="플래시" id="1b1" color="ff0000" rank="70" imp="30" link="http://www.adobe.com" />
</tag>


그럼 다음 강좌에서 드디어 플래시를 실행하도록 하겠습니다.