Javascript | jQuery 유용한 플러그인과 라이브러리 소개

 

사용자 인터페이스 개발을 위한 jQuery UI 플러그인 이외에도 유용한 플러그인과 라이브러리가 많습니다. 이미지 관련, 텍스트 관련, 모달 창 관련, 날짜 / 차트 관련 등 분류해서 정리해 봤습니다.

 

목차

• 이미지 / 동영상 
• 텍스트 
• 스크롤 / 팝업창 / 그리드
• 날짜 / 차트
• 기타

 

 

이미지 / 동영상 

 

슬라이더

▶ Slick Carousel - 이미지 슬라이더로 반응형이며 터치 기능을 지원하는 플러그인입니다. 캐러셀이란 '회전목마'란 뜻으로 돌아가며 슬라이드가 보여지는 방식입니다.

Slick Carousel

▶ Owl Carousel - 반응형 이미지 슬라이더와 캐러셀 구현
▶ jQRangeSlider - 날짜, 시간, 숫자 등 사용자가 범위를 선택할 수 있는 슬라이더
▶ Swiper.js - 모바일 터치 슬라이더 플러그인으로 이미지 갤러리, 배너 슬라이드쇼 등의 기능

 

애니메이션

▶ Animate.css - 다양한 CSS 애니메이션 효과를 제공

▶ Velocity.js : 웹 애니메이션을 구현하기 위한 플러그인

 

플레이어

▶ jPlayer - HTML5 오디오 및 비디오 플레이어를 구현

▶ Plyr - HTML5 비디오 플레이어 구현

 

jPlayer

 

그래픽

▶ jCanvas - HTML5 캔버스를 사용하여 그래픽을 그리고 상호작용

▶ jQuery.ui.rotatable - 이미지 회전

 

 

텍스트 

 

▶ CountUp.js - 숫자 애니매이션 효과를 제공하는 플러그인
▶ Typed.js - 타이핑 애니메이션 효과 플러그인
▶ FitTest.js - 제목이나 텍스트 요소의 글꼴 크기를 자동으로 조정
▶ jQCloud - 워드 클라우드. 텍스트 데이터의 빈도를 시각적으로
▶ Mark.js : 검색어를 강조 표시하는 기능을 제공
▶ Clipboard.js - 클립보드에 텍스트를 복사하는 기능을 제공
▶ Prism.js - 코드 하이라이팅을 위한 플러그인

 

 

 

 

스크롤 / 팝업창 / 그리드

 

스크롤

▶ Waypoints - 스크롤 이벤트를 기반으로 웹 페이지의 특정 위치를 감지
▶ Scrollify - 스크롤 이벤트를 사용해 섹션 간 부드러운 이동을 구현
▶ Sticky Kit - 요소를 스크롤에 고정시키는 기능
▶ ScrollTo - 부드러운 스크롤 이동을 구현
▶ Wow.js - 스크롤 이벤트를 기반으로 요소에 애니메이션 효과를 추가
▶ ScrollMagic - 스크롤 이벤트에 반응해 요소들을 애니메이션화
▶ NanoScroller - 커스텀 스크롤바를 구현
▶ ScrollReveal.js - 스크롤 이벤트에 반응해 요소들을 애니메이션화
▶ SimpleBar - 커스텀 스크롤바를 제공

 

팝업창 / 모달창 / 알림

▶ Magnific Popup - 이미지, 비디오, iframe 등 다양한 콘텐츠를 모달 창으로 표시
▶ Fancybox - 이미지, 동영상, 웹페이지 등 모달 형태로 표시할 수 있는 플러그인
▶ Lightbox - 이미지를 확대해 모달 형태로 보여주는 기능
▶ jBox - 알림, 경고, 모달 창 등 다양한 팝업 요소를 제공
▶ Toastr - 경고, 성공, 정보 등 다양한 유형의 알림을 지원
▶ SweetAlert - 사용자에게 경고창과 모달 창을 표시

 

그리드

▶ DataTables - 테이블형태의 데이터를 가독성 좋게 표시할 수 있는 플러그인

▶ DataTables Buttons - 데이터 테이블 플러그인에 추가적인 버튼 기능을 제공
▶ Isotope - 그리드 형태의 레이아웃 구현
▶ Masonry - 동적인 그리드 레이아웃 구현
▶ Shuffles.js - 그리드 레이아웃의 아이템을 재정렬하는 기능

 

 

날짜 / 차트

 

일정 / 달력

▶ Timepicker - 날짜와 시간을 선택
▶ FullCalendar : 웹페이지에서 일정 및 이벤트를 표시 / 관리
▶ Pikaday - 사용자에게 달력을 선택할 수 있는 기능을 제공

 

그래프 / 차트

▶ Chart.js - HTML5 캔버스를 사용하여 다양한 그래프와 차트를 생성
▶ Morris.js - 그래프와 차트를 생성하기 위한 플러그인
▶ Flot - 그래프와 차트를 생성
▶ Chartist - 반응형 그래프와 차트를 생성

 

 

기타

 

로딩 / 전환

▶ Lazy Load - 이미지나 비디오 등의 미디어 콘텐츠를 지연 로딩해 초기 페이지 로딩 속도를 개선
▶ Barba.js - 웹 페이지 전환을 부드럽게 처리

 

파일

▶ Dropzone.js - 파일업로드를 편리하게 구현

▶ FileSaver.js - 파일 다운로드 라이브러리

 

드롭다운 목록

▶ Select2 - 사용자가 선택할 수 있는 드롭다운 목록 구현

▶ Chosen - Select2와 유사한 플러그인으로 검색, 다중 선택 가능합니다.

 

드래그

▶ Dragula - 드래그 앤 드랍

 

폼

▶ jQuery Validation - 웹 폼의 유효성 검사를 쉽게 구현

▶ jQuery.form.js - jQuery를 통한 폼 처리, 파일 업로드

 

지도

▶ jVectorMap - 벡터 기반의 지도를 웹페이지에 구현할 수 있는 플러그인

 

 

관련포스트

Javascript | jQuery UI 소개와 사용방법