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

2021년 스크롤 설문조사 보고서와 이것이 Chromium과 웹의 우선순위와 계획에 미치는 영향에 관한 Chrome팀의 설명을 받아보세요.

Adam Argyle

Sam Dutton

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

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

주목할 만한 결과

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

스크롤을 시작하는 방법은 overflow-x: scroll;와 같이 CSS의 한 줄이지만 스크롤 API 및 옵션의 노출 영역은 JavaScript에서 CSS에 이르기까지 넓습니다. 다음 결과는 웹 개발자에게 발생하는 문제를 강조하는 데 도움이 됩니다.

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

문제 27

이 질문은 스크롤 사용 사례 및 기능 26개에 관한 질문 후 의도적으로 설문조사의 마지막 부분에 배치되었습니다. 응답을 통해 웹 커뮤니티가 스크롤에 어려움을 겪는 것이 분명합니다. 응답자의 거의 절반이 전반적으로 어느 정도의 불만족이라고 답했습니다.

Google은 스크롤 작업에 대한 전반적인 감정이 이렇게 낮아서는 안 된다고 생각합니다. 이 측정항목은 변경이 필요합니다. 아직 해야 할 일이 있음을 분명히 알 수 있는 지표입니다.

스크롤 관련 문제

질문 2

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

브라우저 기능이 누락되고 복잡한 자바스크립트가 제공되며 터치, 키보드, 게임패드를 비롯한 입력 모드를 지원해야 하는 필요성으로 인해 이러한 모든 작업이 더 어려워집니다.

터치 상호작용의 중요성

질문 3

모바일 웹 사용자의 방문 통계가 계속 증가하고 있는 가운데 응답자 중 절반이 웹 작업에 터치가 매우 중요하다고 답변한 것은 놀라운 일이 아니었습니다. 이는 CSS 스크롤 스냅 및 touch-action와 같은 웹 기능에 특별한 주의가 있어야 웹에서 고품질 터치 상호작용을 제공할 수 있다는 신호입니다.

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

문제 5a

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

touch-action 학습 중

문제 9

일부 설문조사 질문에서는 특정 API 사용에 관해 예, 아니요 또는 '오늘 배웠습니다'의 답을 선택할 수 있습니다. 주목할 만한 의견 중 하나는 설문조사를 통해 touch-action에 관해 알게 되었다고 응답한 사람의 수였습니다. 이는 스크롤 내에서 상호작용해야 하는 맞춤 터치 동작을 빌드할 때 매우 중요한 속성이기 때문입니다.

순환 스크롤

문제 27

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

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

질문 2

응답자는 스크롤 가능한 영역의 중요성을 중요하게 생각하여 고품질 스크롤을 제공하는 데 필요한 어려움을 다시 알렸습니다.

캐러셀

문제 20

거의 모든 응답자가 웹 작업에서 캐러셀을 제공하는 반면, 관리하기 쉽다고 생각하는 응답자는 25% 에 불과합니다. 조사 과정에서 표준 캐러셀이 인기가 있었지만 이 통계는 잘 해결되어 있지 않아 놀라웠습니다.

무한 스크롤

문제 22

응답자의 3분의 2는 웹 작업에서 무한한 스크롤을 제공하며 동일한 양의 보고서를서는 수행하기가 어렵습니다. 높은 사용량과 높은 난이도의 또 다른 예는 주의가 필요한 영역을 나타냅니다.

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

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

문제 24

거의 절반에 가까운 응답자가 스크롤 조정 애니메이션을 사용하고 있고 응답자의 절반은 높은 사용량과 어려움의 연관성을 찾기가 어렵다고 응답했습니다.

기본 제공 스크롤을 사용하여 경쟁

문제 26

스마트폰 및 태블릿 애플리케이션에 내장된 스크롤과 터치 상호작용은 웹이 따라잡을 수 있는 명확한 위치로 떠오를 때가 많습니다. 기능에는 스크롤 링크 애니메이션, 프로그래매틱 인터페이스, 음성 통합, 스크롤 힌트, 당겨서 새로고침 API가 있습니다.

응답자의 절반만 기본 제공 스크롤 환경에 맞추기가 가끔만 가능하다고 느꼈습니다.

웹에서의 스크롤 상호작용 구축에 대한 전반적인 만족도

문제 27

설문조사 요점

설문조사 결과는 호환성, 교육, API, 기능의 4가지 카테고리로 분류됩니다.

호환성

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에 게재된 테일러 윌콕스의 사진