프론트엔드
예상보다 24배 많은 콘텐츠에 프론트가 대처하는 방법
두줄요약
6,000개 작품 규모의 이벤트 페이지를 위해 리스트 가상화와 스켈레톤, gzip 등을 적용해 성능을 개선했습니다. 또한 필터링과 탐색 기능을 보강해 대량 콘텐츠에서도 사용성을 높였습니다.
문제 상황
- 연말 마크다운 이벤트에 250권 한계용 페이지를 6,000개 작품 규모로 확장해야 하는 상황
- 작품 수 증가로 스크롤 과다, 찾기 어려움, 렌더링 지연, 큰 페이로드 문제가 동시에 발생
해결 방법
- 탭, 필터, 검색, 카트, 참여 금액 등으로 탐색성과 사용성을 보강
- react-window 기반 리스트 가상화와 window 스크롤 연동으로 렌더링 대상 축소
- SVG 배경 스켈레톤으로 저사양 기기에서의 가상화 부작용 완화
- gzip 활성화와 필터링 로딩 방식 조정으로 초기 로딩과 체감 지연 개선
성능/운영 포인트
- 실제 화면에 보이는 아이템만 렌더링해 DOM 수와 렌더링 비용 절감
- 8.5MiB 수준의 페이로드를 gzip으로 크게 압축해 전송 부담 완화
- 필터링 중 스켈레톤 노출과 로직 수정으로 INP 체감 개선