'Back to Top' 버튼 구현하기, 사용자 경험을 극대화하는 간단한 방법

웹 페이지가 길어질수록 사용자가 스크롤을 많이 해야 하는 경우가 생깁니다. 이때, 페이지의 맨 위로 쉽게 이동할 수 있는 "Back to Top" 버튼을 제공하면 사용자 경험을 크게 향상시킬 수 있습니다.

 

"Back to Top" 버튼의 필요성

• 편리함: 사용자들이 긴 페이지를 탐색할 때 쉽게 맨 위로 돌아갈 수 있습니다.

• 접근성 향상: 모든 사용자가 페이지를 쉽게 탐색할 수 있도록 도와줍니다.

• 사용자 경험 향상: 웹사이트의 직관성과 사용성을 높여줍니다.

 

1. Layout 컴포넌트:
   먼저, app/layout.js 파일을 생성하고 "Back to Top" 버튼을 구현합니다. 모든 페이지에서 공통으로 사용됩니다.

   • useEffect를 사용하여 스크롤 이벤트를 감지하고, 스크롤 위치가 300px 이상일 때 버튼을 보이도록 설정합니다.

   • 버튼을 클릭하면 scrollToTop 함수가 실행되어 페이지 맨 위로 부드럽게 스크롤합니다.

 

import { useEffect, useState } from 'react';
import './globals.css';
export default function Layout({ children }) {
  const [showButton, setShowButton] = useState(false);
  useEffect(() => {
    const handleScroll = () => {
      if (window.scrollY > 300) {
        setShowButton(true);
      } else {
        setShowButton(false);
      }
    };
    window.addEventListener('scroll', handleScroll);
    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, []);
  const scrollToTop = () => {
    window.scrollTo({
      top: 0,
      behavior: 'smooth'
    });
  };
  return (
    <div className="relative min-h-screen">
      {children}
      {showButton && (
        <button
          className="fixed bottom-8 right-8 p-2 bg-blue-600 text-white rounded-full shadow-lg hover:bg-blue-700"
          onClick={scrollToTop}
        >
          Top
        </button>
      )}
    </div>
  );
}

 

"Back to Top" 버튼은 간단하지만 매우 효과적인 사용자 경험 향상 방법입니다. 이 버튼을 구현함으로써 사용자들이 긴 페이지를 탐색할 때 불편함을 최소화하고, 웹사이트의 접근성을 높일 수 있습니다.