콘텐츠는 웹사이트를 특별하게 만들어줍니다. 어떤 온라인 비즈니스라도 정확하게 같은 경험을 제공할 수는 없습니다. 적절하게 큐레이팅 된 콘텐츠는 사업을 돋보이게 만들고, 방문자를 리드 그리고 고객으로 전환합니다.
사이트의 킬러 콘텐츠를 만들기 위해 시간을 투입하셨나요? 그렇다면 이어서 검색 경험(browsing experience)이 일치하기를 원하실 겁니다. 이는 사이트 구성의 중요한 요소입니다. 사용자를 만족시키는 방식으로 콘텐츠를 구성하고 표시하려면 어떻게 해야 할까요?
현대의 웹사이트들은 기본적으로 두 가지 범주의 콘텐츠 구성으로 나눌 수 있습니다. 콘텐츠들을 여러 페이지로 나누는 ‘페이지네이션 사이트(paginated site)’와 모든 페이지를 한 페이지에 배치하는 ‘무한 스크롤 사이트(infinite scrolling site)’ 입니다.
두 가지 조직 방법을 심층적으로 논의하고, 각각의 장-단점을 비교하여 웹 사이트에 가장 효과적인 방법이 무엇인지 정해봅시다.
페이지네이션(Pagination)
페이지네이션은 디지털 콘텐츠를 웹사이트의 또 다른 페이지들로 분리하는 방법입니다. 사용자는 페이지 하단에 있는 숫자 형식의 링크를 클릭하여 페이지들을 탐색할 수 있습니다. 페이지네이션된 콘텐츠 일반적으로 몇 가지 공통된 주제 혹은 목적들을 지니고 있습니다.
페이지네이션은 수많은 온라인 비즈니스와 쇼핑몰 웹사이트 그리고 블로그와 같이 정보를 전달하는 웹사이트들에서 널리 사용됩니다. 헬로디지털의 블로그가 기본적인 예로 각 포스트는 썸네일이라는 작은 이미지로 표시되며, 각 페이지에 나뉘어 배치됩니다. 다른 페이지로 이동하고 싶다면 하단의 번호가 매겨진 링크를 클릭하고, 새로운 포스트가 보고 싶다면 새로운 페이지의 또 다른 썸네일을 클릭하면 됩니다.
무한 스크롤(Infinite scroll)
무한 스크롤은 사용자가 페이지 하단에 도달했을 때, 콘텐츠가 계속 로드되는 사용자 경험(UX, User EXperience) 방식입니다. 이는 마치 끝이 없는 단일 페이지에서 끝없는 정보의 흐름을 경험하게 만듭니다.
무한 스크롤은 페이스북, 트위터, 인스타그램과 같은 소셜미디어 웹사이트를 통해 이름을 널리 알렸습니다. 이 기술은 Unsplash 등 이미지 스톡 사이트처럼 무거운 이미지 중심의 웹사이트에서 널리 사용되고 있습니다.
이 예제에서 웹 페이지는 스크롤할때마다 새로운 콘텐츠가 동적으로 덧붙여지고, 화면에 표시될 때에는 새로운 이미지를 렌더링하기 위해 ‘lazy loading’을 구현합니다. 클릭할 필요도 없습니다.
페이지네이션과 무한 스크롤은 유용하고 널리 퍼져있지만, 상호 교환하기란 거의 불가능한 UX 기법입니다. 이어지는 글에서는 두 가지 기법을 비교하고, 어디에 가장 적합한지 그리고 왜 가장 적합한지 알아보겠습니다.
페이지네이션 vs 무한스크롤
페이지네이션과 무한스크롤 중 어떤 쪽을 사용할지는 웹사이트의 목적, 콘텐츠의 유형 그리고 의도된 UX에 따라 달라집니다. 페이지네이션은 사용자가 특정한 콘텐츠를 찾고 있는 웹사이트에 가장 적합합니다. 무한 스크롤은 사용자가 무언가 흥미로운 콘텐츠를 보기 위해 목적 없이 검색하는 상황에서 더 적절합니다. 또한, 모바일 기기에도 매우 효과적입니다.
페이지네이션과 무한스크롤의 장점은 각 디자인이 특정 사이트에서 왜 그렇게 인기가 있는지 보여줍니다. 예를 들어서 페이지네이션은 상품의 검색과 목록 작성(cataloging)의 측면에서 우수하므로 온라인 쇼핑몰(이커머스, ecommerce)에서 널리 사용됩니다. 이러한 사이트를 방문하는 사람들은 티셔츠나 화재 경보 장치 등 특정 제품을 찾고 있으며, 그들이 검색한 쿼리문과 관련된 제품만 보고 싶어 합니다.
반면에 일반적인 소셜미디어 사용자들은 재미있는 무언가나 정보를 원할 뿐 특정한 정보를 찾는 건 아닙니다. 이러한 경우에서 무한스크롤은 사용자를 관련성 있는 콘텐츠의 흐름 속으로 끌어오는 최고의 방법입니다. 뉴스 웹사이트 그리고 유저가 생성하는 콘텐츠가 메인이 되는 사이트 역시 동일한 이유로 무한 스크롤을 채택하고 있습니다.
이제 웹사이트에서 중요하게 여겨지는 측면들을 통해 무한스크롤과 페이지네이션의 효과를 각각 살펴보겠습니다.
참여(인게이지먼트, Engagement)
무엇보다도 무한스크롤은 사용자의 참여(인게이지먼트, Engagement)를 높이고, 가능한 페이지에 오랫동안 머물도록 설계되었습니다. 사이트의 방문자가 딱히 특정 목표를 염두에 두지 않았다면, 무한스크롤은 효율적이고, 이해하기 쉬우며, 방해요소가 없는 방식으로 관련 콘텐츠를 전시할 수 있습니다.
반면에, 페이지네이션은 사용자가 원하는 콘텐츠를 최대한 빨리 얻을 수 있도록 최적화되어 있습니다. 따라서 사용자는 자유롭게 탐색할 수 있지만, 정기적으로 “다음 페이지”를 클릭하고 새 페이지가 로드될 때까지 기다려야 하므로 시간이 좀 더 소요됩니다. 물론 이러한 불편함은 개별 페이지의 길이를 늘이거나 로드되는 시간에 제한을 둠으로써 일부분 해결할 수 있습니다.
무한 스크롤은 느린 로딩을 위한 완벽한 해결책이 아닙니다. 더 많은 방문자가 스크롤 할 수록, 더 많은 콘텐츠가 로드되어야 하므로 페이지의 성능이 저하될 수 있습니다. 사용되는 대역폭(bandwidth)을 낮추어 요구되는 이미지의 사이즈를 줄여보세요.
웹사이트에서 중요하게 여겨지는 다른 측면에는 무엇이 있을까요? 무한스크롤과 페이지네이션 중 어떤 UX가 적합한지 궁금하신 분들이라면 지금 바로 헬로디지털 블로그를 구독하고 뉴스레터를 받아보세요.
UX 디자인에서 고려해야 할 사항은?
