앱을 개발하던 중 초기 로딩 지연과 네트워크 사용량을 줄이기 위해 페이징을 도입하였다.
Supabase를 사용하고 있었는데,
API 호출 횟수 자체를 기준으로 과금하지는 않지만
한 번에 많은 데이터를 조회할 경우
쿼리 처리 시간과 네트워크 전송 비용이 증가할 수 있었다.
실제로 초기 화면에서 다량의 데이터를 한 번에 로드할 경우
모바일 환경에서는 수백 ms 수준의 로딩 지연도
나에게는 길게 체감되는 문제가 있었다.
이에 페이징을 적용하여
초기에는 필요한 데이터만 조회하고,
이후 스크롤에 따라 점진적으로 데이터를 로드하도록 개선하였다.
그 결과 초기 화면에서는 거의 로딩 없이
즉시 데이터를 확인할 수 있도록 UX를 개선할 수 있었다.
페이징은
👉 전체 데이터를 한 번에 가져오지 않고, 일정 단위로 나눠서 가져오는 방식이야.
예를 들면:
- 댓글 10,000개가 있는 게시글
- 👉 처음엔 20개만
- 스크롤하면 다음 20개
- 또 스크롤하면 그다음 20개
이게 전부 페이징.
왜 페이징이 필요한가?
페이징이 없으면 생기는 문제는 다음과 같다.
1. 서버 부하 폭증
SELECT * FROM comments WHERE post_id = ...
- 데이터 많아질수록
- CPU, 메모리, 네트워크 전부 증가
2. 네트워크 비용 & 속도 문제
- 모바일 환경에서 응답 크면:
- 로딩 느림
- 데이터 소모 큼
3. 앱 메모리 / 렌더링 문제
- RecyclerView / LazyColumn
- 수천 개 아이템 한 번에 넣으면:
- 스크롤 끊김
- OOM 위험
페이징을 쓰면 얻는 것
- 초기 로딩 속도 개선
- 서버 부하 감소
- 모바일 UX 안정
- 트래픽 비용 절감
- 무한 스크롤 가능
👉 대규모 서비스에서 페이징은 선택이 아니라 필수
페이지 / 아이템 수는 어떻게 정해야 할까?
UX + 데이터 성격 + 기기 성능 기준 등을 고려해서 정하면 된다.
아이템 개수가 너무 많으면?
- 초기 로딩 느림
- 스크롤 끊김
- JSON 커짐
너무 적으면? - 네트워크 요청 잦음
- 배터리/트래픽 낭비
- UX 나쁨 (로딩 잦음)
👉 나는 한 화면에 보여지는 아이템 개수에서 넉넉하게 *2개를 더해 한 페이지당 14개의 아이템을 로드하도록 했다.
반응형