사이트의 스크롤 속도가 사용자에게 미치는 영향 : 스크롤 하이재킹(Scroll Hijacking)
하이재킹(Hijacking)이란 운행 중인 차량, 기차, 항공기, 기타 운송수단에 대한 불법적 납치행위를 말한다고 합니다. 여담으로 미 서부 개척 시절, 강도들이 노략질을 목적으로 마부의 머리에 권총을 대고 그당시 마부였던 존의 애칭으로 "Hi, Jack"이라고 인사를 건넸던 것에서 유래된 말이라고 합니다.(뭔가 흥미롭네요ㅎㅎ) 현재는 항공기 납치사건이 압도적으로 많이 발생하면서 항공기 납치를 뜻하는 말로 하이재킹(Hijacking)을 사용한다고 합니다.
서론이 길었습니다. 오늘 이야기할 주제는 스크롤 하이재킹(Scroll hijacking)에 대한 것입니다. 말 그대로 스크롤을 납치, 사용자 스스로가 스크롤하는 행위를 빼앗아가는 방식이라고 볼 수 있습니다. 어떤 상황에서 스크롤 하이재킹(Scroll hijacking)이 나타나며, 이런 문제를 해결하려면 어떻게 해야 할까요?
: 스크롤 하이재킹(Scroll hijacking)이란?
스크롤 하이재킹(Scroll hijacking)이란 페이지의 움직임과 마우스 스크롤의 움직임이 정확하게 일치하지 않고 시차가 생기는 상황을 말합니다. 이것은 브라우저나 기기 환경에 따라 로딩시간이 다를 수도 있고 그로 인해 사용자를 당황시키게 합니다. "웹사이트가 쉽고 직관적이다"라는 말은 일반적으로 사용하는, 다시 말해 사용자들이 예상하는 방향으로 흘러가게 사용된다는 말입니다. 반대로 사용자가 생각하는 방향으로 사이트가 흘러가지 않는다는 말은 웹사이트가 어렵고 복잡하다고 느끼게 한다는 것이며, 사용자들의 사이트 통제력을 빼앗아 간다는 뜻입니다. 그렇기 때문에 말 그대로 스크롤 하이재킹(Scroll hijacking)은 불쾌한 경험으로 사용자에게 다가올 수밖에 없는 것이죠. 스크롤 하이재킹(Scroll hijacking)에 대한 예시는 기존과 다른 스크롤 속도, 수평 스크롤(Horizontal Scrolling), 페럴렉스 스크롤(Parallax Scrolling), 풀 페이지 사이트(Full-page Site) 등이 있지만 오늘은 그 중에서도 부드러운 스크롤(Smooth scroll)의 오사용에 대한 이야기를 예시로 들어보겠습니다.
: 적재적소에 사용해야 할 기술, 부드러운 스크롤(Smooth Scroll)
부드러운 스크롤(Smooth Scroll)은 특정한 상황에서 알맞게 사용해야만 좋은 효과를 가져오는 기술입니다. 일반적으로 사용하는 스크롤 기술과는 다르기 때문에 부드러운 스크롤(Smooth Scroll)을 사용할 때에는 반드시 스크롤을 기반으로 이용하는 사이트라는 표시가 필요합니다. 보통 스크롤 다운(Scroll Down)이라고 불리는 아이콘을 사이트 메인 하단에 넣는 것이 기본적입니다. 부드러운 스크롤(Smooth Scroll)을 사용하는 사이트라는 설명이 전혀 없어 사용자가 그것을 알아차리지 못하는 순간부터 그 사이트는 사용자에게 불쾌한 사용자 경험을 제공하게 되는 것입니다.
지금부터 부드러운 스크롤(Smooth Scroll)이 굉장히 잘 사용되어 있는 사이트를 하나 보여드리려고 합니다. 올해 8월에 삼성에서 새로 출시한 갤럭시 Z 플립4의 소개 사이트인데요. 아래 첨부해드린 링크를 통해 사이트를 둘러보시며 부드러운 스크롤(Smooth Scroll)를 경험해보시기 바랍니다. 특히나 부드러운 스크롤(Smooth Scroll)에 대해 경험해보지 않으셨거나 부드러운 스크롤(Smooth Scroll)이 어떤 느낌의 스크롤 기술인지 파악하지 못하신 분이라면 조금 더 신중하게 사이트를 둘러보시며 스크롤 기술을 경험해보시고 그때의 사용자 경험을 기억해두시기 바랍니다. 그 이유에 대해서는 아래에서 설명드리겠습니다ㅎㅎ
https://www.samsung.com/sec/smartphones/galaxy-z-flip4/
삼성 갤럭시 Z 플립4 | Samsung 대한민국
새로워진 갤럭시 Z 플립4를 만나보세요. 새로운 시각으로 순간을 포착하고 방수까지 지원하는 폴더블 스마트폰. 미니멀하면서도 강력한 Z 플립4를 경험해 보세요.
www.samsung.com
: 불쾌한 사용자 경험
현재까지 사용자들이 사용하던 거의 대부분의 사이트들은 부드러운 스크롤(Smooth Scroll)을 사용하고 있지 않습니다. 그렇기 때문에 기존에 사용하던 사이트에서 느끼던 UX적 경험으로 미루어 보았을 때, 어느정도의 힘으로 마우스 휠을 내려 스크롤을 하면 사용자가 그 순간 머무르고 있던 시선에 어떤 글자들까지 놓이게 될 것이라는 예상을 자연스럽게 할 수 있게 됩니다. 이 부분은 사용자 스스로가 인식하지 않더라도 다양한 사이트를 경험하면서 너무나 자연스럽게 쌓이게 된 사용자 경험입니다. 무의식 중에 스크롤을 하더라도 머무르던 시선에 원하는 부분까지의 내용을 마우스 휠 컨트롤로 거의 정확히 맞출 수 있는 것이죠.
그에 반해 부드러운 스크롤(Smooth Scroll)은 기존 사이트 스크롤과 조금 다르게 작동합니다. 일반적으로 스크롤 스타일이 변동되지 않은 사이트들의 스크롤보다 1~2초정도 느리게 스크롤이 내려가며 스크롤이 멈추는 위치 또한, 기존보다도 조금더 아래쪽까지 내려가게 됩니다. 그렇다보니 부드러운 스크롤(Smooth Scroll)을 처음 사용하는 사용자들의 경우, 스크롤을 내렸다가 다시 살짝 올리고 스크롤을 내렸다가 다시 살짝 올리고 하는 행위를 반복하게 됩니다. 조금 전 기억하시라고 말씀 드렸던 삼성 갤럭시 Z 플립4 사이트의 스크롤 경험을 복기해보세요. 제가 말씀드린 것처럼 사용하지 않으셨나요?ㅎㅎ 뿐만아니라 제품에 대한 글자와 설명이 다른 사이트들보다 덜 정확하게 파악하게 된다는 것을 느끼셨을 수도 있을 겁니다. 부드러운 스크롤(Smooth Scroll)이 사이트의 전반적인 스타일의 퀄리티를 높여주는 데 도움이 될 수는 있지만 글자나 텍스트를 명확히 파악하는데에는 방해가 될 수 있습니다. 그렇기 때문에 디자인이나 인터렉션을 확실하게 보여주어 사용자에게 확실한 인상을 남겨야 하는 사이트들이 아닌 글자가 많고 설명이 노출되는 소개 사이트같은 곳에서는 좋지 못한 경험을 줄 수도 있습니다.
: 이거 오류죠?! 해결 방법을 알려주세요ㅠㅠ
부드러운 스크롤(Smooth Scroll)은 애플에서 제품 소개 사이트에서 처음으로 사용하면서 유행하게 된 기술이라고 합니다. 심지어 애플은 이 기술을 운영체제에 기본값으로 설정하기도 했습니다. 역시나 애플을 IT 시대의 가장 선두주자라고 생각하는 다른 사이트, 플랫폼들에서도 이 부드러운 스크롤(Smooth Scroll)을 도입하기 시작했습니다. 크롬, 엣지 등 차례로 부드러운 스크롤(Smooth Scroll)를 브라우저에 도입했고 앞서 보여드렸던 삼성도 당연히 애플과 동일하게 제품 소개 사이트에 부드러운 스크롤(Smooth Scroll)을 적용했습니다. 하지만 대부분의 사용자들은 말씀드린 불편한 사용자 경험을 경험했습니다. 상황에 대해 정확히 알지 못하는 일반 사용자들의 경우, 상당히 많은 사람들이 문제가 생겼다고 판단하고 해결방법(?)을 검색하기도 헀습니다. 부드러운 스크롤(Smooth Scroll)의 잘못된 사용으로 인해 스크롤 하이재킹(Scroll hijacking)이 이루어지게 된 것입니다.
어떤 제품부터 사이트에 부드러운 스크롤(Smooth Scroll)을 빼기 시작했는지는 정확히 파악하지 못했지만 현재 애플 제품 사이트는 부드러운 스크롤(Smooth Scroll)이 적용되어 있지 않습니다. 또한, 애플은 새로운 제품을 출시할 때마다 카테고리별 가장 최신 출시 제품의 소개 사이트만 남겨두기 때문에 새로 시도했던 부드러운 스크롤(Smooth Scroll)이 제품 소개 사이트에서는 사용성이 좋지 않았고 그것이 "해결"되었다는 느낌이 들지 않기도 합니다.(여기까지 예상해서 만들진 않았겠지만 정말 대단합니다...)
: 부드러운 스크롤(Smooth Scroll), 사용하지 않아야 하는 걸까?
그렇다고 부드러운 스크롤(Smooth scroll)이 나쁜 기술인 것은 아닙니다. 웹페이지의 목적과 용도에 맞게 적절히 사용했을 때 좋은 효과를 가져올 수 있습니다. 예를 들면 이야기 형식으로 풀어나가는 형태의 웹사이트의 경우에는 잘만 사용한다면 다른 사이트와는 차별되는 독특한 느낌을 줄 수 있습니다. 사이트의 목적이 설명 또는 안내 형식으로 전달하려는 명확한 메시지가 있는 것이 아닌 화려하고 눈이 즐거운 비주얼적인 부분에 초점이 맞춰져 있다면 사용하셔도 좋습니다. 아래의 예시들을 보면 간단하게 스크롤 방식만 바꾸었을 뿐이지만 사이트의 퀄리티 향상에 굉장한 도움이 된 것을 확인하실 수 있습니다.
https://native-smooth-scroll.webflow.io
Native Smooth Scroll in Webflow
hello. after a looong time of trying... ...i finally found a way of creating that sweet smooth scrolling effect... however, it's a bit hacky. and I'm actually not entirely sure why it works. and it also doesn't feel as smooth & beautiful as for example lo
native-smooth-scroll.webflow.io
https://text-animation-timeline.webflow.io
Text Animation Timeline
A journal is a scholarly publication containing articles written by researchers, professors and other experts. Journals focus on a specific discipline or field of study. Unlike newspapers and magazines, journals are intended for an academic or technical au
text-animation-timeline.webflow.io
https://webflow-smooth-scroll.webflow.io
Flowbase | Smooth Scroll (Luxy.js)
Learn how to add smooth scrolling to your webflow website. Beginner guide. For more cloneable templates, assets and guides - visit flowbase.co
webflow-smooth-scroll.webflow.io
끝까지 봐주셔서 감사합니다! :-)
참고사이트
https://codeless.co/scroll-hijacking/
https://alvarotrigo.com/blog/what-is-scroll-hijacking/
https://discoverydesign.co.uk/blog/post/scroll-hijacking-why-scrolljacking-is-a-usability-nightmare/
https://www.kyobostory.co.kr/contents.do?seq=1535
https://webflow.com/made-in-webflow/smoothscroll