롱스크롤과 스크롤 다운
하나의 페이지에 다양한 콘텐츠를 넣어두고, 롱스크롤을 활용하여 방문자들이 이를 확인할 수 있도록 구성하는 것이 이제는 보편화 되었는데요! 페이지를 이동할 필요가 없으며, 스크롤 다운만 하면 모든 내용을 확인할 수 있기에 방문자들에게도 큰 불편을 주지 않으며, 모바일에서도 쉽게 확인이 가능하다는 점이 큰 장점이라고 할 수 있습니다. 그래서 오늘은 롱스크롤을 어떻게 활용하면 좋을지에 대한 사례와 내용을 정리해볼까 합니다.
시각적 요소의 활용
롱스크롤이 적용되어 있다 하더라도, 방문자들이 이를 실제 행동으로 옮기지 않는다면 아래로 이어지는 콘텐츠를 제대로 전달할 수 없는것이 사실인데요! 때문에 화살표와 같은 디자인 요소를 활용하여 방문자가 스크롤을 내리는, 실제 행동을 할 수 있도록 유도하는 것이 중요합니다. ‘Fillet’에서는 화살표와 애니메이션을 통해 스크롤 다운을 유도하고 있었으며, 스크롤을 내리면 세가지 이미지가 교차되는 모습을 보여줌으로써 새로운 경험을 제공해주고 있었습니다.
네비게이션의 지속적인 노출
롱 스크롤의 장점을 계속 이야기 했지만, 단점 중 하나는 방문자가 길을 잃기 쉽다는 점인데요! 현재 위치를 알 수 없다는 점, 이전 콘텐츠로 쉽게 돌아갈 수 없다는 점은 사용자에게 혼란을 불러 일으킬 수 있으며 사용자 경험을 해칠 수 있습니다. 때문에 상단 또는 날개 배너 등을 활용하여 현재 사용자가 보고 있는 내용이 무엇인지, 그리고 이전 콘텐츠로 어떻게 돌아갈 수 있는지 지속적으로 노출해주는 것이 중요합니다.
페이지 단위의 디자인
스크롤 다운을 하여 내용이 바뀔때마다 이전 내용과는 다른 모습을 보여주는 것도 하나의 방법입니다. 섹션마다 색다른 디자인의 콘텐츠를 보여줄 수 있다면, 방문자로 하여금 스크롤을 내리는 것 자체로 즐거운 경험을 할 수 있다는 점을 전할 수 있지 않을까 싶네요!
효과적인 인터랙션의 활용
인터랙션과 애니메이션의 경우 롱스크롤을 활용하는데 있어 필수라고 할 수 있는데요! 애니메이션은 사용자에게보다 부드럽고 편안한 경험을 제공할 수 있습니다. 또한 이러한 애니메이션을 활용할 경우 사용자가 스크롤 다운이라는 행동을 할 때 독창적인 인터랙션을 경험할 수 있도록 도와줄 수 있기도 하죠. 다음에 어떤일이 일어날까 라는 기대감을 심어주는 것도 물론 가능합니다!
패럴랙스 스크롤링의 활용
마우스 스크롤링 할 때 스크롤의 위치에 따라서 어떤 효과를 주는 방법이 바로 ‘패럴랙스 스크롤링’인데요! 스크롤시에 배경이미지와 그위에 떠있는 오브젝트 이미지들의 시차가 발생하여 공간감을 나타내줄 수 있기에, 웹페이지에서 보여주고자 하는 이야기를 자연스럽게 노출할 수 있다는 장점이 존재합니다.
