제이쿼리 이미지 슬라이더 배너를 자동으로 만들어주는 프로그램 - 와우슬라이더(Wow Slider)

제이쿼리 이미지 슬라이더 배너를 자동으로 만들어주는 무료프로그램을 소개합니다. 개인용으로 무료이고 이미지 하단에 제작자의 로고가 첨부되지만 상당히 좋은 프로그램입니다. 12개의 템플릿과 12개의 슬라이더 배너를 선택할 수 있으며 CSS를 조정하면 이미지도 자유롭게 원하는 크기로 설정할 수 있습니다. 이만한 프로그램이 개인용으로나마 무료라는게 믿어지지 않을 정도로 상당히 좋습니다. 제 블로그에 오랫만에 배너를 바꾸려고 작업했는데 제이쿼리가 많이 설치돼서 그런지 버벅거리더군요. 특히 인터넷 익스플로러에서는 상당히 버벅거립니다. 그래서 제거했습니다. 

이곳 을 클릭하면 해당 사이트로 이동합니다. 12종류의 데모를 확인해보시고 하단에 Free Download버튼을 클릭합니다. 윈도우버전과 맥버전이 가능하며 유료인 경우 1개 사이트용이 49달러, 무한 사용가능이 69달러입니다. Free Edition 버튼을 클릭하면 이름과 이메일 주소를 입력하는 창이 나옵니다. 이름은 적당한 이름을 입력하고 이메일 주소는 정확이 입력한 다음 Download Now 버튼을 클릭하면 내 이메일로 다운로드할 수 있는 링크가 보내집니다.

 
자신의 컴퓨터에 맞는 OS를 선택해서 링크를 클릭하면 실행파일이 다운로드 됩니다. 찾기 쉬운 폴더에 저장하고 파일을 더블클릭하면 설치됩니다. 사용법은 아주 간단합니다.

프로그램을 실행하면 창이 나옵니다. 우선 포토샵으로 배너로 사용할 여러개의 이미지를 같은 크기로 잘라놓은 다음 특정 폴더에 저장해 놓습니다. 1의 플러스 아이콘을 클릭하면 브라우저창이 나옵니다. 저장한 이미지가 있는 폴더로 이동하여 첫 이미지를 클릭하고 Shift키를 누른채 마지막 이미지를 선택해서 전체 이미지를 선택하고 Open버튼을 클릭하면 위처럼 빈 공간에 이미지가 나타납니다. 2의 스패너아이콘을 클릭하면 다음과 같은 창이 나옵니다.

1의 란에 적당한 이름을 입력합니다. 처음에 설정된 대로 그대로 놔두면 되고 9를 클릭하여 썸네일을 볼수 있는 메뉴아이콘의 위치를 정합니다. 각 부분의 내용은 다음과 같습니다.

2는 슬라이드가 자동반복할 수 있습니다. 3은 이미지에 마우스오버시 애니메이션이 정지됩니다. 4는 한번의 전체이미지 애니메이션이 실행되고 반복되지 않습니다. 5는 이미지 설명을 보이게 합니다. 6은 이전, 다음 버튼을 보이게 합니다. 7은 블릿 네비게이션을 보이게 합니다. 작은 버튼형태의 이미지입니다. 클릭하면 썸네일 이미지가 나타납니다. 10은 이미지 프레임과 그림자를 제거합니다.

11의 Images아이콘을 클릭하면 다음창으로 넘어갑니다.

1에서 하단의 이미지를 보면서 템플릿을 선택합니다. 버튼 아이콘과 내비게이션의 위치 설명이미지의 위치가 각각 다릅니다. CSS를 변경하면 안보이게 하거나 위치를 변경할 수 있습니다.
2를 클릭하여 정해진 이미지 사이즈를 선택할 수 있고 대부분의 경우 Custom size를 선택해서 자신의 이미지 사이즈를 3에 입력합니다. 4에서 6은 포토샵에서 이미지 사이즈를 정했으니 필요없는 설정이지만 이미지 사이즈가 각각 다른 경우 축소시키거나 확대할 수 있는 기능입니다. 7에서 이미지의 품질을 정합니다. 8은 애니메이션의 종류입니다. 총 12종이며 선택을 하면 9에서 사용예가 나옵니다. 10은 슬라이드 사이의 간격 시간입니다. 하나의 슬라이드가 끝나고 다음 슬라이드가 나올때까지의 시간이죠. 11은 애니메이션이 실행되는 시간입니다. 12를 클릭하면 워트마크 즉 제작자의 로고가 보이지 않게 하는 링크인데 구매하는 사이트로 이동합니다. 다 설정이 되면 13의 Publish 아이콘을 클릭합니다.

 
1의 브라우즈 버튼을 클릭하여 저장할 폴더를 선택합니다. 2는 그대로 사용해도 되고 파일의 이름을 바꿀 수도 있습니다. 3에 체크하면 FTP로 서버에 보낼 수도 있고 4에 체크하여 웹 페이지에 삽입도 가능하며 5에서 줌라나 워드프레스용 모듈로 만들 수 있습니다. 6에 체크하고 7의 버튼을 클릭하면 기본 웹브라우저에 실행이 되면서 나타납니다.

만드는 것은 쉬운데 블로그나 사이트에 설치하려면 구조를 알아야합니다. 저장폴더를 열면 두개의 폴더와 index파일이 있습니다. data1폴더에는 포토샵에서 만든 이미지들이 새로 저장됩니다. tooltips폴더는 내비게이션 아이콘에 마우스오버시 나타나는 작은 이미지인 썸네일이 있는 폴더입니다. engine1폴더에선 애니메이션이 실행되는 제이쿼리 파일과 아이콘, CSS 스타일시트 파일이 있습니다. jquery.js파일은 제이쿼리 라이브러리로 구글의 제이쿼리 라이브러리 를 사용하면 더 좋습니다. 파일의 이름들이 이미 사용되고 있는 파일들과 유사해서 서로 중복될 수 있으므로 파일명을 바꿔주고 html파일에서도 경로를 바꿔주는 것이 좋습니다. wowslider.js는 괜찮으나 style.css는 아주 많이 쓰이는 스타일시트 파일명이므로 앞에 wowslider를 붙여주는 것이 좋습니다. script.js도 마찬가지입니다. 일반 사이트에 사용하는 경우는 engine1폴더를 그대로 저장하면 파일명이나 경로를 변경할 필요는 없지만 블로그의 경우는 저장 폴더가 images폴더 하나이므로 파일명에 신경을 많이 써야합니다. 

index파일을 에디터에 열면 간단한 구조입니다. 링크에 스타일시트가 있고 제이쿼리 라이브러리, 와우슬라이더 제이쿼리 플러그인이 head태그에 위치하고 script.js파일은 슬라이더 콘테이너 div의 하단에 위치합니다. 필요한 것은 9에서 14번줄까지와 18에서 41번줄까지 입니다. 이 두 부분을 경로를 수정해서 내 블로그나 사이트의 경로에 맞게 수정해줘야합니다. 가장 문제가 되는 것이 슬라이더에 나타나는 설명부분인데 jpg파일 이름이 그대로 사용되므로 포토샵에서 이미지 편집할때 파일이름을 바꿔주든가 아니면 위 html에서 변경해줘야합니다. 예를들면 위에서 이미지의 이름이 그대로 alt 텍스트 이름과 title 이름으로 사용됩니다. 이것이 슬라이드에서 그대로 나오게 됩니다. 그러니 이미지에 맞는 적당한 이름으로 바꿔주거나 CSS에서 이것이 안보이도록 설정하면 됩니다.

스타일시트 파일을 에디터에 열고 103번째 줄로 가면 이미지 설명인 타이틀을 수정할 수 있습니다. 1을 첨가하면 아예 안보이도록 할 수 있고 2와 3으로 위치를 수정할 수 있습니다. 4는 글자 배경의 색상이며 5는 글자의 색상입니다. 웹폰트를 사용하여 6에서 폰트명을 추가 할 수도 있습니다. 7은 글자의 투명도입니다. 8은 글자배경의 모서리의 둥근정도를 수정합니다.