🙋 이 문서를 보고 나면

• 이전 페이지로 돌아가면, 이전에 있던 위치로 이동하게 할 수 있다.
• 이전에 있던 위치로 부드러운 스크롤링으로 이동시킬 수 있다.
• 인프런처럼 구현할 수 있다.

👨‍🚀 이 기능이 필요한 이유는?

베타 서비스 기간동안 가장 많이 요청받았던 기능이 자동 스크롤 기능이었습니다.

이유는 '리스트 페이지 ↔️ 상세 페이지' 동작이 불편해서입니다.

부스 리스트에서 원하는 부스를 클릭하면, 해당 부스의 상세 페이지로 넘어갑니다.
그리고 뒤로가기 버튼을 통해 다시 부스 리스트로 돌아갈 수 있습니다.

이때, 이전에 있던 위치가 아닌 페이지의 최상단으로 돌아가게 됩니다.

이것은 부스를 1개만 보려고 할 때는 불편하지 않지만, 여러 개의 부스를 확인할 때는 매우 불편합니다.
리스트에서 원하는 부스를 클릭하기까지 불필요한 스크롤 동작을 반복해야 하기 때문입니다.

👨‍🚀 해당 기능을 사용하는 애플리케이션을 살펴보자!

이렇게 '리스트 페이지 ↔️ 상세 페이지'를 동작하는 서비스는 많습니다.
예를 들어, 배달의 민족과 네이버 웹툰, 인프런이 있습니다.

이 애플리케이션들은 어떻게 개선했을까 살펴봤습니다.

📱 배달의 민족

• 리스트 페이지 ➡️ 상세 페이지로 넘어갈 때는 Move in 효과가 나타난다.
• 상세 페이지 ➡️ 리스트 페이지로 넘어갈 때는 Move out 효과가 나타난다.
• 데이터 로딩이 있어서 페이지를 바로 띄어주지 못할 때는 로딩 애니메이션이 나온다.
• 스크롤링 없이 이전 위치로 이동한다.

📱 네이버 웹툰

• 리스트 페이지 ➡️ 상세 페이지로 넘어갈 때는 Move in 효과가 나타난다.
• 리스트 페이지 ➡️ 상세 페이지로 넘어갈 때는 가장 마지막으로 봤던 화의 위치로 스크롤링이 발생한다.
• 상세 페이지 ➡️ 리스트 페이지로 넘어갈 때는 Move out 효과가 나타난다.

💻 인프런

• 페이지를 전환 할 때 애니메이션 효과없이 페이지 전환이 일어난다.

• 상세 페이지 ➡️ 리스트 페이지로 넘어갈 때는 이전 위치로 스크롤링이 발생한다.

  

  👨‍🚀 결론적으로 선택한 방법은?

인프런입니다.

우리 서비스가 모바일 웹 애플리케이션으로 모바일 사용자를 타켓으로 하고 있지만, Move 애니메이션을 넣기에는 무리가 있었습니다.

따라서 페이지 전환을 할 때 애니메이션은 없지만
사용자가 불편함을 느꼈던 '이전 위치로 자동으로 가지지 않는 부분'은 인프런을 따라하면 해소할 수 있었습니다.

📝 이전 위치로 이동하기 구현하기

📝 전체 코드

아래 코드는 리스트 페이지에 작성하면 됩니다.

  let y = '';

  useEffect(() => () => {
    localStorage.setItem('y', y);
  }, []);

  document.addEventListener('scroll', () => {
    y = String(document.documentElement.scrollTop);
  });

  useEffect(() => {
    const newScrollY = Number(localStorage.getItem('y'));
    window.scrollTo(0, newScrollY);
  }, [booths]);

📝 코드 세부 설명

1. 변수 선언

  let y = '';

y는 현재 스크롤 위치를 문자열로 저장하기 위한 변수입니다.

2. 언마운트 시 스크롤 위치 저장

useEffect(() => () => {
    localStorage.setItem('y', y);
  }, []);

빈 배열을 의존성 배열로 사용하여, 이 useEffect는 컴포넌트가 처음 마운트될 때 한 번 실행됩니다.
리턴되는 함수는 컴포넌트가 언마운트될 때 실행됩니다.
localStorage.setItem('y', y)는 y 변수에 저장된 스크롤 위치를 로컬 스토리지에 저장합니다.

3. 스크롤 이벤트 리스너

  document.addEventListener('scroll', () => {
    y = String(document.documentElement.scrollTop);
  });

스크롤 이벤트가 발생할 때마다 실행됩니다.
document.documentElement.scrollTop는 현재 스크롤 위치를 픽셀 단위로 나타냅니다.
이 값을 문자열로 변환하여 y 변수에 저장합니다.

4. 스크롤 위치 복원

useEffect(() => {
  const newScrollY = Number(localStorage.getItem('y'));
  window.scrollTo(0, newScrollY);
}, [booths]);

booths가 변경될 때마다 실행됩니다.
의존성 배열에 아무것도 넣지 않았더니, 다른 상태 값이 변경돼도 스크롤 위치가 복원이 되어 booths를 넣었습니다.

localStorage에서 저장된 스크롤 위치를 가져와 newScrollY 변수에 숫자로 변환하여 저장합니다.
window.scrollTo(0, newScrollY)를 사용하여 페이지를 저장된 스크롤 위치로 스크롤합니다.

📝 부드럽게 이동하기 구현하기

scroll-behavior: smooth;

아래 css 속성을 추가하면 부드러운 스크롤링이 가능해집니다.

📘 정리

'상세 페이지 ➡️ 리스트 페이지'로 전환했을 때, 사용자를 이전 위치로 이동시키면서 사용자의 편의성을 향상시킬 수 있었습니다.

이는 사용자의 불필요한 스크롤을 방지하는 것이었습니다.

요구사항을 짜다 보면 개발자 관점에서만 보게 되는데요,
베타 서비스를 운영하니 사용자가 직접 느끼는 불편함을 받을 수 있었습니다.

그리고 직접 건의를 받지 않더라도, 프로덕트 관점에서 사용자의 편의성을 높일 수 있는 방법을 생각해봐야겠습니다.