일리있는 이야기::UrC9

오주상사라는 재밌는 컨셉으로 마케팅을 한 OZ에서 위젯도 나왔다.
그 인물들과 캐릭터를 그대로 살려서~

뭐 캐릭터들도 닮고 재밌게 잘 그려줬고 졸음 예방운동, 손목운동 등 사무실서 간단히 할 수 있는 운동들이 소개되어서 유용하다. 허나~ 위젯이 좀 불편하다.


일케 다섯명의 체조를 보여준다.

헌데~ 이 캐릭터들의 체조를 골라 볼 수가 없다는 최대의 단점이 있다!!

혹시나 해서 밑의 메뉴버튼을 눌러본다.


오홋~ 더 보기란 버튼이 있구나~
만족을 하고 눌러본다.


하지만 기대했던 메뉴는 안나오고 새창이 떠버린다 ㅡㅜ
체조를 캐릭터별로 골라 볼 수 있고, 위젯 퍼갈때도 기본적으로 나오게 할 캐릭터를 설정할 수 있으면 하는 아쉬움이 남는다.

나만의 배너 위젯을 설정법을 많이들 모르는거 같아서 포스팅합니다.
간혹 돌아다니다가 나만의 배너 위젯에 기본 이미지가 걸려있는 걸 보면 마음이 아파서 ㅡㅜ




기본 설정화면입니다.
보시다시피 기본이미지와 경로가 셋팅되어 있습니다.

일단 자신의 배너를 적용하려면 배너먼저 제작해야겠죠? 가로 166px, 세로 64px 사이즈로 제작을 합니다. 그리고 주소를 따기위해 어딘가에 올립니다.



저는 제 블로그에 비공개로 포스팅을 했습니다. 뭐 공개로 해도 상관없구요.




글 내용이 보이는 곳에가서 배너 이미지의 주소를 복사합니다.



이제 다시 위젯뱅크 색션에 가서 이미지경로에는 아까 복사한 주소를 붙여넣고, 눌렀을때 이동할 링크경로와 마우스를 가져갔을때 뜨게할 링크이름을 입력합니다.

그리고 퍼가기를 누르면 됩니다.



나만의 위젯이 적용됨 모습입니다.

참 쉽죠?

처음에 톡틴게임 위젯은 초 허접이었다.
api도 없이 게임 url을 일일이 긁어서 붙인 코드

<?xml version="1.0" encoding="UTF-8" ?> <Module> <ModulePrefs title="톡틴게임"   title_url="http://tocteen.daum.net/game/"   author="일리있는 이야기"   author_email="37.2@hanmail.net"   width="166"   height="125">    <Require feature="tabs" /> </ModulePrefs>

위젯에 대한 명세이다.
여기서 그나마 좀 모듈을 사용한 것은 shindig에서 제공하는 탭기능이었다.
게임의 장르가 여러개여서 여기서 제공하는 탭으로 분할했다.(역시 기본 UI는 이쁘지가 않다)

이 밑으로 실제 위젯 코드가 들어간다.

<Content type="html"> <![CDATA[ ...   // 소스코드 ...   ]]> </Content> </Module>

코드를 입력하고 닫는 부분까지 ..

이제부터 코드설명 들어갑니다.

<style type="text/css">    .gameList { padding: 5px 5px 0 5px; width:166px; }    .gameList a {        font-family: 굴림, gulim, sans-serif;        font-size: 11px;        font-weight: normal;        text-decoration:none;    }    .gameTail { padding: 5px 5px 0 5px; width:166px; }    .ssmoren {        color:#0307C3;        text-decoration:none;        font:11px "돋움",dotum;        letter-spacing:-1;    }    .moreBlit  {vertical-align:1px; }    .g_tit {color:#7a7a7a;font-size:12px;}    </style>

아무리 초기버전이라지만 약간의 UI는 가져가야하지 않겐나~ ㅎㅎ
더보기 버튼과 게임 제공처 링크 부분의 UI입니다.

우선 게임 영역으로 지정할 4개의 div를 지정합니다.

<div id="actionDiv" style="display:none" class="gameList">        <table><tr>            <td><a href="javascript:openGamePopup('451')">메탈슬러그3</a></td>            <td><a href="javascript:openGamePopup('3275')">메이플스토리</a></td>        </tr><tr>            <td><a href="javascript:openGamePopup('5')">천공대전</a></td>            <td><a href="javascript:openGamePopup('23')">라이덴X</a></td>        </tr><tr>            <td><a href="javascript:openGamePopup('1346')">챔피온</a></td>            <td><a href="javascript:openGamePopup('408')">마리오 리믹스</a></td>        </tr><tr>            <td><a href="javascript:openGamePopup('90')">파워레인져</a></td>            <td><a href="javascript:openGamePopup('1215')">드래곤볼Z</a></td>        </tr></table>    </div>

이런식으로 테이블에 게임과 게임 팝업을 띄우는 링크를 걸어놓고 'actionDiv', 'arcadeDiv', 'sportsDiv', 'comicDiv' 내게의 영역을 만들어 놓습니다.

마지막에는 게임제공처와 더보기 링크를 표시합니다.

<div class="gameTail">        <span style="margin-top:12px;text-align:right;padding-right:4px;" class="g_tit">            [제공 : 주전자닷컴]        </span>        <span>            <a href="http://tocteen.daum.net/game" class="ssmoren" target="blank">더보기</a>            <img src="http://imgsrc.search.daum-img.net/search_all/icon/more_arrow.gif" width="6" height="5" class="moreBlit">        </span>    </div>

이부분은 위쪽에 게임 장르 탭이 변하더라도 변하지 않는 정적인 부분입니다.


이제 스크립트 설명 들어갑니다.

<script type="text/javascript">    var tabs = new gadgets.TabSet(__MODULE_ID__);    // 탭을 생성하는 함수    function initTab() {            tabs.addTab("액션", {                contentContainer: document.getElementById("actionDiv")            });            tabs.addTab("오락", {                contentContainer: document.getElementById("arcadeDiv")            });            tabs.addTab("경기", {                contentContainer: document.getElementById("sportsDiv")            });            tabs.addTab("코믹", {                contentContainer: document.getElementById("comicDiv")            });    }     //게임플레이 팝업    function openGamePopup(gameId){        window.open(            'http://tocteen.daum.net/game/game/view/gamePopup.html?popurl=http://zuzunza.joins.com/daum/player.html?game_id=' + gameId, '',            'width=960,height=720,scrollbars=no,resizable no'        );    }     gadgets.util.registerOnLoadHandler(initTab);    </script>

tabs에 탭기능을 사용하겠다고 정의를 합니다.
initTab 함수는 장르별 게임탭을 지정합니다. 위에서 정의해놨던 'actionDiv', 'arcadeDiv', 'sportsDiv', 'comicDiv' 영역들을 매칭시킵니다.

openGamePopup 함수는 gameId에 맞게 게임팝업창을 띄워줍니다.
위젯이 로딩되었을때 initTab가 실행되어야 하므로 registerOnLoadHandler로 실행시켜줍니다.



허접한 게임모음 위젯의 완성입니다.
다음에는 좀 업그레이드되서 API를 사용한 톡틴게임 위젯 제작기를 올리겠습니다.
0.1버전 톡틴게임 xml도 첨부합니다.