코끼리를 냉장고에 집어넣는 법
The post 예상보다 24배 많은 콘텐츠에 프론트가 대처하는 방법 appeared first on 리디주식회사 RIDI Corporation.
|| .Module__Anchor { scroll-margin-top: 200px; }
안녕하세요, 리디 웹 팀 프론트엔드 엔지니어 김요한입니다. 저는 2022년 리디의 연말 대형 이벤트를 개선하는 과정에서 얻었던 경험을 여러분과 공유하고자 합니다.
1. 마크다운 이벤트
2. 작품을 빠르게 그릴 방법
31만 개가 넘는 엘리먼트를 최적화하기
가상화의 대가를 치르기
3. 작품을 빠르게 “불러올” 방법
gzip을 켜보기
필터링을 하는 동안 스켈레톤을 보여주기
잘못된 필터링 로직을 수정하기
잘못된 필터링 로직이 느린 이유
4. 마크다운 이벤트를 마치며
1. 마크다운 이벤트
보통 마크다운이라고 하면, 대부분의 엔지니어 분들께서는 Markdown 마크업 언어를 먼저 떠올리실 것 같습니다. 그런데 사실 사전을 뒤져보면 마크다운이라는 단어에는 가격 인하라는 뜻이 있습니다. 리디에서는 매년 연말 마크다운 이벤트를 진행하는데요, 이름대로 한 번에 많은 종수의 작품을 할인 판매하는 이벤트입니다.
리디에서는 매년 연말 많은 종수의 작품을 할인 판매하는 ‘마크다운’ 이벤트를 진행합니다.
2022년 마크다운 이벤트는 총 6,107개의 작품을 가지고 진행되었습니다. 이벤트를 진행하기 위해서는 당연히 대상 작품들을 보여주는 페이지가 필요했습니다. 이에 대해 막연히 기존에 사용하고 있던 이벤트 페이지에 배너 이미지와 작품을 등록하면 될 것이라 생각했는데요.
리디에서 사용 중인 기존 이벤트 페이지입니다.
문제는 이벤트 관리 페이지에 다음 메시지가 적혀있었다는 것입니다.
도서는 250권 이내로 게재해 주세요.
즉, 기존 리디 이벤트 페이지는 6,000개씩이나 되는 콘텐츠를 등록하기 위해 만들어진 페이지가 아니었습니다. 기존 페이지는 250개 작품에 맞춰 설계된 페이지입니다. 저희는 여기에 예상보다 24배 더 많은 콘텐츠를 넣으려고 하고 있습니다.
24배 많은 콘텐츠를 넣어보니, 가장 처음으로 UX 문제가 눈에 띄었습니다. 기존 이벤트 페이지는 스크롤 몇 번이면 모든 작품이 보이는 페이지입니다. 반면 작품이 6,000개씩이나 되면 스크롤이 끝없이 내려갑니다. 그 수많은 작품 중에서 사용자가 원하는 작품을 찾기란 매우 힘들어 보였습니다.
6,000개의 작품 안에는 사용자가 이미 구매했거나, 관심이 없는 장르의 작품 등이 많이 있을 것입니다. 어쩌면 몇 개를 제외한 대부분의 작품에는 관심이 없을 수도 있습니다. 그렇지만 그런 상황에 대한 대응은 하나도 되어있지 않았습니다.
그래서 고객이 겪을 불편함을 해소하기 위해, 저희는 다음과 같은 기능들을 추가하여 이 이벤트 페이지를 6,000개의 작품에 맞는 페이지로 바꾸고자 했습니다.
장바구니 기능
작품 필터링
작품 장르 탭
실시간 이벤트 참여 금액
이벤트 페이지에 탭, 필터, 검색, 이벤트 참여 금액, 카트 버튼이 추가되었습니다.
(위 이미지에 포함된 작품 표지는 내용 전달을 위해 임의로 구성하였습니다.)
2. 작품을 빠르게 그릴 방법
기능을 추가하는 것 외에도 저희가 헤쳐나가야 할 또 다른 문제가 있었습니다. 사실 관리 페이지에서는 250개가 한계라고 했지만, 작년 마크다운 이벤트에서는 약 1,000개 정도의 작품을 페이지 하나에 이미 등록해 본 적이 있었습니다. 그리고 그 결과로 다음과 같은 좋지 않은 일들이 일어났었습니다.
모바일 (특히 저사양 안드로이드 디바이스)에서는 거의 사용이 불가능할 정도로 느렸습니다.
페이지가 그려지는 데에만 10초 넘는 시간이 소요되었습니다.
유저가 무려 10MB 이상을 HTML로 받아오고 있었습니다.
1,000개 작품만 가지고도 제대로 이벤트를 진행할 수 없다면, 6,000개 작품으로 진행하는 건 더더욱 어려울 것입니다. 그렇기 때문에 웹 팀에서는 기능 추가와 더불어 해당 페이지를 빠르게 만드는 작