[javascript] 자바스크립트 마우스 커서 모양 변경

참고: https://www.freecodecamp.org/news/how-to-make-a-custom-mouse-cursor-with-css-and-javascript/

어떤 웹 사이트를 방문했는데 익숙한 화살표 모양의 마우스 커서가 아니라 멋진 커서가 표시되어 놀란적이 있습니까? 이는 실제 사용자의 경험을 향상시킬 수 있습니다. 이 포스트에서는 CSS와 JavaScript를 통하여 마우스 커서의 모양을 바꾸는 방법을 알아보겠습니다.

CSS로 마우스 커서 커스터마이징

CSS를 사용하여 마우스 커서를 커스터마이징하는 것은 상당히 간단합니다. 왜냐하면 CSS에는 이미 이 작업을 하는 속성이 있기 때문입니다. 여기서 해야할 일은 각각의 속성이 어떤 기능이 있는지 확인하는 것 입니다.

프론트엔드 개발자라면 cursor 속성을 본 적 있을 것 입니다. 이는 커스텀 커서를 사용할 수 있게 해줍니다.

실제 예제로 넘어가기 전에 CSS cursor 속성에 관련된 값을 알아보겠습니다. 대부분의 개발자는 속성의 일부분만 사용하지만 여기서는 모든 나머지 부분을 알아보겠습니다.

See the Pen CSS cursor by shinyks (@shinyks) on CodePen.

 

위의 codepen에서 각 CSS cursor 속성 값이 쓰여있는 박스에 커서를 가져가면 해당 CSS 속성이 가지고 있는 다양한 마우스 커서를 확인할 수 있습니다.

이제 CSS를 사용하여 마우스 커서를 커스터마이징하는 방법을 알아보겠습니다. 마우스 커서를 커스터마이징 하려면 cursor 속성에 이미지의 URL을 url() 값을 통해 할당하면 됩니다.

body {
  cursor: url('image-path.png'),auto;
}

위의 코드에서 보다시피 body의 cursor 속성을 변경했습니다. 이는 마우스 커서를 브라우저 화면 어디로든 이동해도 지정된 이미지가 커서로 표시됩니다.

위 cursor 속성의 두 번째 값은 오류로 인해 첫 번째 이미지를 로드하지 못한 경우를 대비한 fallback 입니다. 오류로 인해 웹 사이트에 커서가 없는 상태가 되는 것을 원하지는 않을 것 입니다. 따라서 fallback을 추가하는 것은 매우 중요합니다. 대체 URL은 원하는 만큼 추가할 수도 있습니다.

body {
  cursor: url('image-path.png'),
          url('image-path-2.svg), 
          url('image-path-3.jpeg'),
          auto;
}

See the Pen CSS custom cursor by shinyks (@shinyks) on CodePen.

JavaScript로 마우스 커서 커스터마이징

자바스크립트로 위와 같은 일을 하려면 DOM을 조작해야 합니다. 먼저 HTML을 보겠습니다:

<div class="cursor rounded"></div>
<div class="cursor pointed"><div>

위의 코드에서 커서를 표현하기 위해 두 개의 div를 만들었습니다. JavaScript의 mousemove 이벤트를 통해 웹 페이지 위의 마우스 좌표 x, y를 사용하여 div를 조작할 것 입니다.

이제 CSS 부분을 보겠습니다:

body{
  background-color: #1D1E22;
  cursor: none;
}

.rounded{
  width: 30px;
  height: 30px;
  border: 2px solid #fff;
  border-radius: 50%;
}

.pointed{
  width: 7px;
  height: 7px;
  background-color: white;
  border-radius: 50%;
}

위의 CSS 코드에서는 cursor 속성의 값을 none으로 하여 기본 커서를 안보이게 한 다음 커스텀 div 커서를 화면에 표시할 것 입니다. 여기서 div를 커서 처럼 보이게 스타일을 줍니다. 상황에 따라 배경 색을 추가하거나 이모지를 쓰는 등 스타일을 더 넣을 수도 있습니다.

다음은 JavaScript 코드 입니다:

const cursorRounded = document.querySelector('.rounded');
const cursorPointed = document.querySelector('.pointed');


const moveCursor = (e) => {
  const mouseY = e.clientY;
  const mouseX = e.clientX;
   
  cursorRounded.style.transform = `translate3d(${mouseX}px, ${mouseY}px, 0)`;
  
  cursorPointed.style.transform = `translate3d(${mouseX}px, ${mouseY}px, 0)`;
 
}

window.addEventListener('mousemove', moveCursor);

마우스 움직임을 알아내기 위해 window 객체에 이벤트 리스너를 추가했습니다. 마우스가 움직이면 moveCursor() 함수가 호출되고 이 함수의 매개변수로 이벤트 객체 e를 넘깁니다. 이 이벤트 객체를 통해 마우스의 좌표가 몇 인지 알 수 있습니다.

이미 JavaScript의 querySelector()를 사용하여 DOM에서 커서로 사용할 div를 얻어놨습니다. 이 각각의 div에 translate3d 값으로 스타일의 transform 속성을 변경하도록 했습니다. 이렇게 하면 마우스가 웹 페이지의 어느 부분으로 이동하더라도 그 지점으로 커서 div를 이동시킬 수 있습니다.

See the Pen CSS javascript cursor by shinyks (@shinyks) on CodePen.

어떤 방법이 더 효과적인가?

이제 가장 적합한 방법을 선택하는 것은 개발자의 몫입니다. 예쁜 이모티콘이나 이미지를 커서로 사용하고 싶다면 CSS를 사용하면 됩니다. 반면 JavaScript를 사용하면 복잡한 모양을 커스터마이징 할 수 있고 커서의 움직임을 애니메이션화 할 수 있습니다.

원하는 결과를 얻을 수 있고 웹 사이트 방문자를 놀라게 할 수 있다면 어느 쪽이든 상관없습니다.

관련 글

자바스크립트 addEventListener 사용 방법

자바스크립트 querySelector 사용 방법