스크롤을 건드리지 마세요

 (dontfuckwithscroll.com)
2P by GN⁺ | ★ favorite | 댓글 1개
  • Scrolljacking은 브라우저의 기본 스크롤 속도·방향·효과를 덮어써, 사용자가 기대하는 예측 가능한 웹 탐색을 흔듦
  • Nielsen Norman Group의 사용성 연구에서 참가자 다수가 방향감 상실을 겪었고, 일부는 바뀐 스크롤을 버그로 받아들임
  • 모멘텀·스무스·관성 스크롤 플러그인은 근육 기억과 브라우저 기본 기능을 깨뜨려 긴 페이지에서 현재 위치를 파악하기 어렵게 만듦
  • 화면 전환 애니메이션과 JavaScript 의존성은 멀미·현기증, 보조 기술, 저사양 기기, 모바일 환경에서 접근성·성능 부담을 키움
  • 사용자는 스크롤 연출이 아니라 콘텐츠를 보러 오므로, 사이트는 네이티브하고 빠른 스크롤을 그대로 유지하는 편이 나음

Scrolljacking이 웹 탐색을 망치는 방식

  • Scrolljacking은 브라우저의 기본 스크롤 동작을 재정의해 웹페이지의 스크롤 속도, 방향, 효과를 바꾸는 방식임
  • 모멘텀 스크롤, 스무스 스크롤, 관성 스크롤 플러그인은 흔한 scrolljacking 형태에 해당함
  • 개선 기능처럼 보일 수 있지만, 자연스럽고 효율적이며 예측 가능한 웹 탐색 경험을 방해함
  • 피해는 크게 사용성, 접근성, 성능으로 이어짐

사용성 연구에서 확인된 혼란

  • Nielsen Norman Group의 사용성 연구는 scrolljacking이 사용자에게 방향감 상실을 유발할 수 있음을 보임
    • 참가자 다수가 최소한의 방향감 상실을 경험함
    • 일부 사용자는 바뀐 스크롤 동작을 버그로 해석함
    • 작업 지향 사용자는 탐색 지향 사용자보다 scrolljacking에 훨씬 낮은 관용을 보임
  • 한 참가자는 “완전히 스와이프했는데 아무 데도 이동하지 않았다”는 취지로 반응했고, 잠재 고객 입장이라면 심하게 짜증났을 것이라고 말함
  • 모바일에서는 긴 스크롤 지속 시간과 작은 화면 때문에 문제가 더 커짐

사용자 기대와 제어권 침해

  • 사용자는 스크롤하면 콘텐츠가 바로 움직인다는 기본 동작을 기대함
  • 모멘텀 스크롤 플러그인은 즉각적이고 예측 가능한 이동 대신 애니메이션이 섞인 동작을 제공함
  • 이런 변화는 사용자가 효율적인 탐색에 의존하는 근육 기억과 기존 습관을 방해함
  • 기본 스크롤을 덮어쓰면 사이트의 연출이 사용자의 선호나 필요보다 앞서게 됨
  • 사용자는 과도하게 연출된 스크롤 경험이 아니라 콘텐츠를 보기 위해 사이트에 방문함

멀미와 접근성 부담

  • 모멘텀 스크롤 플러그인은 부유하거나 휘청이는 애니메이션을 추가해 멀미나 현기증에 취약한 사용자에게 부담을 줄 수 있음
  • 많은 사이트가 이를 끌 수 있는 옵션을 제공하지 않아, 사용자는 글을 읽는 과정에서 불편함을 피하기 어려움
  • 스크린 리더와 키보드 탐색 같은 보조 기술은 타이밍 지연 때문에 방해받을 수 있음
  • 운동 장애나 시각 제한이 있는 사용자는 이런 지연 때문에 사이트 이용이 더 어려워질 수 있음
  • 접근성은 선택 기능이 아니라 웹 사용의 기본 요구사항으로 다뤄져야 함

성능과 기기별 일관성 저하

  • 모멘텀 스크롤 플러그인은 JavaScript를 로드하며, 오래되었거나 저사양인 기기에서 지연, 끊김, 고장을 일으킬 수 있음
  • 페이지가 “Smooth”하게 느껴지기보다 약한 기기에서는 깨진 것처럼 보일 수 있음
  • 애니메이션 렌더링에는 부풀어진 JavaScript 라이브러리, 추가 의존성, 더 많은 CPU 사이클이 들어감
  • 그 결과 페이지 로드 시간이 느려질 수 있음
  • 모바일 네트워크나 연결 상태가 나쁜 지역에서는 화려한 스크롤 효과가 페이지를 더 느리고 덜 접근 가능하게 만듦

브라우저 기본 기능과 위치 인식 문제

  • 현대 브라우저는 이미 원하는 사용자를 위한 모멘텀 스크롤 설정을 포함함
  • 서드파티 플러그인은 이런 기본 기능을 덮어쓰거나 충돌을 일으켜 커스텀 스크롤 제스처나 모멘텀 스크롤을 깨뜨릴 수 있음
  • 시스템 전체의 동작 줄이기 설정 같은 사용자 선호가 기대대로 작동하지 않을 수 있음
  • 모멘텀 스크롤 애니메이션은 사용자의 입력과 결과 사이에 지연을 추가함
  • 긴 페이지에서는 현재 위치를 정확히 파악하기 어려워지고, 빠른 탐색도 번거로워짐

파워 유저와 유지보수 비용

  • 문서를 빠르게 훑거나 페이지를 정밀하게 이동하려는 파워 유저에게 모멘텀 스크롤은 작업 흐름을 늦춤
  • 느린 애니메이션을 기다려야 하므로, 빠르게 일을 끝내려는 사용자의 기대와 충돌함
  • 모멘텀 스크롤 플러그인은 한 번 설치하고 끝나는 기능이 아님
  • 최신 브라우저, 운영체제, 기기와 호환되도록 정기 업데이트가 필요함
  • 업데이트마다 새 버그가 들어갈 위험이 있고, 개발팀에는 사이트를 더 빠르고 안전하거나 최적화하는 데 쓸 수 있는 시간과 비용 대신 추가 작업이 생김

결론: 스크롤은 기본 동작으로 두기

  • Scrolljacking과 모멘텀 스크롤 플러그인은 불필요한 복잡성을 추가하고, 사용성을 떨어뜨리며, 사용자를 좌절시킴
  • Nielsen Norman Group의 표현처럼 “사용성은 즐거움의 기반”임
  • 스크롤을 다시 발명하기보다 네이티브, 예측 가능, 빠른 스크롤 동작을 유지해야 함
  • 스크롤을 특별한 이벤트로 만들지 말고 사용자가 그냥 스크롤하게 둬야 함

함께 보면 좋은 글 β

GN⁺   [-]
Hacker News 의견들

  • URL, 브라우저 내비게이션, 뒤로 가기 버튼도 건드리지 말아야 함
    이미 오래전에 진 싸움 같고, SPA가 웹을 망가뜨려 훨씬 나쁘게 만들었음

    • SPA가 꼭 그래야 하는 건 아니고, 그렇게 만들기로 선택한 것뿐임
      History API는 멀쩡해서 SPA와 자체 내비게이터가 브라우저와 사용자에 맞춰 동작하게 만들 수 있음
      하지만 많은 개발자가 북마크 가능성, 내비게이션 같은 웹의 기본을 신경 쓰지 않아 망가뜨렸음
      좋은 SPA는 일반 웹사이트처럼 동작하고, 빠르고 반응성이 좋다는 것 말고는 SPA인지 알아차리지 못해야 함
    • 페이지의 어떤 요소와 상호작용했을 뿐인데 뒤로 가기 버튼을 너무 여러 번 눌러야 하는 게 싫음
      특정 상태를 북마크하거나 공유할 수 있어야 하는 건 맞지만, 이를 위해 새 내비게이션 단계를 만들기보다 URL만 제자리에서 바뀌는 편이 훨씬 낫다
    • URL을 건드리지 않는 SPA를 만드는 쉬운 방법은 이미 오래전부터 있었음
      웹의 기본, URL, 뒤로 가기, 스크롤 사용자 경험 등을 신경 쓰지 않는 사람들이 웹을 망가뜨린 것이지, SPA 자체가 문제는 아님
    • Esc 키도 건드리지 마라, Squarespace!
    • 리다이렉트가 이미 오래전에 방문 기록을 망가뜨렸고, 2단 리다이렉트 체인은 최악의 경험임
      브라우저가 고쳐야 하지만 관성이 너무 커서 일어나지 않을 듯함

  • “우리가 사용자보다 더 잘 안다”는 태도는 Momentum 스크롤뿐 아니라 현재 UX 디자인의 많은 유행에도 그대로 적용된다고 봄
    모든 것을 희생하면서까지 미학 숭배에 빠지게 된 과정이 궁금함

    • 이건 UI/UX 디자인보다 더 깊은, IT 업계 전체의 문제임
      사용자가 어떤 책임도 스스로 지지 못하게 막는 극도로 깔보는 태도가 깔려 있음
      오늘도 macOS에서 “Touch ID를 활성화하려면 비밀번호가 필요합니다”라는 성가신 동작을 끄는 방법을 찾아봤는데, 재부팅 후 요구는 이해하지만 시간 기준으로 보이는 요구는 끌 수 없어 보였음
      찾은 가장 가까운 방법은 bioutil 명령으로 시간 제한을 줄이는 것이었고, 늘릴 수는 없었음
      최대값 검사 위치를 역공학해서 하위 API를 직접 호출해 우회할 수 있는지 볼까 싶음
    • 이 문제를 “UX 디자인 유행” 탓으로 돌리는 건 공정하지 않다고 봄
      오히려 UX 디자인의 부재에 가깝다
    • 그 부분은 듣기 좋게 포장된 Call to Action 버튼을 떠올리게 함
      “Button presses You” 같은 제목의 좋은 블로그 글이 있었는데 찾지 못하겠음
      핵심은 애플리케이션의 목적이 사용자가 프로그램에 무엇을 하게 할지 정하는 것이 아니라, 애플리케이션이 사용자에게 무엇을 어떻게 하라고 지시하는 방향으로 흐른다는 것임

  • 스크롤바도 건드리지 말아야 함
    요즘은 모든 곳에서 1px 폭 정도로 만드는 유행이 있는 듯함

    • 맞음, 너무 작은 스크롤바는 터치스크린에서 쓸 수 없게 만듦
      앱을 정말 인체공학적으로 만들고 싶다면 손가락 하나나 두 개 제스처, 예를 들어 손가락으로 끌어 스크롤하는 동작이 제대로 되게 해야 함
    • 마우스를 올렸을 때 나타나는 건 괜찮지만, 많은 웹사이트가 쉬운 길을 택해 한 축 또는 양쪽 축에서 스크롤바를 완전히 꺼버림
      그러면 데스크톱에서 스크롤하는 유일한 방법이 프레임 가장자리 너머로 텍스트를 드래그 선택하는 것뿐이 됨
    • 보통 스크롤바를 숨기는 편임
      넘치는 콘텐츠를 안 쓰려고 하지만 꼭 넘쳐야 할 때는 스크롤바가 디자인을 방해하고 기본 스크롤바가 너무 못생겨서 숨김
    • 사라지는 스크롤바를 좋아함
      마우스를 움직이는 순간 나타나고, 멈추면 사라짐
      진행 위치를 보고 싶으면 마우스를 살짝 움직이면 됨

  • Gopher 시절부터 인터넷을 써왔고, 순수 HTML 미학의 미니멀함을 좋아함
    글 아래에 이 글의 영감을 준 웹사이트로 이어지는 링크도 아주 좋았음
    이런 페이지에서 소스 보기를 하면 단순한 향수가 아니라 “이 사람들은 뭘 아는구나” 싶은 따뜻한 느낌이 듦
    Helvetica 다큐멘터리에서 디자이너들이 1950년대식 별로인 스크립트 글꼴 대신 새롭게 Helvetica를 고를 수 있게 됐을 때의 감각을 설명하던 장면과 비슷함

  • 스크롤에 따라 배경에 표시되는 내용이 바뀌거나 페이지 구획 자체가 나뉘는 화려한 랜딩 페이지도 여기에 포함된다고 봄
    예: https://webflow.com/made-in-webflow/website/Translate-Webflo...

    • 그런 식으로 동작하는 앱은 결함 있는 코드 때문에 일부뿐이고, 브라우저 자체는 좋은 스크롤러임
      iPad의 기울기 스크롤은 나이 든 사람도 빠르게 읽고 스크롤하는 데 도움이 되며, 자동 스크롤도 꽤 좋음

  • 원래 위아래로만 스크롤하는 페이지였던 곳의 항목 행에 < > 버튼을 넣는 것도 처음 봤을 때만큼 지금도 싫음
    스트리밍 미디어 플랫폼이 이 분야에서 가장 악명 높지만, 유일한 범인은 아님

  • 요즘 가장 싫은 건 Ctrl+F나 Ctrl+K를 가로채는 것임

    • 선택 동작과 Ctrl-C를 가로채는 것도 추가하고 싶음
    • 브라우저가 단축키 덮어쓰기를 허용한다는 것 자체가 아주 나쁨
      브라우저 쪽에서 이걸 가능하게 하려면 분명 추가 코드가 필요했을 텐데, Google이나 Apple이나 Mozilla가 그 코드를 안 쓰는 데는 비용이 들지 않았을 것임
    • 유용한 앱 내 검색을 제공하더라도 Ctrl+F 가로채기는 정말 싫음
      브라우저가 이런 경우에 쓸 수 있는 Shift+Ctrl+F 같은 대체 단축키를 제공해야 함
      Firefox에서 Shift+Cmd+F가 뭔가 동작한다는 걸 방금 알게 됨
    • Outlook for web은 Ctrl+R을 가로챔
      표준 키 조합을 건드리지 말아야 함
      다른 애플리케이션의 기능을 빼앗아 사용자에게 놀라움을 주지 말아야 함
    • 솔직히 이건 양쪽으로 볼 수 있다고 생각함
      최근 Mac의 Google Sheets에서 스프레드시트 안 검색용 Cmd-F가 동작하지 않게 됐는데, 그 방식이 시스템 단축키를 가로채는 것이긴 했지만 실제로 대체 기능도 없었음
      그래서 검색하려면 Sheets 메뉴 막대로 가서 메뉴 안에서 찾아야 했음

  • 아래로 스크롤하면 애니메이션이 진행되고, 요소가 옆으로 움직이고, 스크롤 관문을 지나야 다시 페이지 아래로 내려갈 수 있는 것도 건드리지 말아야 함
    끔찍하고, 거슬리고, 방해가 되며, 사용자에게 적대적인 디자인임

  • 제일 웃긴 건 “Back to the normal version” 링크가 맨 위까지 부드러운 스크롤로 돌아가야만 클릭 가능하다는 점임
    제대로 당했다

  • Firefox에서 이걸 about:settings로 끌 수 있는지 궁금함
    아니면 이벤트 감지가 깨지려나?

    • 브라우저 설정만으로 이 기능을 막을 수 있는지도 궁금함
      대안으로 브라우저 확장 기능이 도움이 될 수도 있음
      구현은 경우마다 다를 것 같고, 페이지의 예제 [1]은 luxy.js [2] 라이브러리를 사용함
      이 특정 페이지 [1]에서는 개발자 도구 콘솔에서 아래 명령을 실행하면 부드러운 스크롤 동작을 비활성화할 수 있었음
      luxy.init({ wrapperSpeed: 1.0});
      1. https://dontfuckwithscroll.com/smooth.html
      2. https://min30327.github.io/luxy.js/
답변달기