메인페이지 무한 스크롤 기능

kkrap 프로젝트의 메인페이지에서 다른 사람들의 폴더들을 구경할 수 있는 무한 스크롤 기능을 구현하게 되었다 그 과정에 대해 기술한다.

기능 개요

• 무엇을 위한 기능인가?

사용자가 다른 사용자들의 폴더를 시간순으로 탐색할 수 있도록, Instagram 피드처럼 무한 스크롤 방식으로 폴더 목록을 제공하는 기능

• 사용자에게 어떤 가치를 제공하는가?
  • 다양한 사용자들의 관심사를 탐색
  • 정보 큐레이션의 범위를 넓혀 콘텐츠 확장성을 높인다
  • 팔로우 없이도 콘텐츠 소비가 가능하므로 서비스 체류 시간 증가로 이어진다

기능 목적 및 배경

• 왜 이 기능이 필요해졌는가?

초기 서비스 구성에서 사용자가 직접 검색하거나 팔로우한 사람들의 폴더만 볼 수 있지만 사용자의 탐색 흐름이 단절 된다는 생각에 이 기능을 추가 또한 로그인 없이 탐색 가능함 공개된 폴더(visible=true)에 한해 누구나 탐색

• 기존 문제점이나 개선 동기
  • 홈 화면이 비어있어 초기 진입 장벽이 생김
  • 사용자 탐색 경로가 제한적

이를 해결하기 위해, 메인 페이지에서 다른 사용자들의 공개된 폴더를 무한 스크롤 형태로 제공하도록 개선

설계 전략

아키텍처

• spring boot, redis, elasticsearch로 아키텍처를 구성하면 될 것 같다는 생각을 하였다.
• 새롭게 공부하게 된 커서 기반 페이지네이션 개념을 도입하면 무한 스크롤에 대한 성능도 좋아질 것이라고 판단했다.

https://wo-dbs.tistory.com/243

커서 기반 페이지네이션이란?

 

• 클라이언트가 읽은 부분까지 redis에 저장을 한 다음에 무한 스크롤 요청시 redis를 읽어서 그 다음 부분을 주면 될 것 같다는 생각을 하게 되었다. 데이터는 elasticsearch의 색인 부분에서 가져오면 될 것 같다.

생각한 순서는 다음과 같다.

1. 클라이언트의 처음 메인페이지 진입시
2. 클라이언트의 무한 스크롤 기능 다시 호출시
3. 앱을 종료하거나 다른 화면으로 전환했을 경우

이렇게 3가지를 생각했다. 1번, 2번 같은 경우 분기를 나누어서 진행할까 싶었다. 이걸 합칠 수도 있지만 유지보수에 많은 힘든 점이 생길 것 같아서 이렇게 진행하였고 3번 같은 경우 Redis로 저장을 하기 때문에 키값의 존재 유무에 따라 진행하면 1번 아니면 2번으로 진행하면 될 것 같다.

 

다음 주소에 상세 기능을 정리해보았다.

https://github.com/Kkrap-team/Backend/blob/feature/%2348/docs/feature-elasticsearch.md

Backend/docs/feature-elasticsearch.md at feature/#48 · Kkrap-team/Backend