예상보다 24배 많은 콘텐츠에 프론트가 대처하는 방법

간단 소개

리디 마크다운 이벤트 페이지 개선 과정에서 프론트엔드 성능 최적화 및 사용자 경험 향상 기법을 적용한 사례 분석.

AI Summary

마크다운 이벤트 페이지 개선
- 리디 연말 마크다운 이벤트 페이지를 개선하며 겪은 프론트엔드 최적화 경험 공유
- 기존 페이지는 250개 작품에 맞춰 설계되었으나, 6,000개 이상의 작품을 다뤄야 하는 상황 발생
- UX 개선을 위해 장바구니, 필터링, 장르 탭, 실시간 이벤트 참여 금액 등의 기능 추가
렌더링 성능 최적화
- 리스트 가상화(react-window 라이브러리 활용)를 통해 초기 렌더링 속도 개선, window 스크롤 연동
- 스크롤 시 흰 배경이 보이는 문제 해결을 위해 SVG 기반 스켈레톤 UI 적용
데이터 로딩 최적화
- gzip 압축 활성화를 통해 데이터 전송량 감소 (8.5MB -> 900KB)
- 필터링 로직 개선: 서버에서 모든 작품을 다시 불러오는 대신, 프론트엔드에서 필터링 수행
- 스프레드 연산자 사용으로 인한 성능 저하 문제 해결: Map 객체 활용으로 필터링 속도 8000배 향상
- 린트 규칙을 맹목적으로 따르기보다 코드의 동작 방식을 고려해야 함을 강조