Tech| 읽는 데 6분

Astro 프로젝트에 "맨 위로" 버튼 추가하기

daisyUI를 활용하여 Astro 프로젝트에 세련되고 접근성 높은 "맨 위로" 버튼을 구현하는 방법 학습하기

#Astro#UX#JavaScript#Tailwind CSS#daisyUI#Web Design
목차

개요

웹 개발 세계에서 작은 기능들이 사용자 경험에 큰 차이를 만들 수 있다. 그 중 하나가 “맨 위로” 버튼이다. 이 간단하면서도 효과적인 도구는 사용자가 긴 콘텐츠가 많은 페이지에서 특히 지루한 스크롤 없이 빠르게 페이지 상단으로 돌아갈 수 있게 해준다. 이 글에서는 Astro 프로젝트에서 Tailwind CSS와 daisyUI를 사용하여 세련되고 접근성 높은 “맨 위로” 버튼을 구현하는 방법을 정리해보려고 한다.

”맨 위로” 버튼의 필요성

구현 방법을 살펴보기 전에, 이 기능을 웹사이트에 추가해야 하는 이유를 고려해 보자.

  1. 향상된 사용자 경험: 특히 모바일 기기나 긴 형식의 콘텐츠에서 사용자가 페이지 상단으로 빠르고 쉽게 이동할 수 있는 방법을 제공한다.
  2. 증가된 참여도: 탐색을 쉽게 만듦으로써 사용자가 더 많은 콘텐츠를 탐색할 가능성이 높아진다.
  3. 접근성: 페이지 탐색의 대안적 방법을 제공하며, 이는 특히 이동에 제한이 있는 사용자에게 도움이 된다.
  4. 현대적 디자인: 부드럽게 스크롤되는 “맨 위로” 버튼은 사이트에 상호작용성과 세련미를 더한다.

”맨 위로” 버튼 구현하기

현재 프로젝트에서 사용하는 BackToTop.astro 컴포넌트의 구현을 분석해 보자:

BackToTop.astro
---
import { Icon } from 'astro-icon/components';
---
 
<button
  id="back-to-top"
  class="invisible fixed bottom-16 right-5 rounded-full bg-accent p-2 text-accent-content opacity-0 shadow-lg transition-opacity duration-300 md:bottom-5"
  aria-label="Back to top"
>
  <Icon name="arrow-up" />
</button>
 
<script>
  const backToTopButton = document.getElementById('back-to-top');
 
  function toggleBackToTopButton() {
    if (window.scrollY > 300) {
      backToTopButton?.classList.remove('opacity-0', 'invisible');
      backToTopButton?.classList.add('opacity-100', 'visible');
    } else {
      backToTopButton?.classList.add('opacity-0', 'invisible');
      backToTopButton?.classList.remove('opacity-100', 'visible');
    }
  }
 
  function scrollToTop() {
    window.scrollTo({
      top: 0,
      behavior: 'smooth',
    });
  }
 
  window.addEventListener('scroll', toggleBackToTopButton);
  backToTopButton?.addEventListener('click', scrollToTop);
</script>

버튼 구조

버튼 구조
---
import { Icon } from 'astro-icon/components';
---
 
<button
  id="back-to-top"
  class="invisible fixed bottom-16 right-5 rounded-full bg-accent p-2 text-accent-content opacity-0 shadow-lg transition-opacity duration-300 md:bottom-5"
  aria-label="Back to top"
>
  <Icon name="arrow-up" />
</button>

만약, astro-icon을 사용하지 않는다면, 아래와 같이 버튼 안에 svg를 추가해서 구현할 수 있다.

※ 버튼의 class의 경우, 개발자의 취향 또는 웹사이트의 스타일, 요구사항 등에 따라 달라질 수 있다.

<button
  id="back-to-top"
  class="fixed bottom-5 right-5 bg-primary text-primary-content p-2 rounded-full shadow-lg transition-opacity duration-300 opacity-0 invisible"
  aria-label="맨 위로"
>
  <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18" />
  </svg>
</button>

이 HTML 구조의 특징

JavaScript 로직

const backToTopButton = document.getElementById('back-to-top');
 
function toggleBackToTopButton() {
  if (window.scrollY > 300) {
    backToTopButton.classList.remove('opacity-0', 'invisible');
    backToTopButton.classList.add('opacity-100', 'visible');
  } else {
    backToTopButton.classList.add('opacity-0', 'invisible');
    backToTopButton.classList.remove('opacity-100', 'visible');
  }
}
 
function scrollToTop() {
  window.scrollTo({
    top: 0,
    behavior: 'smooth',
  });
}
 
window.addEventListener('scroll', toggleBackToTopButton);
backToTopButton.addEventListener('click', scrollToTop);

이 JavaScript 코드는 두 가지 주요 기능을 처리한다.

  1. 스크롤 위치에 따른 버튼의 가시성 전환
  2. 버튼 클릭 시 페이지 상단으로의 부드러운 스크롤

결론

“맨 위로” 버튼을 구현하는 것은 작은 변화지만 웹사이트의 사용성을 크게 향상시킬 수 있다. Astro의 컴포넌트 기반 아키텍처와 Tailwind CSS의 강력함을 통해 이 기능을 추가하는 것이 간단하고 유지보수가 쉬운 작업이 된다.

이 글에서 설명한 구현을 따라하면 사용자에게 콘텐츠를 탐색할 수 있는 부드럽고 접근성 높은 방법을 제공하게 되며, 궁극적으로 더 나은 전반적인 사용자 경험으로 이어질 수 있다.

웹 개발에서는 종종 작은 세부 사항들이 큰 차이를 만든다는 점을 기억할 필요가 있다. 잘 구현된 “맨 위로” 버튼은 사용자가 의식적으로 인지하지 못하더라도 감사히 여길만한 그런 세부 사항 중 하나다.