호환성이 향상되고 더 매끄러운 터치

개발자와 사용자는 터치에 반응하고 부드럽게 스크롤되는 모바일 웹 앱을 원합니다. 개발은 쉬워야 하지만 안타깝게도 모바일 웹브라우저가 스크롤 중에 터치 이벤트에 반응하는 방식은 TouchEvent 사양에서 구현 세부정보로 남겨두겠습니다. 결과적으로 접근 방식은 대략 4가지 카테고리로 나눌 수 있습니다. 이러한 상황은 스크롤의 매끄러움을 제공하는 것과 개발자 컨트롤을 유지하는 것 사이에 근본적인 긴장감을 노출합니다.

터치 이벤트 처리의 네 가지 다른 모델은?

브라우저 간의 동작 차이는 네 가지 모델로 나뉩니다.

  1. 일반적인 동기 이벤트 처리

    Touchmove 이벤트는 스크롤 중에 전송되고 touchmove 처리가 완료될 때까지 각 스크롤 업데이트가 차단됩니다. 이해하기 가장 쉽고 간단하지만 가장 강력하지만 스크롤 성능에는 좋지 않습니다. 스크롤하는 동안 각 프레임이 기본 스레드에서 차단되어야 하기 때문입니다.

    브라우저: Android 브라우저 (Android 4.0.4, 4.3), 모바일 Safari (div 스크롤 시)

  2. 비동기 터치 동작 처리

    Touchmove 이벤트는 스크롤 중에 전송되지만 스크롤은 비동기식으로 진행될 수 있습니다 (스크롤이 시작되면 touchmove 이벤트는 무시됨). 이렇게 하면 이벤트를 '이중 처리'할 수 있습니다. 예를 들어 웹사이트에서 touchmove로 작업을 수행한 다음 이벤트에서 preventDefault를 호출하여 브라우저에 이벤트를 처리하지 않도록 지시하는 등 계속 스크롤할 수 있습니다.

    브라우저: 모바일 Safari (문서 스크롤 시), Firefox

  3. 스크롤하는 동안 Touchmove가 표시되지 않음

    Touchmove 이벤트는 스크롤이 시작된 후 전송되지 않으며 Touchend 이벤트가 끝날 때까지 다시 시작되지 않습니다. 이 모델에서는 고정된 터치와 스크롤을 구분하기 어렵습니다.

    브라우저: 삼성 브라우저 (mousemove 이벤트 전송)

  4. 스크롤 시작 시 Touchcancel

    부드러운 스크롤과 개발자 제어 두 가지를 모두 사용할 수는 없습니다. 이 모델은 포인터 이벤트 사양의 의미 체계와 마찬가지로 부드러운 스크롤과 이벤트 처리 사이의 균형을 명확하게 보여줍니다. 당겨서 새로고침과 같이 손가락을 추적해야 하는 일부 환경은 지원되지 않습니다.

    브라우저: Chrome 데스크톱 M32 이상, Chrome Android

변경해야 하는 이유

Android용 Chrome은 현재 Chrome의 이전 모델인 스크롤 시작 시 touchcancel을 사용하므로 스크롤 성능은 향상되지만 개발자의 혼란을 야기합니다. 특히 일부 개발자는 touchcancel 이벤트 또는 이벤트 처리 방법을 모르기 때문에 일부 웹사이트가 다운되었습니다. 무엇보다도 당겨서 새로고침, 숨겨진 막대, 스냅 포인트와 같은 전체 UI 스크롤 효과와 동작 클래스는 제대로 구현하기 어렵거나 불가능합니다.

Chrome은 이러한 효과를 지원하기 위해 특별히 하드코딩된 기능을 추가하는 대신 개발자가 이러한 효과를 직접 구현할 수 있는 플랫폼 프리미티브를 추가하는 데 집중하려고 합니다. 이 철학의 일반적인 설명은 합리적인 웹 플랫폼을 참조하세요.

Chrome의 새로운 모델: 제한된 비동기 Touchmove 모델

Chrome은 스크롤할 때 다른 브라우저용으로 작성된 코드와의 호환성을 개선하고 스크롤 중 touchmove 이벤트를 가져오는 데 의존하는 다른 시나리오를 지원하기 위해 설계된 새로운 동작을 도입합니다. 이 기능은 기본적으로 사용 설정되어 있으며 chrome://flags\#touch-scrolling-mode 플래그로 사용 중지할 수 있습니다.

새 동작은 다음과 같습니다.

  • 첫 번째 터치 무브는 스크롤이 취소될 수 있도록 동기식으로 전송됩니다.
  • 활성 스크롤 중
    • touchmove 이벤트가 비동기식으로 전송됩니다.
    • throttled당 이벤트 1개로 throttled되거나 CSS throttled 슬롭 영역을 초과하는 경우
    • Event.cancelablefalse입니다.
  • 그 외의 경우에는 활성 스크롤이 종료되거나 스크롤 제한에 도달하여 실행할 수 없을 때 touchmove 이벤트가 정상적으로 동기식으로 실행됩니다.
  • 사용자가 손가락을 떼면 항상 터치엔드 이벤트가 발생합니다.

Android용 Chrome에서 이 데모를 사용해 보고 chrome://flags\#touch-scrolling-mode 플래그를 전환하여 차이점을 확인할 수 있습니다.

의견을 알려 주세요

Async Touchmove 모델은 브라우저 간 호환성을 개선하고 새로운 종류의 터치 동작 효과를 지원할 수 있습니다. Google은 개발자의 의견을 듣고 이를 통해 창의성을 발휘할 수 있는 방법을 모색하고 있습니다.