hacking/web2011/06/30 18:52

단일 페이지 인터페이스 웹/앱 개발

크리에이티브 커먼즈 라이선스
Creative Commons License
지난 두 달 동안 k-mobile을 통해서 "모바일웹 & HTML5 하이드브리드 앱 개발"이라는 주제로
3일에 걸쳐 매일 3시간씩 총 9시간 강의가 있었는데,
여기서 소개하는 자료는 그 중에서 첫날 3시간 동안 발표한 내용이다.

강의 자료를 대충 살펴보면 알겠지만,
뜬구름 같은 트렌드 혹은 패러다임을 "얘기"하고 있어서,
구체적인 기술이 중요한 3일짜리 속성 과정에 적합하지 않은 것 같아 자진 사퇴(?)하고, 발표자료를 공개(?)한다.
내가 발표했던 첫날 3시간은 @ibare님이 좀 더 실무적이고 유익한 내용으로 강의하실 듯~ ^^
단일 페이지 인터페이스 웹/앱 개발
View more presentations from iolo
may the keynote be with you...
저작자 표시 동일 조건 변경 허락

'hacking > web' 카테고리의 다른 글

단일 페이지 인터페이스 웹/앱 개발  (1) 2011/06/30
xui.js - 모바일 html5 웹앱을 위한 초경량 자바스크립트 라이브러리  (0) 2011/04/08
CORS(Cross-Origin Resource Sharing)을 활용한 크로스도메인 Ajax  (4) 2011/03/29
앱스프레소 확장 API를 사용한 AJAX  (6) 2011/03/24
웹킷 CSS 애니메이션으로 스타워즈 오프닝 크롤 구현하기  (0) 2011/03/14
웹에서 아이폰스러운 Carousel 구현하기  (0) 2011/03/13
Posted by iolo
TAG hybridwebapp, jquerymobile, mobileweb, Sencha Touch, SPI, webapp, 모바일웹, 웹앱, 하이브리드앱
Trackback 0 Comment 1
hacking/web2011/03/13 17:05

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

크리에이티브 커먼즈 라이선스
Creative Commons License

웹에서 아이폰스러운 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
저작자 표시 동일 조건 변경 허락

'hacking > web' 카테고리의 다른 글

앱스프레소 확장 API를 사용한 AJAX  (6) 2011/03/24
웹킷 CSS 애니메이션으로 스타워즈 오프닝 크롤 구현하기  (0) 2011/03/14
웹에서 아이폰스러운 Carousel 구현하기  (0) 2011/03/13
터치기반 모바일 웹킷에서 버튼 반응 속도 개선하기  (0) 2011/03/13
HTML5/CSS3/JavaScript로 아이폰 앱 만들기 - XCode 프로젝트 템플릿  (1) 2010/11/18
HTML5/CSS/JavaScript로 안드로이드 "앱" 만들기  (0) 2010/11/16
Posted by iolo
TAG Carousel, CSS, HTML, iScroll, JavaScript, UIPageControl, 모바일웹
Trackback 0 Comment 0
hacking/web2011/03/13 15:19

터치기반 모바일 웹킷에서 버튼 반응 속도 개선하기

크리에이티브 커먼즈 라이선스
Creative Commons License

터치기반 모바일 웹킷에서 버튼 반응 속도 개선하기


아이폰/아이패드/아이팟의 모바일 사파리와 안드로이드의 모바일 크롬 등은 모두 터치기반 모바일 웹킷을 사용하는 브라우져들이다. 이 브라우져들은 버튼 등을 눌렀다(touchstart) 떼도(touchup) 즉시 반응(click)하지 않는데, 그 이유는 연속되는 터치 동작(touchstart-touchmove-touchend)들이 제스쳐(swipe, long click, …)인지 여부를 확인하기 위해 최대 300ms의 지연시간이 생기기 때문이다. 모바일 웹 사이트를 만드는 경우라면 이 정도의 지연시간은 크게 문제가 되지않지만, 상대적으로 신속한 반응을 요구하는 “웹앱"이라면 얘기가 달라진다.

해결책은 간단하다:
1. 손가락으로 무언가를 누르면(touchstart)
2. 웹킷의 기본 동작(300ms 지연)을 못하게 막고(preventDefault)
3. 움직임(touchmove) 없이
4. 손가락을 떼면(touchend)
5. 클릭(click)으로 간주한다.

touchstart/touchend을 mousedown/mouseup으로 바꿔놓고 보면 HTML5 이전에 drag & drop을 처리하기 위해서 사용하는 방식과 유사하다.

百聞不如一見! 코드를 살펴보자:
function NoClickDelay(el) {
this.element = el;
if( window.Touch ) this.element.addEventListener('touchstart', this, false);
}

NoClickDelay.prototype = {
handleEvent: function(e) {
switch(e.type) {
case 'touchstart': this.onTouchStart(e); break;
case 'touchmove': this.onTouchMove(e); break;
case 'touchend': this.onTouchEnd(e); break;
}
},

onTouchStart: function(e) {
e.preventDefault();
this.moved = false;

this.element.addEventListener('touchmove', this, false);
this.element.addEventListener('touchend', this, false);
},

onTouchMove: function(e) {
this.moved = true;
},

onTouchEnd: function(e) {
this.element.removeEventListener('touchmove', this, false);
this.element.removeEventListener('touchend', this, false);

if( !this.moved ) {
var theTarget = document.elementFromPoint(e.changedTouches[0].clientX, e.changedTouches[0].clientY);
if(theTarget.nodeType == 3) theTarget = theTarget.parentNode;

var theEvent = document.createEvent('MouseEvents');
theEvent.initEvent('click', true, true);
theTarget.dispatchEvent(theEvent);
}
}
};


百見不如一RUN! 코드를 돌려보자:
http://jsbin.com/exadi5


다시 말하지만, 위의 페이지는 터치기반의 모바일 웹킷, 즉 모바일 사파리나 모바일 크롬으로 봐야 효과가 있다.

일단 눈에 보이는 Slow Button과 Fast Button 각각을 평소대로 눌러보자. 클릭을 감지하는데 걸린 시간이 표시되는데, Fast 쪽이 조금 빠르긴 하지만 큰 차이는 없어 보인다.
이번에는 평소보다 좀 더 손끝에 감각을 모아서 “톡톡 두드린다는 느낌”으로 각 버튼을 눌러보자. Slow Button의 경우엔 아예 반응을 하지 않거나 확대(아이폰등에서는 더블탭이 자동 확대/축소)기능이 동작된다. Fast Button은 그런 동작을 하지 않는다.

이 글에서는 touchstart-touchmove-touchend 이벤트를 활용하여 버튼의 반응속도를 개선하는 방법을 알아보았다. 이 세가지 이벤트의 활용법을 잘 익혀두면 다양한 유형의 터치 입력을 처리하는데 많은 도움이 될 것이다.

참고 자료:
http://cubiq.org/remove-onclick-delay-on-webkit-for-iphone
http://code.google.com/mobile/articles/fast_buttons.html
저작자 표시 동일 조건 변경 허락

'hacking > web' 카테고리의 다른 글

웹킷 CSS 애니메이션으로 스타워즈 오프닝 크롤 구현하기  (0) 2011/03/14
웹에서 아이폰스러운 Carousel 구현하기  (0) 2011/03/13
터치기반 모바일 웹킷에서 버튼 반응 속도 개선하기  (0) 2011/03/13
HTML5/CSS3/JavaScript로 아이폰 앱 만들기 - XCode 프로젝트 템플릿  (1) 2010/11/18
HTML5/CSS/JavaScript로 안드로이드 "앱" 만들기  (0) 2010/11/16
HTML5/CSS/JavaScript로 아이폰 "앱" 만들기  (6) 2010/11/14
Posted by iolo
TAG JavaScript, WebKit, 모바일웹
Trackback 0 Comment 0