4월에 Chrome팀은 스크롤 및 터치 액션 설문조사를 2019 MDN 웹 DNA 보고서에서 가장 많이 보고된 문제를 기반으로 발표했습니다. 2021 스크롤 설문조사 보고서 가 준비되었으며 Chrome팀은 설문조사 결과에서 얻은 몇 가지 생각과 조치 항목 을 공유하고자 합니다. 이러한 결과가 브라우저 공급업체와 표준 그룹이 웹 스크롤을 개선하는 방법을 이해하는 데 도움이 되기를 바랍니다.
주목할 만한 결과
이 설문조사에서는 880개의 제출물을 익명으로 수집했으며 366명이 모든 질문에 답변했습니다.
스크롤을 시작하는 것은 overflow-x:
scroll;과 같은 CSS 한 줄이지만 스크롤 API 및 옵션의 표면적은 JavaScript에서
CSS에 이르기까지 넓습니다. 다음 결과는 웹 개발자가 겪고 있는 문제를 강조하는 데 도움이 됩니다.
웹 스크롤에 대한 전반적인 만족도
질문 27
45%
**웹 스크롤** 에 대해 전반적으로 다소 또는 매우 불만족
합니다.
이 질문은 26개의 스크롤 사용 사례 및 기능에 관한 질문 후에 의도적으로 설문조사 끝부분에 배치되었습니다. 응답을 보면 웹 커뮤니티가 스크롤에 어려움을 겪고 있음을 알 수 있습니다. 응답자의 거의 절반이 전반적인 불만족 수준을 보고합니다.
스크롤 작업에 대한 전반적인 감정이 이렇게 낮아서는 안 된다고 생각합니다. 이 측정항목은 변경되어야 합니다. 이는 해결해야 할 작업이 있음을 나타내는 명확한 신호입니다.
스크롤 작업의 어려움
질문 2
43%
스크롤 작업이 다소 또는
매우 어렵다
고 보고했습니다.
Google의 연구에 따르면 이러한 어려움은 스크롤의 다양한 사용 사례에서 비롯됩니다. 스크롤에 관해 이야기할 때는 다음이 포함될 수 있습니다.
누락된 브라우저 기능, 복잡한 JavaScript, 터치, 키보드, 게임패드를 비롯한 입력 모드를 지원해야 하는 필요성으로 인해 이러한 모든 작업이 더 어려워집니다.
터치 상호작용의 중요성
질문 3
51%
터치 상호작용 이
작업에 매우 또는 매우 중요 하다고
보고했습니다.
방문 통계에서 모바일 웹 사용자가 계속 증가하고 있으므로
응답자의 절반이 웹에서 작업할 때 터치가 매우
중요하다고 보고한 것은 놀라운 일이 아닙니다. 이는 웹에서 고품질 터치 상호작용을 제공할 수 있도록 CSS 스크롤 스냅 및 touch-action과 같은 웹 기능에 추가적인 주의가 필요함을 나타냅니다.
탭 키 또는 게임패드 탐색의 어려움
질문 5a
44%
게임패드 및 탭 탐색 을 하는 것이 다소 또는 매우 어렵다 고 보고했습니다.
스크롤에는 키보드 화살표, 탭 키, 스페이스바 누르기, 게임패드와 같은 탐색 방법이 포함되며 맞춤 스크롤 작업을 할 때 이러한 방법을 포함하기 어려울 수 있습니다. 응답자의 거의 절반이 이러한 입력을 포함하는 것이 다소 또는 매우 어렵다고 보고합니다.
touch-action 학습
질문 9
50%
설문조사에서
`touch-action: manipulation`
에 관해 학습 했다고 보고했습니다.
일부 설문조사 질문에서는 특정 API를 사용하는 것에 관해 질문했으며 답변은 예, 아니요 또는 '오늘 배웠습니다'였습니다. 주목할 만한 의견 중 하나는 설문조사에서 touch-action에 관해 배웠다고 보고한 사람의 수였습니다. 이는 스크롤 내에서 상호작용해야 하는 맞춤 터치 동작을 빌드할 때 중요한 속성이기 때문입니다.
주기별 스크롤
질문 27
58%
**주기별 스크롤** 을
때때로, 자주 또는 모든 프로젝트 에서 사용한다고 보고했습니다.
60초 후에는 다시 0부터 시작됩니다.
이러한 숫자는 웹 플랫폼에서 거의 또는 전혀 지원하지 않는 스크롤 기능에 대해 높습니다. 이 기능은 이로 인해 기술 부채가 많이 발생하며 효과를 강제하기 위해 중복 또는 JavaScript가 삽입됩니다. 제품 캐러셀과 초 또는 분 단위로 시간을 선택할 때 주기별 스크롤을 제공하는 데 널리 사용됩니다.
스크롤 가능한 영역이 중요한가요?
질문 2
55%
매우 또는
매우 중요
16%
전혀 또는 약간 중요 하다고 보고했습니다.
응답자는 스크롤 가능한 영역의 중요성에 대해 강하게 느꼈으며 고품질 스크롤을 제공하는 데 필요한 어려움에 관한 또 다른 신호를 제공했습니다.
캐러셀
질문 20
87%
캐러셀을 사용했습니다.
24%
관리하기
쉽다 고 보고했습니다.
거의 모든 응답자가 웹 작업에서 캐러셀을 제공하지만 25% 만이 캐러셀을 더 쉽게 관리할 수 있다고 생각합니다. 사전 빌드된 캐러셀은 Google의 연구에서 인기가 있었지만 이 통계는 매우 해결된 것처럼 들리지 않으므로 Google을 놀라게 했습니다.
무한 스크롤
질문 22
65%
때때로
에서 모든 프로젝트 에 사용합니다.
60%
다소 또는
매우 어렵습니다.
응답자의 3분의 2가 웹 작업에서 무한 스크롤을 제공하며 동일한 양이 무한 스크롤을 제공하기 어렵다고 보고합니다. 높은 사용량과 높은 어려움이 결합된 또 다른 예로, 주의가 필요한 영역을 나타냅니다.
content-visibility 및
contain-intrinsic-size를 결합하여 긴
스크롤 가능한 영역의 렌더링 비용을 줄일 수 있지만 '더보기' 무한 스크롤
UX에는 도움이 되지 않는 것 같습니다.
스크롤 연결 또는 스크롤 트리거 애니메이션
질문 24
47%
때때로
에서 모든 프로젝트 에 사용합니다.
56%
다소 또는
매우 어렵습니다
모든 응답자의 거의 절반이 스크롤 오케스트레이션 애니메이션을 사용하고 응답자의 절반이 어렵다고 생각하며 다시 한번 높은 사용량과 어려움을 연결합니다.
기본 제공 스크롤과 경쟁
질문 26
32%
항상 또는
대부분
50%
때때로
휴대전화 및 태블릿 애플리케이션의 기본 제공 스크롤 및 터치 상호작용은 웹이 따라잡을 수 있는 명확한 위치로 자주 알려져 있습니다. 이러한 기능에는 스크롤 연결 애니메이션, 프로그래매틱 인터페이스, 음성 통합, 스크롤 힌트, 풀 투 리프레시 API가 포함됩니다.
응답자의 절반만이 기본 제공 스크롤의 환경과 일치하는 것이 때때로만 가능하다고 생각했습니다.
웹에서 스크롤 상호작용 빌드에 대한 전반적인 만족도
질문 27
설문조사 주요 내용
설문조사 결과는 네 가지 카테고리로 분류됩니다. 호환성, 교육, API, 및 기능.
호환성
Chrome팀은 스크롤 호환성을 비롯한 웹 호환성 문제의 수를 줄이는 목표를 선언했습니다.
중점적으로 다룰 첫 번째 세 가지 호환성 문제는 다음과 같습니다. 1. 가로 스크롤 호환성
1. overscroll-behavior 교차 브라우저
1. -webkit-scrollbar에서 접두어를 삭제하고 표준을 따릅니다.
교육
설문조사 결과에 따르면
touch-action 및 논리적
속성에 관한 교육이 더 필요합니다. 브라우저는 국제 레이아웃의 최전선에 있으며 활용도가 낮거나 오해되고 있는 것으로 보입니다.
중점적으로 다룰 영역: 1. touch-action
1. 논리적 속성
API
스크롤 스냅 사용이 증가하고 있으며 개발자는 인기 있는 라이브러리 및 플러그인과 상호 운용 가능한 기능을 사용하고 싶다고 응답했습니다. CSS와 플러그인 라이브러리 간의 이러한 격차를 줄이면 스크롤 스냅 개발자와 사용자 환경의 만족도를 높일 수 있습니다.
API 작업은 scroll-snap에 중점을 둡니다. 1. 브라우저 전반의 API 가용성 및 호환성
1. 새로운 CSS
API와 같은 scroll-start 작업을 시작합니다.
1. 새로운 JS
이벤트 작업(예:
snapChanged())을 시작합니다.
기능
설문조사 결과에 따르면 사용자는 플랫폼에서 플러그인이나 많은 노력 없이 빌드하는 데 필요한 기본 요소를 제공하지 않으므로 웹에서 특정 유형의 스크롤 관련 구성요소에 어려움을 겪고 있습니다. 이 영역을 더 자세히 살펴보고자 합니다.
개발자가 빌드하는 데 어려움을 겪는 기능은 다음과 같습니다. 1. 캐러셀 1. 가상 스크롤 1. 무한 스크롤