JQuery UI

1. 개요

jQuery UI는 jQuery 라이브러리를 기반으로 하는 사용자 인터페이스(UI) 라이브러리이다. 상호작용, 위젯, 효과, 유틸리티 등 다양한 기능을 제공하며, 웹 페이지 요소의 드래그, 드롭, 크기 조절, 선택, 정렬과 같은 마우스 기반 대화형 기능을 구현한다. 위젯은 테마를 적용할 수 있는 컨트롤을 제공하며, 자동 완성, 날짜 선택기, 진행률 표시줄, 슬라이더 등이 포함된다. 또한 애니메이션 효과를 통해 사용자 인터페이스를 풍부하게 만들며, 2007년 9월에 처음 출시되었다.

2. 기능

jQuery UI는 웹 페이지의 사용자 인터페이스를 향상시키기 위한 다양한 기능을 제공하며, 크게 상호작용, 위젯, 효과, 유틸리티 네 가지 범주로 나눌 수 있다.

1.11.4 릴리스 기준으로, 마우스를 이용한 드래그 앤 드롭이나 요소 정렬과 같은 상호작용 기능이 지원된다. 또한, 자동 완성, 날짜 선택기, 진행률 표시줄, 슬라이더 등 다양한 위젯을 제공하며, 이 위젯들은 테마 기능을 통해 디자인을 자유롭게 변경할 수 있다. 색상 애니메이션, 클래스 전환 효과 등 시각적인 효과 기능도 포함하고 있다.

jQuery UI의 기능들은 필요에 따라 개별적으로 선택하여 다운로드할 수 있어 파일 크기를 줄이는 데 유리하다. 이러한 모듈식 구성은 서드 파티 개발자가 직접 테마를 만들어 제공하는 것을 가능하게 한다. 예를 들어, jQUIT Builder에서는 윈도우 8 스타일의 UI를 모방한 테마를 제공하기도 한다.

2.1. 상호작용

사용자와 웹 페이지 간의 상호작용을 지원하는 기능들이다. 마우스 기반의 대화형 기능을 구현하는 데 사용된다. 1.11.4 릴리스부터 드래그 가능/드롭 가능 및 정렬 가능과 같은 상호 작용이 지원된다.

JQuery UI에서 제공하는 주요 상호작용 기능은 다음과 같다.

* 드래그 (Draggable): 각 요소에 대한 드래그 기능을 구현한다.
* 드롭 (Droppable): 드래그와 함께 사용되어 요소의 드롭을 가능하게 한다.
* 크기 조절 (Resizable): 요소의 크기 조절을 구현한다.
* 선택 가능 (Selectable): 여러 요소를 선택할 수 있게 한다.
* 정렬 가능 (Sortable): 요소의 정렬을 할 수 있게 한다.

2.2. 위젯

jQuery UI의 위젯은 웹 사이트 이용자가 시각적으로 상호작용하는 컨트롤 요소이다. 모든 위젯은 테마 메커니즘을 통해 디자인을 변경할 수 있다. 위젯은 기능별로 분할하여 다운로드할 수 있어 파일 크기를 줄이는 데 유리하며, 서드 파티가 제작한 테마를 적용하는 것도 가능하다. 예를 들어, jQUIT Builder에서는 윈도우 8 스타일 UI를 모방한 테마를 제공하기도 한다.

다음은 jQuery UI에서 제공하는 주요 위젯 목록이다.

또한, jQuery UI 1.11.4 릴리스부터는 드래그 가능(Draggable), 드롭 가능(Droppable), 정렬 가능(Sortable)과 같은 상호 작용 기능도 위젯과 유사하게 지원된다.

2.3. 효과

jQuery에서 제공하는 기본 효과 기능을 확장하여, UI 요소가 표시되거나 사라질 때 다양한 애니메이션 효과를 적용할 수 있다.

* 색상 애니메이션 (Color Animation): 한 색상에서 다른 색상으로 부드럽게 전환하는 애니메이션 효과를 제공한다.
* 클래스 전환 (Toggle Class, Add Class, Remove Class, Switch Class): CSS 클래스를 추가, 제거, 전환하면서 스타일 변경에 애니메이션 효과를 적용한다.
* 효과 (Effect): 나타나기(Fade-in), 미끄러지기(Slide-down), 폭발하기(Explode) 등 미리 정의된 다양한 시각 효과를 제공한다.
* 토글 (Toggle): 지정된 효과를 사용하여 요소를 나타내거나 숨기는 동작을 전환한다.
* 숨기기/보이기 (Hide, Show): 위에서 언급된 효과들을 사용하여 요소를 숨기거나 표시한다.

2.4. 유틸리티

* Position – 다른 요소의 위치에 상대적으로 요소의 위치를 설정한다(정렬).
* Widget Factory – 모든 JQuery UI 위젯과 동일한 추상화를 사용하여, 상태를 저장하는(stateful) jQuery 플러그인을 생성한다.

3. 예제

다음은 jQuery UI를 사용하여 특정 HTML 요소를 사용자가 마우스로 드래그할 수 있도록 만드는 간단한 예제이다.

먼저, 드래그 기능을 적용할 HTML 요소를 준비한다. 아래 예시에서는 `id` 속성값이 "draggable"인 `div` 요소를 사용한다. 이 요소에 간단한 스타일을 적용하여 시각적으로 구분되도록 할 수 있다.

다음으로, JavaScript와 jQuery를 이용하여 해당 요소에 드래그 기능을 추가한다. DOM이 완전히 로드된 후 스크립트가 실행되도록 `$(function() { ... });` 구문 안에 코드를 작성한다. `#draggable` CSS 선택자를 사용하여 `id`가 "draggable"인 요소를 선택하고, `.draggable()` 메소드를 호출하여 드래그 기능을 활성화한다.


$(function() {
// id가 "draggable"인 요소를 드래그 가능하게 만듭니다.
$("#draggable").draggable();
});


위 코드를 웹 페이지에 적용하면, 사용자는 `id`가 "draggable"인 `div` 요소를 마우스로 클릭하여 원하는 위치로 자유롭게 끌어다 놓을 수 있게 된다. 이는 웹 인터페이스에서 사용자 경험을 향상시키는 데 유용하게 활용될 수 있다.

4. 출시 역사

jQuery UI는 2007년 9월 17일에 처음 출시되었다.