Firejune Blog

IE6이 주는 고통을 고찰해 보는 시간

2009-07-14T13:48:22-07:00

Digg가 IE6 브라우저 사용자를 대상으로 매우 흥미로운 조사를 펼쳤습니다. 왜 아직도 IE6을 사용하고 계신가요?(You are currently using Internet Explorer 6. Why?)라는 질문에 ●37%의 응답자가 "자신의 PC에 관리권한이 없기 때문(I can’t upgrade because I don’t have administrator access on my computer.)"으로 응답했으며, ●33%가 "주위에서 업그레이드하지 말라고 해서?(I can’t upgrade because someone at work says I can’t.)", ●17%가 "업그레이드의 필요성을 느끼지 못했기 때문(I don’t feel a need to upgrade.)", ●7%가 "자신의 PC가 구형이라서(I can’t upgrade because my computer runs an old version of Windows.)", 그리고 ●7%가 "IE6을 선호하기 때문(I prefer IE6 to other browsers.)"으로 응답한 것으로 조사되었습니다.

Digg는 IE6 브라우저에 대한 지원을 중단하기 위해 이와 같은 조사를 실시하였으며, 정상적으로 페이지를 볼 수는 있을 것이라고 합니다. 이밖에도 IE6 의 기능별 사용 분포, 회사/집 사용 빈도 등에 대한 조사자료를 함께 공개했습니다. 주위에서 IE6 사용자를 발견하면 "이봐요! 업그레이드 좀 하세요!"라고 전해 달랍니다. 한국의 실정과는 많이 다르겠지만, "IE6을 선호하기 때문"이라는 응답은 조금 놀랍군요.

Comments(2) | Trackbacks | Hits(276)

자바스크립트 멀티스레드 프로그래밍 - DOM Workers

2009-07-12T12:08:36-07:00

파이어폭스 3.5에 추가된 기능인 DOM Workers를 테스트 해 보았습니다. 자바스크립트로 멀티스레드(multi-thread)를 구현할 수 있다길레 솔깃해서 살펴보았습니다. 'Worker'로 새 인스턴스를 만들어서 'onmessage', 'onerror', 'postMessage' 메서드로 변수를 전달하고 결과물을 돌려받을 수 있는 실행구조를 가지고 있었습니다. 인스턴스를 생성할 때에는 자바스크립트 파일을 로드하여 이루어지며, 여기에 사용되는 자바스크립트는 DOM에 직접 액세스 할 수 없고 네임스페이스 역시 공유하지 않습니다. 즉, 연산만을 죽어라 수행하도록 디자인 된 것입니다.

function fibonacci(n) {
  return (n < 1) ? -1 : (n > 2) ? fibonacci(n - 1) + fibonacci(n - 2) : 1;
}

onmessage = function(event) {
  return postMessage(fibonacci(event.data));
}

위 코드는 테스트에 사용된 '/public/fibonacci.js' 파일의 내용입니다. 한줄짜리 피보나치(fibonacci) 함수를 호출하고 그 결과를 반환합니다. 이 worker용 자바스크립트 파일은 아래와 같이 사용될 수 있습니다.

var worker = new Worker("/public/fibonacci.js");
worker.onmessage = function(event) {
  alert(event.data);
};
worker.postMessage(10);

실제로 작업 수행이 병렬로 이루어지는지 확인하기 위하여 동일한 피보나치 함수가 worker를 사용하여 실행되는 것과 일반 자바스크립트로 실행한 것을 복합적으로 테스트하고 수행 시간을 측정했습니다. worker가 결과를 응답하는 시간이 매우 불규칙적이고 브라우저가 무작위로 죽어싸서 신빙성 있는 테스트는 어려워 보이네요. 성능 모니터(perfmon.exe)를 토글해서 스레드를 직접 확인해 보세요. 스레드가 급증했다가 줄어들고 그럽디다. 속도도 구린것이 그닥 유용해 보이지는 않군요. 구글 크롬 v8 엔진처럼 자바스크립트 자체를 멀티스레드 처리하는 쪽이 훨씬 현실적이어 보입니다. 이걸 어디다 써먹어나요. 에이~ 완전 뻘짓했네요. DOM Workers는 파이어폭스 부가기능 제작용으로나 적합해 보입니다.

DOM workers Test

덧. 테스트가 공정하지 못했네요. worker 인스턴스를 지속해서 생성하지 않고 참조하게 했더니 속도가 크게 개선되긴 했습니다만, DOM 스크립트만 못한 것은 사실이네요. 백그라운드에서 도는 프로그램에 사용하면 좋겠다는 생각을 했습니다.

Comments(2) | Trackbacks | Hits(389)

넷북을 위한 구글 크롬 OS가 나온답니다.

2009-07-09T22:24:14-07:00

구글 크롬OS는 오픈 소스로 개발되었으며, 넷북을 겨냥한 가벼운 OS입니다. 저희는 올해 말 코드를 공개하고, 구글 크롬OS를 기반으로 하는 넷북이 2010년 하반기 시판될 수 있도록 할 계획입니다. 이 프로젝트와 관련해 이미 파트너들과 협의를 진행시키고 있으며, 조만간 오픈 소스 진영과 실무논의에 들어갈 것입니다. 저희는 언제나 많은 사람들과 구글의 비전을 공유하고자 노력해 왔기 때문에, 모두들 저희가 이루고자 하는 바를 잘 이해하고 있습니다.

구글 크롬OS의 핵심은 스피드, 단순함, 그리고 안전성입니다. 이를 위해 저희는 사용자들이 수 초 내에 웹에 빠르게 연결될 수 있도록 하는 빠르고 가벼운 OS를 디자인하고 있습니다. 사용자 인터페이스(UI)의 경우, 사용자에게 방해를 줄 수 있는 것은 최소한으로 제한하고, 대부분의 사용자 경험이 웹 상에서 일어나도록 했습니다. 구글 크롬 브라우저를 만들었을 때와 마찬가지로 저희는 기본에 충실하고자 OS의 근본적인 보안 아키텍처부터 완전히 다시 설계하고 있습니다. 이를 통해 사용자는 바이러스나 멀웨어, 보안 업데이트 등에 신경을 쓰지 않아도 될 것입니다. 이 모든 것이 OS 상에서 자동적으로 해결이 될 것입니다.

구글 크롬OS는 ARM 칩은 물론 x86에서 모두 구동 될 것입니다. 또 내년에는 다양한 넷북이 출시될 수 있도록 다수의 OEM 업체들과 논의 중에 있습니다. 소프트웨어 아키텍처는 간단합니다 — 구글 크롬이 리눅스 커널 외에 새로운 윈도윙 시스템(windowing system)에서도 구동되게 하는 것입니다. 애플리케이션 개발자에게 웹은 하나의 플랫폼입니다. 따라서 모든 웹 기반 애플리케이션은 자동으로 구동 되며 새로운 애플리케이션은 사용자가 원하는 웹 기술을 통해 만들어질 수 있습니다. 애플리케이션은 물론 구글 크롬OS 뿐만 아니라, 윈도, 맥, 리눅스에서 구동 되는 다른 표준형 OS에서도 구동 될 것입니다. 따라서 개발자들은 어떤 플랫폼이든 최대의 사용자 기반을 확보하게 될 것입니다.

- 구글 공식 블로그 인용

구글이 사전에 공식 발표를 하기도 하는군요. 어찌됐건 매우 흥미로운 프로젝트입니다. Acer, Adobe, ASUS, Freescale, Hewlett-Packard, Lenovo, Qualcomm, Texas Instruments, 그리고 Toshiba 업체와 합작한다고 합니다. 즐거운 상상을 하며 2010년을 맞이할 수 있겠네요.

Comments(2) | Trackbacks | Hits(379)

localStorage - 클라이언트 로컬에 데이터 저장하기

2009-07-08T00:03:32-07:00

HTML 5에 명시된 'localStorage'는 클라이언트 로컬에 데이터를 저장하기 위한 전역 함수입니다. 여기에 저장된 데이터는 장시간 영구적으로 보관할 수 있으며, 오프라인인 경우에도 호출이 가능하다는 특징 때문에 Ajax 응답 결과물 또는 무리한 연산 결과물 등을 캐싱하거나 오프라인 환경을 고려한 데이터베이스 동기화 등 웹 애플리케이션의 성능 향상을 꾀하기 위한 목적으로 사용될 수 있습니다. 부가적으로 서버측 로드는 줄고 트래픽이 절감하는 효과도 발생합니다. 그래서 아래와 같은 스토리지 도우미를 작성했습니다.

/* Local Storage Helper Class */
var Storage = Class.create({
  initialize: function(name, options) {
    this.options = Object.extend({
      clearable: true, // automatically clear data if an error occurred
      delay: 2000, // save data to localStorage after the allotted time
      maximum: 5 // the maximum size in magabytes
    }, options);
    if (typeof localStorage == "undefined" && typeof globalStorage != "undefined")
      localStorage = globalStorage[location.hostname];
    // undefined localStorage if it doesn't already exist
    if (!window.localStorage) localStorage = {
        getItem: function(name) {
          this.data = window.name ? window.name.evalJSON() : {};
          return $H(this.data[name] || (this.data[name] = {})).toJSON();
        }, setItem: function(name, data) {
          this.data[name] = data.evalJSON();
          window.name = $H(this.data).toJSON();
        }, removeItem: function(name) {
          delete this.data[name];
          window.name = $H(this.data).toJSON();
        }
      };
    this.name = name || 'unnamed';
    this.data = this.get();
  },
  // get item from localStorage
  get: function() {
    try { return (localStorage.getItem(this.name) || '{}').toString().evalJSON(); }
    catch(e) { this.options.clearable && this.set({}); }
  },
  // set item to localStorage
  set: function(data) {
    if (data) this.data = data;
    this.timer && clearTimeout(this.timer);
    this.timer = setTimeout(function() {
      if (this.size(true) > this.options.maximum * 1048576) return;
      try { localStorage.setItem(this.name, $H(this.data).toJSON()); }
      catch(e) { this.options.clearable && this.set({}); }
    }.bind(this), this.options.delay)
  },
  // remove item
  remove: function(name) {
    localStorage.removeItem(name || this.name);
  },
  // remove all items
  clear: function() {
    if (!localStorage.length) window.name = '{}';
    else for (i = 0; i < localStorage.length; i++) this.remove(localStorage.key(i));
  },
  // size of localStorage
  size: function(bytes) {
    var data = $H(this.data).toJSON().length;
    return bytes ? data : data > 1024 ? (function() {
      data = (data / 1024).round().toString();
      var reg = /(^[+-]?\d+)(\d{3})/;
      while (reg.test(data)) data = data.replace(reg, '$1' + ',' + '$2');
      return data  + 'kb';
    })() : data + 'bytes';
  }
});

/* Usage */
var MyStorage = new Storage('MyStorage'); // Create the helper instance
var MyData = MyStorage.data; // Read data from localStorage(JSON Object)
MyData['firejune'] = { name: 'Junho, Kyung', age: 33 }; // Update a single data
MyStorage.set(MyData); // Write the data to localStorage
MyStorage.size(); // => '49bytes'

위 코드는 이 블로그의 이미지 프로세싱 결과와 동적인 자바스크립트 호출 결과에 실제로 반영되어 사용되고 있습니다. JSON 자료형으로 입/출력하며, JSON을 문자로 변환 보관~~하기 위해 json2.js 라이브러리를 필요로 합니다.(브라우저가 Native JSON을 지원하지 않는 경우)~~합니다. localStorage를 사용할 수 없는 브라우저인 경우에는 단기적으로 자료 보존이 가능한 'window.name' 프로퍼티에 저장하는 트릭을 사용합니다. 그리고 불필요한(비효율적인, 반복적인) 저장 호출들을 무시하기 위해 타이머(기본 2초)가 적용되어 있으며 옵션으로 타이머 시간값을 변경할 수 있습니다. 신기하게도 'localStorage.setItem'메서드로 자료가 입력되는 동시에 하드디스크를 '드르륵' 긁더라구요.

덧1. 문득 떠오른 뻘아이디어: 이렇게 모인 캐시들을 cometd를 이용해서 접속중인 모든 클라이언트에 전송하고 머지해 버리면 어떤 현상이 발생할까요? 이름하여 '미러링 캐시 이펙트'? ㅎㅎㅎ
덧2. 도메인당 최대 자료 저장량이 브라우저에 따라 다르므로 초기화가 자동으로 이루어질 수 있도록 옵션으로 제공 함(Firefox의 최대 저장량 5 MB)
덧3. window.name을 스토리지로 사용하는 경우에도 인스턴스 단위로 구분하여 저장 함
덧4. 해당 인스턴스의 스토리지 사용량을 반환하는 size() 메서드 추가
덧5. window.name을 스토리지로 사용하는 경우 지속적으로 초기화 되던 버그 수정
덧6. 인스턴스당 최대 저장량을 설정할 수 있도록 함(자동으로 초기화하지 않음)

Comments | Trackbacks | Hits(444)

이미지 프로세싱 - 흑백 이미지로 변환하기

2009-07-07T08:41:45-07:00

마우스 이벤트에 의해 컬러 이미지와 그레이 스케일(흑백) 이미지가 교차되면서 포커싱되는 효과는 시선을 집중시키는 효율적인 방법중 하나입니다. IE의 경우 특정 이미지를 흑백으로 변환하려면 'filter:gray' 스타일 속성을 사용하여 쉽게 해결할 수 있지만 비표준입니다. 비 IE계열 브라우저들은 이에 상응하는 CSS 프로퍼티를 제공하지 않기 때문에 아래와 같은 자바스크립트를 이용하여 이미지를 흑백으로 변환할 수 있습니다.

function grayscale(img) {
  var width = img.getWidth(), height =  img.getHeight();

  // You'll get some string error if you fail to specify the dimensions
  var canvas = new Element("canvas", {width: width, height: height});
  var context = canvas.getContext("2d");
  context.drawImage(img, 0, 0);

  // This function cannot be called if the image is not rom the same domain.
  // You'll get security error if you do.
  var imgData = context.getImageData(0, 0, width, height); 

  // This loop gets every pixels on the image
  for (var x = 0, i; x < width; x++)
    for (var y = 0; y < height; y++)
      imgData.data[(i=x*4+y*4*width)] = imgData.data[i+1] = imgData.data[i+2] =
        (imgData.data[i] + imgData.data[i+1] + imgData.data[i+2]) / 3;

  context.putImageData(imgData, 0, 0, 0, 0, width, height);
  return canvas.toDataURL();
}

// Usages
var img = $('my-image');
img.src = grayscale(img);

img.writeAttribute('src', '/images/smail.gif').observe('load', function() {
  img.stopObserve('load').src = grayscale(img);
});

canvas 요소를 이용한 이미지 프로세싱으로 모든 픽셀을 흑백 데이터로 전환하고 DataURL을 얻는 방법입니다. 위 'grayscale'함수를 사용할 때 세가지 주의해야 할 점이 있습니다. 첫 번째는 이미지의 높이와 너비 값을 얻지 못하는 경우 오류가 발생합니다. 두 번째는 이미지가 완전히 로드된 상태여야합니다. 그렇지 않은 경우 onload 이벤트를 이용하여 호출할 수 있습니다. 그리고 세 번째는 이미지 요소의 'src'속성이 참조하는 경로가 현재 도메인과 일치하지 않는 경우 보안 오류가 발생합니다.

Comments | Trackbacks | Hits(396)

HTML 5 치트 시트(Cheat Sheet) PDF

2009-07-06T09:15:10-07:00

Veign.com에서 HTML 5 레퍼런스(Reference)를 일목요연하게 참조할 수 있도록 한 페이지에 정리한 PDF 파일을 공개했습니다. 변동사항이 생기면 문서의 지속적인 업데이트까지 약속했습니다. 멋지네요!

Comments | Trackbacks | Hits(424)

헉! 배스가 제 손을 물었어요!

2009-07-06T07:54:42-07:00

낚이셨습니다. 연출이였어요;

Comments(1) | Trackbacks | Hits(440)

스트리트 파이터 4 PC판 다운로드

2009-07-04T08:06:30-07:00

제가 사용하는 유료 스토리지 서비스에 "거리의 싸움꾼 4"라는 것이 올라와 있길래 살펴보니 그저께 발매한 스트리트 파이터 4 PC판이더군요. 발매 당일 크래킹되었다고 합니다. 게임에 불감한 요즘 한판하고 지우려는 생각으로 다운로드하고 설치하여 한시간 정도 싱글플레이를 즐겼습니다. 유년시절을 함께한 스트리트 파이터의 향수에 젖어드는 것도 잠시, 정말 잘 만들어진 게임이라는 생각이 들기까지는 그리 오랜 시간이 필요하지 않았습니다. 느닷없이 온라인 대전이 하고 싶어서 덜컥 정품을 구입했습니다. 이제부터 세계의 플레이어들과 대전입니다. 한동안 집구석에 돌아오면 맥주마시고 멍때리는 일은 없겠네요. ㅎㅎ

Comments(3) | Trackbacks | Hits(1054)

XHTML에서 HTML5로 옮겨타기

2009-07-03T22:51:35-07:00

HTML이 새로운 기능들을 가지고 한 세기를 넘어서 되돌아 왔습니다. XHTML과 달리 HTML 5의 장점은 매우 유연하다는 것입니다. HTML 5를 지원하지 않는 브라우저에서도 컨텐츠가 무리없이 출력되도록 설계되었습니다. HTML4에 기반하고 네임스페이스나 스키마가 없기 때문에 요소(Element)의 끝을 정확히 닫지 않거나 따옴표를 생략해도 괜찮습니다. 그리고 호환성이 고려된 추가적인 새 요소들이 대거 추가되었습니다. 구조 요소는 header, footer, nav, aside, figure, section이 있으며 인라인 요소로는 time, meter, progress가 있고 내장 요소로는 video와 audio가 있으며 대화형 요소로는 details, datagrid, command가 바로 새로운 요소들 입니다. 이 세로운 요소들에 대한 이해를 돕기 위해 요소의 역할을 간략하게 메모해 보았습니다.

구조 요소

<section>: 문서의 특정 영역을 구분
<header>: 문서 또는 영역의 머리말에 해당하는 내용 구분
<footer>: 문서 또는 영역의 꼬리말에 해당하는 내용 구분
<nav>: 다른 페이지를 가리키는 링크들의 모음(네비게이션) 구분
<article>: 하나의 글 또는 기사(본문)의 단위 구분

블럭 요소

<aside>: 본문의 흐름에서 벗어나는 내용 구분(참고, 팁, 사이드바, 인용)
<figure>: 이미지, 비디오 등에 자막(캡션) 표현
<dialog>: 사람 간에 일어난 대화 영역 구분

인라인 요소

<mark>: 강조할 필요까진 없으나 주목해야 할 문구를 표현(형광펜)
<meter>: 특정한 범위에 속하는 숫자 값을 표현(월급, 득표율, 테스트 점수 등)
<time>: 특정한 시각을 표현
<progress>: 현재 진행 중인 상태를 표현(다운로드 완료율)

미디어 요소

<video>: 별도의 플러그인 설치를 필요로 하지 않는 동영상 자료를 표시(UI API 제공)
<audio>: 별도의 플러그인 설치를 필요로 하지 않는 음원 자료를 표시(UI API 제공)

상호작용 요소

<details>: 추가적인 상세정보를 담고있는 영역(툴팁의 내용)
<datagrid>: 동적인 데이터를 효과적으로 표현(트리, 목록, 표)
<menu>, <command>: menu는 command 요소를 포함하여 즉각적인 동작 발생(콘텍스트 메뉴)

HTML 5에서 사라진 요소는 acronym, applet, basefont, big, center, dir, font, frame, frameset, isindex, noframes, noscript, s, strike, tt, u입니다. 더욱 자세한 HTML 5의 변동사항은 channy님이 번역한 HTML 4와 HTML 5의 차이점 문서를 참고하세요. 지금까지 부적절하게 사용해왔던 div와 span지옥에서 벋어날 수 있다는 사실을 인지했다면 당신은 이미 HTML 5를 사용할 준비가 된 것입니다. 이제 더 이상 div에 의존하여 class 속성으로 역할을 구분할 필요가 없어진 것이죠. XHTML에서 HTML 5로 옮겨타는 것은 그리 어려운 일이 아닙니다. 그러나 늘 그랬듯이 문제는 IE에서 발생합니다. IE를 제외한 메이저급 브라우저들이 모두 HTML 5를 수용한 상태이지만 IE에서는 HTML 5의 세로운 요소들을 인지하지 못합니다. 이 문제는 아래와 같은 자바스크립트를 상위에서 실행하는 편법으로 해결할 수 있습니다.

!!(window.attachEvent && navigator.userAgent.indexOf('Opera') === -1) && (function() {
    for (var i = 0; i < arguments.length; i++) document.createElement(arguments[i]); 
  })('header', 'footer', 'aside', 'nav', 'article', 'section', 'time');

HTML은 십수년동안 사람과 컴퓨터간 소통할 수 있는 가장 쉬운 언어로 인식되고 즐겨 사용되어 왔습니다. 그리고 HTML 5로 인하여 문서의 용도와 목적 등을 조금더 분명하게 구분하고 표현할 수 있게 되었습니다. 컴퓨터가 이를 체계적으로 이해하면 생각치도 못했던 놀라운 세상이 펼쳐질 것이며, 웹 애플리케이션이 진보하는 밑거름이 될 것이라 믿어 의심치 않습니다.

Comments(1) | Trackbacks | Hits(614)

더욱 빨라진 파이어폭스 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 속성들, Cross-site access XMLHttpRequest, DOM workers, Native JSON 등 다양한 새로운 기술들을 이용할 수 있기 때문이죠.

Comments | Trackbacks | Hits(708)

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(531)

자바스크립트로 만든 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(557)

마침내 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(658)

두각을 드러낸 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(666)

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

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

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

Comments(5) | Trackbacks | Hits(614)

자바스크립트로 구현한 문자인식 제스처 - 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(619)

이미지 프로세싱 자바스크립트 라이브러리 - 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(601)

인터랙티브 데이터 비주얼라이제이션 - 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(787)

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

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

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

Comments | Trackbacks | Hits(811)

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