프론트엔드 개발자를 위한 5가지 스크롤 복구 시나리오와 실전 코드 팁

Context

SPA(Single Page Application) 환경에서는 브라우저의 자동 스크롤 복구 기능이 작동하지 않아 사용자가 페이지를 떠났다가 돌아올 때 스크롤 위치가 초기화되는 문제가 발생한다. 특히 비동기 데이터 로드, 무한 스크롤, 동적 높이 변화 상황에서 단순히 scrollY 값만 저장하는 방식은 데이터 재로드 시 의미가 없어진다.

Technical Solution

• 정적 데이터 환경: History API와 beforeunload 이벤트를 조합하여 scrollY 값을 state에 저장하고, popstate 이벤트로 복구 시 setTimeout 100ms 지연 후 window.scrollTo() 실행
• 동적 데이터 환경: 절대 스크롤 위치 대신 visible items의 아이템 ID와 offsetTop을 sessionStorage에 저장해 데이터 재로드 후 특정 아이템을 기준으로 scrollIntoView() + window.scrollTo() 조합으로 복구
• 레이지 로딩 환경: 스켈레톤 UI로 미리 레이아웃을 잡고, 필요한 데이터를 배치 단위(권장 20개)로 preload한 후 스크롤 위치 복구, 평균 아이템 높이는 과거 50개 아이템 높이의 평균값으로 계산
• React Query 활용: 이미 캐시된 데이터는 즉시 화면 표시 후 스크롤 복구, 캐시가 없으면 infiniteQuery로 데이터 로드 후 복구 실행으로 로딩 상태 관리 단순화
• 가상화(Virtualization) 환경: 사용자가 마지막으로 본 페이지 번호와 크기를 저장하고, 해당 아이템을 우선 로드해 virtualList.scrollTo()로 이동한 후 주변 데이터는 백그라운드에서 preload

Key Takeaway

SPA의 스크롤 복구는 상황에 따라 다른 전략이 필요하며, 절대 위치보다 상대적 기준점(아이템 ID, 페이지 번호)을 기준으로 복구하는 방식이 동적 콘텐츠 환경에서 안정적이다. 완벽한 복구보다 사용자가 불편함을 느끼지 않을 수준의 적절한 구현을 목표로 여러 방법을 상황에 맞게 조합하는 것이 실무 접근이다.