2012-04-12 위젯 추가
쓰기

이번 출장을 나와서 돌아다니다가 재미있는 장난감을 발견했습니다.

HEX BUG.

뭔가 공대스럽지 않은가요. 어원은 잘 모르겠지만

Computation에서 2진수 다음으로 친숙한(사람에 따라) 16진수의 Hex와

모티브가 되는 형태인 벌레의 Hex+Bug로 HEX BUG라는 이름을 지은듯합니다.


IMG_0213.JPG


제가 이걸 구매한건 출장지.....사진도 찍고.. 블로깅도 하고 있는 지금은 바로 출장지.

(일안하고 이런거 올리는거 회사에서 알면 아마도 전 지옥행 업무열차에 강제탑승입니다.)


지금 여긴 Dallas Texas인데 이걸 만든 Innovation First라는 기업이 바로 이곳 Texas에 base를 두고있었습니다.

그러고보면 Texas Instrument도 그렇고 .... 이지역이 IT쪽으로 강한 곳인듯....

하지만 그럼에도 불구하고 현실은 offline매장보다 amazon이 더 싸다는거.

저 역시도 이 4종의 귀여운 벌레들을 아마존으로부터 영입하였습니다.


NANO


IMG_0214.JPG


먼저 NANO입니다. 조그맣죠? 이름 그대로 작습니다. 진동을 통해 앞으로 이동하는것 같습니다.

요 package는 아직 안열어 봤습니다. 이대로 가져가서 한국에서 열어볼려구요...ㅋㅋ


IMG_0219.JPG


패키지 겉에 동작이 기입되어 있습니다. HEX BUG가 재미있는건 각 장난감 마다

탑재되어 있는 센서와 프로그래밍되어 있는 동작이 다르다는 겁니다.

NANO이녀석은 부딪치면 돌아갑니다. 또한 뒤집히면 일어나는 기능도 있습니다.


온라인으로 등록하여 collection을 모아 정리할수도 있는것 같습니다.

이건 나중에 해봐야 알것 같구요.


LARVA


IMG_0215.JPG


그다음은 larva입니다. 이녀석은 다리가 없이 기어다닙니다...;; 이름 그대로 유충이죠.


IMG_0222.JPG


이녀석은 부딪치기 전에 머리쪽에 있는 센서로 장애물을 판단하고 돌아갑니다.

4녀석중에 움직임만 보면 이녀석이 제일 영리한것 처럼 보입니다.ㅋㅋ


IMG_0223.JPG


Cell 1.5v(LR44) 건전지 3개가 들어갑니다. 바닥면에 있는 on스위치를 켜는순간

꿈틀댑니다.


CRAB


IMG_0217.JPG


다음은 crab입니다. 게 처럼 옆으로 기어다닙니다. 아니....이녀석의 이름이 게였죠?


IMG_0220.JPG


게답게(?) 옆으로 기어다니다가 밝은곳에서는 계속 움직이다가 어두운곳에 들어가게되면

멈춥니다. 자는걸까요? 그러다가 박수를 치거나 큰 소리를 내면 움직여 그곳을 기어나옵니다.


IMG_0225.JPG


이녀석은 건전지 2개가 들어갑니다.

아무래도 어두운데 숨어 잠을 잘 수 있기때문인것 같습니다.

역시 켜는 순간 기어다닙니다.


SPIDER


IMG_0216.JPG


그다음 덩치가 가장 큰 spider입니다.


IMG_0221.JPG


이녀석은 조그마한 리모콘으로 조종이 가능합니다. 다른 스스로 동작하는 기능은 없고

리모콘에 있는 하나의 버튼으로 360도 회전하는 머리로 방향을 정하고 다른 하나의 버튼으로

앞으로 전진할 수 있는 기능을 갖고있습니다.


IMG_0224.JPG


이녀석도 건전지 3개가 들어갑니다. 전원버튼쪽을 보면 ON/A/B가 있습니다.

A와 B가 동작이 다른건 아니고 주파수가 달라서 spider두마리를 가까운 거리에서 한번에

데리고 놀 수 있도록 하기위해 만들어진 모드입니다.

전원을 ON하면 빨간 눈을 뜨고 주인님의 명령을 기다리고 있습니다.


IMG_0227.JPG


그럼 이제 리모콘으로 이녀석에게 명령을 내려야합니다.


뭐 사실동작하는 동영상도 찍어 올리고 싶지만

여건이 안되어서 추후에 올릴 수 있으면 올리도록 하고

http://www.hexbug.com/

여기 공식홈페이지에 가보시면 bug종류 별로 간단한 commercial영상을 볼 수 있고

youtube에서 bug이름으로 찾아봐도 동영상을 많이 볼 수 있습니다.



아니면 이걸 보시면 bug is so cool을 외치는 소녀의 HEXBUG NANO review영상을 보실 수 있습니다.


일단 이건 장난감의 역할을 충실히 하고 있습니다.

걍 돌아다니게 두고 보고만 있어도 즐겁습니다.

호텔에서 3마리를 돌아다니게 두고있으니 이거 심심할 겨를이 없네요.

정신없이 돌아다니는 larva에 자꾸 어디숨어 있어서 박수를 치게하는 crab에 그녀석들 찾아다니는 spider..


이 움직임이라는게 보면 볼수록 각 bug의 실제 모델(?)들이 생각납니다.

게나 거미등의 특징이 움직임에 잘 반영되어 있는것 같습니다.


제가 느끼기에는 이것만들으로도 돈이 아깝지 않은 선택이었던것 같습니다.


단점이라면 정품임에도 불구하고 마감이 별로 좋지 않습니다.

crab같은경우 원래 움직이면 부품들이 맞물려서 집게발도 움직이게 되어있는데

한쪽발에 걸리는 부분이 부러져서 배송이 되었습니다.

흠집도 없는 포장상태임에도 부러진 부분이 있다는건 아무래도 제품 양산시의 불량인것으로

밖에 생각이 안됩니다.


여하튼 국내가서 이 녀석들 방에 풀어놓고

딸아이하고 쫓아다닐 생각하니 벌써부터

즐겁습니다.

하하.





저희딸 침대로 IKEA HENSVIK 중고제품을 사게되었습니다.

IKEA가구가 대부분 다 그렇듯 역시나 조립을 하게되어 있었습니다...

이런 명색이 남중,남고,공대,군대,엔지니어의 테크트리를 걷고있는 저였지만

조립에 실수를 하여 부품을 부러뜨리고 말았죠...ㅠㅠ

이케아 가구들에는 보통 예비 부품이 없습니다.


치밀어 오르는 저 자신에 대한 화를 억누르고 

그때부터 국내에서 이케아 관련 제품을 판매하는 모든곳에 전화를 걸기 시작했습니다.

부품을 구할길이 있는지 알아볼려구요.

하지만! 

그 어느곳도 부품만을 따로 취급하지는 않았습니다.

친절하게 찾아보고 알려준다고 하던 곳도 있었지만 해당업체에서 침대를 구매하지 않아

도와주기 힘들겠다는 말도 들었습니다..


아니. 조립식으로 가구를 만들어놓고 예비 부품도 없이 팔면서 저처럼 부품을 망가트린 사람은

대체 어떡하라고 이렇게 판단 말인가...이케아라는 업체가 이런식으로 하면서 세계최대 가구 업체라고

할 수 있는건가....라는 생각으로 가득차 침대를 버려야 하나..라는 생각이 들 무렵.

미국 출장을 오게되었습니다.


짬을내어 제일먼저 이케아부터 들렀죠. 

IMG_0182.JPG

[텍사스 달라스에 있던 IKEA - 7171 Ikea DriveFrisco, TX 75034]


매장의 가구 옆에 부품들이 쌓여 있으니까 가져오면 된다는 얘기도 들었던바라

가구 옆을 빙빙돌았지만 찾을 수 없었습니다. 결국 직원에게 물어보니 친절하게도....

그런사람이 아주 많다는 듯 저--기 가보라는 겁니다.


IMG_0183.JPG

[RETURNS & EXCHANGES]


1. 알려준대로 찾아가서 물어보니 직원이 어느 제품이냐고 물어봅니다.

2. HENSVIK 아기 침대라고 얘기했습니다.

3. 도면 및 부품 정보가 그려진 매뉴얼을 보여줍니다.

4. 손가락으로 찍어서 이거2개 달라...아니 3개 달라...아니 미안 그냥 5개 달라...


고 했더니 점원이 OK라고하면서 5개를 내어줍니다.

그렇습니다. IKEA매장이 없던 한국에 수입판매를 하는 업체에서 부품이 부러지든말든

나몰라라 하는것이었지 조립가구를 파는 이케아 에서는 그에 맞게 쉽게 부품을 구할 수 있도록

프로세스가 만들어져 있던 것입니다.


한국에 IKEA정식 매장이 생기면 당연히 이런 프로세스도 가져오게 될것이지만

그전에는 IKEA가구는 구매를 좀 자제하던지 아니면 미국 나가시는 분들께

시간 잠깐만 내 달라고해서 이런식으로 부품을 구하면 될것 같습니다.

현재 transpine.com에서 오른쪽에 floating메뉴로 최근 댓글과

현재 접속위치, 인기 도서 순위위젯이 표시되고 있습니다.


최근댓글은 xe엔진에서 출력해주는 값을 표시해주는것이구요

다른 위젯들은 다음 위젯뱅크(http://widgetbank.daum.net/)와 

who's amung us(http://whos.amung.us)에서 가져왔습니다.


현재 위젯은 페이지가 로드될때 브라우져의 높이를 확인하여 너무 작으면 최근댓글과

접속위치만을 표시해줍니다[1]. 또한 현재 접속위치를 ip로 확인하여 국내의 경우

다음위젯을 보여주고(국내의 위치표시) 국외일경우 who's amung us의 위젯(세계지도로 국가표시)을

보여주게되어 있습니다.[2]


[1]

먼저 브라우져의 높이를 확인하는 방법입니다.

간단합니다. javascript로

window.outerHeight 


를 사용하면 됩니다. availHeight라든지 height는 현재 pc의 해상도등을 확인하게되어 고정값이지만

outerHeight값은 브라우져의 높이를 확인하게되어있습니다.


그리고 위젯을 추가할때 daum위젯같은 경우 javascript태그에서 src를 직접 호출하도록 하게되어있어

위 구문으로 높이를 확인하는 javascript태그와 위젯을 넣는 javascript를 특별한(?-createElement로추가) 하지 

않으면 태그가 충돌합니다. 무슨말이냐..


DAUM위젯 추가

<script src="http://widgetprovider.daum.net/view?url=http://widgetcfs1.daum.net/xml/20/widget/2010/03/10/10/31/4b96f667e18af.xml&up_key=D2FAC4C49DE1981BC4E86CC78939EC6427690016AABF0BEF8151D8F56584B690+&&width=166&height=330&widgetId=746&scrap=1" type="text/javascript"></script>


높이 확인 

<script type="text/javascript">
	// 높이가 900이상일 경우에만 추가 위젯표시
	if(window.outerHeight > 900)
	{
		//위젯내용
	}
</script>


일텐데 이 두 부분을 합치게되면

 <script type="text/javascript">
	// 높이가 900이상일 경우에만 추가 위젯표시
	if(window.outerHeight > 900)
	{
		document.write('<script src="http://widgetprovider.daum.net/view?url=http://widgetcfs1.daum.net/xml/20/widget/2010/03/10/10/31/4b96f667e18af.xml&up_key=D2FAC4C49DE1981BC4E86CC78939EC6427690016AABF0BEF8151D8F56584B690+&&width=166&height=330&widgetId=746&scrap=1" type="text/javascript"></script>');
	}
</script>


가 되겠죠?

만일 이대로 넣게되면 처음 script태그와
if문안의 </script>가 한 태그로 묶이게되어 파일안의 javascript내용이 꼬이게되는 것입니다.


그래서 약간의 편법으로 아래와 같이 추가하면 됩니다.

<script type="text/javascript">
	var widget_string = "<script";
	// 높이가 900이상일 경우에만 추가 위젯표시
	if(window.outerHeight > 900)
	{
		//태그를 제외한 string
		widget_string += '  src="http://widgetprovider.daum.net/view?url=http://widgetcfs1.daum.net/xml/20/widget/2010/03/10/10/31/4b96f667e18af.xml&up_key=D2FAC4C49DE1981BC4E86CC78939EC6427690016AABF0BEF8151D8F56584B690+&&width=166&height=330&widgetId=746&scrap=1" type="text/javascript"';
	}

	widget_string += '>';	//태그를 닫고
	document.write(widget_string);	//완성된 태그를 쓴다.
	</script>
</script>

높이가 900이상일 경우에만 위젯 src가 추가된 script태그를 불러오고 아니면 비어있는 script태그를 넣도록 하는것입니다.

※ src="...."앞에 " "(공백)이 있는것에 유의하세요~

[2]
현재 접속한 ip가 한국인지 아닌지를 확인하는 방법입니다.
이건 open source로 서비스를 제공하고있는 geoip(http://www.maxmind.com/app/javascript_city)를 이용하는 방법입니다.
(유료 서비스도 있습니다만 개인이 쓰기에는 이정도도 충분한듯.)
이 역시 매우 간단합니다.^ㅁ^

페이지에 아래의 js파일을 include합니다.
 <script language="JavaScript" src="http://j.maxmind.com/app/geoip.js"></script>


원하는 곳에 아래 내용을 추가합니다.

<script language="JavaScript">
    var widget_string = "<script";

    if(geoip_country_code() == 'KR')
    {
        widget_string += ' src="http://widgetprovider.daum.net/view?url=http://widgetcfs1.daum.net/xml/5/widget/2009/04/23/10/36/49efc62b79a6e.xml&up_DAUM_WIDGETBANK_BLOG_URL=http%3A%2F%2Ftranspine.com%2F&&width=166&height=272&widgetId=362&scrap=1" type="text/javascript"';
    }
    else
    {
        widget_string += ' id="_waulob"';
    }

    widget_string += '>';

    if(geoip_country_code() != 'KR')
    {
        var _wau = _wau || [];
        _wau.push(["map", "dkgx0p01s31d", "lob", "170", "90", "natural", "target-yellow"]);
        (function() {var s=document.createElement("script"); s.async=true;
        s.src="http://widgets.amung.us/map.js";
        document.getElementsByTagName("head")[0].appendChild(s);})();
    }

    document.write(widget_string);
    </script>
</script>


geoip를 사용하는 방법은 위에 보이는 대로 걍 함수명을 호출하면 값들이 return됩니다.

국가명확인하는게 필요하니 geoip_country_code()를 호출하여 한국인지('KR')를 확인하고
그에따라 위젯을 찍어주면 됩니다.

who's amung us위젯도 who's amung us에 있는 소스를 긁어와서(http://whos.amung.us/showcase/)
붙여넣으면 됩니다.


사실 위에 있는 [1]에서의 방법보다 who's amung us에서 제공해주는 위젯소스에 createElement를 만들어서
attribute를 추가하는 방법이 훨씬더 엘레강스(!)하지만 뭐 tip을 소개한다는 생각으로
적어보았습니다. 위 코드보면 어렵지 않게 파악하실 수 있을겁니다.

참고하시길...ㅎㅎ


보면 아시겠지만 오른쪽에 위젯페이지를 새로 만들었습니다.

기본적으로 댓글, 접속위치, 도서순위가 표시되지만


1. 현재 브라우져의 폭이 900px을 넘지 않는경우 

도서순위가 출력되지 않습니다.


2. 한국 / 외국에서 접속하는 경우

한국에서 접속을하면

국내지도와 접속한 도시의 위치가 나오고

국외에서 접속을 하면 세계지도와 현재 접속한 국가가 표시됩니다.


이 내용도 조만간에 코드를 포스팅할 예정입니다.^^

쓰기

#[ 최근 댓글 ]