어떻게 무한 스크롤이 UX를 망치는가

이제 사용자는 스크롤을 아래로 내리면 끊임없이 페이지를 불러내는 무한 스크롤 페이지에 완전히 익숙해졌을 겁니다. 표면적으로는 페이지네이션을 대체하려고 디자인 되었고, 사용자 경험에 더욱 친숙하고 더 편리하다고 우리에게 손짓을 하지만, 실상은 정말 그럴까요? 

무한 스크롤의 경우에서처럼, 가끔은 관습적인 생각이 완전히 잘못된 것일 때가 있습니다. 모두가 특별한 테크닉을 최고라고 생각할 때, 이미 그것을 과하게 사용하고 있다는 신호이기도 합니다. 이것이 바로 무한 스크롤에서 벌어지고 있는 현상입니다. 

페이지 성능에 부담

웹상에서 페이지 로딩 스피드는 생명입니다. 많은 연구결과가 보여주듯, 느린 로딩 시간은 사용자로 하여금 사이트를 나가게 하며, 일반적으로 전환율을 급락시킵니다. 사용자는 웹사이트가 얼마나 화려하고 멋진지에는 그닥 관심이 없습니다. 페이지 로딩 시간이 중요하며, 무한 스크롤 사이트에서는 이것이 나쁜 뉴스이기도 하죠. 

많은 사용자들이 같은 페이지에서 무한히 스크롤하고 있다면, 불가피하게 같은 페이지에 더 많은 콘텐트를 불러오게 됩니다. 그 결과 페이지 성능은 점차 느려질 것이고, 사용자 경험상으로도 더욱 악화될 것입니다. 

콘텐트를 더 불러올 때, 그 페이지는 더 많은 일을 하게 되는 것은 당연합니다. 이건 무한 스크롤 페이지에만 해당되는 일이 아닌 모든 웹페이지에서 그렇습니다. 그리고 이 상황이 성능 이슈로 연결되는데, 특히 페이지가 길어질 때 문제가 됩니다. 

구글플러스는 무한 스크롤 기반이지만, 이것이 항상 최고의 아이디어인 것은 아닙니다. 소니의 구글플러스 페이지에 들어가보면, 회사로부터 업데이트되는 수많은 콘텐츠가 사용자를 맞이합니다. 만약 몇 개월 전의 올라온 포스트를 보고 싶다면, 우리는 잠시동안 계속 스크롤 해야 하며, 이 말은 계속해서 콘텐츠가 페이지에 로딩된다는 겁니다. 이로써 잠시 후 모든 섹션을 초기화한 후 새로운 포스트를 로드하면 몇 초간이나 걸릴 수 있습니다.  

마지막 스크롤 위치

무한 스크롤을 할 때 사용자가 겪게 되는 불만은, 어느 정도 스크롤하다가 링크를 클릭했을 시에 자주 발생합니다. 링크를 타고 다른 페이지로 넘어갔을 때, 다시 뒤로가기를 클릭하면 사용자가 링크를 클릭했던 그 지점으로 다시 돌아가는 것이 아니라는 점입니다. 

다시 원래 페이지로 돌아가면, 이전에 갔었던 곳까지 다시 스크롤링을 해야 합니다. 이것은 엄청난 시간낭비이며 사용자를 낙심시킬 일이죠. 그러하기 때문에 무한 스크롤 페이지는 사용자가 마지막으로 머물렀던 곳으로 스크롤이 리셋되는게 보통입니다.

이런 악명 높은 문제점의 예를 "크리에이티브 크루즈Creative Cruise"의 롱-스크롤 페이지에서 찾을 수 있습니다. 웹 디자인에서도 아주 독특한 예인데, 이것은 서쪽에서 동쪽으로 크루즈의 루트를 따라가는 스토리텔링식 방식의 사이트 입니다. 그래서 스크롤을 내리면, 사실은 스크롤이 오른쪽으로 가는거죠.

페이지를 스크롤해서 다섯번째 픽업 포인트인 '헤렌그라크트 506'에 도달했다고 합시다. 당신은 이제 거의 다 픽업 포인트에 대해 배워가고 있습니다. 근데 갑자기 이 크루즈에 대해 조금 더 알고 싶어졌고, 상단 네비게이션에 "크루즈에 관해About the Cruise"를 발견하고선 클릭해서 들어갑니다. 

크루즈에 관해 짧게 배우고 나서, 다시 뒤로가기 버튼을 누릅니다. 당연히 다섯번째 픽업 포인트인 '헤렌그라크트 506'부터 시작할거라 예상하죠. 하지만 처음으로 리셋되어 있고, 당신은 처음부터 다시 스크롤링을 해서 모든 픽업 포인트를 거쳐야 합니다. 

푸터 사용의 어려움

푸터는 보통 사이트 방문자에게 제공할 About, Contact, 개인링크 등의 중요한 정보를 담고 있습니다. 사용자는 필요하면 아무 때나 찾아가 쉽게 클릭 한 번으로 정보를 습득할 수 있습니다. 하지만 무한 스크롤 사이트에 있는 사용자는 그러한 푸터 링크를 성공적으로 클릭하기란 쉽지 않습니다. 

푸터에 있는 링크를 클릭하려고 스크롤을 내려서 푸터가 보입니다. 클릭하려는 순간 어떤 일이 벌어질까요? 숨겨져 있던 레이어가 로딩되어 열리면서 푸터를 밀쳐내고 다음 콘텐츠를 보여줍니다. 다시 스크롤 해서 푸터까지 다다르면, 또 다시 로딩되어 새로운 레이어가 나타나죠. 정말 미칠 지경이죠! 

예를 들어 "빙 이미지Bing Images"를 보자면, '캔디Candy'를 검색했을 때, 끝없이 펼쳐진 설탕 덩어리들의 사진을 보게 됩니다. 스크롤을 끝까지 내리면 새로운 이미지들이 로딩 되면서 푸터가 계속 아래로 밀려 내려가게 됩니다.

푸터에는 "더 배우기Learn More," "도움말Help" 같은 것을 포함하고 있지만, 무한 스크롤이 완전히 끝날 때까지 푸터의 어떠한 링크도 클릭할 수 없을 겁니다. 푸터에 도달하기 위해 짜증나는 시간을 보내야 하는거죠.

아직도 발전이 더 필요한 무한 스크롤

보편적이고 대중적인 무한 스크롤은, 디자이너가 고객사의 사이트에 쉽게 추가해 버리기에는 아직 완벽하지 못하며 발전시켜야할 것도 많습니다. 단지 여기저기서 많은 이들이 무한 스크롤을 채택한다고 해서 이것이 단순히 유용한 테크닉이라고 말할 수는 없습니다. 

무한 스크롤이 콘텐츠에 도달하는데 지연되는 단점이 있는 페이지네이션의 대안이 될 수는 있지만, 그 자체로도 문제점을 안고 있는 것이 사실입니다. 

디자이너는 무한 스크롤을 사용하기 전에 장점과 단점을 잘 따져야 긴 로딩시간과 스크롤 위치를 잃어버림, 푸터에 쉽게 도달하지 못하는 상황 등을 사용자가 겪지 않게 될 것입니다.  

원문: How infinite scrolling breaks UX

Refresh Studio

해외 최신 웹/모바일/UX 디자인 글과 동향을 소개해 드립니다.