금번 프로젝트에 jQuery와 이를 기반으로 한 UI Library들을 사용해서 해 보았습니다.
혹시, 비슷한  내용으로 프로젝트를 진행할  분들에게 도움이 되었으면 해서 간단하게 나마 사용한 Library에 대한 소개를 하고자 합니다.

사용한 Library는 다음과 같습니다.

  jQuery Core는 말 그대로 핵입니다. ^^; 다른 Library들은 다 이 걸 기반으로 작동하도록 만들어진거죠. 해당 사이트에 보시면 Reference나 Tutorial 등이 있으니 하나씩 따라해 보시면 jQuery 식의 프로그래밍에 대한 감을 잡으실 수 있을 겁니다. 이 것만 익혀서 적용하셔도 기존의 JavaScript 코드를 상당 부분 줄일 수 있습니다. jQuery의 장점이 여러가지가 있지만 제가 제일 맘에 들어하는 건 DOM 구조를 다루는데 간편한 함수를 제공하고 속도가 빠르다는 점입니다. 그냥 HTML을 문자열로 만들어서 대상 태그 아래로 넣든지 교체하든지 앞에 넣든지 뒤에 넣든지 다 할 수 있습니다.
  그리고 요즘 JavaScript Library들의 특징이 CSS 3 식의 Selector를 사용하게 하는 건데요. 이게 정말 강력합니다. 여기선 간단한 소개 내용이니 구체적인 건 설명하지 않겠습니다. 문서를 보세요. ^^

  jQuery UI는 jQuery 에서 공식적으로 진행하고 있는 UI  Library입니다. 현재는 기반이 되는 기능과 특수효과, 그리고, 가장 많이 사용할 것으로 여겨지는 Widget 들을 제공하고 있습니다.

그리고, 강력한 테마기능을 갖추고 있습니다. 다른 UI 플러그인 들이 이를 기반으로 작성하면 테마가 같이 적용됩니다. 테마는 이미 등록된 것을 사용할 수도 있구요. Theme Roller 에서 자신만의 테마를 정의할 수도 있는데, 기등록된 테마를 기반으로 할 수도 있습니다. 예제에 보면 동적으로 테마를 바꾸는 기능이 있는데요, Cookie 에 선택한 값을 저장하도록 되어 있어서 개인마다 취향대로 테마를 선택할 수도 있습니다.
  이 Library가 기대가 많이 됩니다. Wiki 쪽에 보면 여러 Widget들이 개발중인 걸 보실 수 있습니다.

  jQuery Grid는 말 그대로 Grid 기능입니다. 이번에 사용해 본 결과 상당히 만족스럽네요. Grid가 가져야할 기본 기능 외에도 Tree Grid 기능도 있고, Subgrid 기능도 갖추고 있습니다. Tree Grid 는 한 칼럼만 사용하면 그냥 간단한 Tree 처럼 사용할 수도 있습니다. 아쉬운 건 한국형 표에서 많이 나오는 다중 칼럼이 안 된다는 거요. ^^; 이건 그냥 출력용으로 HTML로 구현하면 될 듯.
  이 Grid는 여기서 소개하기에는 너무 많은 기능을 자랑합니다. Grid 자체에서 새 항목을 등록하거나 수정하는 기능을 칼럼에 대한 설정만으로도 가능하게 되어 있습니다. 데모나 문서를 참조해서 보세요.

  jQuery Tools는 jQuery UI에서 지원해 주지 못하는 있었으면 하는 Widget들을 지원해 줍니다. Tab은 UI 쪽에 있긴 하지만요.
이건 백문이 불여일견입니다. 한 번 데모(http://flowplayer.org/tools/demos/index.html )를 보세요.

  jQuery Form은 Form 값을 Ajax로 처리하는 걸 간편하게 해 주는 Library입니다. 처리의 간편함을 위해 사용했습니다. 아쉬운 건 JavaScript Object의 값을 Form의 각 요소에 세팅해 주는 게 있었으면 했는데 없어서 직접 구현했네요.

   jquery keyfilter는 Input 필드나 TextArea에서 Key 입력을 제한해 주는 Library입니다. 보통 keydown 이벤트에 keyCode 값을 읽어 true / false를 돌려 주는 식으로 구현을 많이 하는데 역시 이걸 사용하면 간편해집니다.

  jquery numberformatter 는 숫자 포매팅해 주는 Library 입니다. Locale 을 적용해서 포매팅 해 주는 게 특징이구요. 패턴을 직접 지정해 줄 수도 있습니다.

  UI.Layout 은 BorderLayout을 구현한 건데요. Java에서 AWT, Swing 프로그램이나 델파이 같은 RAD 툴을 써 보신 분은 아실 겁니다. 화면의 영역은 east, west, south, north, center 5가지 영역으로 나누어 놓고, 전체 화면의 크기가 변경될 때 east, west는 지정한 폭을, south, north 는 지정한 높이를 유지시켜 주는 역할을 합니다. 물론 그렇기 때문에 center 영역은 나머지 4개 영역을 제외한 영역으로 꽉 차게 유지가 되는 거죠.
  여기에 동서남북 4개 영역과 center 사이의 경계를 드래그로 조절하게 한다든지 4개 영역을 닫았다 열었다 한다든지 하는 기능들이 들어 있습니다. 웹 프로그램이 Thin Client 역할로 사용되면서 이런 기능들이 요구되고 있는 상황인 거죠.
  이 Layout 이 아쉬운 부분이 jQuery Grid와 연동이 자동으로 안 되고 onresize 이벤트 핸들러를 만들어 처리해 주어야 하는 점이었습니다. 하지만 복합한 코딩을 요구하는 건 아니니까요. 간단히 작성하실 수 있을 겁니다.

  그리고 마지막 뽀너스입니다. ^^
  이번 프로젝트에서 써 보지는 않았는데요. 설마 이런 게 JavaScript로 가능하리라고는 생각지 않아서 검색조차 안 해 봤는데 있더라구요. MaskEdit 가 있었습니다.

댓글을 달아 주세요

Posted by 발 빠른 너구리 Fast-Racoon

▲ TOP ▲