스크롤 인터랙션 설계와 성능의 균형

스크롤은 손가락이나 마우스를 움직이는 동안 계속 발생합니다. 그때마다 위치를 계산하고 화면을 다시 그리면 부하가 큽니다.

특히 여러 요소가 동시에 반응하거나, 이미지가 많이 움직이면 저사양 기기에서 확연히 버벅입니다.

등장 애니메이션

화면에 들어올 때 나타나는 효과. 가벼운 편입니다.

고정(스티키) 요소

스크롤해도 따라오는 헤더. 부담이 적습니다.

진행 표시줄

얼마나 읽었는지 표시. 가볍습니다.

패럴랙스

배경과 전경이 다른 속도로 움직임. 무겁습니다.

스크롤 연동 애니메이션

스크롤 위치에 따라 요소가 변형. 가장 무겁습니다.

스크롤 가로채기

스크롤을 막고 화면을 전환. 사용성 문제도 큽니다.

성능만이 문제가 아닙니다. 스크롤 동작을 임의로 바꾸면 방문자가 예상한 대로 화면이 움직이지 않아 불편합니다.

특히 스크롤을 가로채 한 화면씩 넘기는 방식은 원하는 곳으로 빨리 가지 못하게 만듭니다.

스크립트가 실패해도 내용이 나와야 합니다. 안 보이면 치명적입니다.

이미 본 요소가 다시 사라졌다 나타나지 않게 합니다.

지속 시간을 짧게. 기다리게 하지 않습니다.

모바일에서는 효과를 줄이거나 없앱니다.

오래된 기기에서 테스트합니다.

□  스크롤 효과가 정말 필요한지 검토했는가

□  무거운 효과(패럴랙스, 스크롤 연동)를 남용하지 않았는가

□  스크롤 동작 자체를 가로채지 않는가

□  효과가 실패해도 내용이 보이는가

□  등장 효과가 한 번만 실행되는가

□  모바일에서 효과를 줄였는가

□  저사양 기기에서 테스트했는가