[Tip] cursor기반 페이징

게시판 만들기 미션을 하던 중 구글, 네이버, 카카오 등 현재 서비스를 상용중인 IT 대기업들은 어떻게 페이징을 할까? 에 대해 고민하며 글을 작성하게 되었습니다. 글은 전반적으로 김민상 CTO님의 글을 바탕으로 작성되었습니다.

 

 

 

 

 

 

 

1. offset기반 페이징 

---

offset 기반 페이징은 우리가 원하는 데이터가 몇 번째 위치에 존재하는지에 중점을 둡니다. 데이터를 처음부터 스캔해서 해당 페이지까지 이동 후 필요한 데이터를 찾아 반환합니다. 보편적으로 가장 많이 사용하는 페이징 방식입니다. * Page Navigator라 불리는 아래와 같은 바(bar)를 사용합니다. 

 

 

 

 

 

 

offset기반 페이징의 쿼리는 아래와 같은데요, OFFSET과 LIMIT, 정렬 기준을 주고 해당 페이지를 찾아옵니다. 따라서 우리가 찾는 데이터가 존재하는 페이지를 알고 있다면 곧바로 이동할 수 있습니다. 하지만 이는 실시간으로 데이터가 업로드 되는 서비스에서 데이터의 중복과 성능 문제라는 두 가지 단점이 존재합니다.

 

 

 

 

 

 

 

데이터 중복

페이지 요청 사이 데이터의 변화(추가/삭제)가 있는 경우 중복 데이터가 발생하게 됩니다. 예를 들어 1페이지에서 10개의 row를 불러와서 상품을 보여주고 있을 때 운영자가 5개의 상품을 새로 추가한다면 고객이 2페이지로 넘어갔을 때 1페이지에서 봤던 뒤쪽 5개 상품이 중복으로 보일 수 있습니다. 만약 데이터의 추가, 삭제가 빈번한 서비스라면 고객들은 좋은 사용자 경험을 가지지 못할 것입니다.

 

 

 

 

성능 문제

또한 성능 문제도 존재하는데요, 구글 페이지 중 1억 번째 페이지에 우리가 원하는 데이터가 존재한다고 가정하겠습니다. 이때 한 페이지에 10개씩 데이터가 온다고 가정하면 약 10억개의 데이터를 조회한 후 10개의 데이터만 가져온다. 즉, 정렬기준(order by)에 대해 해당 row가 몇 번째 순서인지 알지 못하므로 OFFSET 값을 지정하여 쿼리를 한다고 했을 때 지정된 OFFSET까지 모두 만들어 놓은 후 지정된 갯수를 순회하여 자르는 방식이다. 따라서 성능은 이에 비례해서 떨어지게 된다. 이에 관해 아래 잘 정리된 사이트가 있다. 

 

 

Why Order By With Limit and Offset is Slow - Faster Pagination in Mysql

 

 

 

 

 

2. 커서 기반 페이징

---

PK를 기반으로 페이지를 구하는 방식. 우리가 원하는 데이터가 '어떤 데이터의 다음'에 있는지에 집중한다. 인스타 그램, 페이스 북 등 대용량 데이터, 대규모 웹 사이트에서 이를 사용한다. 

 

https://dribbble.com/shots/2479061-Scroll-Marker-Idea

 

 

/article?page=1&limit=10

SELECT * FROM article WHERE id <= {cursor} ORDER BY id DESC LIMIT {limit}

 

 

 

 

 

 

 

 

아래는 Offset과 Cursor기반 페이징에 대한 효율성을 나타내는 그래프입니다. 이는 데이터가 많으면 많을수록 성능에 큰 영향을 끼치게 되는 것을 알 수 있습니다. 

 

 

 

 

 

 

 

여기서 첫 페이지 조회할 때와 두번째 페이지부터 조회할 때 사용되는 쿼리가 달라 동적 쿼리가 필요한데요. (첫 페이지를 조회할때는 기준이 되는 id 값을 알 수 없기 때문입니다.) 그래서 아래와 같은 코드가 사용되었습니다.

 

 

 

 

커서 기반 페이징을 사용하면 offset pagination에 존재하는 2가지 문제를 해결할 수 있다. 물론 커서페이징도 만능은 아니다.

일단 커서를 사용하기 위해서 정렬된 기준이 필요한데 만약 정렬 기준이 여러개거나 컬럼의 값이 UNIQUE하지 않은 경우 정상적인 작동을 기대하기 어렵다. 또한 조회된 데이터를 기준으로 전후 조회만 가능하기 때문에 페이지 넘버링 구현이 힘들고 여러페이지를 넘기기도 쉽지않다. 즉 더보기 혹은 무한스크롤 방식의 페이징 처리에 최적화되어있는 셈이다.

   

      - 인덱스가 적용된 값을 비교하기 때문에 테이블 풀스캔을 하지 않습니다. 

      - 데이터 쓰기가 빈번한 테이블이여도 다음 페이지네이션 조회 시 값이 누락되지 않습니다. 

 

 

https://velog.io/@minsangk/%EC%BB%A4%EC%84%9C-%EA%B8%B0%EB%B0%98-%ED%8E%98%EC%9D%B4%EC%A7%80%EB%84%A4%EC%9D%B4%EC%85%98-Cursor-based-Pagination-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0

커서 기반 페이지네이션 (Cursor-based Pagination) 구현하기

 

 

 

 

 

하지만 모든 대신 이 방식을 사용하면 전체 페이지 갯수를 조회할 수는 없게 된다. 대용량 데이터를 다루는 서비스에서는 주로 드래그 액션으로만 다음 페이지를 탐색합니다. 

 

pagination navigation을 사용할 수 없다.

 

 

 

 

 

 

 

3. 상용화중인 서비스들의 페이징 방식

---

실제 서비스중인 기업들은 어떤 방식으로 데이터를 처리하고 있는지 궁금해 찾아보았습니다. 구글, 넷플릭스, 인스타그램, 페이스북 등. 이를 하나씩 살펴보겠습니다.

 

 

 

 

3-1. 구글 

2022년 3월 기준 구글에 messi를 검색하면 약 2억 8천 500만건의 데이터가 검색됩니다. 한 페이지에 10개씩의 데이터를 보여준다고 가정하면 약 2천 8500만개의 페이지가 존재하게 되는데, 이를 인덱스를 통해 검색하면 매우 느린. 물론 구글 자체 검색 시스템이 존재하겠지만 

 

 

\

 

 

구글은 자체 검색 엔진을 가지고 있으며 검색 조건이 매번 바뀌기 때문에 세부 규칙을 파악하는 것은 큰 의미가 없습니다. 다만 현재 사진의 검색 기준에서 페이지를 보면 0부터 시작하는 것을 알 수 있는데 10은 2번, 20은 3번, 30은 4번 페이지를 나타냅니다.

 

 

 

 

 

 

 

슬랙 API는 Json 응답값에 다음 조회에 사용될 cursor 위치를 내려주고 있습니다. 

users.list API method

{
    "ok": true,
    "members": [
        {
            "id": "USLACKBOT",
            "team_id": "T0G9PQBBK",
            "name": "slackbot",
            ...
        },
        {
            "id": "W07QCRPA4",
            "team_id": "T0G9PQBBK",
            "name": "glinda",
            ...
        }
    ],
    "cache_ts": 1498777272,
    "response_metadata": {
        "next_cursor": "dXNlcjpXMDdRQ1JQQTQ="
    }
}

 

 

 

https://api.slack.com/methods/users.list

users.list API method

 

 

 

3-2. 카카오

카카오의 경우 기본적으로 아래와 같은 검색 조건을 제공합니다. 

 

 

 

 

 

카카오

https://developers.kakao.com/tool/rest-api/open/get/v2-search-web

 

 

 

 

 

카카오 또한 최대 검색 페이지를 제한해 놓았는데요, 51페이지가 되면 더 이상 데이터를 제공하지 않습니다. 

 

 

 

 

 

 

 

 

4. Conclusion

---

전통적인 페이지네이션 방식은 오랫동안 네트워크 낭비를 줄여주는 기능을 담당해왔다. 하지만 실시간성을 띄는 SNS 서비스의 등장으로 리소스가 자주 수정/생성/삭제되는 상황이 늘어나자 중복 전송의 가능성이 켜졌다. 트위터는 커서 기반 페이지네이션을 통해 실시간으로 변화하는 타임라인 상에서 리소스의 중복 전송을 효과적으로 막아냈다.

 

 

 

 

 

 

5. Reference

---

김민상 CTO님	커서 기반 페이지네이션
Markus Winand	OFFSET is bad for skipping previous rows

 

How to Implement Cursor Pagination Like a Pro

https://mariadb.com/kb/en/pagination-optimization/

Pagination Optimization

	ㅇㄹㅁ