여러 해 동안 모바일 브라우저는 touchend과 click 사이에 300~350밀리초의 지연을 적용했는데, 두 번 탭이 텍스트를 확대하는 동작이었기 때문에 이 작업이 두 번 탭할지 여부를 기다리는 동안 지연되었습니다.
Android용 Chrome이 처음 출시된 이후로 손가락 모으기-확대/축소도 사용 중지되었을 때 이러한 지연이 사라졌습니다. 하지만 손가락을 모으거나 펼쳐 확대/축소하는 것은 중요한 접근성 기능입니다. 2014년 Chrome 32부터는 손가락 모으기 확대/축소 기능을 제거하지 않고도 모바일에 최적화된 사이트에서 지연 문제가 사라졌습니다. Firefox와 IE/Edge도 바로 이 작업을 수행했으며 2016년 3월에는 iOS 9.3에도 유사한 수정사항이 적용되었습니다.
성능 차이가 엄청납니다.
즉시 반응하는 UI가 있으면 사용자가 응답을 잠시 멈추고 기다리는 대신 자신 있게 각 버튼을 빠르게 누를 수 있습니다. RAIL 소개에서 인간 반응 시간과 웹 성능이 미치는 영향에 대해 자세히 알아보세요.
300~350밀리초의 탭 지연을 삭제하려면 페이지의 <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 지연을 제거한 경우 리스너를 설정하지 않으므로, 두 가지를 모두 활용할 수 있습니다.