Paging, 안드로이드에 맞는 커서 페이징 방식으로 구현하기

Paging, 안드로이드에 맞는 커서 페이징 방식으로 구현하기

 

안녕하세요

안드로이드 개발자가 되기 위해 노력하는 서경원입니다.

프로젝트를 진행하면서 고민했던 페이징 방식에 대해 설명드리려고 합니다.

이해가 안되는 내용이나 제가 잘못 적은 부분이 있다면 꼭 댓글 남겨주세요.

 

 

Paging?

 

엉청나게 많은 데이터를 서버에서 한 번에 가져와 보여주려고 하면 무리가 있기 때문에 페이지 단위로 나누어 보여주는 것을 페이징이라고 합니다.

흔히 볼 수 있는 카페 게시글 형태가 페이징을 사용해서 보여주는 대표 예입니다.

 

 

 

Offset 방식

 

카페 게시글 형태와 같은 경우 쓰는 방식입니다. 시작 점인 Offset과 시작 점으로부터 몇 개를 가져올 것인 지 Limit을 정해 데이터를 가져오는 방식입니다.

Offset이 1, Limit이 5이면 원하는 데이터의 1부터 5까지만 가져올 수 있도록 합니다.

카페 게시글을 Offset이 1, Limit을 5로 설정하여 가져오게 된다면 최신 순으로 정렬된 게시글을 5개를 가져오게 될 것 입니다.

 

 

문제점

 

Offset 방식의 문제는 중간에 값이 삭제되거나 순서가 변경이 있을 경우 입니다. 카페 게시글은 웹 환경에서 페이지 단위로 이루어져있는 것과 사용자들이 최신 글이 많아 뒷 페이지로 밀리는 경우 등 변경에 익숙해져 있습니다.

 

하지만, 안드로이드에서는 RecyclerView 형태로 스크롤 형식으로 일반적으로 구현합니다.

 

Offset 방식으로 구현하게 되었을 때의 문제점을 보여드리겠습니다.

 

 

 

Offset으로 5개씩 데이터를 받아오게 된다면 서버에서 위처럼 분류해서 보내주게 될 것입니다.

 

 

모바일 환경에서 이를 구현하게 되면 첫 페이지에는 왼쪽처럼 5까지의 데이터가 보이게 될 것입니다. 그리고 스크롤을 하게 되면 오른쪽에 있는 다음 페이지를 API로 요청해 불러오게 될 것입니다.

 

 

 

스크롤을 해서 다음 데이터를 가져오기 전에 데이터에 변형이 있다면 어떻게 될까요??

게시글 4가 삭제되었다고 해보겠습니다.

 

 

 

그러면 다음에 가져오게 될 페이지는 위와 같이 변경되게 됩니다.

이 상태에서 스크롤을 하고 다음 페이지를 가져오면 어떻게 보이게 될까요???

 

 

 

게시글 6이 사라진 채로 보이게 됩니다.

사용자에게는 데이터가 유실된 것처럼 보이게 되는 위화감이 들게 됩니다.

 

 

저희는 위와 같은 문제 때문에 Offset 방식 대신 커서 페이징 방식으로 구현하고자 했습니다.

 

 

 

Cursor Paging 방식으로 해결

 

커서 페이징 방식은 현재 페이지의 마지막 데이터를 커서로 설정하고 다음 데이터를 불러오는 방식입니다. cursor로 마지막 데이터의 기본 키(primary) 값을 두고 그 데이터의 이후 값을 Limit 만큼 가져오게 합니다.

 

위에서 보여드렸던 예시에 커서 페이징 방식을 적용하게 된다면 페이지의 마지막 데이터인 ‘게시글 5’ 이후 게시글 5개를 가져오기 때문에 중간에 데이터가 삭제되어도 문제가 없게 됩니다.