페이지네이션과 무한 스크롤: 사용자 작업에 맞는 패턴 선택

페이지네이션, 더 보기, 무한 스크롤은 서로 바꿔 쓸 수 있는 로딩 방식이 아닙니다. 사용자가 하려는 일에 맞춰 패턴을 선택하세요. 다시 돌아올 위치가 필요하거나 정해진 범위를 비교하거나 결과를 공유해야 한다면 페이지네이션이 적합합니다. 바뀌는 스트림을 탐색하는 일이 핵심이고 정확한 위치보다 다음 항목을 보는 것이 중요하다면 무한 스크롤을 사용할 수 있습니다. 현재 맥락을 잃지 않고 컬렉션을 의도적으로 확장하려면 더 보기가 유용합니다.

컨트롤을 그리기 전에 Pixso의 UI 디자인 협업 워크플로에서 컬렉션의 상태를 먼저 정리하세요. 목록, 로딩 상태, 필터, 항목 상세, 돌아오기 경로를 연결된 프레임으로 유지하면 로딩 패턴만 따로 논의하지 않고 하나의 경험으로 검토할 수 있습니다.

사용자 작업에 맞춰 패턴을 선택하기

데이터베이스의 레코드 수가 아니라 사용자가 다음에 내려야 할 결정을 기준으로 시작하세요. 큰 컬렉션이라도 결과 페이지를 서로 비교한다면 페이지네이션이 필요할 수 있습니다. 작은 컬렉션이라도 첫 화면을 집중해서 보여 주고 싶다면 더 보기가 적합할 수 있습니다. 아래 표는 출발점일 뿐이며 최종 선택은 전체 워크플로가 결정합니다.

사용자 작업	우선 검토할 패턴	적합한 이유	반드시 설계할 상태
특정 레코드를 찾거나 저장한 위치로 돌아가기	페이지네이션	페이지가 다시 방문하거나 공유할 수 있는 안정적인 위치를 만듭니다.	페이지 크기, 현재 페이지, 이전/다음, 필터 및 정렬 유지
추천 스트림 탐색하기	무한 스크롤	다음 항목을 가까이 두고 반복적인 페이지 선택을 줄여 연속 탐색을 돕습니다.	로딩 경계, 피드 끝, 재시도, 뒤로 가기 위치 복원, 내비게이션 접근 방법
현재 비교를 유지한 채 더 많은 항목 검토하기	더 보기	화면의 맥락을 바꾸지 않고 확장을 명시적으로 실행합니다.	새 항목 수, 진행 또는 완료 안내, 포커스 동작, 중복 방지
묶음으로 레코드를 처리하거나 결과 세트 전체에 작업하기	페이지네이션 또는 더 보기	운영 작업에는 끝없는 새로움보다 선택 범위와 예측 가능한 결과가 중요합니다.	선택 범위, 필터 변경, 부분 결과, 작업 후 복구

두 패턴이 비슷해 보이면 위치, 범위, 복구 방법을 가장 쉽게 설명할 수 있는 쪽을 선택하세요. 항목이 많다는 이유만으로 무한 스크롤을 택하지 말고, 짧고 의도적으로 정렬된 피드에 숫자 페이지를 억지로 넣지도 마세요.

페이지네이션이 더 안전한 경우

컬렉션에 의미 있는 순서가 있고 사용자가 현재 위치를 파악해야 한다면 페이지네이션이 유용합니다. 검색 결과, 관리자 대기열, 보고서, 문서 인덱스, 비교 목록이 자주 이 모델에 해당합니다. 페이지 경계는 인터페이스에 간결한 약속을 제공합니다. 현재 검색어, 필터, 정렬을 기준으로 51~75번 항목을 보고 있다는 식입니다.

위치를 안정적으로 유지하기

1. 전체 수가 신뢰할 수 있을 때만 현재 페이지와 전체 수를 보여 주세요. 수를 계산 중이라면 추정치를 표시하는 대신 계산 중임을 알려 주세요.
2. 페이지를 이동할 때 검색어, 필터, 정렬, 페이지 크기를 화면에 남겨 두거나 다시 복원할 수 있게 하세요.
3. 아이콘만 쓰지 말고 설명적인 이전/다음 레이블을 함께 제공하세요. 인접 페이지가 없으면 비활성화하여 죽은 링크가 활성처럼 보이지 않게 합니다.
4. 항목을 열었다가 돌아왔을 때 컬렉션이 크게 변하지 않았다면 페이지와 결과 위치를 복원하세요.

안정적인 페이지네이션에 고정된 데이터 세트가 필요한 것은 아닙니다. 검토 중 레코드가 추가되거나 삭제될 수 있다면 정렬의 의미와 변경된 페이지를 처리하는 방법을 설명하세요. 조용히 다른 레코드로 이동시키기보다 “결과가 업데이트되었습니다”라는 안내와 사용자가 직접 새로 고칠 수 있는 동작이 더 신뢰를 줍니다.

공개 콘텐츠 컬렉션에서는 작업에 도움이 되는 각 결과 상태에 안정적인 공유 경로를 제공하세요. 오래된 콘텐츠로 가는 유일한 길을 스크립트로 제어되는 스크롤 위치에 숨기지 마세요. 사용자와 검색 시스템 모두 같은 컬렉션 상태에 다시 접근할 수 있는 확실한 경로가 필요합니다. 단, 경로는 실제 필터와 정렬 규칙을 반영해야 하며 더 이상 존재하지 않는 페이지를 약속해서는 안 됩니다.

페이지 크기도 작업의 일부로 다루기

큰 페이지는 이동 횟수를 줄이지만 스캔, 렌더링, 선택 비용을 키웁니다. 행이 조밀할수록 작은 페이지가 비교하기 쉽습니다. 페이지 크기 선택은 실제로 도움이 될 때만 제공하고 현재 컬렉션에서 유지하세요. 필터를 바꿀 때마다 선택이 초기화되면 사용자는 일관된 탐색 리듬을 만들 수 없습니다.

모바일에서는 레이블과 행 작업을 읽을 수 없을 때까지 데스크톱 표를 억지로 압축하지 마세요. 보조 필드를 상세 화면이나 설명이 분명한 확장 영역으로 옮기고, 페이지 컨트롤은 결과 요약 가까이에 두세요. 반응형 데이터 테이블은 모든 열을 유지하는 것이 아니라 행이 지원하는 결정을 유지해야 합니다.

탐색에 무한 스크롤이 맞는 경우

다음 항목 자체가 가치의 일부인 스트림에는 무한 스크롤이 잘 맞습니다. 시각적 영감, 활동 업데이트, 하나씩 평가하는 추천 목록이 예입니다. 이 패턴은 반복되는 “다음 페이지” 결정을 없애지만 자연스러운 멈춤 지점도 없앱니다. 잃어버린 방향 감각을 명확한 경계로 보완해야 합니다.

로딩 트리거가 아니라 경계를 설계하기

• 더 많은 항목이 나타날 지점 가까이에 로딩 상태를 보여 주세요. 피드가 아직 작동하는지 추측하게 만들지 마세요.
• 피드의 끝을 분명히 표시하세요. “모두 확인했습니다”와 유용한 다음 동작이 빈 공간보다 낫습니다.
• 배치 요청이 실패하면 재시도 경로를 제공하세요. 이미 읽은 항목을 유지하고 두 번째 요청이 성공했을 때 중복하지 않습니다.
• 항목에서 돌아왔을 때 이전 위치를 복원하세요. 복원이 불가능하다면 보이는 돌아가기 경로를 제공하고 무엇이 바뀌었는지 설명합니다.
• 푸터와 중요한 내비게이션에 접근할 수 있게 하세요. 요청을 계속 추가해 푸터를 밀어내는 피드는 링크를 사실상 사용할 수 없게 합니다.

키보드와 보조 기술을 사용할 때 콘텐츠 삽입으로 포커스가 갑자기 이동하면 안 됩니다. 새 항목을 현재 콘텐츠 뒤의 읽기 순서에 넣고, 모든 항목을 반복하지 않도록 의미 있는 진행만 알리며, 사용자가 더 불러오기를 직접 요청할 수 있는 컨트롤을 제공하세요. 새 콘텐츠가 뷰포트에 들어올 때는 모션 감소 설정도 존중합니다.

더 보기가 유용한 중간 해법인 이유

더 보기는 첫 결과 세트를 안정적으로 유지하면서 확장을 명시적으로 실행하게 합니다. 관리 가능한 묶음을 먼저 스캔한 뒤 계속할지 결정하는 카탈로그나 갤러리에 잘 맞습니다. 버튼은 몇 개가 추가되는지, 다음 요청이 성공했는지를 자연스럽게 전달하는 자리이기도 합니다.

컨트롤을 현재 항목 뒤의 읽기 순서에 두세요. 로딩 후에는 첫 새 항목으로 포커스를 옮기거나 짧은 상태 메시지와 함께 컨트롤로 포커스를 되돌리세요. 항목을 하나씩 검토하는지, 컬렉션을 반복 확장하는지에 따라 선택하면 됩니다. 요청할 때마다 버튼이 너무 아래로 이동해 찾기 어려워지지 않게 하세요.

깊은 링크로 특정 범위에 접근하거나 정해진 페이지를 비교해야 한다면 더 보기는 페이지네이션의 대체가 아닙니다. 현재 상태에 유용한 URL이 있다면 주소에 그 상태를 유지하거나 공유 가능한 대안을 제공하세요. 그렇지 않다면 긴 스캔을 시작하기 전에 그 한계를 알려 주세요.

사례: 세 가지 방식으로 탐색하는 컴포넌트 라이브러리

240개의 컴포넌트 예시를 검토하는 디자인 팀을 생각해 보겠습니다. 라이브러리는 검색 필드, 카테고리 필터, 정렬 컨트롤, 상세 화면을 지원합니다. 세 사람은 서로 다른 작업을 합니다.

1. 특정 패턴 찾기: 디자이너가 “date picker”를 검색하고 필터 상태를 확인한 뒤 한 결과를 열고 돌아와 다른 결과와 비교합니다. 페이지네이션은 검색어, 정렬, 결과 위치를 유지하여 앞의 카드를 끝없이 다시 보게 하지 않습니다.
2. 영감 탐색하기: “navigation”을 둘러보는 디자이너는 특정 목표 없이 연속적인 시각 스트림을 원합니다. 무한 스크롤을 쓸 수 있지만 각 배치에 재시도 상태와 끝 표시가 있어야 하고 상세 화면을 닫을 때 위치를 복원해야 합니다.
3. 카테고리 검토하기: 디자인 리드가 “forms”의 첫 24개 카드를 비교한 후 더 볼지 선택합니다. 더 보기는 검토한 카드를 그대로 두고 확장 결정을 명시적으로 만듭니다.

같은 데이터를 다루더라도 작업은 다릅니다. 백엔드가 하나의 컬렉션을 반환한다는 이유로 라이브러리 전체를 한 패턴에 맞추지 마세요. 검색에는 페이지네이션, 큐레이션 카테고리에는 더 보기, 영감 탐색에는 의도적으로 제한된 스트림을 사용할 수 있습니다. 단, 전환과 레이블이 동작 변화의 의미를 분명히 해야 합니다.

프로토타입할 상태	사용자가 이해해야 할 것	확인 질문
초기 컬렉션	범위, 순서, 항목 수 또는 로딩 상태	어떤 세트를 보고 있는지 알 수 있는가?
필터된 컬렉션	어떤 필터와 정렬 규칙이 적용되는지	패턴을 바꿔도 같은 검색어와 범위가 유지되는가?
다음 배치 로딩	요청이 진행 중인지와 현재 사용할 수 있는 기능	작업을 잃지 않고 계속 읽거나 재시도할 수 있는가?
컬렉션 끝	현재 범위에서 더 이상 항목이 없는지	설명 없는 빈 화면 대신 유용한 다음 동작이 있는가?
상세 화면에서 돌아오기	이전 위치와 컬렉션 변경 여부	처음부터 다시 시작하지 않고 같은 비교를 계속할 수 있는가?

Pixso에서 결정을 프로토타이핑하기

하나의 “정상 흐름”만 만들지 말고 작업별로 연결된 흐름을 구성하세요. 검색어나 진입점에서 시작해 초기 컬렉션, 로딩 전환, 다음 배치, 빈 상태 또는 끝 상태, 상세 화면, 돌아오기 경로를 연결합니다. 같은 흐름에 필터나 정렬 변경도 넣어 위치와 범위가 계속 이해되는지 확인하세요.

UI 상태와 디자인 결정을 프레임 옆에 함께 기록하세요. “특정 레코드 검색에는 페이지네이션, 카테고리 검토에는 더 보기”와 같은 메모는 개발자에게 패턴을 선택한 이유를 전달하고, 상태 레이블은 요청 실패 시 필요한 동작을 보여 줍니다. 협업 Pixso 파일에서는 정적인 카드 한 장에서 동작을 추측하는 대신 연결된 화면과 정확한 전환에 댓글을 남길 수 있습니다.

각 패턴의 모호함을 없애는 최소한의 전달 계약은 다음과 같습니다.

• 다음 요청을 시작하는 조건과 안전하게 반복할 수 있는지 여부;
• 검색어, 필터, 정렬, 선택, 스크롤 위치를 보존하는 방법;
• 로딩, 실패, 재시도, 완료 때 표시되는 내용;
• 새 콘텐츠가 삽입되거나 상세 화면이 닫힌 뒤 포커스가 가는 곳; 그리고
• 좁은 화면에서 상태를 표현하는 방법.

흔한 패턴 실수 피하기

거래 처리 대기열에 무한 스크롤 사용. 레코드를 처리하는 사람에게는 범위, 선택, 믿을 수 있는 종료 지점이 필요합니다. 탐색이 진짜 작업이 아니라면 페이지네이션이나 명시적인 묶음 확장을 사용하세요.

움직이는 정렬과 페이지네이션 조합. 페이지를 바꾸는 동안 컬렉션이 재정렬되면 항목이 중복되거나 사라질 수 있습니다. 정렬과 업데이트 동작을 정의하거나 제품의 데이터 계약에 맞는 커서 전략을 사용하세요.

버튼이 사라지는 더 보기. 긴 목록 아래로 컨트롤이 밀리면 계속하는 방법을 알 수 없습니다. 읽기 순서에서 버튼 위치를 유지하고 간단한 수나 완료 메시지를 보여 주세요.

변경할 때마다 맥락 초기화. 필터를 바꾸거나 상세 화면에서 돌아오거나 요청을 재시도할 때, 이유를 분명히 설명하지 않는 한 검색어와 진행 상황을 지우지 마세요. 맥락은 나중에 추가하는 편의 기능이 아니라 패턴의 일부입니다.

간단한 선택 규칙

위치, 비교, 공유, 재방문이 중요하면 페이지네이션을 선택하세요. 연속적인 탐색이 핵심 가치이고 방향 감각, 복구, 내비게이션 접근을 보장할 수 있다면 무한 스크롤을 선택합니다. 현재 맥락을 보이는 상태로 유지하면서 사용자가 컬렉션 확장 시점을 결정해야 한다면 더 보기가 적합합니다.

그다음 첫 화면, 한 번의 성공적인 확장, 한 번의 실패한 요청, 끝 상태, 돌아오기 경로를 프로토타이핑하세요. 검토자가 디자이너에게 묻지 않고 무엇이 바뀌었고 무엇이 남았으며 어떻게 돌아가는지 설명할 수 있다면 로딩 패턴은 제 역할을 하는 것입니다.