UI 디자인 가이드 : Infinite Scroll
무한 스크롤의 장점과 단점에 대한 더 자세한 논의
무한 스크롤은 페이징 방법 중에서도 매우 인기 있는 디자인 유형입니다. 특히 모바일에서처럼요. 무한 스크롤를 활용해서 사용자 경험, 잠재 고객 창출등에 영향을 줄 수 있습니다.
무한 스크롤링이란 브라우저 스크롤 막대가 페이지 하단에 도달하는 것을 방지하는 것 을 말합니다.
사용자가 페이지를 더 아래로 스크롤할 때마다 콘텐츠가 확장되어 새로운 콘텐츠가 추가됩니다. 무한 스크롤은 연속적(무한하게)으로 스크롤하는 형태일 수도 있고, 사용자가 계속 스크롤을 선택/선택 해제할 수 있는 "더 보기" 옵션으로 단축할 수도 있습니다.
*아래에서 무한 스크롤(Infinite Scroll)과 더 보기(Load More) 버튼에 대해 한차례 다룬 바 있습니다.
여기서는 조금 더 자세히 알아봅니다.
Evaluating Content Types
콘텐츠 유형 평가 측면
장점
특정 콘텐츠 유형의 경우, 무한 스크롤이 페이지 이동에 의존하지 않고 페이지를 이동할 수 있는 기능을 제공한다는 점에서 더 나은 선택입니다. 중요한 업데이트, 뉴스 피드 및 지속적으로 업데이트되는 콘텐츠는 무한 스크롤의 이점을 누릴 수 있습니다. 예를 들어, CNN은 무한 스크롤을 사용하여 중요한 뉴스 기사 및 수신 정보를 먼저 강조 표시한 다음 사용자가 이전 게시물을 로드할 수 있도록 합니다.
단점
무한 스크롤은 순서가 중요한 콘텐츠의 경우 페이지 매김만큼 유용하지 않습니다. 사용자는 일반적으로 페이지 상단에 더 중요한 컨텐츠가 있다고 생각하고, 하단에 위치한 콘텐츠는 덜 중요하다고 생각하기 때문입니다. 뉴스 사이트의 경우 무한 스크롤이 콘텐츠에 적합하지만, 이커머스 사이트는 페이지 매김이 더 적합한 이유입니다.
예를 들어 Amazon에서 관리자는 가장 먼저 표시되는 항목을 제어할 수 있으며 가격, 크기 및 유효성과 같은 자격에 따라 특정 조직을 만들 수도 있습니다.
Managing Content Hierarchy
콘텐츠 위계 관리 측면
단점
컨텐츠은 무한 스크롤보다는 페이지 표시로 구성하기가 더 쉽습니다. 페이지 지정을 통해서 관리자는 콘텐츠 관련성, 유형 및 순서와 같은 항목을 보다 쉽게 제어할 수 있습니다. 예를 들어, 큰 직원 페이지는 이름, 제목 등에 따라 쉽게 검색할 수 있어야 합니다. 무한 스크롤은 때때로 정보의 저장소가 될 수 있습니다.
즉, 중요한 항목이 페이지 하단으로 이동되어 사용자가 좌절할 수 있습니다. 페이지 표시는 중요도의 위계에 따라 내용을 구성하기위한 보다 의도적인 해결책이 될 수 있습니다.
장점
스크롤을 통해 사용자는 연속 사이클에서 새로운 정보를 사용할 수 있습니다. 스크롤을 통해 사용자가 단순히 한 페이지에서 다른 페이지로 이동하지 않고 페이지를 아래로 이동할 수 있으므로 페이지 위로 스크롤할 때 얻는 것과 잃는 것을 따져보는 것이 중요합니다.
예를 들어, 뉴스 사이트에서는 가장 관련성이 높은 정보가 페이지 맨 위에 지속적으로 복제되어 페이지 새로 고침 때마다 반복적으로 사용자를 참여시킬 수 있습니다.
Consider the User Experience
사용자 경험에 대한 고려
장점
뷰어의 참여를 유지하기 위해 무한 스크롤은 사실 페이지 표시보다 더 강박적인 시청 경험 환경을 만듭니다. 화면을 더 오래 본다는 건 정보를 더 쉽게 소화할 수 있다는 뜻이기 때문입니다. 페이지를 로드하는 순간에도 사용자는 컨텐츠를 보게되고, 그것에 중독될 수 있습니다.
페이지 로드 시간은 최적화된 사용자 참여를 위한 적절한 형식을 결정할 때 똑같이 중요합니다. 관리자는 기존 페이지에 추가된 내용이 더 빨리 로드되는지 아니면 페이지 새로 고침이 더 빨리 로드되는지 고려해야 합니다. 콘텐츠 배치에 따라 콘텐츠 목록이 페이지보다 더 낮은 상황에서 무한 스크롤이 페이지 매김보다 더 중요합니다.(즉, 페이지 표시방식에서 계속 새로 고침하면 부드러운 UX를 방해할 수 있다는 뜻입니다.)
또한 Facebook, Tumblr 또는 Instagram과 같은 회사는 실제로 더 긴 시청 경험을 통해 시청자들을 수익화할 수 있습니다. 이 기업들은 알고리즘을 사용하여, UX의 리듬이나 흐름을 방해하지 않고 컨텐츠 전체에 퍼지는 광고를 가져옵니다.
단점 :
무한 스크롤로 특정 정보에 액세스하기가 더 어려울 수 있습니다. 예를 들어, 사용자는 단순히 웹사이트의 회사 주소를 알고 싶어도 Footer에 도달하기 어렵다면 답답해 할 것입니다.
날짜 정보가 있는 기사와 같이 특정 표시가 있는 콘텐츠의 경우에도 마찬가지입니다. 사용자를 6월의 특정 기사로 안내하기 위해서는 페이지 표시 방식을 활용하는 것이 스크롤링보다 사용자에게는 훨씬 쉽게 다가갑니다.
예를 들어 Time.com은 무한 스크롤을 채택한 후 이탈율이 15% 감소했습니다. 동시에 페이지 표시 방식은 더 많은 페이지 뷰와 동일하게 여겨지며, 이는 사실 광고가 포함되면 투자 수익을 더 많이 창출할 수 있다는 말이기도 합니다.
Maximize Tech Capabilities
기술 역량 극대화 측면
단점 :
무한 스크롤은 로드하는 데 시간이 오래 걸릴 수 있으며, 특히 로드중인 항목에 대한 우선 순위가 지정되지 않은 경우 브라우저에 부담을 줄 수 있습니다. 사용자도 스크롤의 특정 지점으로 돌아가기 어려워 이탈률을 높일 수 있습니다. 예를 들어 Google은 사용자에게 즉각적이고 빠른 결과/정보를 제공하기 위해 스크롤보다 페이지 표시를 우선시했습니다.
장점 :
무한 스크롤은 특히 모바일 장치에서 사용자에게 더 매끄러운 경험을 제공합니다. 스와이프 동작은 모바일 장치를 위해 만들어진 것처럼 보입니다. 페이지 표시는 태블릿과 전화기의 사용자에게 공통적 동기인 로드 시간 측면에서 탐색을 파괴할 수 있습니다. AD Slot의 경우 무한 스크롤에서 적절한 영역으로 활용될 수 있습니다. 무한 스크롤은 여러 가지 이유로 디자이너들 사이에서 인기 있는 선택지이지만, 페이지 표시 방식은 여러 가지 강력한 속성도 제공합니다.
Evert_45, Un Monde, Uber | Where To?, and Gazelle No.1와 같이 수상 경력에 빛나는 무한 스크롤 웹사이트의 몇 가지 예를 확인해보는 것도 좋겠네요.
Optimizing SEO
SEO 최적화
단점 :
Infinite scroll은 페이지를 단일 콘텐츠로 취급하기 때문에 Google 검색에서 SEO 순위를 낮추는 것으로 악명이 높습니다. 이는 구글 봇이 더 많은 콘텐츠를 로딩하지는 않기 때문에 많은 콘텐츠를 간과해버린다는 것을 의미합니다. 결과적으로 순위에 추가할 콘텐츠가 적기 때문에 SEO 순위가 낮아집니다. Etsy 는 2012년 무한 스크롤을 구현한 후 실적이 좋지 않은 것으로 알려졌습니다.
장점 :
무한 스크롤을 페이지 표시 방법과 함께 사용하는 것과 같이 웹 친화적인 무한 스크롤을 구현하는 방법도 있습니다. 무한 스크롤을 사용하면서 SEO 순위에 방해 되지 않고 도움을 줄 수 있는 또 다른 권장 사항도 있습니다. Google 웹마스터 트렌드 분석가 Google Webmaster Trends Analyst인 John Mueller의 매우 유용한 이 가이드는 도움이 되는 훌륭한 도구입니다.
디자이너의 선택은 콘텐츠 구성, 원하는 사용자 경험 및 기술 요구 사항에 따라 크게 달라집니다.
제품 서비스를 위해 무엇을 선택하든 무한 스크롤의 장단점을 따져보다 보면, 최상의 디자인 선택을 하는 데 도움이 될겁니다.
* 원본 자료의 글을 번역 및 가공한 글입니다. 일부 표현은 수정된 내용이 있을 수 있습니다.
