모바일 웹 개발 시 유용한 라이브러리

[출처] http://kindlybugs.com/240

apprise

웹뷰에서 alert / confirm 등을 사용하면 팝업 메세지에 웹 페이지 주소가 노출되는 단점 아닌 단점이 있는데, 이것이 싫다면 div 를 통한 팝업 구현이 필요하다. 그리고 iOS 4.X나 안드로이드 웹뷰에서 position: fixed를 사용할 수 없어, 고정된 위치에 팝업을 띄우는 것이 귀찮은 편인데, 이를 대신해주는 라이브러리. 반복적인 class selector 호출 등의 최적화 되지 않은 jQuery 사용이 있어, 그러한 부분을 개선하여 사용하였다.

참고 : http://thrivingkings.com/apprise/


cross-slide

Ken-burns 스타일의 사진 슬라이드 효과를 내기 위해 사용

참고 : http://tobia.github.com/CrossSlide/
참고 : 사용기 / http://blog.naver.com/ez_/140156789842


iscroll

iOS / Android 등에서 pinch to zoom / pull to refresh / overflow:scroll 를 구현하기 위한 라이브러리. 많이 사용하진 않았지만, 웹에서 사용성을 높이기 위해서는 한 번 쯤 살펴볼만 하다.

참고 : http://cubiq.org/iscroll-4


jstorage

Local storage를 사용하기 위한 라이브러리. 서버와 통신할 필요가 없는 값들을 읽고 쓰기 위해 사용하였다. 간단하고 사용하기 편리하다.

참고 : http://en.wikipedia.org/wiki/Web_storage
참고 : http://www.jstorage.info/


lazyload

화면에 보이지 않는 부분의 이미지들은 굳이 미리 서버에서 가져올 필요가 없다. lazyload를 통해 트래픽을 줄이고, 페이지 로드 시간을 단축할 수 있다. 모든 웹 페이지에서 가지면 좋은 기능이지만, 모바일 웹에서는 반드시 가져야 할 요소.

참고 : http://www.appelsiini.net/projects/lazyload
참고 : 사용기 / http://blog.naver.com/ez_/140156676013


spin.js

ajax 요청등을 보내고 기다릴 때, 흔히 볼 수 있는 activity indicator를 animated gif 등으로 처리하는 것이 일반적이었다면, spin.js 를 통해 이미지 없이 멋진 spin image를 만들어낼 수 있다. 단, 안드로이드 일부기기에서 지원하지 않는 문제가 있어 현재는 울며 겨자먹기로 animated gif 를 사용중.

참고 : http://fgnass.github.com/spin.js/


swipe

모바일 기기의 swipe 기능을 이 라이브러리를 통해 웹에서 완벽히 재현할 수 있다. lazyload와 함께 사용해, 다른 페이지에 있는 이미지들을 나중에 불러오도록 구성하면 최적. 단, 기본적으로 제공하는 callback은 webkit의 transitionEnd 시점에 발생하는 것이라, swipe를 시작하는 시점에 callback을 받으려면 몇 줄의 코드를 추가해야 한다.

참고 : http://swipejs.com/
참고 : 수정된 swipe.js / https://gist.github.com/2404749


zflow

웹에서 coverflow 효과를 줄 때 사용한 라이브러리. iOS쪽은 iPhone 3Gs에서도 충분히 부드럽고 빠르게 작동하지만, Android에서는 OS와 기기에 따라 제대로 지원되지 않는 경우가 많다. 특히 rotateY 등의 transform 적용시, 잘못된 축으로 회전된 결과가 나오므로 Android기기일 경우는 몇 가지 fallback을 추가로 작업해야 사용가능한 상태가 된다. 안드로이드에서는 크기나 회전은 제외하고, opacity를 조정하는 정도로만 사용하고 있다. 이 점만 유의하면 충분히 쓸만한 라이브러리인 듯.

참고 : http://code.google.com/p/css-vfx/


출처 : http://blog.naver.com/ez_/140157300770