Dragend를 이용한 좌우제스쳐 웹페이지 구현



요즘 네이버나 다음 포털 모바일 웹 사이트를 보면 좌우 제스쳐시 페이지가 바뀌는 것을 볼 수 있다. 안드로이드에서는 ViewPager이라는 기능으로 웹에서도 이런 기능을 오픈소스를 이용한다면 쉽게 구현이 가능하다. 이런 기능을 오픈소스가 몇가지가 있지만 개인적으로 Dragend를 추천한다.

간소화된 JS를 이용하여 쉽게 좌우제스쳐 페이지를 쉽게 구현가능하다.

아래는 Dragend를 이용하여 간단한 체스쳐가 되는 페이지를 만들어 보았다. 좌우로 제스쳐를 하면 페이지가 바뀌는것을 볼 수있다.

코드

  <div id="demo">
    <ul>
      <li class="first dragend-page">
      <li class="dragend-page">
      <li class="middle dragend-page">
      <li class="dragend-page">
      <li class="last dragend-page">
    </ul>
  </div>

  <script type="text/javascript" src="../../dragend.js"></script>

  <script>
    document.addEventListener("DOMContentLoaded", function() {
      var container = document.getElementById("demo");
      new Dragend(container, {
        afterInitialize: function() {
          container.style.visibility = "visible";
        }
      });
    }, false)
  </script>

위의 단 몇줄 만으로 페이지를 구성하는 하다. ul의 li에 오픈소스로 구현된 dragend-page를 class로 설정 후 script에서 div의 id를 읽어와서 상황에 따라 페이지 상태를 처리 하는 방식이다.

데스크탑 환경에서는 이미지를 보여줄때, 또는 자동 롤링기능으로 활용 할 수 있으며, 모바일 웹페이지는 포털사이트처럼 제한된 페이지에서 사용가능한 좋은 UX이기에 활용성또한 대단히 높다.