무한스크롤, 페이징 혹은 "더보기" 버튼? 어떤 걸 써야할까

사이트를 기획하다보면 리스트 형식의 결과들을 어떻게 나타낼 것인지를 고민하게 됩니다. 적당한 개수를 정하여 페이징 처리를 할 것인지, 아니면 무한 스크롤을 적용하여 비동기 방식으로 스크롤이 맨 아래일 때 그 다음 결과를 불러올 것인지, 그것도 아니면 "더보기" 버튼을 둘 것인지 말이죠. 쇼핑몰이나 소셜 커머스처럼 수많은 결과들을 취급하는 웹사이트라면 더욱 리스트 처리 방법에 대해 고민이 되리라 생각합니다. 그래서 외국 사이트를 보던 중 좋은 글을 발견하여 일부 번역하여 포스팅 해보도록 하겠습니다.

 

무한스크롤, 페이징 혹은 "더보기" 버튼? eCommerce에서의 사용성 조사 결과

 

e-commerce 웹사이트에서 상품을 보여줄 때 가장 좋은 UX 패턴은 무엇일까? 페이징, "더보기"버튼 혹은 무한 스크롤? 한 연구기관에서, 오랜 시간에 걸쳐 50개 이상의 인기가 많은 쇼핑몰 웹사이트의 사용성 조사를 대규모로 진행했습니다. 상품을 로딩하기 위한 이 세 가지 디자인 패턴을 데스크탑과 모바일에서 테스트하였습니다.

페이징 처리는 여전히 새로운 항목을 로드하기 위해 가장 많이 사용하는 방법입니다. 왜냐하면 거의 대부분의 e-commerce 플랫폼에 기본적으로 채택되어 있기 때문입니다. 그러나, 사용성 테스트 세션에서는 레이지 로딩(lazy-loading)과 결합한 "더보기" 버튼이 더 매끄러운 사용자 경험(user experience)을 낳기 때문에 더 우수한 구현방법으로 나타났습니다. 무한 스크롤은 사용성에 있어서 더 할 수 없이 해롭다는 것도 밝혀졌습니다. 특히, 조회 결과와 모바일에서 그런 경향은 두드러졌습니다. 그러나, 이는 흑백논리로 설명할 수는 없습니다. 페이지의 컨텍스트에 따라 각각의 방법의 퍼포먼스가 다양하게 달라질 수 있기 때문입니다. 

e-commerce 상품의 리스트와 필터링의 대규모 사용성 연구를 진행하는 동안, 수많은 사이트의 실험 참가자들은 페이징 처리에 대해 불평을 했습니다. 실험 참가자들은 보편적으로 페이징 처리는 속도가 느리다고 인지했고, 몇 개 안되는 페이지 링크(1,2,3..)가 있음으로써 상품 리스트를 탐색할 때 상품을 볼 의욕을 저하시킨다고 하였습니다. 더 중요한 것은, 이 결과 실험 참가자들은 "더보기" 버튼이나 무한스크롤을 채택한 웹사이트에 비해서 더 적은 상품을 탐색하게 된다고 발견된 점입니다. 

<네이버 쇼핑 검색결과 페이징 처리>

무한 스크롤이 있는 경우, 사용자는 대부분 모든 상품들이 한번에 로드되는 것처럼 느낍니다. 그러나 이런 경우는 수 백개의 상품을 로딩할 때 잠재적으로 성능상의 불이익을 배제할 수 없습니다. 그러므로, 무한 스크롤은 적절한 방법으로 구현되었을 때, 놀랍도록 부드럽고 매끄러운 사용자 경험을 만들어낼 수 있습니다. 사용자는 아무런 중단 없이 상품리스트를 스크롤 할 수 있습니다. 아무런 인터랙션이 필요하지 않습니다. 단순히 사용자가 스크롤을 내리는 것만으로 상품이 나타납니다. 그렇기 때문에 사용자가 페이징이나 "더보기" 버튼이 있는 웹 사이트보다 무한 스크롤이 있는 웹사이트에서 더 많은 상품을 탐색하게 되는 것은 놀라운 일이 아닙니다. 그러나, 초반에 나타난 결과들은 상대적으로 적게 노출됩니다. (사람들이 무의식적으로 스크롤을 내려버리기 때문에, 스크롤을 움직이지 않았을 때 첫 화면에 나오는 결과는 적게 노출된다는 의미입니다.) 

그러므로, 무한스크롤은 전체 카테고리를 폭 넓게 빠르게 보여주기에 이상적입니다. 그러나 사용자들은 본능적으로 스크롤링을 할 때 멈추게 되지 않기 때문에, 더 많은 상품을 스캔하면서도 리스트에 있는 각 개별 상품에는 덜 집중하는 경향이 있습니다.

 

<배달의 민족 검색 결과 무한 스크롤>

무한 스크롤은 종종 웹사이트 푸터 영역에 사용자가 접근하는 것을 방해합니다. 이는 무한스크롤의 주요한 도전 과제 중 하나입니다. 사용자가 리스트의 바닥에 도달할수록 결과는 계속 로드되고, 사용자가 푸터에 도달해서 1~2초 후에 바로 다음 결과 리스트가 로드되어 갑자기 추가되어, 푸터를 뷰 영역 밖으로 밀어내기 때문입니다. 만약 수많은 아이템들이 리스트에 있어서, 이것이 효과적으로 사용자가 푸터에 도달하는 것을 막습니다. 이는 아주 심각한 문제가 될 수 있는데, 푸터가 종종 필수적인 도움페이지, 크로스 네비게이션, 카테고리, 고객 지원/배송/환불에 관한 중요한 정보로 가는 링크를 포함하고 있기 때문입니다.

소수의 웹사이트만이 "더보기"버튼을 사용하고 있었지만, 실험 참가자들은 잘 받아들였습니다. 사실, 미국의 탑 50 e-commerce 웹사이트를 벤치마킹할 때, 오직 8%만이 "더보기"버튼을 사용하고 있었습니다. "더보기"는 아주 단순한 디자인으로서 사용자에게 어느 페이지로 이동할지에 대해 부담을 주지 않습니다. 다만 단순히 물어봅니다, "결과를 더 보고 싶으신가요?"라고 말이죠. 실험 참가자들은 보편적으로 페이징 링크가 있는 사이트에 비해 "더보기"버튼이 있는 웹사이트에서 더 많은 상품을 탐색하였습니다. 그러나 추가적으로 상품을 로딩하기 위해서는 적극적인 선택과 클릭을 요구하기 때문에, 실험 참가자들은 무한 스크롤이 있는 웹사이트보다 화면에 나와있는 항목들을 좀 더 열심히 읽는 경향을 보였습니다. (무한 스크롤보다는 상품을 적게 본다는 것을 의미힙니다. 하지만 화면에 보이는 상품을 좀 더 집중해서 본다는 것이죠.)

 

<외국의 한 사이트의 더보기 버튼>

"더보기"와 무한스크롤 구현의 장점 중 하나는 결과가 대체되는 것이 아니라, 상품의 리스트가 증가한다는 것입니다. "더보기"는 사용자로 하여금 전체 리스트 중에서 보다 쉽게 상품을 비교하도록 만들어 줍니다. 하나의 통합된 상품의 리스트는 사용자로 하여금 어떤 상품이 가장 좋은지 평가하기 쉽게 만들고, 결론적으로 전체 상품을 발견하는 비율이 높아집니다.

그래서, 어떤 로딩 방식을 써야할까요? "더보기"를 다양한 변화를 주어 사용하는 것이 가장 이상적인 것으로 밝혀졌습니다. 조사결과는 모든 경우에 완벽하게 들어맞는 하나의 방법을 보여주지는 않았습니다. 컨텍스트별로 세 개의 다른 "더보기" 구현 접근법 중 하나는 보장합니다. 이제부터는 그 세 가지 접근법을 다루겠습니다.

• 카테고리를 위해서는 "더보기" 버튼과 레이지 로딩(lazy-loading)을 결합해서 사용하라.
• 검색에는 "더보기" 버튼을 적합성 정도에 따라 다른 개수의 결과값을 반환하는 방법과 결합하는 것이 이상적이다.
• 모바일에서는 "더보기"버튼을 사용하되, 적은 수의 상품을 로드하도록 한다.

주의: 이 결과는 e-commerce 웹사이트를 조사한 결과입니다. 퍼포먼스는 웹사이트의 유형에 따라 달라질 수 있습니다.

카테고리를 위한 "더보기"

e-commerce 홈페이지와 카테고리 네이게이션에 대한 대규모 사용성 연구에서, "더보기" 버튼과 레이지 로딩 형태의 무한 스크롤을 결합하여 사용함으로써 카테고리의 새로운 상품들을 로딩하는 데에 적합한 솔루션을 발견하였습니다. 첫 페이지 로드에서는 10~30개의 상품을 보여주고, 그런 다음 50~100개의 상품이 될 때 까지, 10~30개의 다른 상품을 레이지 로드합니다. 그런 다음 "더보기" 버튼을 보여줍니다. 한 번 버튼이 클릭되면, 다른 10~30개의 상품을 로드하고, 다시 50~100개의 상품이 될 때까지 레이지 로딩을 실행합니다. 그런 후 다시 한 번 "더보기" 버튼을 보여줍니다. "더보기" 버튼의 50~100개의 한계점은 언제 사용자를 방해할 것인지를 결정하며, 반면 레이지 로딩의 한계점은 단지 로딩 시간과 서버 로드를 줄이기 위한 성능 최적화 요소입니다.

상품을 로드하기 위한 개수를 의도적으로 범위로 나타낸 사실을 주의 깊게 봐야합니다. 실험을 통해서 웹사이트의 컨텍스트와 산업군에 따라 한 번에 보여줄 이상적인 상품수를 알 수 있었습니다. 좀 더 스펙이 중요한 상품의 리스트(대부분 가전, 하드웨어, 기계 부품)라면, 더 적은 범위를 사용하세요. 반면, 좀 더 시각적인 요소를 포함한 리스트(의류, 가구, 장식품 등)라면 더 많은 상품을 보여주는 것이 이상적입니다.

검색 결과를 위한 "더보기"

개방형(open-ended-ness) 검색 때문에, 카테고리 탐색보다는 더 많은 결과를 보여주는 경향이 있습니다. e-commerce 검색에 대한 사용성 연구에서, 수백개의 검색 결과는 흔지 않은 광경이 아니었습니다. 그리고 대규모의 상업 웹사이트에서, 검색 쿼리는 종종 수천개의 결과를 반환합니다.

게다가, 검색을 사용하면, 결과들이 적절하게 정렬됩니다. 그래서, 전형적으로 5번째 결과는 100번째 결과보다 사용자에게 관련이 높습니다. 이는 사용자가 검색을 할 때 수백개의 상품들을 위쪽으로 스캔할 필요하 없다는 것을 의미합니다. 보다, 그들은 첫번째 항목을 주의깊게 살펴보도록 유도해야 합니다. 그러므로, 검색결과는 25~75개의 상품만 로드를 해야하고, 검색 결과를 위해서 무한스크롤은 절대 사용되지 말아야 합니다. 페이징 처리 혹은 "더보기" 버튼은 검색 결과를 위해서 더 나은 방법입니다. 왜냐하면 사용자가 수 많은 상품들을 빠르게 스캔하도록 유도하지 않아야 하기 때문입니다. 대신 사용자가 첫번째 검색결과에 더욱 집중하여 탐색하도록 유도해야 합니다.

모바일을 위한 "더보기" 버튼

오랜 시간에 걸친 모바일 e-commerce 연구에서, 새로운 페이지를 로드하게 위해서 페이지 링크를 정확히 터치하는 것이 어려울 수 있다는 것을 알아냈습니다. 반면에, 무한 스크롤은 많은 상품을 탐색하게 하는 데에 아주 효과적이라는 것이 증명되었습니다. 사실, 실험 참가자들은 페이징 처리가 되어 있는 사이트에 비해 무한 스크롤이 있는 웹사이트에서 2배 가량 더 많은 상품을 스크롤 하였습니다. 그러나 위에서 언급했듯이, 이는 푸터 영역에 도달할 수 없도록 만듭니다. 모바일 테스트 중, 푸터 영역에 "PC버전으로 보기", "FAQ", "배송" 등과 같은 중요한 링크들이 렌더링 되었습니다. 푸터 영역에 도달할 수 없었던 실험 참가자들은 푸터 영역의 위와 같은 링크에 접근할 수 있기를 원했습니다.

그러므로, 가장 좋은 방법은 상품의 리스트 마지막에 하나의 큰 "더보기" 버튼이 있는 것입니다. 그러나, 모바일은 특별한 제약점을 가지고 있습니다. 

• 화면이 작다.
• 스크롤 제약
• 느린 스크롤링
• 자바스크립트 이벤트

이런 이유들로 인해, 모바일 기기에서는 "더보기"버튼을 보여주기 전에 15~30개의 상품만 보여주고, 레이지 로딩이 아니라 단순히 한 번에 모두 로딩하기를 권장합니다.

 

이 글의 전문을 보시려면 여기를 클릭하세요.