사람들이 스크롤에서 정말로 원하는 것이 있다면 바로 매끄러운 스크롤입니다. 지금까지 Chrome은 사용자가 트랙패드로 스크롤하거나 모바일에서 페이지를 플링할 때와 같이 일부 위치에서 부드러운 스크롤을 보였습니다. 하지만 사용자가 마우스를 연결했다면 '계단식' 스크롤 동작이 좀 더 불안정해져서 심미적으로 만족스럽지는 않습니다. Chrome 49에서는 이 모든 것이 변경됩니다.
많은 개발자가 계단식 네이티브 입력 기반 스크롤 동작에 대한 해결책은 라이브러리를 사용하는 것이었으며, 목표는 더 매끄럽고 눈에 잘 띄는 것으로 재매핑하는 것입니다. 사용자도 확장 프로그램을 통해 이를 확인합니다. 하지만 라이브러리와 확장 프로그램 모두 스크롤을 변경하는 단점이 있습니다.
- 특이한 계곡 느낌입니다 이는 두 가지 방식으로 나타납니다. 첫째, 한 사이트에서는 부드러운 스크롤 동작을 할 수 있고 다른 사이트에서는 그렇지 않을 수 있습니다. 이 경우 사용자는 비일관성으로 인해 혼란스러워할 수 있습니다. 둘째, 라이브러리의 부드러움 물리학은 플랫폼의 물리학과 반드시 일치하지는 않습니다. 따라서 모션이 부드러울 수도 있지만 잘못되거나 이상하게 느껴질 수 있습니다.
- 기본 스레드 경합 및 버벅거림의 경향 증가. 페이지에 추가된 다른 자바스크립트와 마찬가지로 CPU 로드가 증가합니다. 페이지에서 실행하는 다른 작업에 따라 반드시 재해가 되는 것은 아닙니다. 하지만 기본 스레드에 장기 실행 작업이 있고 스크롤이 기본 스레드에 연결된 경우 최종 결과는 스크롤 끊김과 버벅거림이 될 수 있습니다.
- 개발자를 위한 유지보수 업무가 증가하고 사용자가 다운로드할 수 있는 코드가 늘어납니다. 부드러운 스크롤을 위한 라이브러리가 있으면 최신 상태로 유지되고 유지되어야 하며 사이트의 전체 페이지 크기가 늘어나게 됩니다.
이러한 단점은 시차 효과나 다른 스크롤로 결합된 애니메이션 등 스크롤 동작을 처리하는 많은 라이브러리에서도 흔히 적용됩니다. 이러한 앱은 버벅거림을 유발하고 접근성을 방해하며 일반적으로 사용자 환경을 손상시킵니다. 스크롤은 웹의 핵심 상호작용이며, 스크롤을 라이브러리로 변경하는 경우 세심한 주의를 기울여야 합니다.
Chrome 49의 기본 스크롤 동작은 Windows, Linux, ChromeOS를 변경합니다. 기존의 계단식 스크롤 동작이 사라지고 스크롤이 기본적으로 부드러워집니다. 부드러운 스크롤 라이브러리를 사용했다면 삭제하는 것 외에는 코드를 변경할 필요가 없습니다.
스크롤 관련 유용한 기능 더보기
언급할 가치가 있는 다른 스크롤 관련 항목도 있습니다. 많은 사용자가 패럴랙싱, 문서 프래그먼트로의 부드러운 스크롤과 같은 스크롤 결합 효과를 원합니다 (예: example.com/#somesection). 앞서 언급했듯이 오늘날 사용되는 접근 방식은 개발자와 사용자 모두에게 해로울 수 있습니다. 도움이 될 수 있는 두 가지 플랫폼 표준, 즉 Compositor Worklet과 scroll-behavior CSS 속성이 준비 중입니다.
후디니
Compositor Worklet은 Houdini의 일부이며, 아직 완전한 사양으로 제공 및 구현되지는 않았습니다. 즉, 패치가 진행됨에 따라 컴포지터 파이프라인의 일부로 실행되는 JavaScript를 작성할 수 있습니다. 즉, 일반적으로 시차와 같은 스크롤 결합 효과가 현재 스크롤 위치와 완벽하게 동기화됩니다. 스크롤 이벤트가 주기적으로 기본 스레드로만 전송되고 다른 기본 스레드 작업에 의해 차단될 수 있는 오늘날 스크롤이 처리되는 방식을 감안하면 이는 큰 도약을 나타냅니다. Compositor Worklet이나 Houdini에서 제공하는 다른 흥미로운 새 기능에 관심이 있다면 Intro to Houdini post by Surma와 Houdini 사양을 살펴보고 Houdini 메일링 리스트에 의견을 보내주세요.
스크롤 동작
프래그먼트 기반 스크롤의 경우 scroll-behavior CSS 속성을 사용하면 도움이 될 수 있습니다. 이 기능을 사용해 보고 싶다면 이미 Firefox에서 제공된다는 점을 알아두면 좋습니다. Chrome Canary에서 '실험용 웹 플랫폼 기능 사용 설정' 플래그를 사용하여 사용 설정할 수 있습니다. 예를 들어 <body> 요소를 scroll-behavior: smooth로 설정하면 프래그먼트 변경 또는 window.scrollTo로 트리거되는 모든 스크롤이 원활하게 애니메이션 처리됩니다. 이는 같은 작업을 시도하는 라이브러리에서 코드를 사용하고 유지관리하는 것보다 훨씬 낫습니다. 스크롤과 같은 기본적인 기능을 사용할 때는 사용자의 기대를 깨뜨리지 않는 것이 매우 중요합니다. 따라서 이러한 기능이 변동되는 동안 점진적 개선 접근 방식을 채택하고 이러한 동작을 폴리필하려는 라이브러리는 모두 제거하는 것이 좋습니다.
스크롤하여
Chrome 49부터 스크롤이 더 매끄럽게 작동합니다. 그뿐만이 아닙니다. Houdini와 smooth-scroll 같은 CSS 속성을 통해 얻을 수 있는 잠재적인 개선사항이 더 많습니다. Chrome 49를 사용해 보고 의견을 알려주세요. 무엇보다도 브라우저에서 스크롤을 하도록 하세요.