목록 가상화의 마법 “우리 DOM이 달라졌어요”

이 글은 펫프렌즈의 프론트엔드 개발자가 커뮤니티 서비스 '집사생활'에 목록 가상화 기술을 적용한 경험을 공유합니다. 집사생활은 사용자들이 반려동물의 일상을 공유하는 커뮤니티로, 많은 이미지와 동영상을 포함하는 피드를 제공하며 인피니트 스크롤을 사용합니다.

하지만 데이터 규모가 커지면서 성능 문제가 발생했고, 특히 iOS에서 발생하는 '백화현상'과 같은 이슈를 해결하기 위해 목록 가상화 도입의 필요성을 설명합니다. 목록 가상화는 화면에 보이는 요소만 렌더링하여 DOM 부하를 줄이고 성능을 개선하는 기술로, 이를 통해 사용자 경험을 향상시키는 것을 목표로 합니다.