Firejune Blog

더욱 빨라진 파이어폭스 3.5 출시

2009-06-30T20:00:08-07:00

새 자바스크립트 엔진인 TraceMonkey가 탑재된 파이어폭스 3.5가 출시되었습니다. 기존의 SpiderMonkey 엔진보다 약 3배 빠르다고 합니다. 위 그래프는 개인적으로 수집한 TaskSpeed의 결과입니다. 재미있게도 jQuery를 제외한 나머지 자바스크립트 라이브러리들은 모두 속도가 향상 되었습니다. 특히, Prototype의 속도가 크게 개선된 것으로 기록되었습니다. 원인이 무엇일까요? Monad(펑셔널 프로그래밍)는 JIT 컴파일러에 적합하지 않기 때문일까요? 이와 같은 양상은 최근에 출시된 브라우저들에서 두드러지게 나타납니다.

우측 그림은 SunSpider 벤치마크를 이용하여 한딱가리(?) 하고있는 브라우저들의 자바스크립트 엔진성능을 측정 하고 최종집계 시간을 비교한 그래프입니다. V8이나 Nitro(SquirrelFish)의 속도를 따라 잡지는 못했더군요.

어찌됐든 파이어폭스 3.5의 출시는 환영할 일입니다. HTML5 공식 지원을 포함한 오픈 비디오 및 오디오, 새로운 CSS 속성들, XMLHttpRequest, Native JSON 등 다양한 새로운 기술들을 이용할 수 있기 때문이죠.

Comments | Trackbacks | Hits(285)

text-shadow를 이용한 텍스트 그림자 효과

2009-06-30T09:04:27-07:00

Zach Johnson씨는 CSS와 자바스크립트를 사용하여 마우스 움직임에 반응하는 텍스트에 그림자가 비치는 효과를 절묘하게 표현했습니다. 이 데모는 아래의 짧막한 코드로 작동됩니다. 그러나 text-shadow CSS 프로퍼티를 지원하는 Safari, Firefox 3.5, Opera, Chrome 브라우저에서만 제대로 보인다는 점을 유념하세요.

var text;
var spot;

window.onload = function () {
    document.getElementById('text-shadow-box').onmousemove = onMouseMove;
    text = document.getElementById('tsb-text');
    spot = document.getElementById('tsb-spot')
}

function onMouseMove(e) {
    var xm = e.clientX - 300;
    var ym = e.clientY - 175;
    var d = Math.sqrt(xm*xm + ym*ym);
    text.style.textShadow = -xm + 'px ' + -ym + 'px ' + (d / 5 + 10) + 'px black';
    
    xm = e.clientX - 600;
    ym = e.clientY - 450;
    spot.style.backgroundPosition = xm + 'px ' + ym + 'px';
}

Comments | Trackbacks | Hits(184)

자바스크립트로 만든 3D 큐브 메뉴 - CubeMenu

2009-06-29T21:52:36-07:00

3D 큐브 메뉴는 MooTools 자바스크립트 라이브러리를 이용하여 만들어진 색다른 3차원 메뉴입니다. 그러나 실제로 사용해 보면 비주얼은 뛰어난 반면 사용성이 떨어지는 것을 경험할 수 있습니다. 마우스 휠로 확대/축소하는 기능 보다는 WordPress의 Cumulus 플러그인처럼 마우스 위치에 반응하게 하여 원하는 위치로 이동하는 기능과 큐브 뿐만아니라 다른 형태로도 변하게 하는 옵션을 추가로 제공하면 더욱 다양한 시도들을 기대할 수도 있었을텐데 말예요.

var myCubeMenu = new CubeMenu({
  items: [
    ['Charts', 'data/0.png', function(){ Message.show('Chars clicked..'); }],
    ['Games', 'data/1.png', function(){ Message.show('Games clicked..'); }],
    ['Sounds', 'data/2.png', function(){ Message.show('Sounds clicked..'); }],
    ['Internet', 'data/3.png', function(){ Message.show('Internet clicked..'); }],
    ['Calendar', 'data/4.png', function(){ Message.show('Calendar clicked..'); }],
    ['Users', 'data/5.png', function(){ Message.show('Users clicked..'); }],
    ['Palette', 'data/6.png', function(){ Message.show('Palette clicked..'); }],
    ['Monitor', 'data/7.png', function(){ Message.show('Monitor clicked..'); }],
    ['Mail', 'data/8.png', function(){ Message.show('Mail clicked..'); }],
    ['Acrobat', 'data/9.png', function(){ Message.show('Acrobat clicked..'); }],
    ['Flash', 'data/10.png', function(){ Message.show('Flash clicked..'); }],
    ['RecycleBin', 'data/11.png', function(){ Message.show('RecycleBin clicked..'); }],
    ['Connections', 'data/12.png', function(){ Message.show('RecycleBin clicked..'); }],
    ['', 'data/13.png', $empty ],
    ['Blocks', 'data/14.png', function(){ Message.show('Blocks clicked..'); }],
    ['Chess', 'data/15.png', function(){ Message.show('Chess clicked..'); }],
    ['Languages', 'data/16.png', function(){ Message.show('Languages clicked..'); }],
    ['Board', 'data/17.png', function(){ Message.show('Board clicked..'); }],
    ['Battery', 'data/18.png', function(){ Message.show('Battery clicked..'); }],
    ['Newspaper', 'data/19.png', function(){ Message.show('Newspaper clicked..'); }],
    ['Clock', 'data/20.png', function(){ Message.show('Clock clicked..'); }],
    ['MSN', 'data/21.png', function(){ Message.show('MSN clicked..'); }],
    ['Printer', 'data/22.png', function(){ Message.show('Printer clicked..'); }],
    ['Database', 'data/23.png', function(){ Message.show('Database clicked..'); }],
    ['Shutdown', 'data/24.png', function(){ Message.show('Shutdown clicked..'); }],
    ['Reload', 'data/25.png', function(){ Message.show('Reload clicked..'); }],
    ['Camcorder', 'data/26.png', function(){ Message.show('Camcorder clicked..'); }]
  ]
});

Comments | Trackbacks | Hits(247)

마침내 3짜 배스를 낚아 올렸습니다.

2009-06-28T18:29:22-07:00

지난 4월 말, 블루길을 처음으로 낚은 이후 흥분한 가슴을 가라앉히지 못하고 매주 일요일 비만 안오면 출조갑니다. 낚시도 여러 종류가 있으며 그 중에도 배스 루어 낚시가 대세라는 소문을 듣고 이 것을 배우기로 마음을 굳혔습니다.
잡다한 정보를 습득하여 채비를 구비하기 시작했는데, 고가의 베이트릴을 덥석 구매해서 스피닝릴 로드(낚시대)에 장착해 쓰다가 베이트릴 로드가 별도로 있다는 사실을 뒤늦게 알고 추가로 구입하기도 했습니다.(숙련자용이라는 것도 뒤늦게 알았습니다.) 그렇게 짧은 지식으로 하나 둘 모인 채비들은 로드만 벌써 4대(L x 1, ML x 2, MH x 1) 째이고 배스 낚시관련 방송을 보고 따라했다가 백래시(줄엉킴) 지옥을 경험했으며, 짬만 나면 집앞 한강에 나가서 손바닥에 물집이 잡히도록 캐스팅(던지기) 연습도 했습니다.
주로 용인과 광주 주변의 저수지로 출조했으며, 회마다 새끼 배스는 몇 수씩 낚았더랬습니다. 물론, 허탕치는 날도 많았죠. 배스 루어 낚시 경력 2개월 되던 날 목표로 삼았던 3짜리 배스를 낚았습니다. 큰놈을 낚으려면 큰놈이 올라오는 곳으로 가야하더군요;

Comments(5) | Trackbacks | Hits(280)

두각을 드러낸 Scriptaculous 2.0 - Scripty2

2009-06-26T09:31:42-07:00

Thomas Fuchs씨는 2007년에 2.0버전을 만든다고 큰소리 치고는 잠적하여 목놓아 기다리게 만들더니, 약 20개월이 지난 오늘에서야 드디어 두각을 드러냈습니다. "보다 맛좋은 웹을 위하여"라는 부제의 "scripty2"라는 이름으로 오픈한 사이트는 API 문서와 흥미로운 데모 등으로 이루어져 있으며, 소스 리포지토리(Git)도 함께 공개했습니다. "scripty2"로 리네임한 것은 종전의 이름(script.aculo.us)이 철자와 도메인에서 혼란이 빚어지기 때문이며 프로젝트를 그대로 이어가는 것이라고 자신의 블로그에 밝혔습니다. 알파 딱지를 달고 시작하는 scripty2는 처음부터 완전히 새롭게 작성되었으며, 수년을 effect engine개발에 소진했다고 합니다. Prototype의 팬으로서 scriptaculous와의 호환성이 완전히 배제되어 있는 것이 가장 아쉬운 점이긴 합니다만, 데모에서 보여준 막강한 애니메이션 변화(s2.fx.Transitions) 처리는 매혹 그 자체입니다. 새 장난감이 생겼네요. Thomas Fuchs씨에게 고맙다고 맥주 한 잔 사줬어요.

Comments(2) | Trackbacks | Hits(373)

높이가 다른 float 요소를 벽돌처럼 정렬 - jQuery Masonry

2009-06-26T00:03:20-07:00

CSS에서 float 속성을 이용하여 그리드 레이아웃을 꾸미려면 모든 요소들의 높이가 일치해야는 환경이 필요했습니다. 하지만 jQuery Masonry를 사용하면 높이가 서로 다른 요소들에 적용하여도 문제가 되지 않습니다. 요소를 수평으로 정렬한 후 수직을 다시 계산하여 벽돌을 끼워 맞춘듯 보기좋게 정렬해 주기 때문입니다. 이와 같은 그리드 레이아웃이 적용된 typeneu.com과 silnt.com에서 색다른 느낌을 만끽해보세요.

Comments(4) | Trackbacks | Hits(320)

자바스크립트로 구현한 문자인식 제스처 - FancyGestures

2009-06-24T10:02:55-07:00

Fancy Gestures는 마우스 커서를 일정한 방향으로 드래그하여 특정한 이벤트를 발생시킬 수 있게하는 jQuery용 플러그인으로 만들어진 자바스크립트 마우스 제스처 라이브러리 입니다. 위 화면은 이 플러그인의 데모로서 기본으로 내장되어 있는 문자인식 제스처를 사용하는 모습입니다. 초기 팜파일럿의 문자인식 제스처를 연상시키네요. 제스처를 설정하는 방법은 간단합니다. 좌측 그림을 참고하여 마우스 커서의 위치를 중심으로 여덟방향에 해당하는 번호 0부터 7사이의 숫자를 진행순서대로 나열하고 "jquery.fancygestures.js" 파일에 정의하면 숫자조합에 제스처를 대조하여 지정한 이벤트를 발생시키게 됩니다. '616'과 같은 페턴은 영문 'N'을 출력하는 것이죠. 소스를 까보니 이동경로를 페턴과 매치 시키려고 복잡스러운 수학 계산식을 수행하더군요.

jquery.fancygestures.js 파일을 열어 사용자 정의를 추가한 후

    gestures[" "] = "0";
    gestures["?"] = "6701232";
    gestures["Back"] = "4" // added by firejune
    .
    .

다음 처럼 적용합니다.

  $(document.body).fancygestures(function (data) {
    if (data == "Back") history.back();
  });

참고로, 함께 사용되는 wz_jsgraphics.js는 커서의 진행 방향을 출력하기 위한 것으로 없어도 무방합니다.

Comments(2) | Trackbacks | Hits(359)

이미지 프로세싱 자바스크립트 라이브러리 - Phototype

2009-06-24T08:19:05-07:00

Phototype은 PHP의 GD라이브러리와 Prototype 자바스크립트 라이브러리를 이용하여 이미지 프로세싱을 할 수 있는 흥미로운 자바스크립트 라이브러리입니다. 이미지의 리사이즈, 회전, 플립, 드랍쉐도, 캡션, 각종 필터 효과 등을 메서드 체인 형식의 코딩으로 적용할 수 있습니다. 아래처럼 말이죠.

l_oPhoto = new Photo().load("test.jpg").dropShadow().flipH().makeSketchy();
document.body.appendChild(l_oPhoto.fetch());

Phototype은 이 코드를 서버로 전송하여 렌더링 된 이미지를 수신하고 디스플레이 합니다. 아래 사진은 직접 설치하여 테스트한 것입니다. 640 x 427 (Quality 70%) 정도의 이미지를 처리하는데 약 0.2초 미만으로 수신합니다. 거의 실시간이네요. 외부 이미지를 로드하거나 경로를 인식하지 못하고, 설정값을 세밀하게 조작할 수 없다는 것이 아쉽기는 하지만 약간만 손보면 매우 쓸만한 이미지 효과를 만들어 낼 수 있을 것으로 보입니다. 재미있게도 "addChuckNorris" 메서드를 사용하면 척 노리스씨가 사진에 오버랩 됩니다. ㅋㅋ

Comments(1) | Trackbacks | Hits(373)

인터랙티브 데이터 비주얼라이제이션 - InfoVis

2009-06-19T09:41:09-07:00

JavaScript InfoVis Tookit은 Nicolas Garcia Belmonte씨가 만든 자바스크립트로 만들어진 대화형 자료 시각화 도구입니다. 방대한 자료를 한정된(협소한) 화면에 출력하기에 안성맞춤인 이 자바스크립트 라이브러리는 각종 그래프, 가상공간형 또는 방사형 트리 등 독특하면서도 다양한 형식의 자료 시각화를 소화해 내도록 디자인된 솔루션 입니다. IE6+, FF2+, Safari3+, Opera9.5+ 브라우저에서 작동하며, BSD License를 따르고, 특정한 자바스크립트 라이브러리를 필요로 하지 않습니다.

Comments(2) | Trackbacks | Hits(575)

자바스크립트 호환성 테스트

2009-06-19T09:10:32-07:00

Robert Nyman씨는 자바스크립트 버전별 특징들에 대한 브라우저 단위 테스트를 시행하고 그 결과를 일목요연하게 정리하여 공개하였습니다. 자바스크립트 1.6부터 1.8.1로 버전이 오르면서 지원하는 여러 기능들 그리고 Getters, Setters, DOM Storage, Native JSON 등의 지원여부를 알아내는 예제 코드와 브라우저별 실행 결과를 알기 쉽게 작성했습니다. 멋지네요!

Comments | Trackbacks | Hits(542)

Prototype 1.6.1 RC3 배포 - Chrome, PDoc 지원

2009-06-18T17:59:45-07:00

Prototype 1.6.1 RC3가 릴리즈 되었습니다. 늦은 감이 없지 않지만 RC3부터는 구글 크롬 브라우저를 공식으로 지원하게 되었습니다. 크롬만을 위한 코드가 존제하는 것은 아니고 rake test에 Chrome이 포함된 정도로 보입니다. 그리고 RC2 배포 이후에 보고된 이슈들이 처리되었는데 특히, Event#observe와 관련한 가증스런 버그들과 IE8과의 호환성 향상을 위한 개선항목들이 대표적입니다. 이 밖에 PDoc을 이용하여 API문서를 빠르게 생성하는 특징이 추가되었다고 합니다. PDoc은 뭐하는 녀석일까요? (-.-a

Comments(2) | Trackbacks | Hits(408)

웹기반 마우스 트래킹 사용성 테스트 도구 - Clixpy

2009-06-08T09:20:52-07:00

Clixpy는 사이트에서 일어나는 모든 마우스 움직임을 캡처하여 방문자의 행동패턴까지 분석해 주는 혁신적인 웹기반 웹 사용성 테스트 도구입니다. 이 서비스는 간략한 방문자 분석 통계자료(접속 수, 시간, 브라우저, 운영체제, 화면 해상도 등)와 세션단위 자세히 보기 기능을 제공하여 방문자의 마우스 움직임, 클릭 빈도 및 위치, 페이지 스크롤 위치, 그리고 폼 입력 행위 등을 비디오 보듯이 관찰할 수 있습니다. 이렇게 녹화된 내용은 영구적으로 보관하거나 메모를 추가하여 테스트 자료로 사용할 수 있게 됩니다. 의외로 정교한 마우스 움직임과 액션을 녹화/재생하더군요. 실행 가능한 데모로 직접 확인해 보세요. Clixpy는 한줄의 자바스크립트를 추가하는 것으로 설치할 수 있습니다. 멋지죠? 단점이라면 속도가 무진장 느리다는 것입니다. 사실 저도 이와 유사한 짓을 오래전부터 해오고 있었습니다. 사용자의 웹사이트 사용습성을 인지하지 못하면 죽도 밥도 안되는 상황이 펼쳐지기도 하니까요.

Comments | Trackbacks | Hits(1069)

다음 지도 API 이벤트 참여 결과 4위, 몰랐다.

2009-06-06T07:37:00-07:00

작년 말, 다음이 지도 API 서비스를 오픈하면서 경품이 걸린 이벤트를 시행했습니다. 그리고 허접스러운 예제로 참여했습니다. 그 결과 4위로 순위권에 들었습니다. 그러나 이 사실을 지금에서야 알았습니다. 그것도 리퍼러 확인하는 중에 우연히 알았습니다. 에혀~ 맥주나 한잔하면서 자축해야 겠습니다. 경품(Daum 이만원 상품권)을 지금이라도 받을 수 있을까요? ㅎㅎㅎ

Comments(2) | Trackbacks | Hits(733)

Fluxiom 무료 서비스 계정 개방

2009-06-06T06:52:53-07:00

Wollzelle이 2006년 4월에 런칭한 Fluxiom은 제게 있어서 매우 각별한 웹서비스입니다. 신선한 영감을 얻은 동시에 웹의 미래를 비춰주었으며, 당시, 자바스크립트를 죽어라 파야겠다는 결심이 서게하는 계기를 마련해 주었기 때문입니다. 이정도 내공이 안되면 업으로 삼지 못한다는 각오로 이 서비스의 기술을 분석하고 php를 이용해서 허접하게나마 재현해 보기도 했습니다. Ruby on Rails로 구축된 Fluxiom은 그동안 유료 서비스를 고수해 오다가 지난 6월 4일, 빡빡한 예산에 허덕이는 학생 또는 아마추어 디자이너들을 위해서 무료 사용자 계정을 오픈하게 되었다고 합니다. 웹 프론트-엔드 엔지니어로 일하거나 지망하는 분은 꼭 한번 사용해 볼 것을 권해 드립니다. 오래된 웹서비스이지만 어디에 내놓아도 손색없을 정도로 잘 만들어진 개인 디지털 자산관리 솔루션입니다.

Comments | Trackbacks | Hits(590)

전화 금융 사기 당할 뻔 했습니다.

2009-05-28T21:52:38-07:00

AM 11:07 - "00-5005"번으로 전화가 걸려온다. 찾아갈 등기 우편물이 있으니 자세히 알아보려면 1번, 상담원 연결은 9번을 누르라는 자동 안내를 받는다. 9번을 눌렀다. 중국인으로 여겨지는 어눌한 말투의 여인이 "출입국 관리 사무국"인데 개인정보가 유출된 것으로 보이는 승인 취소 건이 있다면서 경찰에 조사를 의뢰해도 되겠냐고 묻는 말에 "예"라고 답했다.
AM 11:12 - "00-5005"번으로 다시 전화가 걸려왔다. "서울중앙지방검찰청"인데 방금 출입국 관리 사무국으로부터 신고를 받아 긴급 금융 보호 대상자가 되었다고 하면서 거래 중인 은행과 피해여부, 잔고액수, 근친 중에 금융업에 종사하는 사람이 있는지, 개인정보 및 개인물품 유실 여부 등을 조사했다. 피해 확산을 막기 위해 자신들이 설정한 금융 보호 대상이 성공적으로 이루어졌는지를 확인하기 위해 가까운 은행에 위치한 현금지급기에서 1만원을 출금하고 지급 명세서의 보안코드가 있는지를 확인하란다. 업무 중이라 곤란하다고 했더니 수사에 협조해 달라며 이 사실을 제 3자에게 알리지 말리지 말 것과, 약 10분 후에 "서울지검 지능범죄수사과"에서 연락이 올 것을 통보한다. 은행으로 달려가 잔고를 확인해 보았으나 별다른 이상이 없다.
AM 11:23 - "00-5005"번으로 또다시 전화가 걸려온다. 자신을 서울지검 지능범죄수사과의 김○○ 계장이라 밝히며, 피해를 입었느냐는 질문에 아니라고 답했다. 다행이라는 말과 함께 지급 명세서에 우측 하단에서 보안코드를 확인했느냐고 묻는다. 명세서를 살펴보고 없다고 답했더니 금융 보호 대상자 설정에 실패한 것이라 한다. 미심적인 생각이 들어 전화를 끊고 현금지급기 담당 직원을 찾아 물어보니 그러한 코드가 프린트 되는 일은 없다고 한다. 은행 직원과 대화를 나누는 중에 계속해서 전화밸이 울리고 있다.
AM 11:38 - 기존과 다른 "002-253-8-5756"번으로 김계장에게 다시 전화가 걸려왔다. 보안코드를 발급받지 못하면 심각한 피해를 입을 소지가 있다고 한다. 보안코드 발급이 정상적으로 이루어진 후에는 피해를 입었을 경우 보상도 해 준단다. 경상도 말투의 김계장은 거래 중인 은행과 직접 연결하여 일을 신속하게 처리해야 하므로 협조하라며 지시 대로 해 줄 것을 매우 다급하게 요구했다. 현금지급기로 가서 자신의 주 거래 금융 카드를 넣고, 조작 언어를 영어(English)로 변경한 후 신용카드 해외송금으로 진입하더라(;) 이 과정에서 말로만 듣던 전화 사기인 듯한 낌새를 알아차리고 당신을 어떻게 믿을 수 있는지 근거를 대라고 했더니 국번없이 "1301"로 전화해서 직접 확인해 보라고 한다.
AM 11:47 - 전화를 끊고 112로 신고하여 경찰측 상담원에게 정황을 설명했다. 매우 흔한 전화 금융 사기 수법이라며 혹시 송금했냐고 물어보길래 송금 직전이라고 했더니 그 치에게 "알아서 할테니 상관하지 마시오"라 말하고 걸려오는 전화를 생까라고 친절하게 알려 주신다. 그 사이 콜키퍼 문자 메시지를 2통 수신했는데 모두 김계장이다.
AM 11:51 - 이 빌어먹을 김계장으로 부터 "002-253-8-5756"번으로 또다시 전화가 걸려왔다. 상담원이 알려준대로 "이~런 니X 씨X X같은 개 사기꾼 새끼야! &#%$!..."라는 멘트들을 신나게 날리는 도중에 통화가 끊겼고 더이상 전화밸은 울리지 않았다.

정신을 차리고 보니 은행에서 제공하는 메모지 뭉탱이를 통째로 들고나와 버렸네요. 컨펌(confirm) 한번 터치하면 송금되는 상황까지 갔습니다. 온몸에 전율을 느끼는 산뜻한 오전을 맞았네요. 여러분 조심하세요!

Comments(8) | Trackbacks | Hits(1141)

프론트-엔드 엔지니어를 모십니다.

2009-05-28T08:05:45-07:00

제가 몸담고 있는 회사에서 프론트-엔드(Front-end) 개발자를 모집하고 있습니다. 주 담당업무는 UI 설계 및 구축 그리고 크로스-브라우징 등이 될 것입니다. 서드파티 라이브러리 사용을 권장하고, 간결하면서도 일관적이고 직관적인 UI를 지향하며, 웹표준을 존중합니다. 개발환경은 주로 .NET을 기반으로 구축되며, Subversion, Trac, Mantis, Wiki 등의 관리 시스템을 사용하여 작업자 간 협업을 이롭게 하고 있습니다. 그리고 프로젝트 단위로 서로 다른 분야의 사람들이 모여 팀을 결성하고 작업을 진행합니다.

지원 방법은 이력서와 개발 경력서를 이메일에 첨부하여 to@firejune.com으로 발송해 주시면 서류심사 후 기술면접 및 연봉협상 절차를 거치게 됩니다. 이 분야의 달인이 아니어도 좋습니다. 자신의 창출물에 자부심을 가지고 꿈과 열정을 쏟을 준비가 되신 분이라면 대환영입니다. 관심있는 분은 쿡~ 찔러주세요.

Comments(5) | Trackbacks | Hits(718)

Tissot T 35.9.514.33 구입

2009-05-27T09:56:29-07:00

5월은 지름의 달인가 봅니다. 계속해서 굵직한 것만 대책없이 쳐 질러싸고 있습니다. 어잌후~

Comments(4) | Trackbacks | Hits(596)

Depeche Mode - Wrong

2009-05-23T01:16:42-07:00

지난 4월에 발표한 "Depeche Mode"의 "Sounds Of The Universe"앨범의 첫 번째 싱글인 "Wrong"이다. 암울한 가사말들이 뇌리에 팍팍 꽂힌다. 어찌보면 자신이 처한 현실을 일부분 대변해주는 듯 하다.

Comments | Trackbacks | Hits(673)

HTML 요소를 빠르게 찾는 파이어버그 확장 - Firefinder

2009-05-22T07:47:25-07:00

Robert Nyman씨는 새로운 파이어버그(Firebug) 확장기능인 파이어파인더(Firefinder)를 배포했습니다. CSS 선택자 또는 XPath를 이용하여 DOM 요소를 빠르게 찾을 수 있게 해 주는 확장기능입니다. 위 화면에서 보는 것 처럼 찾아진 DOM 요소 주변에 빨간 점선으로 표시되고 결과 목록위로 마우스 커서를 가져가면 파란 점선으로 강조합니다. 매번 콘솔을 이용하여 쿼리를 날렸는데 이 짓은 더이상 안해도 되겠군요.

Comments(2) | Trackbacks | Hits(864)

Jabbify를 이용한 포인터 트래킹 커뮤니케이터

2009-05-15T23:09:38-07:00

Jabbify API를 이용해서 뭔가 재미있는 뻘짓을 해 보려고 계속 구상만 하다가 이 번 주말에 맘잡고 삽질했습니다. 자연스레 공통 관심사를 가진 사람을 만나고 즉시 질문하거나 추가적인 정보를 소통할 수 있는 커뮤니케이터이자 상대방의 모습을 아이-트래킹의 방식으로 비주얼라이즈하는 아이디어에 착안하여 만들어 보았습니다. 화면속을 요리조리 떠돌아 다니는 스마일 유령들이 바로 트래커입니다. 이 곳에 접속해 있는 사용자들의 마우스 커서 위치와 접속중인 페이지의 주소 그리고 제목을 스마일 유령을 통해 공유하여 해당 사용자가 위치한 곳으로 즉시 이동하거나 조회 중인 페이지의 제목을 알 수 있고 간략한 메시지를 주고 받을 수도 있습니다. 여기에 사용된 스마일 유령은 100% CSS로 작성된 것으로 나라디자인에서 콘테스트한 황준상님의 스마일의 마크업을 변조한 것이에요. 덕분에 이미지 파일을 사용하지 않고도 다양한 색상의 유령들을 동적으로 생산할 수 있게 되었습니다. 코드는 ~~Prototype기반 클래스로 작성~~되었고 아래와 같은 방식으로 구동됩니다.

사용방법 :

<script type="text/javascript" src="/javascripts/prototype.js"></script>
<script type="text/javascript" src="/javascripts/jabbify.js"></script>
<script type="text/javascript" src="/javascripts/eyestracker.js"></script>

EyesTracker({
    name: 'your name', // 사용자 이름 (default: random)
    color: 'c30', // 유령 색상 지정 (default: random)
    timeout: 100, // 포인터 멈춤, 연결 갱신 시간 간격 (default: 240ms)
    callback: function(pkt) {...} // 갱신시 호출되는 콜백
});

다운로드 :

* original - eyestracker.js (9.1kb)
* minified - eyestracker.js (7.1kb)

업데이트 :

* 2009.5.16 - 사용자가 떠난 경우 해당 유령을 실시간으로 사라지게 했습니다.
* 2009.5.16 - IE7에서도 유령을 볼 수 있습니다.
* 2009.5.16 - IE8에서 발생하던 오류가 수정되었습니다.
* 2009.5.17 - 머물러 있는 페이지의 제목을 툴팁으로 출력합니다.
* 2009.5.17 - 소리 효과를 추가했습니다. 툴팁이 표시하거나 메시지를 수신할 때 소리로 알립니다.
* 2009.5.17 - 메시지 송/수신 기능을 추가했습니다. 개인 또는 모두에게 메시지를 주고 받을 수 있습니다.
* 2009.5.17 - IE에서 툴팁 영역이 표시되지 않던 문제를 수정하였습니다.
* 2009.5.17 - 같은 페이지를 조회 중인 유령을 약간 강조했습니다.
* 2009.5.17 - 메시지 수신시 유령이 화면에서 벗어난 경우 위치를 보정합니다.
* 2009.5.17 - 전체 송신 체크박스의 설정을 기억합니다.
* 2009.5.17 - 이름/색상/타임아웃/콜백을 인스턴스 생성시에 설정할 수 있도록 했습니다.
* 2009.5.17 - 툴팁의 위치가 화면을 벗어나지 않도록 보정합니다.
* 2009.5.18 - soundmanager2 라이브러리가 로드되지 않은 경우 소리 재생을 하지 않습니다.
* 2009.5.19 - 흰색 유령은 관리자입니다. ^^;
* 2009.5.25 - 인스턴스화할 필요가 없으므로 Prototype의 클래스를 제거하였습니다.
* 2009.5.27 - 메시지 송/수신시 메시지 박스가 즉시 사라지는 문제를 수정하였습니다.