원활한 UX를 위한 스크롤 행동 설계 (주의사항 3가지)

웹사이트에서 스크롤 행동은 사용자와 콘텐츠 간 상호작용을 결정짓는 중요한 요소입니다. 특히, 긴 콘텐츠를 탐색하거나 특정 섹션으로 이동할 때 스크롤 동작이 부드럽고 직관적이라면 사용자는 웹사이트를 더욱 편리하게 이용할 수 있습니다. 이 글에서는 CSS의 scroll-behavior 속성으로 기본적인 스크롤 동작을 제어하고, JavaScript를 활용한 고급 스크롤 행동 인터랙션 기법을 통해 웹사이트 UX를 향상시키는 방법을 다룹니다.

---

1. CSS scroll-behavior의 개념과 활용

scroll-behavior는 CSS에서 스크롤 이동 시 애니메이션 효과를 지정하는 속성입니다. 기본적으로 브라우저는 특정 위치로 스크롤 이동 시 즉각적인 전환을 제공합니다. 하지만 scroll-behavior 속성을 사용하면 부드러운 스크롤 효과를 추가하여 더 나은 사용자 경험을 제공할 수 있습니다.

주요 값

• auto: 즉시 이동 (기본값)
• smooth: 부드럽게 스크롤

기본 설정 방법

html {
  scroll-behavior: smooth;
}

이 코드를 적용하면 페이지 내 앵커 링크(<a href="#section">)를 클릭할 때 스크롤이 부드럽게 이동합니다.

적용 사례: Back-to-Top 버튼

scroll-behavior와 JavaScript를 결합하면 스크롤 인터랙션을 보다 유연하게 구성할 수 있습니다.

<button id="backToTop">Top</button>

document.getElementById("backToTop").addEventListener("click", () => {
  window.scrollTo({ top: 0, behavior: "smooth" });
});

효과: 긴 페이지를 스크롤한 후 상단으로 매끄럽게 돌아갈 수 있습니다.

---

2. 스크롤 인터랙션 UX 개선 사례

1) 콘텐츠 탐색을 위한 앵커 스크롤 행동

긴 콘텐츠가 있는 페이지에서 특정 섹션으로 이동할 때 부드러운 스크롤을 적용하면 전환이 자연스럽게 느껴집니다.

<a href="#features">Features</a>
<section id="features">
  <h2>Features</h2>
  <p>Here are the highlights of our product.</p>
</section>

html {
  scroll-behavior: smooth;
}

사용자는 클릭 시 바로 콘텐츠로 이동하면서 부드러운 전환을 경험할 수 있습니다.

2) 부드러운 스크롤링과 고정형 콘텐츠

JavaScript를 사용하여 특정 요소를 스크롤 시 고정하거나 효과를 적용할 수 있습니다.

window.addEventListener("scroll", () => {
  const header = document.querySelector("header");
  if (window.scrollY > 100) {
    header.style.position = "fixed";
    header.style.top = "0";
  } else {
    header.style.position = "static";
  }
});

효과: 스크롤 시 헤더를 고정하여 네비게이션의 편의성을 높입니다.

---

3. 고급 스크롤 인터랙션 구현

1) 스크롤 기반 애니메이션

사용자가 콘텐츠를 탐색하면서 스크롤 위치에 따라 동적 효과를 구현합니다.

window.addEventListener("scroll", () => {
  const value = window.scrollY;
  document.querySelector(".image").style.transform = `translateY(${value * 0.5}px)`;
});

효과: 배경 이미지가 스크롤에 따라 느리게 움직이는 “패럴랙스 효과”를 제공합니다.

2) 스크롤 프로그레스바

스크롤 행동 진행 상황을 표시하는 막대를 추가하면 사용자는 현재 위치와 남은 콘텐츠를 직관적으로 알 수 있습니다.

<div id="progress-bar"></div>

#progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 5px;
  background-color: #3498db;
  width: 0%;
}

window.addEventListener("scroll", () => {
  const scrollPosition = window.scrollY;
  const documentHeight = document.documentElement.scrollHeight - window.innerHeight;
  const progress = (scrollPosition / documentHeight) * 100;
  document.getElementById("progress-bar").style.width = `${progress}%`;
});

효과: 사용자는 페이지의 읽기 진행 상황을 쉽게 확인할 수 있습니다.

---

4. 스크롤 인터랙션 설계 시 주의사항

---

부드럽고 직관적인 스크롤 행동은 사용자 경험을 크게 향상시킬 수 있습니다. CSS scroll-behavior 속성으로 간단히 시작할 수 있으며, JavaScript를 사용해 더욱 동적인 스크롤 인터랙션을 구현할 수 있습니다. UX 개선을 위해 스크롤을 활용한 디자인을 적극적으로 적용해보세요!