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