마우스 따라다니는 인터랙티브 효과 구현하기｜부드럽고 자연스러운 UI

글쓴이 /

마우스 움직임을 활용한 인터랙티브 효과는 웹사이트에 생동감을 불어넣고 사용자 참여도를 높여줍니다. 이번 글에서는 기본적인 마우스 트래킹 효과부터 고급 인터랙션까지 구현해보며, 단순 시각적 재미를 넘어 UX까지 고려하는 방법을 단계별로 소개합니다.

마우스 트래킹 효과란?

마우스 트래킹(Mouse Tracking) 효과는 사용자의 마우스 움직임을 실시간으로 감지하여
특정 요소가 마우스를 따라다니거나 반응하는 인터랙티브 UI입니다.

주요 활용 사례

  • 커서 대신 커스텀 요소 표시
  • 마우스 방향에 따라 배경 움직임(패럴랙스 효과)
  • 마우스 hover 시 특정 오브젝트 확대/축소
  • 게임형 웹사이트에서 캐릭터 이동 등

이 기능은 단순히 시각적인 재미를 주는 것을 넘어, 사용자의 행동 피드백을 실시간으로 전달할 수 있어 체류 시간을 늘리는 데 도움이 됩니다.

기본 HTML 구조

<div class="cursor"></div>
<p>마우스를 움직여보세요!</p>
HTML
  • .cursor 요소가 마우스를 따라다니는 커스텀 오브젝트
  • 실제 커서를 가리지 않고 시각적인 강조 효과만 추가 가능

CSS 스타일링

body {
  margin: 0;
  height: 100vh;
  background: #f5f5f5;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: none; /* 기본 마우스 커서 숨기기 */
}

.cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  background: rgba(0, 150, 255, 0.7);
  border-radius: 50%;
  pointer-events: none; /* 마우스 이벤트 비활성화 */
  transform: translate(-50%, -50%);
  transition: transform 0.1s ease-out;
}
CSS

📌 TIP:

  • cursor: none으로 기본 커서를 숨기고 커스텀 UI를 표시
  • pointer-events: none을 추가해 클릭 이벤트에 영향을 주지 않도록 설정

JavaScript로 마우스 좌표 추적

<script>
  const cursor = document.querySelector('.cursor');

  document.addEventListener('mousemove', (e) => {
    const mouseX = e.clientX;
    const mouseY = e.clientY;

    cursor.style.transform = `translate(${mouseX}px, ${mouseY}px)`;
  });
</script>
HTML
  • mousemove 이벤트로 마우스 좌표(clientX, clientY)를 실시간 추적
  • translate()를 사용해 커서 요소 이동

고급 인터랙티브 효과 추가

자연스러운 딜레이 효과

requestAnimationFrame을 사용하면 부드러운 애니메이션을 구현할 수 있습니다.

let mouseX = 0;
let mouseY = 0;
let currentX = 0;
let currentY = 0;

document.addEventListener('mousemove', (e) => {
  mouseX = e.clientX;
  mouseY = e.clientY;
});

function animate() {
  currentX += (mouseX - currentX) * 0.1;
  currentY += (mouseY - currentY) * 0.1;
  cursor.style.transform = `translate(${currentX}px, ${currentY}px)`;
  requestAnimationFrame(animate);
}

animate();
JavaScript
  • (mouseX - currentX) * 0.1 → 부드러운 따라가기 효과
  • requestAnimationFrame() → 성능 최적화된 애니메이션 루프

클릭 시 확장 애니메이션

클릭할 때 시각적 반응을 추가해 인터랙션 강화

document.addEventListener('click', () => {
  cursor.style.transform += ' scale(1.5)';
  setTimeout(() => {
    cursor.style.transform = cursor.style.transform.replace(' scale(1.5)', '');
  }, 150);
});
JavaScript

클릭 시 커서가 확장되었다가 돌아오는 느낌을 추가해 사용자 피드백 제공

UX 향상 팁

UX 고려 사항설명
모바일 비활성화터치 기반 기기에서는 커서 효과가 필요 없음
마우스 이벤트 제한드래그나 폼 입력 시 커서 숨김 처리
접근성(A11y)시각적 효과만 제공, 키보드 사용자는 영향 없도록
성능 최적화requestAnimationFrame 사용으로 CPU 부하 최소화

마무리

마우스 트래킹 효과는 단순히 눈길을 끄는 요소가 아니라 사용자 행동에 대한 즉각적인 피드백을 제공하는 강력한 인터랙션 도구입니다.
이번 글에서 소개한 기본 예제를 바탕으로, 브랜드 아이덴티티를 반영한 디자인과 결합하면 웹사이트의 완성도와 사용자 만족도를 높일 수 있습니다.

Summary in English

Learn how to create smooth, interactive mouse-follow effects using JavaScript. Enhance your website’s user experience with real-time tracking and responsive animations.

“이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.”

대표 사진: Unsplash의Mohammad Rahmani

위로 스크롤