리디 마크다운 이벤트 개선 사례

리디 웹 팀은 2022년 마크다운 이벤트에서 예상보다 24배 많은 콘텐츠를 처리하기 위해 기존 이벤트 페이지를 개선하였다.

기능 추가 및 최적화

기존 페이지는 250개 작품에 맞춰 설계된 반면, 6,000개 작품을 등록해야 했다.

• UX 개선: 작품 필터링, 장바구니 기능 추가
• 성능 최적화: 리스트 가상화 기법 적용

성능 개선을 위해 react-window 라이브러리를 선택하여 스크롤 성능을 높였다.

데이터 불러오기 과정

데이터를 한 번에 불러오는 방식에서 gzip 압축을 통해 페이로드를 줄여 랜딩 속도를 개선하였다. 필터링 시 스켈레톤을 보여주는 방식으로 사용자 경험을 높였으며, 불필요한 서버 요청을 줄이기 위해 프론트엔드에서 필터링 작업을 수행하도록 변경하였다.