모바일웹 Touch Swipe 이미지 갤러리 – 네이버 오픈API 사용

네이버 오픈API를 사용해서 이미지를 검색한 후 검색된 결과를 Touch Swipe로 슬라이드해서 볼 수 있는 간단한 이미지 갤러리를 만들어봤습니다.

위 데모의 url은 http://codefactory.kr/examples/mobile-image-search/ 이며 스마트폰에서 로 접속하실 수 있습니다. 이미지 슬라이드를 만들기 위해 SwipeView라는 라이브러리를 사용했는데 이 라이브러리가 익스플로러를 지원하지 않아서 이 데모도 익스플로러에서는 실행이 되지 않습니다.

[소스코드] mobile-image-search.zip

이 프로그램에 대해서 간단히 설명드리면,

검색을 하면 네이버 이미지 검색 오픈API로 검색을 해서 이미지 10개를 가져오고 그걸로 슬라이드 갤러리를 만듭니다. 슬라이드를 만들 때 SwipeView라는 라이브러리를 사용했으며 모바일웹에서 사용하기 적합하게 만든 라이브러리이기 때문에 터치로 좌우 스와이프가 가능합니다. 라이브러리에서 SwipeView 객체를 만들게 되는데 이 객체에 .next(), .prev() 메서드가 있어서 이걸 사용하면 다음/이전 버튼을 만들 수도 있습니다. 데스크탑에서도 다음/이전을 볼 수 있도록 위 데모에는 그렇게 만들어서 붙여놓았습니다. 그런데 라이브러리에 마우스 무브 처리가 되어 있어서 사실 다음/이전 버튼을 클릭하지 않으시고 터치하듯 마우스로 드래그 하셔도 이동이 가능합니다.

최초에 10개를 불러오고 10번 슬라이드로 이동하면 우측 상단에 10개 더보기 버튼이 나옵니다. 그런 식으로 이미지를 계속 불러올 수 있도록 만들었습니다. 소스코드가 많이 안좋기는 하지만 혹시 참고용으로 필요하신 분이 있으실 까 하여 mobile-image-search.zip 에 올려 놓았습니다. 아무런 제약없이 사용하셔도 됩니다.

간단한 프로그램이지만 이런저런 리소스를 많이 사용했습니다.

자바스크립트만으로는 다른 도메인(여기에서는 네이버 오픈API서버)으로 ajax 요청을 할 수 없지만(jsonp는 예외) YQL을 사용하면 야후! 서버를 통해서 편리하게 다른 도메인에서 데이터를 받아올 수 있습니다. YQL에 대해서 궁금하신 분은 이전에 올린 YQL과 JSONP를 사용한 Cross Domain Ajax Request를 참고해주세요. 다만 일 10만건의 요청 제한이 있기 때문에 규모가 작은 서비스나 테스트용 프로그램에서 사용할 수 있을 것 같습니다.(지수님 알려주셔서 감사합니다.)

  • http://www.facebook.com/sagehoon Jihoon Kong

    해보니깐 넥원에서 터치 슬라이드가 잘안되네요 그냥 화면 측면(좌우 끄트머리) 눌러서 돌아가게 하는게 날지도

    • Anonymous

      네, 감사합니다..^^