2021년 스크롤 설문조사 보고서

2021년 스크롤 설문조사 보고서와 함께 Chromium 및 웹의 우선순위와 계획에 미치는 영향에 관한 Chrome팀의 의견을 확인하세요.

Adam Argyle

Sam Dutton

4월에 Chrome팀은 2019 MDN 웹 DNA 보고서에서 가장 많이 보고된 문제를 기반으로 스크롤 및 터치 액션 설문조사를 발표했습니다. 2021 스크롤 설문조사 보고서가 준비되었으며, Chrome팀은 설문조사 결과에서 얻은 몇 가지 생각과 조치 항목을 공유하고자 합니다. 이 결과가 브라우저 공급업체와 표준 그룹이 웹 스크롤을 개선하는 방법을 이해하는 데 도움이 되기를 바랍니다.

2021 스크롤 설문조사 보고서를 확인하세요.

주목할 만한 결과

이 설문조사에서는 익명으로 880개의 제출을 수집했으며, 366명이 모든 질문에 답했습니다.

스크롤을 시작하는 것은 overflow-x: scroll;와 같은 CSS 한 줄이지만 스크롤 API와 옵션의 표면적은 JavaScript에서 CSS에 이르기까지 넓습니다. 다음 결과는 웹 개발자가 겪고 있는 문제를 강조하는 데 도움이 됩니다.

웹 스크롤에 대한 전반적인 만족도

질문 27

이 질문은 26개의 스크롤 사용 사례 및 기능에 관한 질문이 끝난 후 의도적으로 설문조사 끝부분에 배치되었습니다. 대답을 보면 웹 커뮤니티가 스크롤에 어려움을 겪고 있음을 알 수 있습니다. 응답자의 거의 절반이 전반적인 불만족을 보고합니다.

스크롤 사용에 대한 전반적인 감정이 이렇게 낮아서는 안 된다고 생각합니다. 이 측정항목은 변경해야 합니다. 이는 해결해야 할 문제가 있다는 명확한 신호입니다.

스크롤 작업에 어려움이 있음

질문 2

Google의 연구에 따르면 이러한 어려움은 스크롤의 다양한 사용 사례에서 비롯됩니다. 스크롤에는 다음이 포함될 수 있습니다. - 스크롤 가능한 영역 내 요소 배치 - 무한 스크롤 - 스크롤 연결 애니메이션 - 캐러셀 - 스크롤뷰 패딩 - 순환 스크롤 - 가상화된 스크롤

브라우저 기능 누락, 복잡한 JavaScript, 터치, 키보드, 게임패드 등 입력 모드 지원 필요성으로 인해 이러한 작업이 모두 어려워집니다.

터치 상호작용의 중요성

질문 3

방문 통계에서 모바일 웹 사용자가 계속 증가하고 있으므로 응답자의 절반이 웹에서 작업할 때 터치가 매우 중요하다고 답한 것은 놀라운 일이 아닙니다. 이는 CSS 스크롤 스냅 및 touch-action와 같은 웹 기능에 추가 주의가 필요하므로 웹에서 고품질 터치 상호작용을 제공할 수 있음을 나타냅니다.

탭 키 또는 게임패드 탐색의 어려움

질문 5a

스크롤에는 키보드 화살표, 탭 키, 스페이스바 누르기, 게임패드와 같은 탐색 방법이 포함되며 맞춤 스크롤 작업을 할 때 이러한 방법을 포함하기 어려울 수 있습니다. 응답자의 절반 가까이가 이러한 입력을 포함하는 것이 다소 어렵거나 매우 어렵다고 답했습니다.

touch-action 학습

질문 9

설문조사 질문 중 일부는 특정 API 사용에 관한 것으로, 답변은 예, 아니요, '오늘 알게 됨' 중 하나입니다. 주목할 만한 의견 중 하나는 설문조사에서 touch-action에 대해 알게 되었다고 응답한 사람의 수입니다. touch-action는 스크롤 내에서 상호작용해야 하는 맞춤 터치 동작을 빌드할 때 중요한 속성이기 때문입니다.

순환 스크롤

질문 27

이러한 숫자는 웹 플랫폼에서 지원이 거의 또는 전혀 제공되지 않는 스크롤 기능에 비해 높은 수치입니다. 이로 인해 이 기능은 중복 또는 효과를 강제하기 위해 삽입된 JavaScript와 함께 많은 기술적 부채가 발생하는 경우가 많습니다. 제품 캐러셀에 사용하거나 초 또는 분 단위로 시간을 선택하여 순환 스크롤을 제공할 때 많이 사용됩니다.

스크롤 가능한 영역이 중요한가요?

질문 2

응답자들은 스크롤 가능한 영역의 중요성에 대해 강하게 느꼈으며, 이는 고품질 스크롤을 제공하는 데 필요한 어려움에 대한 또 다른 신호입니다.

캐러셀

질문 20

거의 모든 응답자가 웹 작업에서 캐러셀을 사용하지만 관리하기 쉽다고 생각하는 응답자는 25% 에 불과합니다. 조사 중에 기본 캐러셀이 인기가 많았지만, 이 통계는 해결된 것처럼 보이지 않으므로 놀라웠습니다.

무한 스크롤

질문 22

응답자의 3분의 2가 웹 작업에서 무한 스크롤을 제공하며, 동일한 비율이 무한 스크롤을 구현하기 어렵다고 답했습니다. 사용률이 높고 난이도도 높은 또 다른 예로, 주의가 필요한 영역을 나타냅니다.

content-visibility와 contain-intrinsic-size를 결합하면 스크롤 가능한 긴 영역의 렌더링 비용을 줄일 수 있지만 '더보기' 무한 스크롤 UX에는 도움이 되지 않는 것 같습니다.

스크롤 연결 또는 스크롤 트리거 애니메이션

문제 24

응답자의 절반 가까이가 스크롤 오케스트레이션 애니메이션을 사용하고 응답자의 절반은 이를 어렵다고 생각합니다. 이는 다시 한번 높은 사용률과 어려움이 관련되어 있음을 보여줍니다.

내장된 스크롤로 경쟁

질문 26

휴대전화 및 태블릿 애플리케이션의 내장 스크롤 및 터치 상호작용은 웹이 따라잡을 수 있는 명확한 지점으로 자주 언급됩니다. 이러한 기능에는 스크롤 연결 애니메이션, 프로그래매틱 인터페이스, 음성 통합, 스크롤 힌트, 풀투리프레시 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. scroll-start와 같은 새 CSS API 작업을 시작합니다. 1. snapChanged()와 같은 새 JS 이벤트 작업을 시작합니다.

기능

설문조사 결과에 따르면 플랫폼에서 플러그인이나 많은 노력 없이 빌드하는 데 필요한 기본 요소를 제공하지 않기 때문에 사용자가 웹에서 특정 유형의 스크롤 관련 구성요소에 어려움을 겪는 것으로 나타났습니다. 이 분야를 더 깊이 탐구할 수 있기를 바랍니다.

개발자가 빌드하는 데 어려움을 겪는 기능은 다음과 같습니다. 1. 캐러셀 1. 가상 스크롤 1. 무한 스크롤

리소스

• 스크롤 설문조사 보고서
• 설문조사 공지사항
• Mozilla DNA 보고서
• Compat2021: 웹에서 상위 5개 호환성 문제 해결

썸네일 이미지: Unsplash의 테일러 윌콕스 사진