최고의 HTML5 갤러리 JuiceBox 를 소개합니다.

요즘 포고 플러그인을 사서,  거실의 스피커와 연결하여 음악서버로서 잘 쓰고 있습니다.

그러나, 포고는 음악용으로만 쓰기에는 너무 아까운 기기입니다. 그래서 이것저것 활용을 하고 있지요..

토렌트/ftp/웹서버 등등... 그 중에서 제가 가장 하고 싶던 것이 나만의 갤러리를 가지는 것이었습니다. 

물론, 티스토리나 네이버에 올릴수도 있지만, 그건 내 것이지만 자유도가 떨어지죠.. 서비스를 제공하는 틀안에서의 자유니깐요!

그러나, 포고라는 녀석이 있고, 여기서 웹서버를 돌릴 수 있다면??  네...정말 저만의 갤러리가 탄생합니다.

이제, 저의 고민이 시작됩니다. 

그럼 갤러리를 멀로 할까나?^^

먼저 쉽게 생각할 수 있는 것이... 제가 사이드바 저~~아래 스페셜 갤러리로 쓰고 있는 녀석입니다.

바로 "포토갤러리2" 입니다. 참 깔끔한 인터페이스와 함께...멋진 갤러리를 보여주는 녀석입니다.

 썸네일도 깔끔하고...참 좋아요..

그런데, 이 포토갤러리는 몇가지 문제점이 있습니다.

바로 웹갤러리에서만 사진 업로드가 가능하다는 점, 그리고 폴더를 만들면 가장 아래쪽에 생성된다는 점..그래서 최신것이 젤 아래로 가서 맨날 끌어올려야 

된다는 점..  공유를 하고 싶은 사람에게 다운로드가 안 된다는 점.. 등이 있습니다. 

머 사람에 따라 장점이 될 수도 있고, 단점이 될 수도 있지요^^

위에 것들은 그냥 무시하고 갈 수도 있지만, 최고의 단점이 바로... 플래쉬를 이용해서 만들었기 때문에 모바일 기기에서 잘 안 보인다는 점입니다.

IOS에서는 아예 안 보이고, 안드로이드 크롬에서도 잘 안 보입니다. 

그래서, 저의 웹 갤러리 찾기는 시작되었지요...

어떤분이 추천하신 Piwigo 란 갤러리도 있습니다.

그러나, 이 녀석은 느린데다가 헛!  mySQL까지 요구하네요... 서버 메모리도 많이 잡아먹고!

넌 안되겠다. 팽~~~

라이트룸을 이용해서 웹갤러리를 만들수도 있습니다.

심플뷰어, 포스트카드 등 멋진 웹갤러리 제작툴들이 있군요!!

PC에서는 참 멋지구리 합니다!!!

그러나, 역시나 모바일 기기에서는 안 됩니다. 휴~~~

역시나 지금 이 시대는 PC뿐 아니라 모바일의 호환성까지 모두 고려해야 하는 시기입니다.

음...플래쉬도 안되고.. 서버의 자원을 많이 잡아먹는 느린 갤러리도 싫다!!!

그럼??  딱 답은 나옵니다.

바로 HTML 으로 갤러리를 만드는 것입니다.

다행히 라이트룸에서는 여러가지 HTML 갤러리를 기본적으로 지원합니다.

음... 딱 주소치고 들어가면 썸네일들 좌르르 있고...클릭하면 사진 확대되어서 나오고..

음...여기까진 좋은데??  그럼 다음 사진 넘기자...  

어랏, 보통 플래쉬 갤러리처럼 사진의 한쪽면을 누르거나 오른쪽 공간을 클릭해도 반응이 없습니다.

음...사진 위에  "이전 / 돌아가기 / 다음"   이런 텍스트가 있는데..꼭 마우스로 이 글자를 클릭해야 되는것입니다.

음... 불편해... PC라면 모를까.. 작은 핸드폰에서 이 작은 글자를 언제 눌러!!

일단 후보로 기본 HTML 웹갤러리를 정하고 만족하지 못한 저는... 구글링의 세계로 다시 빠집니다.

플래쉬를 사용하지 않는 라이트룸 웹 갤러리 템플릿을 찾다가 발견한....

HTML5   

오~~~ 맞다... 내가 왜 이 생각을 못했지? 

여러기기에서 adobe flash 를 지원하지 않게 된 동기가...바로 이 html5 였지?

그렇다면 플래쉬만큼의 기능을 이 녀석이 할 수 있지 않을까?

그래서 발견한 녀석이 바로 궁극의, 최고의 ..현존하는 웹갤러리중에서 갑!인 이 녀석

"Juice Box"  랍니다.

어떤 녀석이길래??

테스트차 만들어 놓은 갤러리입니다.

아래에는 썸네일 들 쫘르르륵!!

클릭하면 해당사진이 크게...마우스로 오른편 클릭하면 다음 사진!!

직관적으로 고급스럽습니다.

거기다가 모바일에서는 모바일에 맞는 화면이 나오며, ISO에서도 잘~~보입니다.

바로 제가 원하던 바로 그 갤러리입니다.

< 애쉬의 테스트 갤러리 바로 가기>

위의 링크 클릭하시면 제가 만들어 놓은 갤러리로 가실 수 있습니다.

설치법은 그렇게 어렵지 않습니다.  먼저 제작자 홈페이지로 가 봅시다

제작자 홈페이지 : http://www.juicebox.net/download/

보시다시피 무료로 이용할 수 있습니다.

그러나, 여러가지 제한이 생깁니다. 

대표적인것이 한 갤러리의 사진수가 제한되는 것이죠...

한 갤러리의 최대 사진이 50개입니다.

이건 아쉽지만, 그래도 무료로도 충분히 잘 이용할 수 있으니 걱정하지 마시구요^^

저기 링크에서 압축파일을 받아서 푸시면 다음과 같은 파일들이 생성됩니다.

여기서 juiceboxbuilder-lite.air 란 녀석을 실행해야 합니다..

확장자가 air라... 네, 바로  Adobe Air 로 돌아가는 녀석입니다.

어도비 에어가 설치되어 있지 않으시면 실행이 안됩니다. 

어도비 에어 다운받기 :  http://get.adobe.com/kr/air/

여기서 에어 다운받아서 설치한 후 저기 쥬스박스빌더를 실행합니다.

쥬스 박스 빌더는 간단합니다. 4단계만 거치면 됩니다.

실행하면, 새갤러리를 만들것이냐, 아님 기존것을 수정할것이냐..묻습니다.

당연히 새 갤러리겠지요...

그리고 사진들을 선택하고, 리사이즈 하실분은 옵션 조정하시고 나서 

위의 메뉴중 다음단계인 Customize를 누르면  위와 같이 타이틀과 가로/세로 크기 등을 본인의 용도에 맞게 수정한 뒤..

Publish를 눌러서 저장을 해 주면 끝!!!!

그리고, FTP 등으로 본인의 서버에 업로드만 해 주면 끝입니다.

여기서 끝이냐... 제가 위에 올려드린 테스트 갤러리는 보시면 아시듯이..

웹화면 전체가 갤러리로 가득 차는 구조입니다.

그러나, 블로그나 홈피..글 중간에 갤러리 형태로 Embed 하고 싶다..!!

네, 가능합니다. 

이렇게 마지막 publish 화면에서 embed code가 있기 때문에 이것을 이용하면 됩니다.

쥬스박스 갤러리 Embed Demo Page :  http://www.juicebox.net/demos/lite/embedded/

이런식으로 말이죠...

오, 적다보니...티스토리에도 응용을 해서 EMBED할 수있지 않을까요??

이 글 적으면서 첨으로 테스트 한번 해 봅니다.

저~~기 위에  제 태스트 갤러리를 Embed 한번 해 보겠습니다.

음.. 성공했네요...

Embed 하는 방법이 스크립트를 이용한 방법과 iframe 을 이용한 방법 두가지가 있는데, 

전자로는 잘 안되고, 후자로는 한번에 잘 됩니다^^

어떤가요?? 괜찮지 않나요??

가장 기본적인 기능만 소개해 드렸구요...

갤러리 폴더를 여러가지 생성해서 링크하는 등의 방법으로 나만의 갤러리를 확장해 나갈 수 있을것 같습니다.

그럼, 애쉬의 소개는 여기까지 였습니다!!!

다시 일요일 근무자세로 복귀!!!