Rev. 2.73

얼마 전 Flotr2를 배포한 Humble software development에서 만든 JS-ImageDiff는 HTML5 Canvas 요소를 이용하여 이미지의 변동사항을 비교할 수 있게 하는 자바스크립트로 작성된 작은 유틸리티입니다. Node.JS용으로도 배포되었으며 사용법과 실행 결과는 다음과 같습니다.

var a = new Image()
  , b = new Image()
  , count = 0
  , canvas, context, c;

a.onload = b.onload = function () {
  count++;
  
  // Both images have loaded.
  if (count >= 2) {
    canvas = imagediff.createCanvas();
    canvas.width = 200;
    canvas.height = 200;
    context = canvas.getContext('2d');
    c = imagediff.diff(a, b);
    context.putImageData(c, 0, 0);
    document.body.appendChild(canvas);
  }
};

a.src = '/image/a.jpg';
b.src = '/image/b.jpg';

document.body.appendChild(a);
document.body.appendChild(b);

Comments

하위 버전 의존도가 높은 IE에서 호환성을 유지하기 위해 다양한 방법의 트릭들으로 스타일을 유지해 왔습니다. IE 관련 스타일 이슈들이 디펙되어 가는 모습은 마치 게임속의 몹을 잡는듯한 희열을 안겨주지만, 스파게티가 되어가는 코드들을 짜고 앉아 있자니 마음 한구석이 짠해지는 경험을 이 바닥에 있는 분이라면 다들 경험해 보셨을 거란 생각을 합니다. 기획자분이 불현듯 출현해 졸라 미안한 표정으로 "IE6 하위 호환성은 이제 우리도 포기한대요."라는 대사를 칠까 봐 두렵기까지 합니다. 시맨틱이고 나발이고 밑바닥부터 다시 재작성해야 할 공산이 크니까요. 이러한 상황에 대응하기 적합한 새로운 트릭이 있어 여기에 공유합니다. 바로 조건부 주석을 십분 활용하는 것이죠.

<!--[if lt IE 7 ]><body class="source ie ie6"><![endif]--> 
<!--[if lt IE 8 ]><body class="source ie ie7"><![endif]--> 
<!--[if gte IE 8 ]><body class="source ie"><![endif]--> 
<!--[if !IE]><!--><body class="source"><!--<![endif]-->

이 코드는 body 요소에 IE 버전을 구분할 수 있는 클래스 이름을 지정하여 CSS 핵으로 떡칠이 되어있는 스타일 시트를 이제 클래스 이름만으로 깔끔하게 구분할 수 있게 되었습니다. 하지만 IE 계열 브라우저에서만 사용되는 코드들 때문에 불필요한 로딩지연으로 선량한 브라우저들이 피해를 받는다고요?

<link rel="stylesheet" href="/css/style.css" type="text/css" />
<!--[if lt IE 7 ]><link rel="stylesheet" href="/css/ie6.css" type="text/css" /><![endif]--> 
<!--[if lt IE 8 ]><link rel="stylesheet" href="/css/ie7.css" type="text/css" /><![endif]--> 
<!--[if gte IE 8 ]><link rel="stylesheet" href="/css/ie8.css" type="text/css" /><![endif]-->

요렇게 하면 아예 버전별로 스타일을 구분하여 로드할 수 있습니다. IE6 호환성을 해제하려면 ie6.css만 제거하는 것으로 간단하게 해결되지요. 물론, 더 응용하면 하위 IE가 아니거나 하위 버전에서만 필요로 하는 자바스크립트 컴포넌트나 모듈을 구분하여 작성하고 위와 같이 로드할 수도 있겠습니다.

Comments

curtain.png

Victor Coulon씨가 작성한 Curtain.js는 긴 내용을 다루는 싱글 페이지로 구성된 웹 페이지에 멋진 전환 효과를 부여하는 jQuery 플러그인입니다. 문서의 섹션을 패널들로 화면에 고정하고 해당 패널을 스크롤 하면 마치 커튼이 타고 올라가는 듯한 페이지 전환효과가 발생합니다. 스크롤 바나 마우스 휠 또는 키보드를 이용하는 종전의 관습을 그대로 따르기 때문에 사용자에게 혼란을 일으키지 않으면서 마치 상호작용이 발생하는 듯 한 전환 효과를 만들어낼 수 있습니다. 기본적인 사용방법은 다음과 같아요.

$(function () {
    $('.curtains').curtain({
        scrollSpeed: 600,
        menu: $('.menu')
    });
});

Victor Coulon씨는 Edits Quarterlyinterviewmagazine.com, madebygrave.com 등의 사이트에서 영감을 얻었다고 말했으며 이 소스를 누구나 사용할 수 있도록 소스를 GitHub에 공개했습니다. 트렌디하면서 인터랙티브한 컨텐츠를 제공하는 느낌을 아주 쉽게 날로 먹을 수 있겠군요.

Comments