Firejune Blog

ANS-9010 램디스크 사용기

2009-11-10T01:04:39-08:00

지난 9월 초순에 ANS-9010 램디스크 드라이브와 2GB(DDR2 800MHz) 메모리 8개를 덜컥 구입하였습니다. ANS-9010이 495,000원, 메모리가 개당 38,000원, 총 구입비용은 799,000원 입니다. 지금은 메모리 가격이 많이 올랐더군요. ANS-9010의 전송속도를 SATA 3.0Gbps로 설정하고 RAID0으로 구성하여 사용 중입니다. 윈도7 울티메이트(x64 영문)를 무리없이 설치할 수 있었고 약 2GB 정도의 여유공간이 생겨서 주요한 소프트웨어들까지 설치하는데에도 문제가 없었습니다. 소문대로 성능은 당대 최고입니다. 아래는 미국 PC World지에서 제공하는 WorldBench를 이용하여 The Tech Report에서 실시한 벤치마크 결과의 종합 점수입니다. 보시다시피 최신 스토리지 하드웨어들을 그 대상으로 합니다. 그 다음으로는 CrystalDiskMark를 이용하여 직접 실시한 테스트 결과입니다. 집에서 사용 중인 WD 벨로시랩터(VelociRaptor) 두개를 RAID0으로 구성한 것과 사무실에서 사용하는 삼성 HD322HJ를 비교하였습니다.

RAID0, DDR2 800 MHz(PC2 6400)

RAID0, 16 MB 캐시, 10,000 RPM

Normal, 16 MB 캐시, 7,200 RPM

성능은 확실히 먹어줍니다. 그러나 치명적인 단점이 있습니다. 휘발성 메모리를 스토리지로 사용하기 때문에 지속적으로 전력이 공급되어야 합니다. PC가 슬립모드로 진입하고 자칫하여 백업 배터리의 수명이 다할 동안 방치(약 1시간)하면 저장한 내용들이 홀랑 날아가 버립니다. 그나마 다행인 것은 약 8분 정도면 윈도7의 설치가 뚝딱 완료되기 때문에 PC를 사용하려면 OS부터 쳐 깔고 시작했더랬습니다. 설치 횟수를 기억하지 못할 즈음 PC가 잠들지 않도록 절전 설정을 변경하고 한동안 지냈습니다만, 여간 시끄러운게 아닙니다. 그래서 같은 고민을 가진 사용자가 있는지 검색하다가 한 일본분의 글을 보게 되었습니다. 외장 전원을 자작하여 자료를 보존하는 방법에 대한 내용입니다. AC 어댑터(12V 2.5A)와 4핀 전원 케이블을 용접해서 PC의 전원을 차단해도 자료가 무사히 보존되도록 한 것입니다. 올커니! 당장에 만들어 버리려는 심산으로 부품 목록를 작성해서 용산에 위치한 어댑터 전문 매장으로 달려가 정황을 설명하니 걍 만원짜리 완제품(P1205-20-6)을 주네요(;) ANS-9010을 개인용도로 사용하려는 분들에게 이 AC 어댑터 적극 권장합니다. 사용기는 안쓰고 뻘소리만 했네요. 뻘소리 한김에 하나더, MBR 뻑난 구형 랩터(74G) 두개를 A/S했는데 신형 벨로시랩터(300G) 두개로 그자리에서 교환해 줍디다.

Comments | Trackbacks | Hits(214)

SVG와 Audio 요소를 접목한 3D 음향 파장

2009-11-09T07:10:53-08:00

웹 브라우저 성능의 한계를 시험하는 것을 즐기시는 Ricardo Cabello씨는 HTML5의 audio요소와 SVG요소를 접목하여 3차원 음향 파장을 만들어 냈습니다. 헉! HTML5의 audio 요소 명세를 살펴보면 음향 신호를 분석할 수 있는 API는 없습니다. 깜놀해서 소스를 까보니, 사운드 레벨에 대한 값을 50프레임 단위로 기록해 놓으셨더군요. 이 사운드 레벨과 SVG요소를 이용해서 파장을 만들고 흘러 나오는 음악과 싱크를 맞춘 것입니다. BASS for linux 라이브러리를 이용해서 값을 추출할 수 있었다고 하네요. 참 대단하신 분입니다.

Comments | Trackbacks | Hits(172)

초경량 CSS 애니메이션 자바스크립트 프레임웍 - Émile

2009-11-09T06:24:27-08:00

Thomas Fuchs씨는 주석을 포함하여 총 50라인으로 작성된 초경량 CSS 애니메이션 자바스크립트 프레임웍인 "Émile"를 만들고 공개했습니다. Émile는 CSS 프로퍼티들을 작성하고 시간 간격을 설정하는 것만으로 중간 과정의 애니메이션이 만들어 집니다. 그리고 사용자 정의 "easing"과 콜백을 완벽하게 수행합니다. 사실 Effect.morph 때문에 Script.aculo.us의 effect.js를 기본으로 로드하고 있는데, 몽창 덜어내버릴지를 심각하게 고민하고 있습니다. 덜어낸다고 삽질하다가 Scripty2가 홀랑 출시되어버리면 참 허무할텐데 말이죠.

HTML:

<script src="emile.js"></script>
<div id="test1" style="position:absolute;left:0px;background:#f00;opacity:0">test</div>
<div id="test2" style="border:0px solid #00ff00;position:absolute;left:0px;top:400px;background:#0f0">test</div>

Javascript:

emile('test2', 'left:300px;padding:10px;border:50px solid #ff0000', {
  duration: 500,
  after: function(){
    emile('test1', 'background:#0f0;left:100px;padding-bottom:100px;opacity:1', {
      duration: 4000, easing: bounce
    });
  }
});
 
function bounce(pos) {
  if (pos < (1 / 2.75)) {
    return (7.5625 * pos * pos);
  } else if (pos < (2 / 2.75)) {
    return (7.5625 * (pos -= (1.5 / 2.75)) * pos + .75);
  } else if (pos < (2.5 / 2.75)) {
    return (7.5625 * (pos -= (2.25 / 2.75)) * pos + .9375);
  } else {
    return (7.5625 * (pos -= (2.625 / 2.75)) * pos + .984375);
  }
}

Comments | Trackbacks | Hits(210)

2010년에 대비하여 알아두면 좋은 웹 디자인 트렌드

2009-11-07T09:00:19-08:00

Web Design Ledge에서는 "한물간 웹 디자인 트렌드"포스팅에 이어 다가올 2010년에 대비하여 미리 알아두면 좋은 웹 디자인 트렌드 14가지를 소개합니다. 여기에 소개할 항목은 2009년에 인기가 급상승했고 지속적인 선호도를 보여준 디자인 아이템입니다. 트렌드화 시키는데 있어서 중요한 것은 추세의 바탕이되는 아이디어입니다. 개개의 트렌드 아이디어에 초첨을 두고 새로운 트렌드를 이해하십시오. 그 다음 트렌드는 당신의 것일 수도 있습니다.

대형 로고와 헤더

지금까지는 방문자에게 깊은 인상을 남기기위하여 시작페이지를 즐겨 사용했습니다. 하지만 최근들어서는 로고를 크게하거나 헤더영역을 크게 사용하여 그 역할을 대신하고 있습니다. 시작 페이지와는 달리, 사용자에게 선택을 강요하지 않는 장점이 있습니다.

Matt Mullenweg

스케치 또는 손그림 디자인

손으로 그린 풍의 디자인이 결코 새로운 것은 아니지만, 지속적으로 즐겨 사용되는 디자인입니다. 최근에는 요소 단위에 손으로 그려진 디자인 요소를 배치하는 추세입니다. 주로 개인 사이트에 사용되었었지만 이제는 기업 사이트에서도 손그림 디자인이 자주 등장하고 있습니다.

Biola Undergrad

슬라브(Slab) 글꼴

조판용 굵은 서체인 슬라브 글꼴은 서부극에 자주 등장하는 "Wanted"포스터를 연상시킵니다. 이것은 굵고 큰 문자를 대담하게 사용하여 방문자에게 영향을 줍니다. "대형 헤더와 로고"와 함께 사용하면 보다 효과적입니다.

Edgepoint Church

타이포그라피(Typography)

웹 디자인을 사진에만 의지하지 않고 타이포그라피에 비중을 두면 더욱 이목을 집중시키게 됩니다. 글꼴, 크기, 위치, 목적, 조합 이 모든 조건을 만족하면 매우 훌륭한 타이포그라피 디자인이 될 것입니다.

Elysium Burns

단일 페이지 레이아웃

방문객을 한 페이지에 머물러있게 하는 것으로, 마치 명함을 보는듯한 느낌을 줍니다. 전형적인 페이지 탐색이라는 고정관념을 깨버리고, 미니멀적인 접근이 가능해집니다.

Zach Klein

거대한 이미지

임팩트있는 이미지는 사용자에게 강한 인상을 전달하는 시각적 효과가 있습니다. 처음에 소개한 "대형 헤더와 로고"와 상대적으로 동일한 효과를 가지지만, 사이트 브랜딩은 될 수 없다는 것입니다.

Digitalmash

관점의 이동

책상 위에서 바라는 위치에서 또다른 현실적인 관점을 제공하는 것으로 방문객에게 공간감과 안정감을 줄 수 있습니다.

Pastorant Restaurant

인터랙티브(Interactive) / 직관적인 디자인

종전의 플래시 인터페이스는 조잡하거나 조작방법이 어려워 이용조차 할 수 없는 경우를 자주 접할 수 있었습니다. 최근에는 보다 직관적으로 조작을 할 수 있도록 유도하는 디자인이 많아졌습니다.

Crowley Webb and Associates

모달(Modal) 대화상자

팝업 창은 이제 거의 사라져서 찾아보기 힘들고 그 역할을 대신하는 것이 바로 모달 대화상자입니다. 최근 들어서는 설치방법이 매우 쉬워졌으며, 사용성에도 문제가 없는것으로 알려져 즐겨 사용되고 있습니다.

Digg

미니멀리즘(Minimalism)

오래된 미니멀 웹사이트는 잊으세요. 이제는 충분한 공백과 대담한 타이포그래피와 하이 센스 컬러 스키마를 사용하게 될 것입니다.

Kyle Standing

초대형 푸터(Footer)

엄청난 크기의 푸터를 한번즘은 경험해 보았을 것입니다. 단일 웹 서비스가 전달해야 할 부가 정보들의 양이 많아지면서 푸터의 사용방법이 점차 달라지고 있으며 앞으로 더욱 과장된 푸터가 성행할 것입니다.

old loft

복고(Retro)

복고 풍의 디자인은 계속되고 있습니다. 디자인 커뮤니티에서는 이와 같은 디자인을 존경합니다. 복고 디자인을 활용할 수 있는 새로운 방법을 찾아야 합니다.

LEVEL 2D

인트로 상자

자신의 소개말 또는 인사말 등을 독특하게 전달하는 최고의 방법입니다. 이것은 지루한 텍스트 대신 새로운 픽업 라인을 찾을 것입니다.

Alessandro Cavallo

잡지 레이아웃

잡지의 표지와 유사하게 컨텐츠 하나하나를 신중하게 배치하고 디자인하는 흐름이 있습니다. 신문이나 잡지의 레이아웃을 빌려 사용자에게 친숙함을 전달할 수 있습니다.

bmi Voyager

Comments(7) | Trackbacks | Hits(796)

Cappuccino로 구축한 웹기반 목업 - Mockingbird

2009-11-06T20:22:42-08:00

Mockingbird는 Cappuccino 프레임웍으로 구축한 웹기반 목업(mockup) 애플리케이션 입니다. 온라인상에서 페이지의 와이어-프레임을 쉽게 그려내고 그 결과물을 다른 사람과 공유할 수 있습니다. 모든 UI 요소들을 갖추고 있으며, 끌어다 놓기와 개체의 크기 조정이 자유롭고 링크를 제공하여 여러 페이지들의 연결고리를 만들어 낼 수 있습니다. 실행가능 한 데모를 제공하고 있으니 직접 체험해 보세요.

Cappuccino는 "Objective-J"라는 새로운 언어를 사용하여 만들어진 오픈소스 프레임웍으로 Cocoa 프레임웍을 웹으로 포팅한 것입니다. 데스크탑 소프트웨어와 유사한 애플리케이션을 자바스크립트와 같은 웹 표준 기술에 의존하여 구현하는 것에 목적을 두고 있습니다.

Comments | Trackbacks | Hits(327)

자바스크립트 라이브러리들의 도우미 Underscore.js

2009-11-06T18:08:22-08:00

Jeremy Ashkena씨는 작고 유용한 자바스크립트 라이브러리인 Underscore.js를 공개했습니다. 달러("$")가 아닌 언더스코어("_")를 사용하기 때문에 Prototype이나 jQuery의 코어를 확장하지 않는 형태로 Collections, Arrays, Functions, Objects에 대한 45개의 유틸리티 함수들을 제공합니다. 그리고 자바스크립트 1.6에서 제공하는 순수 기능 활용하기 때문에 브라우저가 이를 지원한다면 풀-스피드로 작동하게 됩니다. 벤치마크 페이지에서 직접 테스트 해 보세요.

var func = function(greeting){ return greeting + ': ' + this.name };
func = _.bind(func, {name : 'moe'}, 'hi');
func(); //=> 'hi: moe'

Collections : each, map, reduce, reduceRight, detect, select, reject, all, any, include, invoke, pluck, max, min, sortBy, sortedIndex, toArray, size

Arrays : first, last, compact, flatten, without, uniq, intersect, zip, indexOf, lastIndexOf

Functions : bind, bindAll, delay, defer, wrap, compose

Objects : keys, values, extend, clone, isEqual, isElement, isArray, isFunction, isUndefined

Utility : noConflict, identity, uniqueId, template

Comments | Trackbacks | Hits(235)

Prototype 셀렉터 벤치마크

2009-11-06T03:22:24-08:00

Prototype 코어팀의 Tobie Langel씨가 GitHub에 흥미로운 커밋을 했군요. Prototype의 DOM 셀렉터 엔진을 사용자가 지정하여 빌드할 수 있게 한 것입니다. "NWMatcher" 셀렉터를 사용하려면 아래와 같은 명령으로 빌드할 수 있다고 합니다. 자세한 빌드 방법을 Outsider님께서 포스팅 해 주셨네요.

C:\Workspace\prototype>rake dist SELECTOR_ENGINE=nwmatcher

일전에 "Prototype with Sly is 3x faster"라는 글을 작성했습니다. 그리고 SlickSpeed를 이용하여 개인적인 테스트도 해 보고 실제로 적용하여 사용하고 있습니다. 문득 성능이 궁금하여 Sizzle과 NWMatcher로 빌드된 Prototype을 측정해 본 결과 아래와 같았습니다. NWMatcher가 짱먹었네요.

browsers / selectors	Sizzle+	NWMatcher+	Sly+	Prototype	jQuery
Chrome(v4.0)	3772	4283	4052	2715	4226
Firefox(v3.5)	844	1895	942	565	900
IE(v8.0)	569	854	1156	408	1034
Safari(v4.0)	4302	6035	4845	2418	4805

final points (more is better)

Comments(2) | Trackbacks | Hits(380)

Scriptaculous 1.8.3 업데이트

2009-11-05T09:31:13-08:00

Scriptaculous가 1.8.3으로 조용히 업데이트 되었습니다. 지난 10월 8일날 있었다고 하는데 왜 그동안 몰랐을까요? 아무튼, 필요로하는 Prototype의 버전이 1.6.1으로 갱신되었습니다. 몇몇 버그와 이슈가 해결되었고 effect.js의 사용하지 않는 코드를 제거했다고 합니다. 더욱 자세한 내용은 CHANGELOG를 참고하세요.

Comments | Trackbacks | Hits(257)

SproutCore의 KVO(Key Value Observing)

2009-10-31T12:36:21-07:00

지금까지 SproutCore의 프로젝트를 생성하고, 레이블-뷰를 작성해 보고, 뷰에 컨트롤러도 할당해 보고 바인딩한 값을 버튼으로 조작해 보았습니다. 이제 SproutCore의 진정한 힘을 체험해 볼 시간입니다.

SproutCore의 바인딩(Binding)은 매우 유용합니다. 이 바인딩이라는 강력한 특징을 부여하는 것은 실제로 SproutCore의 "Key Value Observing"(KVO)때문입니다. KVO의 간단한 의미를 이렇게 정의할 수 있습니다. 불특정한 SproutCore의 개체가 속성이 변경될 때 마다 알려주는 녀석이라고 말이죠. 예를 들면, 당신은 "firstName"과 "lastName"속성을 가진 모델 개체를 가지고 있습니다. 그리고 당신의 컨트롤러가 이 두 속성을 감시하고 있다면, 컨트롤러가 가진 메서드들에 의해 언제라도 변경된 속성을 호출할 수 있습니다.

SproutCore의 옵저빙(Observing)은 응용프로그램의 상태변화를 모니터링하는 매우 강력한 방법입니다. 하나의 클래스를 작성하고 클래스의 프로퍼티가 갱신되면 옵저버들이 속성의 변화된 값을 정확하게 알아내고 그에 따른 행동을 시작합니다. 지금부터 옵저버를 설정하는 방법을 알아봅시다.

종전에 버튼을 생성하고 버튼을 누를 때 마다 바인딩(트리거)에 의해 액션이 실행되도록 비교적 간단하게(평범하게) 구현했었습니다. 그러나 버튼은 "겨짐" 또는 "꺼짐" 상황을 표현하는 데에는 적합하지 않았습니다. 그래서 버튼을 채크박스(checkbox)로 변경하고 레이블-뷰의 변경 상태를 옵저버에 의하여 확인되도록 할 것입니다. "app.js"를 열고 "HelloWorld.appController"를 다음과 같이 작성해 주세요.

HelloWorld.appController = SC.Object.create({
  greeting: "Hello World!",
  isClockShowing: NO,
  isClockShowingObserver: function() { 
    var isClockShowing = this.get('isClockShowing') ; 
    var newGreeting = (isClockShowing) ? 'CLOCK!' : 'Hello World!' ; 
    this.set('greeting', newGreeting) ; 
  }.observes('isClockShowing')
}) ;

SproutCore에서 "YES"는 true를, "NO"는 false를 정의하고 있습니다. 마음에 들지 않는다면 false를 사용해도 무방합니다. "isClockShowing"속성과 "isClockShowingObserver"라는 함수를 선언했습니다. 그리고 함수 선언과 동시에 "observes"메서드를 통하여 "isClockShowing"이 감시할 대상임 알려줍니다. 정말로 감시가 되고 있는지 확인해 봅시다.

SC.run(function() { HelloWorld.appController.set('isClockShowing', YES); });

노트: SproutCore의 "get" 그리고 "set"메서드는 대단히 중요한 역할을 수행합니다. 왜냐하면 이 두 메서드를 통하여 옵저버들에게 속성 값의 변화여부를 알려줄 시기를 잡아낼 기회를 부여하는 계산이 포함되어 있기 때문입니다. 그래서 "foo.bar = X"와 같은 전형적인 변수할당 방법은 사용하지 않는 것이 좋습니다. 그리고 정 "get", 또는 "set"이름을 가진 프로퍼티를 사용하고 싶다면 언더스코어("_")를 사용하여 메서드들이 오버라이딩 되는것을 피하도록 하세요.

자, 옵저버가 잘 돌아가고 있나요? 그렇다면 이제 체크박스-뷰를 만들 순서입니다. "main_page.js"를 열어 "buttonView"를 제거하고 대신 "checkboxView"를 아래와 같이 작성합니다.

    childViews: 'labelView checkboxView'.w(),
    checkboxView: SC.CheckboxView.design({       
      layout: { centerX: 0, centerY: 20, width: 250, height: 18 },       
      title: "Show Clock",       
      valueBinding: "HelloWorld.appController.isClockShowing"
    }),

"checkboxView"의 valueBinding은 "HelloWorld.appController"의 "isClockShowing"속성입니다. 이것은 체크박스를 조작하여 "isClockShowing"속성 값을 갱신할 수 있다는 것과 반대로 "isClockShowing"속성 값의 변화에 의해 체크박스의 디스플레이가 변화할 수도 있음을 의미합니다. 이것이야말로 지금까지 우리가 그토록 바라던 마법과도 같은 것이란 말예요! 브라우저를 새로 고친 후 직접 확인해 보세요.

조금전에 컨트롤러에 작성했던 "isClockShowingObserver"메서드를 재작성하고 SproutCore에서 제공하는 Timer를 이용한 몇몇 메서드를 추가로 작성해서 진짜 시계를 만들어 봅시다.

  isClockShowingObserver: function() { 
    var isClockShowing = this.get('isClockShowing') ;  
    // create a timer if it does not exist already 
    if (!this._timer){
      this._timer = SC.Timer.schedule({ 
        target: this, 
        action: 'tick', 
        repeats: YES, 
        interval: 1000 
      });
    }  
    // pause the timer unless the clock is showing   
    this._timer.set('isPaused', !isClockShowing) ;  
    // update right now 
    var newGreeting = (isClockShowing) ? this.now() : 'Hello World'; 
    this.set('greeting', newGreeting) ;
  }.observes('isClockShowing'),
  tick: function() { 
    this.set('greeting', this.now()) ; 
  },  
  now: function() { 
    return new Date().format('hh:mm:ss'); 
  }

페이지를 새로 고침 하세요. 그리고 체크박스를 클릭해 보세요. 시계가 보이나요? 시계 모양이 좀 구리죠? 마지막으로 모양을 다듬고 스타일시트(CSS)를 추가로 작성해 보겠습니다. "main_page.js"를 열고 아래와 같이 작성합니다.

mainPane: SC.MainPane.design({     
  childViews: 'labelView checkboxView'.w(),      
    labelView: SC.LabelView.design({       
    layout: { centerX: 0, centerY: 0, width: 300, height: 50 },       
    valueBinding: "HelloWorld.appController.greeting"      
  }),      
  checkboxView: SC.CheckboxView.design({       
    layout: { centerX: 0, centerY: 30, width: 300, height: 18 },       
    title: "Show Clock",       
    valueBinding: "HelloWorld.appController.isClockShowing"
  })   
}).classNames('clock')

그리고 새로운 css파일을 등록해야 합니다. "main_page.js"가 위치한 "resources"폴더에 "clock.css"이름의 파일을 다음과 같이 작성하여 저장하세요.

.clock {   
  background: black;   
  color: white; 
}  
.sc-theme .clock .sc-label-view {   
  font-size: 48px;   
  line-height: 1.0; 
}

페이지를 새로 고칩니다. 훌륭한 시계가 만들어졌네요! 이것으로 "Hello World!" 튜토리얼을 마칩니다. 우리는 지금까지 SproutCore의 bindings, observers, controllers, views, 그리고 view helpers에 대하여 알아보았습니다. 이제 당신은 SproutCore를 이용하여 간단한 애플리케이션을 만들 준비가 된 셈입니다. SproutCore에 대하여 더 많은 학습이 필요하다면, SproutCore의 Reference 문서를 숙지하세요. 그리고 이미 만들어진 프로젝트를 다운로드하여 분석해 보세요. GitHub에 널렸습니다.

Comments | Trackbacks | Hits(497)

SproutCore에서 바인딩(Binding) 조작하기

2009-10-31T09:28:02-07:00

"SproutCore의 Views 작성하기"에서 뷰(View)와 컨트롤러(Controller)를 작성해 보았습니다. 이제 상호 작용을 발생시키는 버튼을 페이지에 추가해 보도록 하겠습니다. 페이지에 한 구성요소를 삽입하기 위해서 다른 방해 구성요소들로 인해 삽질해 본 경험이 있으신가요? SproutCore를 사용하면 그러한 방해 구성요소들에 대해서 걱정할 필요없이 하나에만 집중할 수 있습니다. 지금부터 학습할 내용은 "labelView"에 바인딩된 컨트롤러의 "greeting"속성 값을 조작하기 위한 새로운 메서드와 버튼를 추가하여 서로 다른 두가지 상황을 연출할 것입니다.

SproutCore에서 새로운 메서드를 추가하는 일은 정말 쉽습니다. 새로운 하위 클래스를 작성하거나 이와 비슷한 짓거리를 할 필요가 없기 때문입니다. 속성을 추가하는 일도 마찬가지 입니다. "app.js"파일을 열고 "HelloWorld.appController"클래스에 아래와 같은 메서드를 그냥 추가하고 브라우저를 "새로 고침"합니다.

  toggleGreeting: function() {
    var currentGreeting = this.get('greeting');
    var newGreeting = (currentGreeting === 'Hello World!') ?
      'I am on SproutCore!' : 'Hello World!' ;
    this.set('greeting', newGreeting);
  }

그리고 브라우저의 콘솔 커맨드-라인에 다음과 같이 입력하여 추가한 메서드가 작동하는지 확인하세요.

SC.run(function() { HelloWorld.appController.toggleGreeting(); });

"labelView"의 문자가 변하는 것을 보셨나요? SproutCore는 항상 이런식입니다. 개체의 속성에 바인딩된 값을 즉시 알아낼 수 있습니다. 중요한 것은 시스템의 컨트롤러와 모델(Model) 개체의 상태를 조작하는 일에만 집중하여 작업할 수 있는 것입니다. 이제 액션 메서드를 작성하여 버튼을 추가하고 메시지를 토글해 봅시다.

"main_page.js"를 열고 다음과 같이 buttonView를 추가합니다.

    childViews: 'labelView buttonView'.w(),
    buttonView: SC.ButtonView.design({      
      layout: { centerX: 0, centerY: 20, width: 250, height: 24 },      
      title: "Change Title",      
      action: "toggleGreeting",      
      target: "HelloWorld.appController"     
    }),

노트: SproutCore는 클래스 속성을 바인딩하거나 참조할 때 스트링(string) 형식으로 선언해야 합니다. "프로퍼티 패스"(property pat)라는 규칙이 반영되어 있어 동적인 참조를 가능하게 하고 대상을 모니터링하기위한 프로세싱이 포함되어있기 때문입니다. 프로퍼티 패스는 크게 4가지 종류로 구분됩니다. "Simple Properties", "Absolute Properties", "Relative Properties" 그리고 "Chained Properties"가 바로 그것입니다. "Simple Properties"와 "Absolute Properties"는 단순하게 속성 이름 또는 속성의 경로를 지정하는 것이고 "Relative Properties" 와 "Chained Properties"는 참조 위치를 복수로(또는 유동적으로) 할당할 수 있습니다. 더욱 자세한 내용은 별도로 다루도록 하겠습니다.

버튼-뷰를 추가하고 "target"과 "action"속성에 방금 작성한 컨트롤러와 메서드 이름을 작성했습니다. 브라우저를 "새로 고침"한 후 무슨일이 발생했는지 살펴봅시다. 브라우저에서 제공하는 자바스크립트 이벤트 API를 생각할 겨를도 없이 끝나버렸군요. 이것으로 SproutCore의 뷰와 컨트롤러를 작성하고 액션(action)을 배정하는 기초적인 사용법을 알아보았습니다.

Comments | Trackbacks | Hits(449)

SproutCore에서 뷰(View) 작성하기

2009-10-31T08:26:51-07:00

"SproutCore 1.0 시작하기"에서 SproutCore의 설치방법과 "Hello World!" 애플리케이션을 만들어 보았습니다. 이번에는 Hello World 프로젝트를 그대로 사용해서 "뷰(View)"를 만들어 보겠습니다. 뷰는 웹 페이지를 관리하기 위한 자바스크립트 클래스 입니다. DOM을 생성하거나 이벤트를 핸들링하고, 애니메이션 효과를 적용하는 등의 역할을 담당합니다. 사실, SproutCore를 사용하면 개발자에 의해 HTML이나 DOM을 직접 작성하는 일은 거의 일어나지 않습니다. 굉장히 유용한 뷰-클래스와 유틸리티들을 이미 갖추고 있기 때문에 애플리케이션의 레이아웃을 잡는데 큰 도움이 될 것입니다.

모든 CSS와 이미지 그리고 정적인 리소스는 “english.lproj”라 불리우는 곳에 저장됩니다. 왜냐하면 SproutCore는 기본적으로 다국어 환경을 지원하기 때문입니다. lproj 폴더를 추가하여 다른 언어를 지원하도록 구축할 수 있습니다. 기본 언어는 영어입니다. 다국어 처리에 대해서는 차차 알아 보기로 하고, 일단 HelloWorld 프로젝트에서 "resources/main_page.js"를 열면 아래와 같은 코드를 발견할 수 있습니다.

// This page describes the main user interface for your application.  
HelloWorld.mainPage = SC.Page.design({
  // The main pane is made visible on screen as soon as your app is loaded.
  // Add childViews to this pane for views to display immediately on page load.
  mainPane: SC.MainPane.design({
    childViews: 'labelView'.w(),
    labelView: SC.LabelView.design({
      layout: { centerX: 0, centerY: 0, width: 200, height: 18 },
      textAlign: SC.ALIGN_CENTER,
      tagName: "h1", 
      value: "Welcome to SproutCore!"
    })
  })
});

labelView의 "value"속성을 "Hello World! I'm Using Sproutcore"로 변경하고 저장합니다. 그리고 브라우저를 "새로 고침"하면, 바뀐 문자를 볼 수 있습니다. 어라? 그런데 조금 이상하죠? 저런~ 글씨가 잘려나갔군요. 그러나 걱정하지 마세요. 문제 없습니다. "layout"속성의 "width"속성 값을 200에서 300으로 늘려줍니다. 오호라~ 제대로 잘 보이는군요.

이제 컨트롤러(Controller)를 추가해서 조금더 재미를 봐야겠죠? 실제로 뷰는 대부분 컨트롤러에 의해서 제어됩니다. 컨트롤러는 크게 두가지로 나눌 수 있는데요. 환면상의 변화에만 집중해서 작성하는 "뷰-헬퍼(View helper)"와 모델(Model)과 뷰를 연계하는 모델 컨트롤러입니다. 아마도 당신은 이 컨트롤러들을 작성하는데 대부분의 시간을 소비하게 될 것입니다. 그만큼 매우 중요하고 민감한 역할을 수행하기 때문이죠. 커맨드-라인을 실행하고 프로젝트 폴더로 이동합니다. 그리고 아래와 같이 타이핑하세요.

C:\Ruby\bin\hello_world\>sc-gen controller HelloWorld.appController
 ~ Created directory at controllers
 ~ Created file at controllers/app.js
 ~ Created directory at tests
 ~ Created directory at tests/control
 ~ Created file at tests/controllers/

Your controller is now ready to use!

자, "HelloWorld.appController"라는 이름의 컨트롤러가 뚝딱 생겨났네요. 그리고 "apps/hello_world" 폴더에 "controllers" 폴더와 "app.js" 파일이 생성되었습니다. 이 파일을 열면 아래와 같은 내용을 볼 수 있습니다.

HelloWorld.appController = SC.Object.create(
/** @scope HelloWorld.appController.prototype */ {
  // TODO: Add your own code here.
}) ;

이것은 create() 메서드에 의해 생성된 컨트롤러 클래스입니다. SproutCore에서는 이와 같이 매우 쉽게 사용자 정의 개체를 만들 수 있어, 자바스크립트 애플리케이션을 구축하는데 더욱 편리하고 빠른 개발환경을 제공합니다. 주석문을 지우고 아래와 같이 작성합니다.

HelloWorld.appController = SC.Object.create({
  greeting: "Hello World!"
}) ;

이제 컨트롤러가 준비되었으니 뷰에 바인딩(Binding)을 해 보겠습니다. "main_page.js"파일을 다시 엽니다. 그리고 LabelView의 "value"속성을 다음과 같이 교체한 후 브라우저를 "새로 고침"합니다.

    labelView: SC.LabelView.design({
      layout: { centerX: 0, centerY: 0, width: 200, height: 18 },
      textAlign: SC.ALIGN_CENTER,
      tagName: "h1", 
      valueBinding: "HelloWorld.appController.greeting"
    })

"Hello World!"가 보이세요? 이것은 컨트롤러에 의해서 출력된 레이블입니다. 그리고 컨트롤러의 "greeting"속성과의 연결고리는 살아있습니다. 언제라도 "greeting"속성의 값이 변경되면 "labelView"의 레이블은 자동으로 갱신될 것입니다. 정말로 그런지 확인해 볼까요? 콘솔 디버깅이 가능한 브라우저인 크롬 또는 사파리, 파이어폭스의 파이어버그 등의 커맨드-라인에 아래와 같이 입력해 봅시다.

SC.run(function() { HelloWorld.appController.set("greeting", "I am changing!!!"); });

노트: 콘솔 디버깅 할 때 SC.run 메서드를 사용해야 하는 이유는 해당 함수가 실행되는 동안 KVO(Key Value Observing)를 강제로 실행하여 바인딩된 대상의 변화여부를 모니터링하기 위해서 입니다. 이것은 외부에서 실행할 때에만 해당하며 SproutCore내부에서는 자동으로 처리되고 있어 실제 코딩에서는 신경쓰지 않아도 되는 부분입니다.

컨트롤러의 속성에 할당된 값을 변경했을 뿐인데 레이블까지 변경되는 것을 볼 수 있습니다. 이것은 "labelView"에서 컨트롤러의 "greeting"속성를 바인딩했기 때문입니다. 바인딩은 특정한 개체에 있는 속성에 대한 전선과도 같습니다. 속성의 값이 변경되면 묻지도 따지지도않고 자동으로 갱신되는 것이죠. 만약 이 속성을 함수에서 재정의한다면 더욱 동적인 뷰를 만들어 낼 수 있게 됩니다. 참 놀랍죠?

Comments(3) | Trackbacks | Hits(425)

SproutCore 1.0 시작하기

2009-10-31T05:35:05-07:00

SproutCore를 윈도용 RubyGems에서 설치하는 과정을 설명하겠습니다. 만약 Ruby가 설치되어 있지 않다면 One-Click Ruby Installer를 다운로드하고 설치하세요. SproutCore 1.0은 현재 RubyForge 리포지토리에 등록되어 있으며, 커맨드-라인에서 아래와 같은 명령을 입력하는 것으로 모든 설치가 완료됩니다.

C:\Ruby\bin\>gem install sproutcore

만약 설치하는 과정에서 문제가 발생하면 RubyGems 버전이 오래된 것일 수 있습니다. SproutCore는 RubyGems의 버전이 1.2이하에서는 설치되지 않습니다. 다음과 같은 명령으로 RubyGems를 갱신해야 합니다.

C:\Ruby\bin\>gem update --system

만약 RubyGems의 버전이 1.0 이전 것이라면 더많은 명령을 실행해야 합니다.(예, 마지막에 update를 두번 실행하는 것이 맞습니다.)

C:\Ruby\bin\>gem install rubygems-update
C:\Ruby\bin\>update_rubygems
C:\Ruby\bin\>gem update --system
C:\Ruby\bin\>gem update --system

정상적으로 설치되었다면 아래와 같은 메시지를 볼 수 있습니다.(네트웍 상황에 따라서 한참동안을 기다려야 하는 상황도 발생합니다.)

C:\Ruby\bin\>gem install sproutcore
Successfully installed sproutcore-1.0.1009
1 gem installed
Installing ri documentation for sproutcore-1.0.1009...
Installing RDoc documentation for sproutcore-1.0.1009...

설치가 완료되었으니 "Hello World!" 애플리케이션을 만들어 볼까요?

C:\Ruby\bin\>sc-init HelloWorld
C:\Ruby\bin\>cd hello_world

SproutCore는 프로젝트마다 빌드 도구에 의해서 최적화된 HTML, CSS 그리고 자바스크립트가 자동으로 조합되어 세트로 제공됩니다. "sc-init HelloWorld"명령은 새로운 SproutCore 프로젝트를 생성한 것입니다. 이 명령에 의해 "hello_world"폴더가 생성되고 실행에 필요로 하는 기본적인 파일들이 폴더에 추가됩니다. "hello_world"폴더에 들어가면 "apps"라는 폴더를 볼 수 있습니다. 이 곳에 사이트를 구성하는 내용이 들어 있습니다. "hello_world"폴더에서 "sc-server"명령을 실행하면 WEBrick서버가 실행됩니다.

C:\Ruby\bin\hello_world\>sc-server
SproutCore v1.0.1009 Development Server
Starting server at http://0.0.0.0:4020 in debug mode
To quit sc-server, press Control-C
[2009-10-31 21:17:11] INFO  WEBrick 1.3.1
[2009-10-31 21:17:11] INFO  ruby 1.8.6 (2008-08-11) [i386-mswin32]
[2009-10-31 21:17:11] INFO  WEBrick::HTTPServer#start: pid=3596 port=4020

이제, http://localhost:4020/hello_world 주소를 방문해 보세요. 화면 정 중앙에 "Welcome to SproutCore!"라는 문자가 출력된다면 설치된 SproutCore가 정상적으로 작동하고 있는 것입니다!

노트: SproutCore는 RubyGems로 설치되는데 사실상 Ruby 언어와는 완전 무관합니다. 프로젝트 관리도구와 로컬서버 개발환경 및 빌더(컴파일러) 그리고 테스트 도구 등을 포함하는 하나의 패키지이기 때문에 설치와 개발의 편의를 위하여 RubyGems로 제공되는 것일 뿐입니다.

Comments | Trackbacks | Hits(499)

SproutCore에 홀딱 반했습니다.

2009-10-29T11:31:02-07:00

회사에서 첨여중인 프로젝트의 시제품(prototype)에 SproutCore 자바스크립트 프레임웍을 적용한 것을 시작으로, 아주 조금씩 조금씩 작동원리를 이해해 가면서 즐거운 나날을 보내고 있습니다. 그렇게 약 2개월 정도 작업이 진행되었고 큰 그림이 머리속에 어렴풋이 그려지고 있는 단계인데요. 알면 알수록 이 자바스크립트 프레임웍은 잘만들었다는 생각이 듭니다. 자바스크립트 프로그래밍을 완전한 MVC(Model View, Controller)패턴으로 작성할 수 있게 하기 때문입니다.

MVC 철학의 핵심은 바로 바인딩(binding)입니다. 바인딩 덕분에 개발자는 속성 값이 변할 때 자동적으로 자바스크립트가 실행되도록 작성할 수 있습니다. 바인딩이 있으면, 고도로 일관성 있는 비헤이비어로 구성된 매우 복잡한 애플리케이션도 "연결(glue)" 코드를 거의 작성하지 않고 만들어 낼 수 있습니다. 무슨말이냐고요? 차차 알려드리기로 하고, 먼저 SproutCore의 정체를 밝혀 볼까요? SproutCore가 애플사에서 개발한 프레임웍인 것으로 오인하는 분들이 있는데요. SproutCore는 "Charles Jolley"씨에 의해 개발되었으며, 코코아(Cocoa)에서 영감을 받아 만들어진 자바스크립트 프레임웍입니다. 오픈소스와 개방형 웹표준에 기반을 두기 때문에, 특정 플러그인이나 기업에 얽매이지 않은 크로스 플랫폼 애플리케이션 개발을 할 수 있습니다. Jolley씨는 애플의 .Mac 팀에서 일하고 있으며 그의 프레임웍을 지속적으로 개선시키는 작업을 하고 있습니다. 그래서인지 기본으로 제공하는 뷰의 모양새가 애플의 것과 상당히 닮아 있습니다. 대표적으로 애플의 "iWork"와 "MobileMe"서비스가 SproutCore 자바스크립트 프레임웍을 기반으로 구축되었습니다.

근 20년동안 클라이언트 애플리케이션을 구축하는데있어서 MVC는 매우 성공적인 디자인 패턴이라는 것을 증명했습니다. 하지만 SproutCore는 웹 브라우저에서 실행되는 애플리케이션이기 때문에 몇가지 특별한 것들이 추가되어 있습니다. 이것은 모델 레이어을 지원하기 위한 3개의 추가적인 레이어들로 구성됩니다. 이것이 바로 MVC+SDR 아키텍처입니다. SDR은 Server Interface, Display, Responders를 의미하며 Server Interface는 웹서버와 모델 레이어간에 데이터를 송/수신 하는 것을 핸들링하고 클라이언트-사이드 스토리지를 사용하여 오프라인 모드를 지원하는 것이고, Display는 로우-레벨 DOM 라이브러리(jQuery 또는 Prototype)들을 포함하고 뷰들(Views)이 이를 순조롭게 이용하여 HTML을 랜더링하도록 중계하는 것이며, Responders는 애플리케이션의 전반전인 상태를 제어하는 레이어로써, 탑 레벨에서 구성한 모델, 뷰 그리고 컨트롤러의 부하 상태 등을 점검합니다.

지금부터 제가 이해한 SproutCore의 작동 과정을 설명해 보겠습니다. SproutCore는 매우 유연하게 작성할 수 있도록 만들어진 프레임웍입니다. 아래는 특정한 서비스를 구현하는 과정의 일례이며, 그 구조를 이해하기 위한 것이므로 설치 및 사용방법 등에 관련해서는 별도로 작성하겠습니다. 때문에 자세한 코드를 기술하지 못하는 점은 양해해 주세요. 코드들 중 '...'은 중략을 의미합니다.

Model Layer :

모델 레이어에서는 대부분의 비지니스 로직을 처리합니다. SproutCore는 서버로부터 수신한 자료형 데이터를 어떠한 방법으로든(Inline Script Tag 또는 AJAX JSON 또는 JSONP) 한번에 묶어서 수신하고 클라이언트 사이드에서 자바스크립트가 초기화(Initialize) 되는 순간 타입(Type)으로 구분하여 관련 메서드들을 모델에 할당하고 인스턴스로 만들어 메모리에 보관합니다. 자료형이 다루어지는 모습을 살펴봅시다. 서버에서 수신한 자료의 예를 들면 아래와 같습니다.

{
  records: [
    {
      type: 'Event',
      guid: 1,
      title: '주간 업무보고',
      calendarGuid: 1
      startDate: 1248652800000,
      ...
    },
    {
      type: 'Event',
      guid: 2,
      title: '브레인스토밍',
      calendarGuid: 1
      startDate: 1248678000000,
      ...
    },
    {
      type: 'Calendar',
      guid: 1,
      title: '회사',
      description: '주당 100',
      ...
    },
    ...
  ],
  preferences: [
    ...
  ]
}

이렇게 무작위로 수신한 자료들이 초기화 과정을 거치면서 개개의 자료가 가진 프로퍼티들이 유효한지 확인하거나 다른 형태로 변환되거나 가공되기 위한 메서드가 할당되어 버립니다. 다음 예제는 메모리에 올려둔 자료를 호출하는 방법입니다.

var MyCalendar = MyProject.Calendar.find({
  guid: 1
});
var MyCalendarGuid = MyCalendar.get("guid");
var MyEvents = MyProject.Event.findAll({
  calendarGuid: MyCalendarGuid 
});

달력들 중에서 guid가 1번인 것을 찾아내고 이벤트들 중에서 찾아낸 1번 캘린더에 속했는 자료들를 가져오는 코드입니다. 실행되면 MyEvents 변수는 아래와 같은 컨트롤러가 반영된 결과물을 얻습니다.

[
  Record({
    type: 'Event',
    guid: 1,
    title: '주간 업무보고',
    calendarGuid: 1
    startDate: 1248652800000,
    ...
  }),
  Record({
    type: 'Event',
    guid: 2,
    title: '브레인스토밍',
    calendarGuid: 1
    startDate: 1248678000000,
    ...
  })
]

SproutCore로 생성된 모든 객체(모델, 뷰, 컨트롤러)에는 "get", "set"메서드를 통하여 값을 주고 받아야 합니다. "set"메서드는 두번째 인자로 값을 받습니다. 이 두 메서드들를 통하여 이벤트를 발생시키거나 값을 호출하고 저장하기 때문입니다. 다음은 자료형에 할당된 메서드들 중 밀리세컨즈로 기록된 시간을 알아보기 쉽게 만들어 주는 "formattedStartTime"함수를 작성했다고 가정하고 호출하는 예제입니다.

MyEvents.get("formattedStartTime");
//-> ["9:00 AM", "4:00 PM"]
MyEvents[0].set("startDate", MyEvents[0].get("startDate") + 10800000);
//-> 1248663600000
MyEvents[0].get("formattedStartTime");
//-> 12:00 PM"

View Layer :

다음은 SproutCore의 뷰 레이어를 살펴보겠습니다. 뷰는 최초 로드한 페이지에 "resources"라는 ID속성을 가진 DIV요소 속에 마크업 되어있는 HTML 코드들이 그 대상이 됩니다. 여기에 속해있는 요소들은 다이얼로그, 레이아웃, 버튼, 패널, 폼, 컨텍스트 메뉴 등 다양한 방법으로 표현될수 있는 기능단위 요소들입니다. 뷰역시 모델과 마찬가지로 초기화 될 때 뷰 메서드들이 할당되고 인스턴스화 되어 메모리에 보관됩니다. 뷰가 가지는 메서드는 요소가 그려지는 역할을 담당하도록 구성되어 있습니다. 즉 DOM과 관련 메서드가 결합되어 하나의 "뷰"가 되는 것입니다. 다음 예제는 일정 목록을 간략하게 보여주기 위해 준비된 패널의 마크업입니다.

<div id="resources" style="display:none; visibility: hidden;">
  <div id="event_list_panel" class="pickerright pickerbottom" style="width: 225px;"> 
    <div class="event_list_picker_wrapper"> 
      <div class="event_list_title shared_dialog_title"> 
        <span class="sc-label-view event_list_title_label"></span> 
      </div> 
      <div class="event_list_body">  
        <div class="overflow_events"></div> 
      </div> 
    </div> 
  </div> 
  ...
</div>

위 DOM요소는 다음과 같은 초기화 과정을 거칩니다. 뷰를 지정함과 동시에 "outletFor"(DOM Selector)메서드를 이용하여 노드를 찾아내고 변수에 담습니다. 그리고 실제 DOM요소는 문서영역에서는 제거됩니다. 이 때 프로퍼티로 생김새을 결정하거나 출력될 문자를 설정하거나 값이나 컨트롤러를 바인딩하는 것을 정의할 수 있습니다.

SC.page = SC.Page.create({
  eventListPanel: SC.View.extend({
    outlets: ["eventListTitleLabel","overflowEvents"],
    eventListTitleLabel: SC.LabelView.extend({
      valueBinding: "MyController.panelController.userName",
      localize: false,
      escapeHTML: true
    }).outletFor(".event_list_title_label?"),
    overflowEvents: MyView.OverflowEventsView.outletFor(".overflow_events?"),
    isVisibleBinding: "MyController.panelController.hasUsers",
    paneType: "panel"
  }).outletFor("#event_list_panel"),
  ...
});

SproutCore는 웹 브라우저에서 표현할수 있는 대부분의 기본적인 뷰와 컨트롤을 제공합니다만, 독특한 뷰가 필요하다면 기존뷰를 확장하거나 새로운 뷰를 얼마든지 만들어 낼 수 있습니다. 기본적으로 마우스/키보드/윈도우 이벤트 헨들러를 작성하여 뷰에 변화를 줄 수도 있고, 밸류 바인딩을 통하여 변화를 주는 것도 가능합니다. "isVisibleBinding"은 대상이되는 변수의 값이 참인 경우 나타나며, 그렇지 않은 경우 숨깁니다. "valueBinding"은 대상이되는 변수의 값을 출력합니다. 자, 이것이 SproutCore의 핵심입니다. 대상이되는 변수를 조작하기만 하면 즉시 바뀐 값을 출력하고 숨거나 나타납니다. 이 바인딩의 개념을 잘 이용하면 매우 간단하게 스스로 살아 움직이는 DOM요소를 만들어 낼 수 있게 되는 것입니다.

 MyView.OverflowEventView = SC.View.extend({
  ...
  render: function(j) {
    this.set("isVisible", true);
    this.setColors();
    ...
  },
  mouseDown: function(event) {
    MyController.panelController.hitTest();
  ...
});

Controller Layer :

위와 같이 고도로 정밀하게 디자인된 모델과 뷰를 잘 버무려주는 녀석이 바로 컨트롤러 입니다. 딱히 정해진 롤이없고 99.9% 커스토마이즈 영역이기 때문에 적절한 예를 들기가 모호하군요. 주요한 역할은 모델을 찾아내고 뷰와 조합해서 되돌려 주거나 시시각각 변화하는 복잡한 인터랙션을 처리합니다.

MyController.panelController = SC.ObjectController.create({
  hasUsers: false,
  userName: null,
  hitTest: function() {
    this.hasUsers = !!MyEvents.findAll({}).length;
  ...
});

var displayName  = MyEvents.find({ownerEmail: "to@firejune.com"}).get("displayName");
MyController.panelController.set("userName", displayName);

이 외에도 설명하지 못한 엄청난 것들이 엄청나게 많습니다!

Comments(5) | Trackbacks | Hits(686)

31가지 자바스크립트 성능향상 비법

2009-10-20T19:29:30-07:00

Script.aculo.us 개발자인 Thomas Fuchs씨와 그의 마눌님이신 Amy Hoy씨는 31가지 성능향상 비법이 담긴 체크리스트와 문제 해결방법이 담긴 FAQ 사이트(slowjavascript.com)를 구축하고 공개했습니다. "당신이 작성한 자바스크립트가 조낸 느리세요? 이제 걱정하지 마세요!"라고 하시네요. 체크리스트는 PDF로 작성되었으며 그들이 저술한 "JavaScript Performance Rocks!" 책 광고 페이지로 연결됩니다. 뉴스 레터에 가입하면 갱신되는 정보도 알려준다고 합니다.

Comments(2) | Trackbacks | Hits(856)

Microsoft Ajax Minifier VS YUI Compressor

2009-10-20T19:03:05-07:00

마이크로소프트에서도 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 | Trackbacks | Hits(848)

자바스크립트 리퀴드 이미지 효과

2009-10-11T18:11:06-07:00

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 | Trackbacks | Hits(1170)

한물간 웹 디자인 트렌드

2009-10-08T19:57:00-07:00

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

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

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

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

아쿠아 버튼

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

장식

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

책상위의 커피

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

지구회전 애니메이션

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

코믹 선스 글꼴

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

식상한 스톡 이미지

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

찢어진 노트 종이

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

폴라로이드

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

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

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

자동 재생 음악

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

카운터

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

마퀴

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

프레임

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

사용자 선택

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

스킵 버튼 없는 인트로

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

검은색 배경

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

Comments(7) | Trackbacks | Hits(2230)

윈도7 스타일 마우스 오버 효과

2009-10-05T21:46:30-07:00

Button Another button

Eduardo씨는 윈도7 스타일과 유사한 마우스 오버효과를 jQuery와 MooTools 그리고 CSS를 사용하여 적용하는 방법을 소개했습니다. 요소를 3중첩으로 준비하고 2번째 요소의 배경 이미지 포지션을 자바스크립트로 변경하는 방법으로 구현되었네요. 언젠가 써먹을 일이 있을것 같아서 Prototype용으로 작성해 보았습니다. 참고로, 원작과 다른 부분은 개별적으로 호출하는 이미지들을 하나로 합하였고 스타일시트의 정의를 자바스크립트로 하는 정도입니다.

Comments(5) | Trackbacks | Hits(1241)

웹 디자이너가 되길 원하세효?

2009-10-05T19:24:22-07:00

Comments | Trackbacks | Hits(1156)

자바스크립트 프레임웍 메트릭스

2009-09-14T19:04:47-07:00

Mathias Schütz씨는 자바스크립트 프레임웍들의 API를 한눈에 알아볼 수 있도록 비교해 주는 자바스크립트 프레임웍 메트릭스를 구축하였습니다. 프레임웍의 용량, 속도, 확장여부, 라이센스, API문서와 튜토리얼 및 데모의 링크, 참고서적 유무 정보를 포함하고 있어 자바스크립트 프레임웍을 선정하거나 다른 것으로 교체하거나 학습할 때 매우 유용하게 사용할 수 있습니다. jQuery, MooTools, DojoToolkit, Prototype, Script.aculo.us, Ext.JS, Adobe Spry, BBC Glow, Yahoo UI! Library가 준비되어 있으며, 주요한 기능과 프레임웍 단위로 코딩 예제를 쉽게 조회할 수 있어 API문서 역할까지 일부분 수행합니다. 완전 멋진 분이군요!