콘텐츠의 페이지 구성, 어떻게 할까?

나 홀로 A/B 테스트

by HEY

대표적인 페이지 UX

tempImagehNrh7w.heic 모바일 페이지 UX


오늘은 모바일 인터페이스에서의 페이지 경험에 대해 살펴보겠습니다. 페이지 구성은 단순한 UI 요소를 넘어, 사용자의 경험과 직결되는 UX의 핵심 요소입니다. 특히, 콘텐츠가 나열되는 대부분의 앱에서 User Flow (사용자 흐름)를 설계할 때 반드시 고려해야 하는 중요한 구성입니다.


PC 환경부터 현재의 모바일에 이르기까지 주로 페이지네이션(Pagination) 방식을 기본 정렬로 활용해 왔습니다. 그러나 숏츠와 릴스의 등으로 스크롤을 이용한 연속적인 콘텐츠가 사용자에게 익숙한 경험으로 자리 잡았습니다.


페이지가 어떻게 나뉘고 연결되는지에 따라 사용자는 탐색의 방향성을 정하고 콘텐츠를 소비하게 됩니다. 사용자의 기대나 환경에 맞지 않는 페이지 구조는 사용자의 화면 이탈로 이어질 가능성이 높습니다. 오늘은 모바일 환경에서 페이지 구성 방식을 어떻게 설계할 수 있을지, 그리고 각 방식이 사용자 경험에 어떤 차이를 만들어내는지 살펴보겠습니다.




페이지네이션이 UX에 미치는 영향

A안은 콘텐츠를 페이지 단위의 블록으로 구분하는 구조입니다. 전체 콘텐츠 목록을 여러 페이지로 나누고, 사용자는 '다음', '이전', 또는 특정 페이지로 이동하며 콘텐츠를 탐색합니다. 네이버, 구글의 검색 결과, 커뮤니티 게시판, Q&A 게시판 등 목록형 콘텐츠(List)에서 가장 널리 사용되는 방식입니다.


tempImageK9vJQm.heic A안. 페이지네이션

이 구조에서는 화면 하단(footer)이나 상단에 전체 페이지 수, 현재 페이지 위치를 강조하는 디자인이 필요합니다. 페이지네이션은 사용자가 페이지를 전환할 때마다 새롭게 데이터를 요청하고 받아오는 방식으로 구현됩니다. 전체 데이터를 한 번에 불러오는 대신, 필요한 범위만 로드하기 때문에 시스템 부담이 적고 서버 부하 관리에도 유리합니다.


결국 사용자가 컨트롤을 주도하고 있는 UX 형태로, 콘텐츠의 흐름을 직접 제어하는 구조로 볼 수 있습니다. 하단까지 빠르게 스크롤하면 리스트의 끝을 알 수 있고, 콘텐츠의 위치를 직관적으로 파악할 수 있습니다. 예를 들어, ‘3페이지에 있는 청바지’처럼 특정 콘텐츠를 쉽게 탐색할 수 있습니다. 백오피스와 같은 사내 데이터 관리 시스템에서도 유용하게 사용됩니다.


페이지네이션 구조는 목표 지점이 명확하거나, 콘텐츠를 체계적으로 탐색해야 하는 상황에서 더욱 효과적입니다. 즉, 사용자가 원하는 정보를 빠르게 찾거나, 원하는 위치로 직접 이동해야 하는 경우에 적합합니다. 사용자가 이전에 본 콘텐츠로 되돌아가거나, 특정 위치의 콘텐츠를 다시 확인해야 하는 경우에도 페이지네이션 구조는 유용하게 쓰일 수 있습니다.


단점도 분명합니다. 페이지를 이동할 때마다 로딩이 발생하기 때문에 콘텐츠 몰입을 방해합니다. 빠르게 훑어보는 사용자나, 많은 분량을 살펴보는 사용자에게 반복적인 클릭이 피로하게 느껴집니다. 모바일에서는 페이지 이동 버튼이 작게 느껴지거나 조작이 불편한 경우도 적지 않습니다. 그래서 디자이너 커뮤니티에서는 ‘PC 시절의 유물’로 비유하며 비판적인 시각을 드러내기도 합니다.




무한 스크롤이 UX에 미치는 영향

B안 무한 스크롤은 사용자가 페이지의 끝에 도달할 때마다 자동으로 다음 데이터를 불러오는 방식입니다. 사용자는 스크롤할 때마다 새로운 콘텐츠가 로드되어 콘텐츠 탐색을 이어갈 수 있습니다. 페이지 구분 없이 연속적인 콘텐츠 감상이 가능합니다.


tempImageAcGVG2.heic B안. 무한 스크롤

디자이너는 로딩 스피너, 스켈레톤 UI를 활용하여 다음 콘텐츠가 나타나기 전까지 로딩 중임을 자연스럽게 표시하고, 콘텐츠가 이어지는 느낌을 줄 수 있는 자연스러운 인터랙션을 설계합니다. 이를 통해 화면 이탈을 방지하고, 사용자의 기대감을 높일 수 있습니다.


tempImagetjZMCB.heic 스켈레톤과 스피너를 활용한 무한 스크롤 로딩 케이스


무한 스크롤은 콘텐츠 소비량이 많을 때, 특정 콘텐츠를 목표로 하지 않고 흐름에 따라 콘텐츠를 감상하는 유튜브, 트위터(현 X), 인스타그램, 페이스북 등 SNS 피드나 뉴스 플랫폼에서 활용됩니다. 클릭 없이 편리하고, 쉬운 스크롤만으로 탐색이 가능하여 사용자 행동이 자연스럽습니다. 터치 기반 인터랙션으로 모바일 환경에 최적화 되어 있고, 끊임없이 이어지는 콘텐츠로 사용자가 쉽게 몰입할 수 있다는 것이 가장 큰 강점입니다. 이는 UX 분야에서 Flow-driven 또는 Stream-based로 불립니다.


다만, 특정 콘텐츠를 다시 찾기 어려운 구조이기 때문에, 북마크나 좋아요를 통해 직접 콘텐츠를 저장하거나, URL 공유를 통해 특정 콘텐츠로 바로 접근할 수 있는 UX가 함께 활용되기도 합니다. 사용자가 콘텐츠 소비 흐름 속에서 방향을 잃지 않도록, 현재까지 얼마나 탐색했는지, 혹은 남은 콘텐츠가 있는지를 인지할 수 있는 기능도 함께 고려할 수 있습니다. 물론 대부분의 서비스들이 이러한 보조 UI조차 최소화하여, 사용자가 탐색을 멈추지 않고 몰입을 유지하도록 유도하는 전략을 취하고 있습니다.


도착점이 없는 환경에서 사용자는 탐색의 방향성을 잃기 쉽습니다. 요즘 사회 문제로 ‘끊을 수 없는 숏츠의 늪’이 언급되기도 합니다. 무한 스크롤은 과도한 콘텐츠 소비로 인한 행동 중독을 유발할 수 있다는 비판을 받았고, 미국에서는 SNS의 무한 스크롤 기능이 청소년의 중독을 조장한다는 소송이 제기되기도 했습니다. 도박의 슬롯머신처럼, 스크롤만 하면 새로운 콘텐츠가 등장하는 구조는 사용자의 주의를 지속적으로 붙잡고 다양한 정신적 부작용을 야기할 수 있습니다.


tempImageOod4Jo.heic 무한 스크롤에 대한 비판 여론


개발자는 사용자의 이벤트(예를 들어, 특정 위치 '뷰포트 하단 근접'에 도달)를 감지하여 다음 콘텐츠를 호출하는 방식으로 무한 스크롤을 구현합니다. 추가 데이터를 요청할 때 데이터가 중복 등장하는 것을 방지하기 위해 로딩 중인 상태, 최신 '끝' 상태를 체계적으로 관리해야 합니다. 지나친 스크롤로 기기의 성능이나 서비스의 퍼포먼스가 저하될 수 있고, 네트워크 속도 문제나 오류가 발생하기도 합니다. 결론적으로, 무한 스크롤은 사용자 경험을 향상시키는 강력한 도구이지만, 그 부작용 또한 고려해야 합니다.




나의 생각

데이터를 호출하는 시스템은 언제나 디자인뿐만 아니라 개발 효율까지 함께 고려해야 합니다. 저도 SNS를 개발할 때, 무한 스크롤이냐 페이지네이션이냐를 두고 기획자와 개발자가 며칠씩 각자의 입장을 고수했던 기억이 있습니다.


당시 서비스는 무거운 영상 기반의 SNS였기에, 개발 입장에서 페이지네이션이 더 평화로운 선택이었을지도 모릅니다. 그러나 숏츠와 릴스를 선두로 이미 사용자들은 무한 스크롤에 익숙해진 상황이었죠. 디자이너인 저는 Habitual Browsing, 즉『디자인과 인간 심리』에서 배운 행동적 수준(습득된 기술과 습관에 의한 반응)에 근거하여 무한 스크롤이 자연스러운 선택이라 판단했고, 결국 기획자의 손을 들어줬습니다.


이제는 배달의민족, 당근마켓, 쿠팡, 지그재그 등 다양한 커머스 플랫폼에서도 무한 스크롤(Infinite Scroll) 기법이 적극적으로 도입되고 있습니다. 그러나 개인적으로는 쇼핑몰에서 무한 스크롤 사용에 다소 회의적인 입장입니다. 저 역시 예전에 봤던 상품이나 스치듯 지나친 후보를 다시 찾기 어려웠던 경험이 많았기 때문입니다. 쇼핑몰처럼 사용자가 원하는 상품을 목표로 찾아가는 탐색 상황에서는, ‘특정 지점을 향한 명확한 탐색’이라는 전제 아래 페이지네이션이 더 적합하다고 생각합니다.


정리하며

오늘 살펴본 페이지 UX는 목록 탐색 구조 (List Navigation) 또는 콘텐츠 로딩 패턴 (Content Loading Pattern)으로도 불리며, 둘 외에도 다양한 형태가 존재합니다. 그 중에서도 대표적인 페이지네이션과 무한 스크롤의 유형은 각각 뚜렷한 장단점을 지닌 탐색 방식으로, 콘텐츠의 성격, 사용자 행동 패턴, 플랫폼의 목적에 따라 적절히 선택하거나 혼합해 활용되고 있습니다.


tempImageOS3yml.heic 다양한 목록 탐색 구조

중요한 것은 어떤 구조를 택하느냐보다, 사용자가 더 편하고 몰입감 있게 콘텐츠를 탐색할 수 있도록 설계하는 고민 그 자체일지도 모릅니다. 이를 위해 최근에는 구글을 비롯해 ‘검색 결과 더보기’와 같은 방식을 도입하여 사용자에게 무한 스크롤과 함께 자연스러운 정지 신호를 제공하는 시도도 늘고 있습니다.


디터 람스가 말했듯, ‘더 나은 세상을 위한 디자인’을 위해 이제는 보조 UX에 대해서도 가볍게 돌아볼 시점이 아닐까요? 편의와 몰입도도 중요하지만, 사용자가 조금 더 건강하게 탐색할 수 있는 환경 역시 함께 고민해야 할 것입니다.



keyword
작가의 이전글21세기를 디자인한 남자, 디터 람스