웹 개발 속도를 속 시원하게 높여주는
자바스크립트 라이브러리
이장의 목적은 빠른 웹 개발을 위한 자바스크립트 라이브러리들을 심도 있게 소개하고 활용하는 데 있다.
라이브러리를 다룰 때에는 기능별 세부항목을 기술하는 것이 중요하지만, 전체적인 맥락에서 사용예제를 바탕으로 각 라이브러리가 가진 특징들을
파악하였던 큰 그림을 그릴 수 있게 하는 방법으로 접근하고자 한다. 자신이 가진 아이디어를 어떻게 자바스크립트 라이브러리를 활용하여 쉽게 표현할
수 있게 하는지, 어떻게 유저 인터페이스를 간단하게 꾸밀 수 있도록 하는지에 대하여 중점적으로 설명하도록 한다.
경준호 to@firejune.com｜(주)코스모웨어에서 UI개발팀장
자바스크립트 라이브러리
자바스크립트 라이브러리는 사용방법과 용도에 따라 정의가 달라지지만 큰 문맥상의 정의는 하나이상의 서브루틴이나 자주 재사용 가능한 함수들이
모여 있는 파일(들)을 뜻한다. 페이지에 눈이 쌓이는 효과 또는 사진을 유려하게 팝업하는 윈도우(LightBox) 따위 역시 라이브러리로
분류되기도 하지만, 여기서 다루고자 하는 자바스크립트 라이브러리는 한 가지 특정 기능에 특화되어 구현된 것이 아닌, 통합 개발환경을 마련하는
것에 가깝다고 할 수 있으며 이것을 ‘자바스크립트 프레임워크 라이브러리’로 통칭하도록 한다.
프레임워크 라이브러리의 성향은 크게 세 가지로 나뉠 수 있다.첫 번째는 자바스크립트 자체의 사용성을 높이는 ‘코어 라이브러리’이며, 두
번째는 특정 기능만을 강화시키거나 UI(유저-인터페이스)의 성능향상을 위한 ‘특화 라이브러리’이다. 세 번째는 앞의 두 가지 성향을 모두 가진
‘통합 라이브러리’가 있다. 두 번째 성향을 띠는 라이브러리는 특정한 코어 라이브러리만을 위한 확장 형태로 배포되는 경향이 있다.
자바스크립트 라이브러리의 필요성
데스크톱 애플리케이션을 대체하는 강력한 웹 애플리케이션을 개발하는 것은 이제 더 이상 꿈같은 말이 아니다. 전체 페이지의 새로 고침 없이
브라우저와 서버 간에 통신하는 문제를 해결해 준 Ajax는 하루가 다르게 성장하고 있다. 성장의 증거 가운데 하나는 현재 벌어지고 있는 상황을
언급할 수 있는데, 늘 화두가 되곤 하는 구글의 여러 서비스들인 그룹스, 맵스, 노트, 지메일, 캘린더와 통합 웹 오피스 서비스인 그리고 국내
서비스로는 다음의 한메일, 오픈마루의 스프링노트, 레몬펜, 라이프팟 등이 Ajax를 사용하여 구축된 사례이다.
대규모 클라이언트-사이드 웹 애플리케이션을 구축할 때 자바스크립트 라이브러리는 가뭄에 단비처럼 반가운 것이다. 왜냐하면, 자바스크립트
프로그래밍에 항상 문제가 되는 크로스-브라우저(Cross-Browser)를 특별한 조치 없이 지원할 수 있고, Ajax관련 작업을 용이하게
하며, DOM(Document Object Model)을 효과적으로 다루기 위한 셀렉터와 이벤트 핸들러 등 반복적으로 사용되는 유용한 함수 또는
메소드를 대다수 제공함으로써 복잡한 구조를 가진 UI를 손쉽게 구현할 수 있게 하는 것은 물론, UI구현에 필요한 대부분의 컴포넌트를
API화하여 제공하므로 변수를 지정해 주는 것만으로 파일 탐색기와 흡사한 UI를 단지 수 분 만에 만들어 낼 수 있기 때문이다.
자바스크립트 라이브러리 선택 시 고려해야 할 사항
자바스크립트 라이브러리를 선택하는 데에 있어서 Ajax는 첫 번째로 고려대상이 되기도 한다. Ajax는 자바스크립트의 도움을 받아 구현되는
측면에서 중요하기도 하지만, 전체 코드분량을 놓고 볼 때 사실상 소모되는 분량은 극히 일부분에 지나지 않는다. 그렇다면 나머지는 어디에 사용되는
것일까? 그렇다. 바로 사용 편의성을 위한 효율적인 UI구현에 적잖은 비중을 두게 되며, 시스템 성능이 좋아진 현재는 직관성에 도움을 주는
비주얼라이제이션에도 수많은 코드를 소비하기도 한다. 그래서 컴포넌트의 지원여부나 생산의 용이성, 애니메이션 지원 여부 또한 중요한
고려대상이다.
라이브러리 자체 기능이 첫 번째로 중요하지만, 선택에 앞서 간과하지 말아야 할 고려해야 할 것들이 더 있다. 요즘에는 하나의 자바스크립트
라이브러리를 대상으로 한 서적으로까지 출간되고 있다. Prototype, Script.aculo.us, jQuery 자바스크립트 라이브러리에
대한 개발서적이 이미 시중에서 판매되고 있는 상태이다. 자신이 선택하고자 하는 라이브러리에 대한 지원 여부를 꼭 확인하자. 그리고 무엇보다도
중요한 고려항목은 바로 “어떠한 웹 애플리케이션을 개발할 것인가?”이다. 다음에 소개되는 라이브러리들의 특징을 조목조목 따져보고 만들고자 하는
웹 애플리케이션에 적합한 자바스크립트 라이브러리는 무엇인지 살펴보자.
자바스크립트 라이브러리의 장점과 단점
자바스크립트는 범용적인 프로그래밍 언어이다. 대부분의 자바스크립트 프레임워크 라이브러리들은 언어 자체를 강화하도록 디자인되었다. 웹
애플리케이션 개발에 자바스크립트 프레임워크 라이브러리의 도움을 받았을 때의 장점은 사람이 이해하기 쉽고 간결한 코드를 구사하여 만들어 내고자
하는 것을 보다 빨리 생산고, 지겨운 중복작업을 상당부분 생략할 수 있다. 반면, 별도로 라이브러리 사용법을 익혀야 하고 비교적 덩치가 큰
파일들을 추가로 로드해야 하는 부담이 있다.
자바스크립트 라이브러리의 종류와 특징 그리고 활용
현존하는 서드-파티 자바스크립트 프레임워크 라이브러리는 수십여 종에 달하기 때문에 지면 관계상 사용층이 두텁고 활발한 지원을 받을 수 있는
라이브러리들에 우선순위를 두어 설명할 것이다. 모든 라이브러리의 예제 코드를 소개하지 못하는 점은 양해 바란다.
시각적인 피드백을 제공하기 위해서 인터페이스의 일부분이 사용자의 이목을 끌 수 있도록 디자인하는 것은 어떠한 컴퓨터 애플리케이션을
작성하더라도 마찬가지다. 버튼은 마우스로 클릭할 수 있다는 것을 알리거나, 사용할 수 없는 상태를 표시하거나, 새로운 항목이 도착했을 때 클릭을
유도하기 위한 시각화 함수를 작성하는 일은 비일비재하다. 지금부터 이와 같은 인터페이스를 자바스크립트로 구현한 몇몇 예제를 놓고 분석할 것이다.
그리고 자바스크립트 라이브러리의 도움을 받아 작성한 애플리케이션과 도움을 받지 않은 동일한 애플리케이션 예제를 여러 차례 소개하게 되는데
구체적으로 어떠한 변화가 있는지에 대하여 주목하자.
Prototype | http://prototypejs.org/
<화면1> Prototype 홈페이지
Prototype은 Sam Stephenson에 의해 작성된 자바스크립트 프레임워크이다. 현재 가장 많은 사용자층을 보유하고 있으며
안정적이고 문서화 또한 잘 되어있다. 루비 온 레일즈의 클라이언트-사이드 프레임워크기도 하다. Prototype은 자바스크립트 자체 기능을
확장하고 편리하게 사용할 수 있도록 한다. 현재 1.6.0.2 버전까지 출시되어 있는 상태이다.
Prototype에서 대표적으로 가장 많이 사용되는 함수는 바로 $()이다. <리스트 1>을 보자.
<리스트 1> Prototype을 이용한 엘리먼트 할당 비교
// 일반적인 엘리먼트 할당
var element =
document.getElementById('foo');
// Prototype을 이용한 엘리먼트 할당
var element
= $('foo');
DOM메소드인 document.getElementById()와 같은 긴(다소 비 생산적인) 메소드 이름을 $()로 단축했다. 엘리먼트를
다중으로 선택하는 “$$”, 배열을 효과적으로 처리는 “$A”, form태그를 다루는 “$F” 등 적절한 이름으로 단축시킨 다양한 메소드를
제공하여 코드를 간결하게 작성 할 수 있도록 유도하고 있는 것이다.
Prototype에서는 “$”메소드를 시작으로 엘리먼트에 관련한 여러 DOM 메소드를 서로 연결하여 사용 할 수 있게 되어 있다.
<리스트 2>는 DOM 선택자인 select메소드를 연결한 예이다.
<리스트 2> Prototype의 DOM 선택
// "foo" id를 가진 엘리먼트의 모든 a태그를 할당
var elements =
$('foo').select('a');
// "foo" id를 가진 엘리먼트의 input태그들 중에 id가 "bar"인 엘리먼트를
할당
var elements = $('foo').select('input[id=bar]');
// "foo" id를 가진
엘리먼트의 input태그들 중에서 name이 "log"인 태그를 할당
var elements =
$('foo').select('input[name=log]');
<리스트 2>의 내용 중에서 3번째 항목인input태그의 name이 “log”인 태그를 변수 elements에 할당하는 예제를
Prototype의 도움 없이 만들려면 <리스트 3>과 같은 코드를 작성해야 할 것이다.
<리스트 3> 라이브러리의 도움을 받지 않고 엘리먼트 할당
var elements = [];
var foo =
document.getElementById('foo');
var inputs =
foo.getElementsByTagName('input');
for (var i=0i < inputs.lengthi++)
{
if (inputs[i].name == 'log') {
elements.push(inputs[i]);
}
}
<리스트 4>는 여러 메소드를 혼합하여 사용한 경우이다.
엘리먼트 지정을 시작으로 스타일링과 텍스트 삽입 그리고 이벤트 할당까지 “.”연산자를 사용하여 한꺼번에 처리하고 있다. 참고로 이러한
문법을 구사할 수 있는 것은 1.6.0버전부터다.
<리스트 4> Prototype의 메소드 연결
var element = $('foo').setStyle({
border: '2px solid
#000',
backgroundColor: '#fff',
padding:
'5px'
}).update('버튼').observe('click', function(){
alert("Hello
World!");
});
만약에 <리스트 4>를 라이브러리의 도움 없이 자바스크립트만으로 작성하면 <리스트 5>와 같다.
<리스트 5> 자바스크립트만으로 <리스트 4>를 그대로 작성한 경우
var element =
document.getElementById('foo');
element.style.border = '2px solid
#000'
element.style.backgroundColor = '#fff'
element.style.padding =
'5px'
element.innerHTML = '버튼'
var elementClick = function()
{
alert("Hello World!");
}
if (element.addEventListener)
{
element.addEventListener('click', elementClick, false);
} else
{
element.attachEvent("onclick", elementClick);
}
코드량만 비교해도 가슴이 턱 막히지 않는가? 크로스-브라우저 지원을 위한 이벤트 처리를 사용하게 되면서 추가 코드를 작성하게 된다. 이
밖에도 Prototype에는 String, Number, Object, Function 타입을 확장하는 수 십여 가지 메소드를 매우 폭넓게
지원하고 이것을 서로 조합하여 보다 간결한 코드를 구사할 수 있게 한다. 끝으로 Ajax는 어떻게 구현하는지에 대하여 알아보고
Prototype에 대한 설명을 마무리 짓도록 하겠다.
Prototype에서는 Ajax를 위한 여러 가지 메소드들 중에서도 비교적 사용하기 쉬운 Ajax.Updater 메소드에 대하여 알아보자.
이 메소드의 역할은 특정 URL로부터 비동기식으로 요청하여 응답받은 결과물을 지정된 엘리먼트에 업데이트시키는 일을 한다.
<리스트 6> Prototype의 Ajax
new Ajax.Updater('foo', '/conents.html ');
도가 지나칠 정도의 간단한 코드만으로 Ajax를 구현했다. 간략히 설명하자면, id가 “foo”인 엘리먼트를 찾아서 ‘/contents.
html’ 로부터 얻어낸 내용을 그대로 업데이트하라는 명령이다. 부가적으로 다양한 옵션을 제공하는데, 그 중에서도 “insertion”옵션은
대상 엘리먼트가 가진 내용의 원하는 부위(상위 또는 하위)에 내용을 삽입할 수 있어 기존의 내용과 병합할 수도 있다.
Script.aculo.us | http://script.aculo.us
<화면2> Script.aculo.us 홈페이지
Script.aculo.us는 Prototype과 맞물려 돌아가는 특화 라이브러리이다. 가지각색의 특수효과와 드래그 앤 드롭 컨트롤러,
DOM 유틸리티 등을 제공하여 UI 컴포넌트를 제작하기에 적합하다. 특히, 강력한 애니메이션 효과를 사용 할 수 있도록 다양한 메소드를 제공하고
있어 독창적인 UI를 꾸밀 수 있게 한다. 파일 구성이 기능별로 분할되어 있어 필요한 파일만을 로드하여 사용할 수도 있다.
다음은 Script.aculo.us에서 제공하는 강력한 애니메이션 기능을 어떻게 사용하는지에 대하여 간략히 알아보자. 필자가 즐겨 사용하는
애니메이션 효과는 Effect.Morph 메소드다. 이 메소드는 대상이 되는 엘리먼트에 애니메이션 효과를 반영하여 시각적 변화를 준다.
<리스트 7> Script.aculo.us에서 애니메이션 처리
new Effect.Morph('foo', {
style: 'border-width: 5px;
padding: 10px; background-color: #000',
transition:
Effect.Transitions.spring,
duration: 0.8
});
id가 “foo”인 엘리먼트에 옵션으로 넘겨진 style, transition, duration 에 의해 애니메이션이 되는 모션을 만들어
낸다. style 옵션을 보면, CSS속성인 border, padding, background-color의 값을 입력하여 마지막으로 보일 모습을
설정 할 수 있고 transition은 애니메이션이 일어나는 시간 동안 일어나는 변화를 설정할 수 있다. 여기서 변화란 플래시의 “Ease”값을
조절하는 것과 흡사하다. duration옵션은 애니메이션이 진행되는 시간을 의미한다. 그리고 상습적으로 사용되는 애니메이션 효과(콤비네이션
이펙트)들을 다수 준비되어 있어 적절한 효과를 골라 쓸 수 있다.
jQuery | http://jquery.com/
<화면3> jQuery 홈페이지
jQuery는 John Resig씨에 의해 작성된 가볍고 빠른 자바스크립트 프레임워크 라이브러리이다. 치가 떨릴 정도의 자바스크립트 생산
편의성을 제공한다. jQuery의 코드는 단순하고 간결하다. DOM과 관련한 지겨운 루프문과 Ajax의 복잡성을 기발하게 처리할 수 있게 한다.
코어 외의 부가적인 기능(특화 라이브러리)들은 플러그인의 형태로 제공하고 있으며, 수많은 웹 개발자들에 의해 다양한 플러그인들이 준비되어 있다.
최근 들어 Prototype또한 jQuery의 편리한 코딩 룰을 여러 부분에 도입하고 있는 실정이다. jQuery의 철학은 “이 모든 것은
즐거운 마음으로 프로그래밍하기 위함”이라고 한다.
CSS 표준을 따르는 jQuery의 DOM 선택기능은 사용하기 쉽기로 유명하다.
<리스트 8> CSS 표준을 따르는 jQuery의 DOM 선택기능
$('#foo') // id가 "foo"인 엘리먼트 반환
$('#foo a') // id가
"foo"인 엘리먼트에 속한 a태그들을 반환
// id가 "foo"인 엘리먼트에 속한 li태그들을 중에 class가
"activated"인 것을 반환
$('#foo li.activated')
CSS2의 DOM선택방법을 알고 있다면 누가 보아도 이해할 수 있는 직관적인 DOM 선택 방법이다. CSS3에서 지원되는 DOM 선택
방법이 도입되어 <리스트 9>처럼 활용 될 수도 있다.
<리스트 9> jQuery의 DOM 선택기 응용
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>jQuery
Example</title>
<script
src="/javascripts/jquery.js"></script>
</head>
<body>
<div>
<input
type="radio" name="good" value="Very Good" />
<span>매우
좋음</span>
</div>
<div>
<input type="radio"
name="good" value="Good"
/>
<span>Good</span>
</div>
<div>
<input
type="radiov name="bed" value="Bed"
/>
<span>나쁨</span>
</div>
<script>
$("input[name='good']").next().text("좋음");
</script>
</body>
</html>
자바스크립트의 내용을 보면 input태그들 중에서 name 속성이 “good”인 노드를 찾고 next 메소드로 span태그를 선택하고 기존
문자열인 “Good”을 “좋음”으로 고치게 하는 코드이다. 선택자로부터 반환 된 결과가 복수이던 단수이던 간에 동일한 메소드를 사용하여
일괄적으로 처리하는 모습은 Prototype보다 한 수 위이다.
그렇다면 jQuery에서 Ajax는 어떻게 작성하는지 <리스트 10>을 살펴보자.
<리스트 10> jQuery의 Ajax
$('#stats').load('/contents.html');
더 이상 말이 필요 없다. DOM 선택자와 연결해서 사용할 수 있는 메소드 이름만 기억해 내면 되는 것이다.
YUI(Yahoo! UI) | http://developer.yahoo.com/yui/
<화면4> YUI 홈페이지
야후!에서 만들고 배포하였으며, 이름에서 유추할 수 있듯이 유저-인터페이스에 중심을 둔 자바스크립트 라이브러리이다. 문서화가 매우 잘
되어있고 안정적이며, 야후 현지 개발자들에 의해 완성도 높은 다양한 컴포넌트들이 개발되어있어 골라 쓰는 재미가 있다. 모든 브라우저에 최적화가
잘된 애니메이션 성능을 보여주며 고수준의 이벤트처리가 가능한 것이 특징이다.
<리스트 11> YUI의 DOM 유틸리티와 Event 유틸리티
// DOM 유틸리티를 이용한 스타일 변경하기
YAHOO.util.Dom.setStyle('foo',
'backgroundColor', '#000');
// EVENT 유틸리티를 이용한 이벤트
할당하기
YAHOO.util.Event.addListener("foo", "click", function(){
alert("Hello
World!");
});
<리스트 11>은 “foo”라는 id를 가진 엘리먼트에 배경색상을 변경하고 이벤트를 할당하는 코드이다. 항상 YAHOO로
시작하는 메소드 이름은 조금 거슬리기도 한다.
Dojo Toolkit | http://dojotoolkit.org/
<화면5> Dojo Toolkit 홈페이지
특화 라이브러리와 코어 라이브러리를 모두 갖춘 통합 라이브러리이다. 안정적이며, 사용분야가 광범위하고, GUI(그래픽 유저 인터페이스)에
충실하다. 자바스크립트로 가능한 거의 모든 컨트롤러와 컴포넌트를 갖추고 있어 대규모 클라이언트-사이드 웹 애플리케이션 제작에 적합하다. 일부
기능만을 분리해서 사용할 수 있는 구조로 되어있으나 커스터마이즈가 힘들고 다소 무겁다는 단점이 있다.
Ext JS | http://extjs.com/
<화면6> Ext JS 홈페이지
Ext JS역시 통합형 라이브러리이다. GUI기반 클라이언트-사이드 웹 애플리케이션 제작에 특화되어 있다. 윈도우, 파일트리, 드롭다운
메뉴, 탭 메뉴, 툴바 등 웬만한 GUI 컴포넌트를 손쉽게 사용 하게끔 한다. 다양한 플랫폼을 지원하는 것이 특징인 Ext JS는 기존에
사용하던 라이브러리와 함께 사용할 수 있는 구조로 되어 있다. 단독으로 사용하기 위해서는 Build모듈을 필요로 하며, adapter 모듈을
통해YUI, Prototype, jQuery를 공식으로 지원한다. Dojo Toolkit과 마찬가지로 라이브러리라기보다는 GUI API에
가깝다.
<리스트 12>는 Ext JS를 이용한 메시지 박스를 출력한 예제이다.
<리스트 12> Ext JS를 이용한 메시지 박스 출력
Ext.MessageBox.show({
title: 'FooBox',
msg: 'Hello
World!',
width:300,
buttons: Ext.MessageBox.OKCANCEL
});
GWT(Google Web Toolkit) | http://code.google.com/ webtoolkit/
<화면7> Prototype 홈페이지
GWT(구글 웹 툴킷)은 구글에서 만들고 배포한 자바스크립트 개발 도구이다. 라이브러리라기보다는 자바 기반 자바스크립트 툴킷이다.
자바스크립트 언어를 사용하지 않고 자바를 통해 자바스크립트를 개발했을 때의 장점을 부각하여 자바스크립트의 디버깅과 테스팅의 어려움을 극복할 수
있다고 한다. 하지만 자바를 알아야 하며, 작은 기능을 구현하기 위해서도 많은 양의 자바 코드를 작성해야 하는 불편함이 있다.
MooTools | http://mootools.net/
<화면8> MooTools 홈페이지
초창기에는 moo.fx라는 이름으로 Prototype 기반의 Script. aculo.us를 개선한 형태였으나 지금은 독립 라이브러리의
형태로 거듭났다. 기능 세분화가 매우 잘 되어있어 기능에 필요한 라이브러리 코드만을 최소한의 양으로 실시간 생성 다운로드하여 사용하는 것이
가능하며, jQuery처럼 “.”연사자로 연결되는 문법 구사가 가능하다. MooTools 또한 통합형 라이브러리를 지향하는데, DOM 유틸리티와
UI컨트롤러를 모두 갖추었다. 다른 라이브러리들에 비해 성능과 속도 면에서 최적화가 잘 이루어져 있고, Script.aculo.us에서 표현하지
못하는 독특한 애니메이션 변화를 사용할 수 있는 것이 특징이다.
<리스트 13> MooTools의 DOM 선택 기능
// "foo" id를 가진 엘리먼트의 모든 a태그를
반환
$('foo').getElements('a');
// "foo" id를 가진 엘리먼트의 input태그들 중에 id가
"bar"인 엘리먼트를 반환
$('foo').getElements('input[id=bar]');
// "foo" id를 가진
엘리먼트의 input태그들 중에서 name이 "log"인 태그를
반환.
$('foo').getElements('input[name$=log]');
실제로 Prototype의 코어의 일부분을 그대로 사용하고 있으며,DOM선택자의 사용 방법이 Prototype과 매우 흡사하다.
Qooxdoo | http://qooxdoo.org/
<화면9> Qooxdoo 홈페이지
Qooxdoo는 Dojo Toolkit과 마찬가지로 GUI에 중심을 둔 통합형 라이브러리이다. 로드가 완료된 후의 퍼포먼스는 매우 훌륭하고
완성도가 높으며, 대다수의 GUI 컴포넌트들을 갖추고 있다. GUI기반 클라이언트-사이드 애플리케이션 개발에 적합하다. 하지만, 700kb나
되는 용량은 좌절스럽다.
Mochikit | http://mochikit.com/
<화면10> Mochikit 홈페이지
MochiKit은 자바스크립트 프로그래밍을 파이썬을 짜듯이 사용할 수 있게 한다. 다양한 라이브러리들을 지원하며, 특히 로깅모듈과 디버깅
콘솔을 제공하여 자체적인 디버깅이 가능하다. 단점이라면 파이썬에 익숙하지 않은 경우 문법이 다소 생소하다는 것이다.
RICO | http://openrico.org/
<화면11> RICO 홈페이지
Rico는 Script.aculo.us와 마찬가지로 Prototype 프레임워크 라이브러리가 필요하며, 다양한 화면효과에만 집중한
라이브러리이다. 엘리먼트의 변형 및 이동에 애니메이션 효과를 사용할 수 있다. 문서화가 잘 되어있지 않고 보급률과 지원 또한 저조한 단점이
있다.
SPRY | http://labs.adobe.com/technologies/spry/home.html
<화면12> SRRY 홈페이지
SPRY는 어도비에서 내놓은 Ajax 프레임워크이다. 다른 Ajax 지원 라이브러리 들은 JSON 통신 규격을 선호하는 데에 반해
SPRY는 XML로 주고받는 것에 특화되었다. 어도비답게 강력한 애니메이션 효과를 지원하며, 다양한 DOM유틸리티 메소드를 내장하고 있다.
HTML, CSS 그리고 자바스크립트의 기본지식만 알고도 쉽게 사용할 수 있도록 구성했다고 한다.
Xajax | http://xajaxproject.org/
<화면13> xajax 홈페이지
Xajax는 PHP에서 Ajax를 수월하게 구현하기 위한 라이브러리이다. 단순히 Ajax실현에만 집중되어 있고 서버-사이드 소스를 포함하고
있어 Ajax가 사용되지 않던 사이트를 Ajax 통신방식으로 변경 사용하고자 할 때 유용하다. 단점이라면, Ajax 외에 기능은 전혀 없다는
것이다.
<그림1> NateOnMain.exe의 타입 라이브러리
자바스크립트 라이브러리의 선호도와 적용사례
이상으로 자바스크립트 라이브러리의 종류와 특징에 대하여 알아보았다. 그렇다면, 어떠한 라이브러리가 가장 인기 있는 지에 대하여 알아보고
이러한 라이브러리를 도입하여 사이트를 구축했을 때의 모습은 어떠한지 살펴보자.
자바스크립트 라이브러리 선호도
Ajax 관련 정보를 폭넓게 다루는 사이트인 Ajaxian.com은 자바스크립트 라이브러리에 대한 선호도를 매 해마다 조사하고 있으며,
2007년 한 해 동안 최종 집계된 내용은 <그림 1>과 같다.
Prototype과 Script.aculo.us 는 2년 연속 왕좌를 지속하고 있으며, 그 다음으로 jQuery, YUI, Dojo
Toolkit, Ext JS 순으로 기록되었다. 특히 2006년 집계에서는 단 7%로 6위에 머물렀던 jQuery의 선호도가 폭발적으로 증가하고
있는 추세다.
자바스크립트 라이브러리 적용사례
<화면14> Prototype과 Script.aculo.us 라이브러리로 구축된 Gucci.com
wollzelle Media Design에서 Prototype과 Script.aculo.us 라이브러리를 사용하여 구축한 우리에게 패션
명품 브랜드로 잘 알려져 있는 구찌의 홈페이지이다. 플래시 못지않은 수준의 풍부한 사용자 경험을 체험하게 한다.
다양한 자바스크립트 라이브러리를 활용하여 구축된 Apple. com이다. 수평 스크롤 제품 내비게이션, 아코디언 컴포넌트를 이용한 사이드바
콘텐츠, 유려한 윈도우 팝업 등 자바스크립트 라이브러리를 폭넓게 응용하고 있다.
<화면15> Prototype과 Script.aculo.us 그리고 Dojo Toolkit라이브러리로 구축된
Apple.com
<화면16> Ext JS 라이브러리로 구축된 Djindexes.com
주식정보를 전문으로 다루는 사이트인 Dow Jones Indexes다. 탭 인터페이스로 무장한 Ext JS 라이브러리를 사용하고 있다.
일정간격으로 지속해서 주식정보를 업데이트하며, Ext JS의 강력한 소트-테이블은 데스크톱 못지않은 목록 정렬 환경을 제공한다.
<화면17> Dojo Toolkit 라이브러리로 구축된 Tripbase.com
여행 정보를 전문으로 다루는 Tripbase.com이다. 재미있게도 슬라이드 바를 이용해서 적절한 여행지를 추천한다.
제공 : DB포탈사이트 DBguide.net
