Rev. 2.73

마이크로소프트에서도 YUI Compressor와 같은 자바스크립트 압축도구를 발표했습니다. 이름이 "Microsoft Ajax Minifier"군요. 이 두 녀석을 간략하게 비교해 보도록 하겠습니다.

사용법:

// Ajax Minifier Best Option
ajaxmin.exe -hc input.js -o output.js

// YUI Compressor Best Option
java -jar yuicompressor-2.4.2.jar input.js -o output.js

YUI Compressor와 비교되는 Ajax Minifier의 두드러진 특징은 Hypercrunch Plus C 옵션을 제공하여 압축 비율을 더욱 높일수 있다고 합니다. 이 옵션은 한 블록에서 동일한 문자열이 반복되는 경우 자동으로 변수에 할당하는 옵션입니다. 다음 출력 결과물을 비교해 보세요.

인풋:

(function(){
  node["onclick"] = function onclick(){
    node["onclick"] = null;
    setTimeout(function() {
      node["onclick"] = onclick;
    }, 1000);
  };
})();

아웃풋:

// Ajax Minifier
(function(){var a="onclick";node[a]=function b(){node[a]=null;setTimeout(function(){node[a]=b},1e3)}})()
 
// YUI Compressor
(function(){node.onclick=function a(){node.onclick=null;setTimeout(function(){node.onclick=a},1000)}})();

YUI Compressor는 주석문을 유지시키는 방법으로 "/*! Comments */"형식으로 작성하는 것을 허용합니다만 Ajax Minifier는 이를 무시하는 군요. 이러한 룰은 YUI Compressor뿐만 아니라 다수의 JS Minifier 도구들이 지원하고 있습니다. 또다른 문제는 IE인지를 구분하기 위한 방법으로 아래와 같은 코드를 쓰는 경우가 종종 있습니다. Ajax Minifier는 이것 역시 무시합니다. 매우 조심해야 할 부분입니다.

var b = false;
/*@cc_on
b = true;
@*/
 
// will be
var b=false;b=true

두 압축기 모두 장단점이 있네요.

Comments

Andrea Giammarchi씨는 Canvas 요소를 사용하지 않고 생 자바스크립트만으로 "리퀴드 이미지 효과"라는 신선한 이미지 출력 효과를 만들어냈습니다. 크게 확대한 이미지요소를 지정한 방향으로 이동시키면서 일치하는 지점의 DIV 요소의 크기를 점진적으로 늘려가는 방법으로 구현되었습니다. 이것은 액션스크립트1 시절에 자신이 작성했던 imageStretcher 코드에서 영감을 받았다고 합니다. MIT 라이센스를 따르며, 용량도 매우 작고, 크로스-브라우저까지 지원합니다. 그가 작성한 데모 중 Sony사의 VAIO 로고를 이용한 적용예제는 참 인상적이더군요. 좌측은 실제로 리퀴드 이미지 효과를 적용해 본 것이며, 적용방법은 다음과 같습니다.

Liquid({
    // image src, whatever format
    src:"myimage.png",

    // element to use as Liquid FX container
    target: document.getElementById("fx") // $("#fx")[0] for lazy people,

    // optional direction, left by default
    // accepted: left, right, bottom, top
    direction: "left",

    // optional scale factor, 2000% by default
    // it is how much the image should be stretched
    scale: 2000,

    // optional speed, 1 to whatever, by default 10
    speed: 10,

    // optional callback,will be executed at the end of the FX
    callback:function(){alert("it's Liquid!")}

    // optional onload to perform some operation after the image has been loaded
    onload:function(){FX not started yet but image loaded}

    // optional reverse property over a completed liquid FX
    reverse:true
});

Comments

Jacqueline씨는 한 때 유행했지만 더이상 사용하지 않는 것이 이롭다고 판단되는 웹 디자인 트렌드 항목들을 정리하여 Web Design Ledger에 기고했습니다. 이 글은 의역한 것이며 개인적 견해이고 다소 과격한 표현을 일부분 포함하고 있으므로 참고용으로만 이용해 주세요.

실제로 아래 항목들 중 다수는 웹디자이너들을 고취시켰고 대량의 카피 디자인이 생산되었습니다. 영감을 받는 것 자체는 좋은 일입니다. 이를 응용하여 더욱 그럴싸한 2차 결과물이 도출될 수 있기 때문이죠. 그러나 대부분 이를 그대로 사용해 줄 것을 요구하거나 재사용하기 때문에 창의적이지 못한것은 물론 디자이너에게 굴욕감을 안겨주기도 합니다. 우수한 디자이너는 자신만의 디자인 트렌드를 만들고 그것을 설득력있게 표현합니다. 아래와 같은 웹 디자인들이 왜 선호하는 웹 디자인 트렌드가 되었는지 여기에서 배울점은 무엇인지를 생각해보고 이해해 보도록 합시다.

텍스트 또는 물체의 반사효과


공간감을 연출하는 반사효과는 대표적인 웹디자인 트렌드 중 하나입니다. 딱딱한 2D 이미지를 사실적으로 표현하는데 효과적입니다. 그러나 이것을 잘 못 사용하는 경우가 다반사입니다. 단순히 개체를 뒤집어 놓기만 해서는 오히려 역효과가 발생할 수도 있습니다.

아쿠아 버튼


대단히 선풍적인 인기를 끌었던 아쿠아 버튼입니다. 푸른 색상을 가진 반짝이고 투명해 보이는 이 버튼은 포토샵으로 10분이면 만들어 낼 수 있습니다. 2005년 이후로 아쿠아 버튼은 자취를 감췄습니다.

장식


이러한 장식은 사이트를 강조하기 위한 목적으로 사용됩니다. 이것은 더이상 신선하지 않습니다. 어설프게 사용하면 조잡한 느낌을 주고 공간 효율성이 떨어지기 때문에 지금은 잘 사용되지 않습니다. 하지만 미술에 재능이 있는 웹 디자이너에 의해 매우 잘 융합된 사이트들을 간간히 접할 수 있습니다.

책상위의 커피


바탕에 둔 커피는 어딘가를 오염시킨다는 점을 잊지마세요. 이러한 디자인의 관점을 저는 도저히 이해할 수 없습니다. 사용자의 시점은 일어서서 책상위를 보고있는 것인가요? 이러한 웹 디자인 추세는 중지되어야 합니다.

지구회전 애니메이션


아주 오래전, 빙글빙글 도는 지구는 상습적으로 등장하는 웹 디자인 요소였습니다. 그러나 사이트의 성격과는 무관한 경우가 대부분이었죠.

코믹 선스 글꼴


글꼴의 이름이 "코믹 선스"임에도 불구하고 재미 없습니다. 웹사이트가 주는 재미를 전달하는데 자주 사용되었습니다. 이 글꼴은 지금도 존재하고 있습니다. 다행히도 전염병처럼 모든 디자이너들이 이 글꼴을 기피하고 있습니다.

식상한 스톡 이미지


위와 같은 이미지를 첫 페이지에 내 걸고 있는 기업 사이트들을 본 적이 있나요? 사장님들은 요딴 이미지를 전면에 배치하는 것을 좋아라 합니다. 하지만 조금 더 현실적인 무엇인가를 고객에게 제시하는 것이 더욱 좋습니다.

찢어진 노트 종이


웹사이트에서 현실적인 구성요소를 표출하는 것은 재미있습니다. 그러나 종이를 이용하는 것은 독창성이 부족합니다. 종이의 질감표현은 이미 범람했기 때문에 피하는 것이 좋습니다.

폴라로이드


한 순간 모두가 폴라로이드를 디자인 요소로 도입한 시간이 있었습니다. 이 복고 트렌드는 그 유용성이 없는 지금도 자리잡고 있습니다.

거대한 RSS 또는 트위터 아이콘


웹 페이지의 절반만한 크기의 거대한 RSS 또는 트위터 아이콘을 배치하는 것은 방문자를 불쾌하게 만들고 모욕감을 주기도 합니다. 이러한 아이콘들은 사용하지 않는 것이 좋습니다.

자동 재생 음악


당신이 좋아하는 음악을 방문객들도 좋아해 줄까요? 웹사이트에서 자동으로 음악을 재생하는 일은 더이상 발생해서는 안됩니다.

카운터


방문자 카운터는 해당 사이트의 인기도를 가늠하는 방법으로 사용되어 왔습니다. 카운터는 매우쉽게 조작될 수 있다는 사실을 모두 알고 있기 때문에 방문자들은 더이상 이것을 신용하지 않게 되었습니다. 다행히도 카운터를 표시하는 것은 과거의 트렌드가 되고 있기 때문에 행복합니다.

마퀴


마퀴(Marquee)는 1990년 후반에 최고로 멋진 웹사이트 디자인 요소로 자주 사용되었습니다만, 곧 사라져 버렸습니다.

프레임


검색 엔진은 프레임 감옥에서 탈출할 수 있도록 유도한 주요한 역할을 해 주었습니다. 한 페이지를 표시하기 위해 여러개의 HTML을 사용하는 것은 적합하지 않다는 것을 깨달기까지는 그리 오랜 시간이 필요하지 않았습니다.

사용자 선택


"플래시 또는 HTML 버전?", "이전 사이트 또는 새 사이트?", "전체 화면 또는 기본화면?" 웹페이지로 접근하기 전에 방문자에게 이러한 질의를 던질 필요는 없습니다. 어떠한 환경에서도 잘 보이게 만드는 디자이너들이 인기가 높아졌으니까요. 열심히 만들어 놓은 웹 페이지를 보여주기도 전에 방문객을 놓쳐버릴 수도 있다는 사실을 잊지마세요.

스킵 버튼 없는 인트로


스킵버튼 없는 긴 인트로는 사용자가 웹페이지를 닫아줄 것을 요구하는 것과 같습니다. 더이상 방문자의 인내심을 시험하지 마세요.

검은색 배경


다소 민감한 주제입니다. 검은 배경이 남용되던 시절이 있었습니다. 그리고
검은 배경은 유행에 뒤떨어져 있습니다.

Comments