Hello WorldJavascript/Core 모바일웹 터치 제스쳐 적용기 - [1] 터치 제스쳐 이해하기EnterKey 2016. 4. 18. 11:24 FE(Front-End) 개발자에게 모바일웹 서비스 개발은 매우 까다로운 작업입니다.
이런 열악한 환경을 개선하기 위한 방법으로 리소스(이미지,JS,CSS) 사이즈를 최소화하고, 작은 화면에서도 사용자의 불편함이 없도록 화면설계(UI/UX)를 하는데, 오늘은 이 중에서 터치 제스쳐(gesture)에 대해 설명 드리고자 합니다. 터치 제스쳐란?
출처 gesturecons.com [주요 터치 제스쳐]
현재 티몬 모바일웹에는 사용 중인 터치 제스쳐가 없습니다. 만약 터치 제스쳐를 아래와 같이 적용한다면, 사용자의 편의성을 높이면서 딜 상세페이지에서 소비될 데이터를 아껴주는 효과를 가져오지 않을까요?
추가적으로 프로모션 페이지에서는 쿠폰 다운로드 버튼 터치시 강도에 따라 쿠폰금액을 랜덤하게 발급하는 이벤트를 오픈할수도 있을 것입니다. (※ IOS9 - IPHONE 6S - Safari
browser 에서 터치의 강도를 측정할 수 있음) 적용분야를 알아봤으니, 코드 구현은 어떻게 해야하는지 알아보겠습니다. 터치 이벤트 [기본 터치 이벤트]
각 이벤트 발생시에 전달되는 이벤트 객체에는 touches, targetTouches, changedTouches 의 속성이 존재하고, [이벤트 객체 주요 속성]
각 속성들은 Touch 객체 배열로 구성되어 있습니다. [Touch 객체 속성]
참고로, IOS의 경우 멀티터치에 대한 비표준 이벤트를 추가로 제공하여, 편의성을 높이고 있습니다. [IOS 제스쳐 이벤트]
터치 제스쳐 구현 자, 그럼 Tap, Double Tap을 간략하게 구현해 보겠습니다. Tap 탭(Tap)은 touchstart 이벤트 발생후 touchemove 이벤트 발생없이 touchend이벤트가 발생할때 탭으로 식별합니다.
Double Tap 더블탭 구현은 탭구현에서 탭과 다음탭이벤트 사이의 간격체크, 첫번째 탭과 두번째 탭 사이의 포인트거리체크 로직이
추가됩니다.
Swipe swipe는 touchstart이벤트와 touchEnd사이의 이동거리와, 각도, 방향을
고려해야 합니다.
마치며 한 손가락의 터치 제스쳐인 tap, double tap, swipe 구현도 쉽지 않습니다. 정확한 제스쳐 식별을 위해서는 적절한 임계치(터치 시간, 각도, 속도 등) 정보가 필요할 것입니다. 두 손가락의 제츠쳐인 Pinch, Rotation은 두 포인트 사이의 거리, 각도, 가까워지는지, 멀어지는지, 좌측으로 회전하는지, 우측으로 회전하는지 등 식별이 훨씬 복잡해집니다.
참고 출처: http://tmondev.blog.me/220680473335 |