웹에서 아이폰스러운 Carousel 구현하기

웹에서 아이폰스러운 Carousel 구현하기

페이지 컨트롤(UIPageControl; Carousel; 일명 회전목마 컨트롤)은 아이폰이나 안드로이드폰을 쓰면 가장 먼저 접하게되는 UI 컨트롤이다. 일명 홈 스크린이라고 불리는 화면에서 가로 또는 세로로 플리킹(flicking)하면 이전/다음 페이지로 이동하는 그 컨트롤이다. 아이폰의 경우에는 화면 하단에 하얗고 까만 작은 동그라미가 있고, 안드로이드는 화면 상단 좌우에(폰에 따라 조금씩다르다) 작은 동그라미가 있어서, 총 몇 페이지 중에서 몇 번째 페이지를 보고 있는 지를 알려준다.

이 글에서 설명하는 방법을 안드로이드용 푸딩얼굴인식 앱을 만들면서 활용했는데, 데모 동영상에서 35초와 1분 10초 근처에 나오는 화면이 이 컨트롤을 활용한 것이다.

백문이불여일견! 코드를 살펴보자!

$(document).ready(function() { var iscroll = new iScroll('wrapper', { snap: 'li', momentum: false, hScrollbar: false, vScrollbar: false, onScrollEnd: function() { $('#indicator li').each(function(i, node) { if(i === iscroll.currPageX) { $(node).addClass('active'); } else { $(node).removeClass('active'); } }); } }); iscroll.scrollToPage(0); });

#wrapper { width:200px;/*=page_width*/ height:200px;/*=page_height*/ margin:0; padding:0; overflow:none; background-color:#fff; } #scroller { position:relative; top:0; left:0; width:600px;/*=number_of_page*page_width*/ height:200px; float:left; } #scroller ul { list-style:none; position:relative; display:block; margin:0; padding:0; top:0; left:0; width:100%; height:100%; } #scroller li { display:block; float:left; width:200px; height:200px; } /* 나는 깜찍한 CSS로 아이폰스러운 페이지 인디케이터를 구현하였으나 공간이 부족하여 생략한다 -_-; */

<div id="wrapper">    <div id="scroller">      <ul>        <li><div>1st page!</div></li>        <li><div>2nd page!</div></li>        <li><div>3rd page!</div></li>      </ul>    </div>  </div>  <div id="indicator">    <ul>      <li><span>1</span></li>      <li><span>2</span></li>      <li><span>3</span></li>    </ul>  </div>

백문이불여일RUN! 결과를 확인하자!(위에서 생략했던 깜찍한 CSS도 포함되어 있음)

http://jsbin.com/epeci5

이 글에서는 iScroll 라이브러리를 활용하여 페이지 컨트롤을 구현하고, 덤으로 아이폰과 유사한 인디케이터 까지 구현해 보았다.

모바일 단말은 화면이 작기 때문에 이런 유형의 컨트롤(탭/Carousel/...)들이 꽤 다양하고, 또 유용하지만, 직접 만들자면 쉽지 않다. 그렇다고 이 컨트롤 하나 때문에 Sencha나 jQueryMobile 같은 덩치 큰 프레임웍을 사용하는 것이 부담스럽다면, iScroll 라이브러리는 한 번 쯤 살펴볼 가치가 있다.

참고자료:
http://cubiq.org/iscroll-4
https://github.com/blackdynamo/jQuery-Mobile-Carousel
http://dev.sencha.com/deploy/touch/docs/?class=Ext.Carousel
http://www.winktoolkit.org/documentation/module/592/
http://developer.apple.com/library/ios/#documentation/uikit/reference/UIPageControl_Class/Reference/Reference.html