jQuery UI jQuery UI가 버전 1.5로 갱신되었다. 거의 다시 태어났다고 말하고 싶은 것은 단순한 기능 추가 뿐만이 아니라 기본적인 구조와 사용 용법에 많은 변화가 있었기 때문.

대략적인 주요 내용을 보면, API 사용 용법이 단순화되었고, 다른 파일들과의 의존성을 줄이기 위해 과거 plugin 형태로 있던 dimensions.js가 1.2.6 버전부터 jQuery core에 흡수되었으며, 새로운 ui.core.js가 소개되면서 새로운 plugin을 추가하는 작업이 훨씬 간단해 졌다.

그리고, 원래 Prototype 라이브러리script.aculo.us에 대응하는 프로젝트로 시작된 “Enchant”가 아예 jQuery UI에 합쳐지면서 여러 UI 요소들을 위한 16 가지 이상의 다양한 특수 효과들도 $('div').effect() 형태로 기본적으로 제공된다. 특히나 transfer, explode. clip, scale 효과는 이번에 처음 소개된 것들.

또, 흥미를 끄는 것이 복잡한 형태의 easing 효과들과 Class transitions가 추가되었는데, 특히나 Class transitions는 일종의 morphing 효과를 줄 수가 있어서 CSS의 class에 정의되어 있는 속성으로 점진적으로 바뀌어가는 모습을 보여줄 수가 있다. 이는 최근 Safari에 소개된 -webkit-transition 속성과도 닮아있다.

그리고 이것은 디자이너에게도 반가운 소식일텐데, 새로 만든 UI widget들을 사용하려는 사이트와 잘 어울리는 테마로 꾸며줄 수 있는 ThemeRoller의 소개.

ThemeRoller의 UI 모습
여기서는 각 control들의 색상과 모양을 선택해서 실제 모양을 확인해 본 후, 자기만의 테마를 입힌 UI widget들을 CSS 파일과 데모 페이지가 포함된 ZIP 파일로 내려받을 수 있다. 또, Theme Gallery도 제공하니, 다양한 테마들도 더불어 엿볼 수 있을 듯.

이번 발표 소식을 듣고있자니, 과연 Web UI widget들의 전성시대도 멀지 않았군. jQuery UI Changelog

jQuery 1.2 발표후 보고된 자질한 버그들을 잽싸게 잡으면서 jQuery 1.2.1이 배포되고 있다.
벌레 잡기와 함께 바뀐 주요 변경 내용은, 새로 추가되었던 상대적 애니메이션 효과의 API가 기존 애니메이션 스타일과 충돌을 일으키는 문제를 해결하면서 상대적 애니메니션 효과의 문법이 아래처럼 약간 바뀌었다.

$(...).animate({ height: "+=50px", width: "-=20%", fontSize: "+=2em" });

위에서, +=는 현재 위치에서 더하고, -=는 현재의 위치에서 값을 빼라는 의미로 사용.

그리고 대체 용법을 제공하면서 사라졌던 .eq() method가 다시 추가되었다. 여기에는 많은 플러그인들이 그 동안 .eq() method를 많이 써왔다는 점과, 기존에 이것을 대체하려고 했던 .slice()가 이 경우 자연스런 해법이 아닌 것 같아서 삭제가 재고되었단다.

1.2 발표 후, 연이어 급히 벌레 잡는 발표로 불안한 인상을 주기도 하지만 그 만큼 더 안정화 되었다고 믿고 싶다.

한편, 얼마 전에 예고되었듯이 jQuery UI가 공식 페이지와 함께 공개되기 직전인가보다.
아직 공식 발표 소식은 없지만, 잠깐 데모를 살펴봤는데 Safari에서는 몇몇 동작이 제대로 동작하지 않는 등, 아직 개발이 활발히 진행중인 상태라 실제 적용에는 아직 무리가 있는 듯 하지만, 앞으로 분명 UI 개발자들에게 다양한 선택의 폭을 넓혀주리라 믿는다.

jQuery UI demo window
데모 어플리케이션 중에, JavaScript Speed Test 어플리케이션을 Safari에서 열어보면 여지없이 Safari가 뻗어버려서 주의가 요구됨. 😳