Mobile Web에서의 스와이프를 위한 SwipeView 활용

|



포털 사이트를 비롯한 모바일 웹을 살펴보면 좌우로 스와이프 하는 기능들이 많이 포함되어 있습니다. 
협소한 공간에 여러 컨텐츠를 배치하기 위한 방법으로 활용되고 있는데요.

이러한 스와이프를 구현하기 위해서는 꽤 많은 자바스크립트와 코드가 들어가야 합니다.
오늘 소개할 SwipeView는 이러한 기능을 처리해 주는 스크립트를 제공하는 거네요..

http://cubiq.org/swipeview
cubig.org 사이트를 보면 이외에도 상당히 괜찮은 모바일 웹 기반의 소스들을 제공하고 있습니다.


먼저 스와이프가 적용된 동영상과 데모 페이지들을 살펴보시죠. 



이미지 갤러리에 대한 데모 페이지는 다음과 같습니다. 
http://cubiq.org/dropbox/SwipeView/demo/gallery/

이미지 이외의 컨텐츠를 포함할 수도 있다고 하는데요. 
텍스트로 구성된 컨텐츠에 대한 예제는 다음 데모 페이지를 살펴보면 됩니다. 
http://cubiq.org/dropbox/SwipeView/demo/ereader/

제공하는 소스를 다운로드해서 살펴보면 src 폴더에는 swipeview.js 파일만 하나 있습니다. 
이 파일을 기존 HTML에 추가하고 스와이프가 필요한 컨텐츠를 적용하면 스와이프가 이루어지게 됩니다. 
demo 폴더를 살펴보면 위 예제 페이지들의 소스가 포함되어 있어 쉽게 적용할 수 있을 겁니다. 
해당 사이트에서도 소스를 받을 수 있지만 혹시 몰라서 여기에도 업로드 해봅니다.

cubiq-SwipeView-94b3b3d.zip

 
iOS 4.x 이상, 안드로이드 2.3 이상에서 동작하며, 일반 웹브라우저도 webkit 기반에서는 동작한다고 되어 있습니다.
실제 적용해 보니 아이폰에서는 정말 부드럽게 동작하지만 안드로이드에서는 약간 delay가 있어 보였습니다. 
그래도 다른 소스보다는 무난히 동작하는 것 같네요~
 
또한 모바일 환경을 고려하여 Silder와 Viewport로 나누어 Viewport는 한 화면만 보여주고
Slider에 앞뒤를 포함해 3개의 페이지만을 보관하는 형태로 구성되어 있다고 합니다. (빠르게 스와이프하는 것도 고려해 설계 되어 있다고 하네요)
메모리의 제한을 고려한 설계로 모바일 개발에서는 많이 사용하는 형태이기도 합니다.


소스들을 살펴보니 swipeview.js 파일을 포함하고 난 후, 
new SwipeView()를 통해 swipe 객체를 생성하고 
해당 객체에 스와이프할 데이터들을 로드하고 난 후
onFlip 메소드를 통해서 스와이프를 처리하게 됩니다. 

해당 소스를 살펴보고 직접 적용해 보면 쉽게 이해가 될 것 같습니다. 



 



Trackback 0 And Comment 4