상품 상세페이지 갔다가 뒤로갔을 때 선택된 탭, 스크롤 위치로 돌아오게 구현하기(bfcache에 대해서)

1. 문제 상황

최근 프로젝트에서 탭 콘텐츠가 서버에서 받아온 값으로 동적으로 렌더링되는 구조였습니다. 그런데 상품 상세페이지로 이동했다가 뒤로가기를 하면 탭 상태와 스크롤 위치가 초기화되는 문제가 있었습니다.

사용자는 뒤로가기를 했을 때, 자신이 마지막으로 보고 있던 탭과 위치로 자연스럽게 돌아가길 기대합니다. 하지만, 페이지가 새로 로드되면서 처음 탭으로 돌아가고, 스크롤도 맨 위로 이동해버리는 사용자경험 측면에서 불편한 점이 발생했습니다. 그래서 이를 해결하기 위해 bfcache에 대해서 알게되었습니다.

2. bfcache(Back-Forward Cache)란?

이 문제를 해결하는 과정에서 bfcache(Back-Forward Cache)라는 개념을 알게 되었습니다.

브라우저는 뒤로 가기 또는 앞으로 가기를 할 때 페이지를 새로 불러오는 대신, 이전 상태 그대로 유지하기 위해 페이지를 메모리에 저장하는 경우가 있습니다. 이를 bfcache(뒤로가기 캐시)라고 합니다.

bfcache가 작동하는 경우:

• 새로고침 없이 ‘뒤로가기’를 했을 때
• 브라우저가 페이지 상태를 메모리에 보관했을 때

이 덕분에 특정 조건에서는 기존의 탭 상태나 스크롤 위치가 유지될 수도 있지만, 완벽히 보장되지는 않기 때문에 직접 상태를 관리하는 로직이 필요했습니다.

3. 해결방법: pageshow & pagehide 활용

1) 페이지를 떠날 때(tab 상태 & 스크롤 위치 저장)

사용자가 상품 상세페이지로 이동하기 전에 현재 탭 상태와 스크롤 위치를 저장해야 합니다. 이를 위해 pagehide이벤트를 활용했습니다.

window.addEventListener('pagehide', ()=>{
	const listContainer = document.getElementById("tab-content");
	if(listContainer){
		sessionStorage.setItem('listHTML', listContainer.innerHTML);
		sessionStorage.setItem('scrollPosition', window.scrollY);
	}
})

• listHTML : 현재 선택된 탭의 콘텐츠를 sessionStorage에 저장
• scrollPosition : 현재 스크롤 위치를 sessionStorage에 저장

2) 뒤로 가기 했을 때(저장한 값 복원)

사용자가 뒤로 가기를 했을 때, 이전의 탭 상태와 스크롤 위치를 복원해야합니다. 이를 위해 pageshow 이벤트를 활용했습니다.

window.addEventListener('pageshow', function(e){
	if(e.persisted){
		const cachedList = sessionStorage.getItem('listHTML');
		const savedScroll = sessionStorage.getItem('scrollPosition');
		
		if(cachedList){
			document.getElementById("tab-content").innerHTML = cachedList;
		}
		if(savedScroll){
			window.scrollTo(0, parseInt(savedScroll, 10));
		}
	}else{
		initializeTab(); // 새로 로드된 경우 초기화
	}
})

• e.persisted === true → bfcache가 작동한 경우 저장된 데이터를 활용하여 상태를 복원
• sessionStorage 에서 탭 콘텐츠를 가져와 화면을 업데이트
• 저장된 스크롤 위치를 이동하여 사용자가 보던 위치 그대로 유지
• bfcache가 작동하지 않는 경우 initializeTab()을 호출하여 초기화 진행

4. 적용 후 개선된 UX

이 로직을 적용한 후, 뒤로가기를 해도 사용자가 보던 탭과 스크롤 위치가 유지되는 UX를 제공할 수 있었습니다.

✅ 적용 전

• 상품 상세페이지에서 뒤로 가기 시 항상 첫 번째 탭이 선택됨
• 스크롤이 맨 위로 초기화됨 → 불편한 사용자 경험

✅ 적용 후

• 뒤로 가기를 해도 마지막으로 선택한 탭이 그대로 유지됨
• 사용자가 보던 위치에서 이어서 볼 수 있음
• 불필요한 API 요청 없이 sessionStorage를 활용하여 성능 최적화 효과도 얻음

5. 마무리

실무에서 이런 문제를 직접 겪지 않았다면 bfcache라는 개념을 접할 기회가 많지 않았을 것입니다. 이번 경험을 통해 브라우저의 캐싱 메커니즘을 이해하고, 사용자 경험을 개선하는 방법을 배울 수 있었습니다.

앞으로도 사용자의 불편함을 줄이는 개발을 고민하며 더 나은 UX를 제공할 수 있도록 노력해야겠습니다!