티스토리 뷰

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

이러한 스와이프를 구현하기 위해서는 꽤 많은 자바스크립트와 코드가 들어가야 합니다.
오늘 소개할 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 메소드를 통해서 스와이프를 처리하게 됩니다. 

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



 
댓글
  • 프로필사진 초보 개발자 잘 봤습니다. 많은 도움이 되었는데요 용기를 내어 소스를 다운 받아 공부하는 중에 질문이 있습니다.

    첫번째 질문은 SwipeView을 가지고 이렇게 저렇게 만지고 있는데요. 제 핸드폰이 아이폰 3S인데 상단과 하단의 주소창이 없어지지 않습니다.
    HEAD 부분에

    <script type="text/javascript">
    window.addEventListener('load', function() {
    setTimeout(scrollTo, 0, 0, 1);
    }, false);
    </script>


    이것을 삽입했는데도 그렇네요.

    두번째 질문은 상하가 고정이 되어 스크롤이 되지 않습니다.
    좌우폭은 width=device-width 이렇게 설정을 했는데 상하는 그대로 스크롤이 되게 할수는 없나요?

    마지막 질문은 그중 하나의 페이지를 터치를 하면 핸드폰 연결로 설정하려 합니다.
    어떤 방법이 있을까요?

    좋은밤 되세요^^

    2012.09.09 00:38
  • 프로필사진 미니~ 안녕하세요. 미니입니다.

    상단 주소창 없애는 코드는 이상이 없는 것 같습니다.
    JavaScript의 특징이 소스중 잘못된 부분이 하나만 있어도
    나머지 스크립트가 적용이 되지 않는다는 것입니다.

    제 생각에는 다른 부분에 자바스크립트 오류가 없는지 살펴보시는 것이 필요할 듯 합니다.

    마지막으로 다음 글을 살펴보시면 아이폰 사파리 기반의 모바일 웹을 만드는데 조금이나마 도움이 되지 않을까 합니다.
    http://imarket.tistory.com/230
    2012.09.12 20:48 신고
  • 프로필사진 다락 안녕하세요 ㅎ
    오늘 스와이프에대해 궁금하던중
    좋은 정보를 얻었네요 ㅎㅎ

    감사합니다

    만들면 꼭한번 보여드릴께요 ㅎㅎ
    감사합니다
    2013.11.27 19:22
  • 프로필사진 미니~ 네.. 완성되면 관련 링크 하나 남겨주세요~ 2013.12.08 23:03 신고
댓글쓰기 폼