오랫동안 모바일 브라우저는 touchend와 click 사이에 300~350ms의 지연을 적용했습니다. 두 번 탭이 텍스트를 확대하는 동작이므로 두 번 탭인지 아닌지 확인하기 위해 기다렸기 때문입니다.
Android용 Chrome의 첫 출시 이후로 핀치 줌도 사용 중지된 경우 이 지연이 사라졌습니다. 하지만 핀치 줌은 중요한 접근성 기능입니다. 2014년 Chrome 32부터 손가락 줌을 삭제하지 않고 모바일 최적화 사이트에서 이 지연이 사라졌습니다. Firefox와 IE/Edge도 곧바로 동일한 조치를 취했으며 2016년 3월에는 iOS 9.3에 유사한 수정사항이 적용되었습니다.
실적 차이가 엄청납니다.
즉시 응답하는 UI를 사용하면 사용자가 일시중지하고 응답을 기다리는 대신 확신을 가지고 각 버튼을 빠르게 누를 수 있습니다. RAIL 소개에서 인간의 반응 시간과 웹 성능의 영향에 대해 자세히 알아보세요.
300~350ms의 탭 지연을 삭제하려면 페이지의 <head>에 다음을 추가하기만 하면 됩니다.
<meta name="viewport" content="width=device-width">
이렇게 하면 표시 영역 너비가 기기와 동일하게 설정되며, 일반적으로 모바일에 최적화된 사이트에 권장됩니다. 이 태그를 사용하면 브라우저는 모바일에서 읽을 수 있는 텍스트를 만들었다고 가정하고 더 빠른 클릭을 위해 두 번 탭하여 확대 기능을 중단합니다.
어떤 이유로든 이 변경사항을 적용할 수 없는 경우 touch-action: manipulation를 사용하여 페이지 전체 또는 특정 요소에서 동일한 효과를 얻을 수 있습니다.
html {
touch-action: manipulation;
}
이 기법은 Safari에서 지원되지 않으므로 표시 영역 태그를 사용하는 것이 좋습니다.
두 번 탭하여 확대/축소 기능이 사라지면 접근성 문제가 발생하나요?
아니요. 핀치 줌은 계속 작동하며 이 동작을 어렵게 생각하는 사용자를 위한 OS 기능이 있습니다. Android에서는 확대 동작이 이를 처리합니다. 이러한 도구는 브라우저 외부에서도 작동합니다.
이전 브라우저는 어떻게 되나요?
FT Labs의 FastClick은 터치 이벤트를 사용하여 클릭을 더 빠르게 트리거하고 더블탭 동작을 삭제합니다. touchstart와 touchend 사이에서 손가락이 이동한 거리를 확인하여 스크롤과 탭을 구분합니다.
모든 항목에 touchstart 리스너를 추가하면 성능에 영향을 미칩니다. 리스너를 호출하여 event.preventDefault()인지 확인하는 과정에서 스크롤과 같은 하위 수준 상호작용이 지연되기 때문입니다. 다행히 FastClick은 브라우저에서 이미 300ms 지연을 삭제한 경우에는 리스너를 설정하지 않으므로 두 가지 장점을 모두 누릴 수 있습니다.