제이쿼리 UI(jQuery UI)는 제이쿼리(jQuery) 라이브러리를 기반으로 만들어진 공식 확장 플러그인 모음집입니다.
기본 제이쿼리가 웹 요소를 쉽게 제어하는 '기능'에 초점을 맞췄다면, 제이쿼리 UI는 달력, 팝업창, 드래그 앤 드롭 등 사용자가 화면에서 직접 보고 조작하는 ‘디자인 레이아웃과 반응형 UI 요소(위젯)’를 쉽게 만들 수 있도록 도와줍니다.
흔히 말하는 jqueryui.com은 이 라이브러리의 공식 웹사이트 주소입니다.
1. 제이쿼리 UI 사용법
제이쿼리 UI를 사용하려면
1) 제이쿼리 순수 파일,
2) 제이쿼리 UI 파일,
3) 제이쿼리 UI CSS 디자인 파일
까지 총 3가지가 필요합니다.
가장 간편한 CDN 방식으로 연결하는 방법은 다음과 같습니다.
HTML에 연결하는 코드
HTML 파일의 <head> 태그 안에 아래 순서대로 코드를 넣어주면 바로 사용할 수 있습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>jQuery UI 연습</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
</head>
<body>
</body>
</html>
2. 가장 많이 사용하는 플러그인 TOP 4
제이쿼리 UI가 제공하는 수많은 기능 중, 실무 웹 퍼블리싱이나 유지보수에서 가장 흔하게 접하는 핵심 플러그인 4가지를 소개해 드립니다.
① 데이트피커 (Datepicker) - 달력 날짜 선택기
웹사이트에서 호텔 예약일이나 생년월일을 클릭하면 슥 나타나는 달력 창입니다. 원래 일일이 만들려면 수백 줄의 코드가 필요하지만, 제이쿼리 UI를 쓰면 단 한 줄로 완성됩니다.
- HTML: <input type="text" id="myDate">
- JS: $("#myDate").datepicker(); (클릭하면 바로 예쁜 달력이 팝업됩니다.)
② 다이얼로그 (Dialog) - 모달 대화상자/팝업창
웹페이지 위에 뜨는 경고창이나 안내 팝업창(모달창)을 만들어 줍니다. 마우스로 창을 잡고 드래그하여 움직이거나, 우측 상단 X 버튼을 눌러 닫는 기능이 기본으로 내장되어 있습니다.
- HTML: <div id="myDialog" title="공지사항">내용입니다.</div>
- JS: $("#myDialog").dialog();
③ 드래그앤드롭 (Draggable & Droppable) - 마우스로 끌어다 놓기
HTML 요소를 마우스로 클릭해서 드래그(이동)할 수 있게 만들거나, 특정 영역에 드롭(놓기)했을 때 반응하게 만듭니다. 쇼핑몰 장바구니에 상품을 끌어다 넣는 기능을 구현할 때 많이 쓰였습니다.
- JS (드래그 활성화): $("#box").draggable();
④ 아코디언 (Accordion) - 접히고 펼쳐지는 메뉴
자주 묻는 질문(FAQ) 게시판처럼, 제목을 클릭하면 아래로 내용이 스르륵 펼쳐지고 다른 제목을 누르면 기존 내용이 접히는 메뉴 형태입니다.
- JS: $("#myAccordion").accordion();
💡 한눈에 정리하는 팁
- 제이쿼리 UI는 코딩 초보자도 코드 한 줄만으로 고급 웹 UI(달력, 팝업, 드래그 등)를 구현할 수 있게 해주는 고마운 도구입니다.
- 다만 최근 웹 개발 트렌드(React, Vue 등)에서는 자체적인 컴포넌트를 직접 만들어 쓰거나 부트스트랩(Bootstrap) 등을 더 많이 활용하기 때문에, 새로 짓는 사이트보다는 기존 관공서, 기업의 레거시 웹사이트를 유지보수할 때 자주 마주치게 될 것입니다.
'New' 카테고리의 다른 글
| 레거시 제이쿼리 플러그인 소개 (0) | 2026.06.04 |
|---|---|
| 모던 웹 환경에서도 여전히 사랑받는 대표 제이쿼리 플러그인 4가지 추천 (0) | 2026.06.04 |
| 제이쿼리(jQuery)를 웹사이트에 추가하는 방법 (0) | 2026.06.04 |
| jQuery (0) | 2026.06.04 |
| Ajax (0) | 2026.06.01 |