제이쿼리는 자바스크립트 라이브러리입니다. 라이브러리란 이미 만들어진 많은 기능이 있는 함수들이 모인 도서관(Library)을 말합니다. 자바스크립트는 배우기가 어려워서 일반인들은 접근하기가 힘들지만 제이쿼리는 누구든지 배울 수 있도록 쉽게 돼있습니다. 어려운 자바스크립트를 이용해서 어떤 기능을 하는 플러그인을 만들자면 수많은 코드가 필요하지만 일반적으로 많이 사용하는 기능을 미리 정의해 놓고 라이브러리에 저장해서 불러오기만 하면 되는 것이 제이쿼리입니다.
이러한 자바스크립트 라이브러리는 제이쿼리만 있는 것이 아니라 Prototype, script.aculo.us, Ext Core, jsPHP, MooTools, jQuery, Ext JS, DHTMLX, Dojo Toolkit 등 종류가 많습니다. 그중에서 가장 많이 쓰이고 인기가 많은 것이 제이쿼리입니다. 전세계적으로 70%나 사용한다고 합니다. 자바스크립트가 주로 쓰이는 곳은 요소의 동적인 행동(Dynamic Behavior)입니다. 예를 들면 웹페이지에서 메뉴를 클릭하면 하위메뉴가 스르륵 내려온다거나 어떤 요소를 클릭드래그해서 이동시킨다거나 하는 것에 사용됩니다. 또한 스스로 움직이는 애니메이션 배너도 자바스크립트에 의한 것입니다. 이러한 자바스크립트는 웹 프로그램 뿐만 아니라 일반 프로그램인 포토샵 같은 곳에도 사용됩니다.
웹 프로그램에서 움직임을 만들 수 있는 프로그램이 플래시가 있습니다. 애플이 스마트폰에 플래시 적용을 배제하고 제이쿼리를 선택한 이유는 플래시는 플래시 플레이어를 설치해야 동작이 되는데 반해 제이쿼리는 필요할 때마다 웹으로 내려받아 사용하므로 부담이 없습니다. 휴대용 기기는 디스크 용량이나 파일 용량이 제한되는데 되도록 작고 가벼운 파일을 사용해야 배터리 소모도 적습니다. 그래서 채택된 것이 제이쿼리입니다. 삼성의 스마트 폰에서는 초기에 플래시를 지원하도록 했는데 지금은 어떤지 모르겠군요.
제이쿼리가 사용하기 쉽게 된 자바스크립트이지만 원하는 기능을 만들기 위해서는 시간을 투자해서 배워야합니다. 그런데 이미 만들어진 플러그인을 사용할 수 있다면 좋은일이 아닐 수 없습니다. 플러그인이라 말 그대로 꼽기만 하면 작동되는 것을 의미하지만 실제로는 몇가지 설정을 해줘야합니다. 그만큼 쉽게 사용할 수 있다는 의미입니다. 플래시는 플러그인을 만들었다 해도 남이 응용해서 사용하려면 플래시에 대해 잘 알고 있어야 가능합니다. 하지만 제이쿼리는 그렇지 않고 얼마든지 응용해서 사용할 수 있습니다. 어떤 웹사이트에서 애니메이션이 되는 부분을 보면 예전에는 모두 플래시였지만 지금은 대부분이 제이쿼리입니다. 그만큼 이미 만들어진 플러그인을 많이 사용하고 있다는 것이죠. 워드프레스의 애니메이션 플러그인도 대부분 이미 만들어진 제이쿼리 플러그인을 응용해서 워드프레스에서 사용할 수 있도록 한 것입니다. 티스토리만 해도 블로그의 이미지를 클릭하면 크게 확대되는 것도 무료 플러그인인 라이트박스(Light Box)를 사용해서 만들어진 것입니다.
구글에서 JQuery 로 검색하면 수많은 플러그인이 나타납니다. 특정 이름을 추가 입력하면 원하는 플러그인을 찾을 수 있습니다. 예를 들어 JQuery image slider 로 검색하면 되겠죠. 이 검색어로 검색하니 제 블로그에 사용한 블루베리 이미지 슬라이더가 첫번째로 나오는군요. 세번째를 보면 무려 100개 이상의 플러그인이 있는 블로그가 보입니다. 그 아래는 60개 이상이 있다고 합니다. 이렇게 한 종류만 해도 수많은 무료 플러그인이 있습니다. 문제는 영어로 돼 있다는 것인데 사실 코드 자체가 영어로 돼있으니 문제될 것 없습니다. 그리고 검색할 때는 구글 코리아(google.co.kr)가 아닌 구글닷컴으로 검색해야 좋습니다. 검색화면 우측하단에 전환하는 링크가 있습니다.
며칠전에 티스토리 스킨을 만들면서 원하는 기능을 가진 플러그인을 찾아봤는데 간단하고 훌륭한 플러그인 찾아서 적용해보니 응용도 잘되고 해서 이를 사용하는 방법을 알아보겠습니다. 이번에는 검색어를 제이쿼리 토글(toggle) 감추기(hide) 보이기(show)로 검색했더니 제이쿼리닷컴의 사이트가 먼저 나오고 그 다음에 바로 원하는 플러그인 사이트가 나옵니다.
사이트로 들어가서 보니 예제도 나옵니다. Show 버튼을 클릭하니 감춰져있던 컨텐트가 나타나고 버튼이 Hide로 바뀝니다. 다시 클릭하니 컨텐트가 사라지고 다시 버튼이 Show로 바뀝니다. 이것이 바로 제가 원하던 플러그인이었습니다. 스크롤해서 내리니 사용방법이 자세하게 나오고 코드 설명도 나옵니다. 대부분의 사이트는 내려받을 수 있는 링크가 있으니 하단으로 더 내려서 링크 버튼을 클릭해서 내려받습니다.
압축해제하니 파일이 달랑 하나만 있습니다. 클릭하니 웹브라우저에 열리고 버튼을 클릭하니 동작이 잘됩니다. 이제 이 파일을 분석해서 응용할 수 있는지 알아보겠습니다.
파일을 텍스트 편집기에 열어보니 간단한 구조입니다. 상단에는 위에서 언급했듯이 자바스크립트 라이브러리인 제이쿼리를 구글의 코드 저장소인 CDN(Content Delivery Network)에서 내려받아 사용하게 했습니다. 내 서버의 부담이 없고 이미 제이쿼리를 사용하는 다른 사이트에서 접속했던 방문자라면 이미 컴퓨터(모바일)에 이 코드가 내장돼 있으므로 속도도 빠릅니다. 제이쿼리를 사용하지 않는 사이트는 거의 없으니 이러한 방법이 가장 효율적입니다.
두번째는 실제 플러그인입니다. 어떤 플러그인은 아주 복잡해서 설정을 하거나 수정하려면 한참을 찾아야하고 별도의 파일로 만들어져서 링크를 걸어 사용하게 돼있습니다.
세번째는 스타일시트인데 블로그에 응용하는데는 필요없는 부분입니다. 이 코드의 하단에는 html 태그들이 있습니다.
제이쿼리는 자바스크립트이므로 html페이지에서 사용할 때는 항상 <script>...</script>태그를 사용합니다. 그리고 처음 시작이 $(document).ready(function() {로 돼있고 그다음이 실제의 기능이 나옵니다. 그리고 마지막에는 프로그램을 닫기 위해 }); 가 여러개 모여있습니다. 몇개가 있든 무시하고 건드리지 않으면 됩니다. 중요한 것은 이 괄호들 사이에 있는 것입니다.
제이쿼리는 html의 요소를 대상으로 어떤 동작을 일으키는 것을 주 목적으로 하므로 동작의 대상이 있어야합니다. 이 둘을 연결하면 위 그림과 같습니다. 제이쿼리의 동작 대상이 요소라고 했는데 제이쿼리와 요소를 연결해주는 것이 선택자입니다. CSS의 선택자와 같습니다. 위에서는 클래스 선택자를 사용해서 여러곳에 사용할 수 있게 했습니다. 제이쿼리의 .nav-toggle은 button 태그를 대상으로 해서 이 버튼을 클릭하면 어떤 동작이 일어납니다. 그 동작이란 토글이며 이것은 하나의 버튼으로 두가지 효과를 가져오는 효과입니다. 한번 누르면 하나의 동작이 일어나고 다시 같은 버튼을 누르면 반대의 동작이 일어나는 것입니다. 여기서는 보이거나 감추는 역할을 합니다. 무엇을? 이것은 또 다른 것을 대상으로 합니다. button 태그의 href에 있는 #collapse1이라는 아이디 선택자를 대상으로 하고 이 아이디 선택자는 바로 아래의 id="collapse1"에 있습니다. 이 div 태그 안에 있는 내용을 보이거나 감추라는 의미죠. 그 내용은 블라블라블라..(우리말로 어쩌구저쩌구라는 의미입니다). 이것을 보이거나 감추는 것이죠. 그러면 버튼안에 있는 글자의 변화는 어디서 일어날까요? 바로 button 태그 사이에 있는 show라는 곳에 있습니다. 이것은 제이쿼리에 의해서 처음에는 div 태그가 안보이게 될때(display:none;) Show로 나타나고 토글되면 Hide로 나타나도록 해놓았습니다.
클릭으로 인해 어떤 동작이 일어나는 제이쿼리 플러그인은 대부분 이런 형태의 구조를 갖고 있습니다. 간단한 내용이므로 블로그에 적용하기는 어렵지 않습니다. CSS를 좀 다룰줄 알면 되는 것이죠. 수학에서 공식에 수를 대입하는 정도의 능력이면 됩니다. 제가 만든 블로그 스킨의 사이드바의 박스에 적용한 것이 이 플러그인인데 문제는 위의 기능은 처음에는 컨텐트가 나타나지 않는 것입니다. 그런데 블로그의 사이드바 박스는 열려있어야하고 필요에 따라 닫을 수 있어야합니다. 그래서 위 내용을 반대로 하면 됩니다.
display:none;은 diplay:block;으로, Hide 는 Show로, Show는 Hide로 바꾸면 됩니다. 위와 같이 하고 저장한 다음 웹브라우저에서 새로고침하면 아래처럼 원래 감춰져있던 것이 나타나있습니다. 버튼을 클릭하면 안보이고 버튼의 이름은 Show로 나타납니다.
자 그러면 진도를 더 나아가서 두가지를 동시에 할 수 있어야합니다. 블로그의 박스를 어떤 것은 처음에 감추게 하고 어떤 것은 열린 상태로 만드는 것이죠. 처음 상태의 것에 위에서 수정한 상태의 것을 추가하면 간단해집니다. 하지만 대상이 달라야하므로 선택자들만 다르게 하면 됩니다.
처음 상태의 제이쿼리 소스 부분을 복사해서 바로 아래에 붙여넣고 선택자를 다른 이름으로 하고 none는 block로, Show는 Hide로, Hide는 Show로 바꿔줍니다.
html 부분도 마찬가지입니다. section 태그 전체를 복사해서 바로 아래에 붙여넣고 클래스 선택자는 제이쿼리의 선택자와 일치하게하고 버튼 선택자도 일치시킵니다. 그리고 Show를 Hide로 바꿔줍니다. 수학 공식은 계산까지 해야하지만 이것은 대입만 시키면 됩니다.
저장을 하고 웹브라우저에서 보면 두개의 요소가 동시에 나타나고 버튼을 클릭하면 서로 다른 동작을 보입니다. 여기까지는 그래도 쉬운 편이죠. 실제 블로그나 웹사이트에서 적용하려면 다른 플러그인과 충돌도 일어나고 기존의 선택자를 바꿔줘야 하는데 좀 복잡합니다. 하지만 어디까지나 수학 공식에 대입하는 수준에 불과합니다. 글이 길어지니 다음 글에 방법을 알아보기로 하겠습니다.
이처럼 제이쿼리를 잘 몰라도 얼마든지 제이쿼리 플러그인은 사용할 수 있습니다. 웹디자인이란 이미 개발해 놓은 것을 얼마나 적절하게 사용할 줄 아는가에 달려있습니다. 제이쿼리 플러그인은 수없이 많습니다. 없다면 위처럼 응용해서 사용할 수도 있고 다만 지식이 필요하다면 CSS입니다. 웹사이트 만드는 도구는 티스토리도 있고 워드프레스, XE엔진 등 많습니다. 더 훌륭한 웹사이트 제작 도구인 드루팔도 있죠. 웹디자이너는 이런 도구들을 잘 활용하면 되는 것입니다. 얼마나 멋지게 만드는가가 숙제이고 그 숙제를 풀수 있는 도구는 제이쿼리에 있습니다. 정지된 그림은 방문자의 눈길을 끌 수 없습니다. 뭔가 움직이고 클릭하면 동작이 일어나는 웹사이트나 블로그는 방문자의 눈을 즐겁게해서 조금이라도 더 머물 수 있게 할 수 있습니다.
해당 사이트를 방문해 주는 것만으로도 이 플러그인의 개발자에게 도움이 되니 소스는 첨부하지 않겠습니다.
