프로그래밍/개념 뽀개기

무한스크롤 웹페이지에서 페이지란 무엇일까?

lamarcK 2025. 4. 1. 13:32

우리가 인터넷 사이트를 웹페이지라고 부르는 것은 일반적으로 사이트의 구조가 마치 책과 같은 형식이기 때문이다.

1page 즉 1면이다.

그런데 막상 웹사이트를 보면 물리적인 책과 다르게 다양한 구조를 하고 있다.

포탈처럼 다양한 글들로 넘어가는 페이지가 있는 반면 아예 컨텐츠가 무한해서 스크롤도 무한하게 길어지고 페이지도 세로로 쭉 이어지는 유튜브같은 사이트가 있다.

 

그리고 API에서도 페이지 개념을 사용한다. 그런데 무한스크롤에선 스크롤이 무한히 길어지는데 왜 페이지 개념을 사용하는 걸까?

 

📄 API에서의 '페이지(Page)'란 무엇일까? (무한 스크롤)

페이지(page)라는 용어가 웹 API, 특히 무한 스크롤 맥락에서는 책 페이지와는 다른 의미로 사용되어 헷갈릴 수 있습니다. 여기서 '페이지'는 눈에 보이는 화면 페이지를 의미하는 것이 아니라, 서버가 전체 데이터를 논리적으로 나눠 놓은 묶음(Chunk 또는 Batch)의 순서 번호를 의미합니다.

작동 방식:

  1. 전체 데이터: 서버는 data.json (또는 데이터베이스)에 있는 모든 아이템 목록(예: 1000개)을 가지고 있습니다.
  2. 데이터 분할 요청: 클라이언트(프론트엔드)가 이 1000개의 데이터를 한 번에 다 받아오면 너무 느리고 비효율적입니다. 그래서 클라이언트는 서버에게 데이터를 작은 묶음 단위로 나눠서 달라고 요청합니다.
  3. limit (묶음 크기): const limit = 10; 코드는 "한 묶음(페이지)에는 10개의 아이템을 담겠다"는 규칙을 정하는 것입니다.
  4. page (묶음 번호): 클라이언트는 서버에게 몇 번째 묶음을 원하는지 알려주기 위해 page 번호를 사용합니다.
    • ?page=1: "첫 번째 묶음(1번 페이지) 주세요."
    • ?page=2: "두 번째 묶음(2번 페이지) 주세요."
    • ?page=3: "세 번째 묶음(3번 페이지) 주세요."
  5. 서버 계산 (startIndex, endIndex): 서버는 클라이언트가 요청한 page 번호와 미리 정해진 limit 값을 사용하여 전체 데이터 목록에서 어디서부터 어디까지 잘라서 보내줄지를 계산합니다.
    • startIndex = (page - 1) * limit; : 해당 페이지 묶음의 시작 인덱스 계산
    • endIndex = startIndex + limit; : 해당 페이지 묶음의 끝 인덱스 (미포함) 계산
    • 예시 (limit = 10):
      • page=1 요청 -> startIndex = (1-1)*10 = 0, endIndex = 0+10 = 10 -> 전체 데이터의 0번 ~ 9번 아이템 반환
      • page=2 요청 -> startIndex = (2-1)*10 = 10, endIndex = 10+10 = 20 -> 전체 데이터의 10번 ~ 19번 아이템 반환
      • page=3 요청 -> startIndex = (3-1)*10 = 20, endIndex = 20+10 = 30 -> 전체 데이터의 20번 ~ 29번 아이템 반환
  6. 데이터 반환: 서버는 계산된 범위(startIndex부터 endIndex 직전까지)에 해당하는 데이터 묶음(results)을 클라이언트에게 응답으로 보내줍니다.

📜 무한 스크롤에서의 '페이지':

무한 스크롤에서는 사용자가 스크롤을 내려서 페이지 끝에 도달하면 (IntersectionObserver가 loader를 감지하면), 프론트엔드 JavaScript가 currentPage 변수를 1씩 증가시키면서 다음 '페이지'(다음 데이터 묶음) 를 서버에 자동으로 요청합니다.

  • 처음 로드 시: page=1 요청 -> 1번 ~ 10번 아이템 받음
  • 스크롤 -> page=2 요청 -> 11번 ~ 20번 아이템 받아서 기존 목록 뒤에 추가
  • 스크롤 -> page=3 요청 -> 21번 ~ 30번 아이템 받아서 기존 목록 뒤에 추가
  • ... 계속 반복 ...

사용자는 마치 끊임없이 이어지는 하나의 긴 목록처럼 느끼지만, 실제로는 정해진 limit 개수만큼의 데이터 묶음(페이지)이 순서대로 계속 요청되고 받아와져서 뒤에 붙는 것입니다.

결론:

API 코드에서 page는 데이터 전송을 위한 논리적인 묶음 단위의 순서 번호입니다. 무한 스크롤은 이 '페이지' 단위로 데이터를 순차적으로 요청하고 이어 붙여서 사용자에게는 끊임없는 스크롤 경험을 제공하는 기술입니다. limit은 그 묶음의 크기를 결정하는 것이고요.