이번 포스트에서는 지난 포스트에 이어서 UX 기법의 일종인 무한 스크롤과 페이지네이션이 각각 지니는 장・단점에 대해 알아보겠습니다.

페이지네이션(Pagination)

페이지네이션은 디지털 콘텐츠를 웹사이트의 또 다른 페이지들로 분리하는 방법입니다. 사용자는 페이지 하단에 있는 숫자 형식의 링크를 클릭하여 페이지들을 탐색할 수 있습니다. 페이지네이션된 콘텐츠 일반적으로 몇 가지 공통된 주제 혹은 목적들을 지니고 있습니다.

무한 스크롤(Infinite scroll)

무한 스크롤은 사용자가 페이지 하단에 도달했을 때, 콘텐츠가 계속 로드되는 사용자 경험(UX, User EXperience) 방식입니다. 이는 마치 끝이 없는 단일 페이지에서 끝없는 정보의 흐름을 경험하게 만듭니다.

사용의 용이성

만약 자사의 콘텐츠를 페이지네이션한다면, 사용자는 분명 자사 사이트의 레이아웃에 친숙함을 느낄 것입니다. 자사의 페이지가 잘 정돈되어있는 한, 방문객들은 페이지를 클릭하는데 아무런 문제가 없을 겁니다.

여전히 유저의 클릭 수의 최대한 줄이는 것이 목표인가요? 링크를 클릭하는 것 자체는 그다지 힘들지 않지만, 유저의 취해야 할 행동이 하나 늘어난다는 것은 분명한 사실입니다. – 요즘 사람들은 원하는 위치에 도달하기 위해 가능한 한 적게 클릭하기를 원합니다.

만약 자사의 콘텐츠 유형에 무한스크롤이 적절해 보인다면, 웹사이트 사용의 용이성을 두드러지게 나타낼 수 있습니다. ‘더 많은 콘텐츠를 보기 위해 스크롤 한다.’는 단순한 행위는 대부분의 사람에게 자연스럽습니다. 빠르고, 쉽고, 직관적이며, 반응성이 뛰어나기 때문에 방문객들이 감상할 긍정적인 경험에 기여합니다.

또한, 무한 스크롤의 사용자 친화성은 터치스크린에서 더욱 빛을 냅니다. 모바일 환경에서 버튼을 누른다는 행위는 답답한 작업(frustrating task)으로 취급됩니다. 하지만 이 기능은 기본적으로 모바일 기기를 위해 버튼을 누른다는 행위를 최소화하게끔 설계되었습니다.

간편한 구현

사실상 페이지네이션은 대부분의 웹사이트 구축자나 CMS, 블로그 플랫폼에서 콘텐츠 구성을 위한 기본값으로 설정되어 있습니다. 따라서 사이트 구축 시 즉시 사용할 수 있습니다.

하지만 그 외의 방법은 없습니다. – 사이트에 무한스크롤을 추가하려면 약간의 추가 작업이 필요합니다. 무한스크롤은 최종사용자의 일을 덜어주지만, 웹사이트 퍼블리셔의 일은 복잡하게 만듭니다. 이미 페이지네이션이 적용된 사이트에 무한 스크롤 기능를 때려 넣으면서, 동시에 사이트 내 기능이 완벽하게 돌아가기란 불가능하기 때문입니다.

대신 무한 스크롤을 구현하려면 플러그인(add-on)이나 개발자가 필요할 수 있습니다. 그리고 만약 전체 사이트를 무한 스크롤로 전환하려면 사이트를 재구성하는 데 많은 시간을 할애해야 합니다.

하지만 업무량 앞에서 좌절하지 마세요. 우선 개별 페이지에 무한 스크롤을 적용해보고 인게이지먼트와 퍼포먼스를 테스트해보세요. 해당 작업을 통해 사이트를 전체적으로 전환할 가치가 있는지 판단할 수 있습니다. 

페이지네이션 vs 무한스크롤

페이지네이션과 무한스크롤 중 어떤 쪽을 사용할지는 웹사이트의 목적, 콘텐츠의 유형 그리고 의도된 UX에 따라 달라집니다. 페이지네이션은 사용자가 특정한 콘텐츠를 찾고 있는 웹사이트에 가장 적합합니다. 무한 스크롤은 사용자가 무언가 흥미로운 콘텐츠를 보기 위해 목적 없이 검색하는 상황에서 더 적절합니다. 또한, 모바일 기기에도 매우 효과적입니다.

네비게이션

앞서 살펴본 바와 같이 페이지네이션은 특정 콘텐츠를 원하는 사용자에게 유용합니다. 이러한 이유로 페이지네이션이 적용된 사이트는 일반적으로 무한 스크롤이 적용된 페이지보다 탐색하기 더 쉽습니다.

먼저 필터링과 색인 작업 그리고 검색이 쉽습니다. 요리 웹사이트에서 레시피를 검색하는 예비 셰프를 상상해보세요. 페이지네이션을 사용하면 “enchilada”를 검색하고, 검색 결과를 찾아보고, 해당하는 레시피를 고른 후, 이후를 위해 레시피가 작성된 페이지를 북마크에 추가할 수 있습니다.

또한, 페이지네이션은 방문자에게 좀 더 통제권을 느끼도록 도와줍니다. 무언가를 검색할 때, 그들은 남은 페이지 수를 보고, 남은 콘텐츠의 양을 신속하게 추론할 수 있습니다. 그리고 이 작업이 끝나면, 자신에게 가능한 모든 선택지를 고려했다고 확신할 수 있습니다.

하지만 무한 스크롤은 본질적으로 이를 허용하지 않습니다. 콘텐츠의 끝이 보이지 않아 압도감을 느끼게 됩니다. 또한, 페이지의 콘텐츠나 위치를 북마크 하기도 쉽지 않습니다. 사용자가 북마크를 한 뒤 페이지를 떠난다고 해도 페이지의 최상단으로 돌아올 것입니다.

또한, 무한스크롤 페이지의 푸터(footer) 영역은 탐색에 유용하지만 종종 무시당합니다. 사용자는 본능적으로 푸터 영역에서 연락처 정보, 개인정보보호 정책, 포트폴리오 페이지 혹은 기타 중요한 정보가 있는지 확인합니다.

웹사이트에 페이지네이션을 적용하면, 푸터 영역은 평범하게 페이지의 하단에 위치합니다. 하지만 무한스크롤의 경우에는, 푸터 영역이 다시 배치됩니다. 페이지네이션의 또 다른 장점이지요.

시각적 어필

올바르게 세련된 방식으로 접근해본다면 무한 스크롤은 사용의 편리성뿐만 아니라 시각적 효과도 향상됩니다. 따라서 무한스크롤은 사진 공유 웹사이트, 포트폴리오 및 시각 자료에 크게 의존하는 여러 사이트에 적합합니다. 특히 시각적으로 매력적인 이미지의 흐름이 패럴렉스 스크롤 (parallax scrolling)과 같은 효과와 짝을 이룬다면, 영감이나 예술적 아이디어를 얻고자 하는 사용자에게 정확히 원하는 바를 줄 수 있습니다.

패럴렉스 스크롤 (Parallax scrolling)

다중 스크롤이라고도 부릅니다. 화면을 구성하는 배경이미지들과 기타 이미지들 간의 움직임이나 동적 시간을 다르게 주고, 스크롤할 수 있도록 표현하는 디자인 기법입니다.

이러한 추론에는 과학이 숨겨져 있습니다. 인간은 10분의 1초 안에 한 장의 사진을 처리할 수 있습니다. 시각에 적응한 뇌는 몇 초 안에 수백 개의 복잡한 이미지를 스캔하는 데 도움을 줍니다. 

확신이 서지 않나요? 구글구글 이미지의 검색 결과를 확인해보세요. 이중 어떤 페이지가 페이지네이션 되어있으며, 되어있지 않는지 확인해보세요.

SEO

검색 엔진 최적화는 어떤 UX 전략을 취하든 상관없이 강력한 힘을 발휘합니다. 페이지네이션과 무한스크롤은 사이트 내 콘텐츠 배치 방법에 영향을 주기 때문에 SEO 역시 문제가 발생할 수도 있습니다. 따라서 반드시 SEO 계획을 고려해야 합니다.

유감스럽게도 무한스크롤은 검색엔진보다는 UX를 우선시한 디자인입니다. 무한스크롤은 하나의 페이지에서 콘텐츠 대부분을 숨기고, 스크롤에 의한 리퀘스트가 발생할 때마다 콘텐츠를 로딩하기 때문입니다. 따라서 검색엔진이 자사 콘텐츠를 적절하게 색인할 수 없을지도 모릅니다. 자사의 사이트가 첫 번째 검색 결과 페이지에서 노출될 확률도 낮아집니다.

문제는 구글의 개발자 Martin Splitt이 밝힌 구글의 웹사이트 크롤러가 일반적으로 페이지의 스크롤을 내리지 않고, 가장 먼저 로드되어 사용자에게 노출되는 페이지만 읽어 들인다는 점입니다. Splitt는 이를 해결하기 위해 새롭게 로드되는 콘텐츠를 섹션별로 나눌 수 있다고 설명했습니다. 이어서 새로운 색션으로 이어지는 “Read More” 버튼을 추가하여 봇(bot)이 해당 링크를 확인하고, 분리되는 페이지로 색인할 수 있도록 설정할 수 있다고 말했습니다. 이러한 작업은 UX를 구현하기 위해 추가적인 노력이기도 하고, UX를 방해할 수도 있습니다. 하지만 많은 사람이 이러한 접근방식을 가치 있는 절충안이라고 생각합니다.

SEO는 콘텐츠가 페이지네이션될때 좀 더 간단하게 돌아갑니다 – 검색 엔진 봇이 전체 페이지를 크롤링하고, 콘텐츠를 올바르게 색인할 가능성이 더 크기 때문입니다. 여러 페이지의 콘텐츠가 서로 관련되어 있음을 봇에게 알리는 단계를 구축하면, 검색 결과의 순위가 높아집니다.

하지만 너무 많은 페이지는 SEO 문제로 이어질 수 있음으로 콘텐츠를 명확하게 정리하는 데 필요한 페이지의 수만큼 사용해야 합니다. 검색 엔진은 웹사이트마다 스캔과 색인이 이루어지는 콘텐츠 수를 제한합니다. 만약 자사의 페이지네이션 시스템이 지나치게 크다면, 검색 엔진이 네이게이션 페이지에서 이미 지쳐버릴 수 있고, 사용자가 찾고자 하는 콘텐츠의 페이지를 오히려 놓칠 수 있습니다.

이러한 이슈를 피하려면 필요한 페이지 이상을 사용하면 안 됩니다. – 각 콘텐츠의 페이지는 방문자 (그리고 검색 엔진 봇) 에게 유의미한 가치를 전달해야 합니다. 또한, 홈페이지에서 가장 중요한 페이지와 연결되도록 세팅하세요. 최고의 콘텐츠에 도달하기까지 발생하는 클릭 수를 줄이고, 봇의 색인을 의도대로 유도할 수 있습니다.

스크롤 하느냐, 마느냐 그것이 문제로다

이제는 어떤 UX 접근법이 자사의 웹사이트에 가장 큰 혜택을 줄지 명확해져 있기를 바랍니다.

궁극적인 목표는 가장 화려한 메인 페이지를 디자인하거나, 가장 유명한 사이트를 모방하는 것이 아닙니다. 사용자의 요구에 맞는 방식으로 콘텐츠를 구성하고 제시하는 것입니다. ‘제대로만’ 한다면, 방문자들은 올바른 콘텐츠를 찾는 방법에 대해 고민할 필요가 없습니다. 그저 자연스럽게 “그렇게” 할 뿐이죠.

UX 디자인에서 고려해야 할 사항은?

더 알아보기