웹사이트에서 마우스 커서가 돋보기처럼 작동하여 특정 영역을 확대해 보여주는 기능

웹사이트에서 마우스 커서가 돋보기처럼 작동하여 특정 영역을 확대해 보여주는 기능은 주로 **HTML, CSS, 그리고 JavaScript(JS)**를 조합하여 구현합니다.

단순히 커서 모양만 바꾸는 것이 아니라, 커서 위치에 따라 원본 이미지의 좌표를 계산해 보여주는 원리입니다. 대표적인 구현 방식 2가지를 소개해 드릴게요.

---

1. 배경 이미지 이동 방식 (가장 일반적)

돋보기 역할을 할 div 요소를 하나 만들고, 그 안에 원본 이미지를 배경(background-image)으로 넣은 뒤 마우스 위치에 따라 배경의 위치를 옮기는 방식입니다.

• 원리:
  1. 사용자가 이미지 위에서 마우스를 움직입니다.
  2. JS가 마우스의 좌표($x$, $y$)를 실시간으로 계산합니다.
  3. 돋보기 원 안의 배경 이미지 위치(background-position)를 마우스 좌표에 맞춰 반대 방향으로 이동시킵니다.
• 장점: 구현이 상대적으로 쉽고 성능이 매끄럽습니다.

2. Canvas(캔버스) 활용 방식

HTML5의 <canvas> 태그를 사용하여 이미지를 픽셀 단위로 복사하고 확대하여 그리는 방식입니다.

• 원리:
  1. 원본 이미지의 특정 영역 데이터를 가져옵니다.
  2. drawImage() 함수를 사용해 해당 영역을 더 큰 크기로 캔버스에 다시 그립니다.
• 장점: 돋보기 안에 필터(흑백, 반전 등)를 넣거나 특수한 시각 효과를 주기에 유리합니다.

---

핵심 코드 로직 (JavaScript 기준)

이 기능을 직접 구현할 때 가장 중요한 수학적 원리는 비율 계산입니다.

$$확대된\_좌표 = 마우스\_위치 \times 확대\_배율$$

예를 들어, 2배 확대 돋보기를 만든다면 마우스가 오른쪽으로 10px 이동할 때, 돋보기 안의 배경 이미지는 왼쪽으로 20px 이동해야 사용자가 느끼기에 자연스러운 확대 효과가 납니다.

주요 CSS 속성

• cursor: none;: 기본 마우스 커서를 숨기고 돋보기 UI가 커서 역할을 하게 합니다.
• border-radius: 50%;: 돋보기를 동그란 모양으로 만듭니다.
• pointer-events: none;: 돋보기 요소가 마우스 이벤트를 가로막지 않도록 하여, 그 아래에 있는 이미지의 좌표를 정확히 읽을 수 있게 합니다.

---

마우스 커서가 웹사이트의 특정 이미지나 텍스트 위에 올라갔을 때, 마치 실제 돋보기를 들이댄 것처럼 해당 부분만 크게 확대해서 보여주는 도구들은 크게 브라우저 확장 프로그램과 개발자용 라이브러리로 나뉩니다.

사용자님의 목적에 따라 가장 적합한 도구를 선택해 보세요.

---

1. 일반 사용자용: 브라우저 확장 프로그램

웹서핑을 하다가 글자가 너무 작거나 이미지 상세 컷을 보고 싶을 때 설치해서 바로 쓰는 도구입니다.

도구 이름	특징	바로가기 (크롬 웹스토어)
Magnifying Glass	마우스 커서 주변을 원형 돋보기로 확대해 줍니다. 확대 배율과 돋보기 크기 조절이 가능합니다.	설치하기
Hover Zoom+	마우스를 이미지 위에 올리기만 하면, 클릭하지 않아도 원본 크기의 고해상도 이미지를 팝업으로 보여줍니다.	설치하기

2. 웹사이트 제작자용: JS 라이브러리

본인의 웹사이트나 쇼핑몰에 이 기능을 넣고 싶을 때 사용하는 도구입니다. 직접 코딩하는 것보다 훨씬 고퀄리티의 효과를 낼 수 있습니다.

• 인기 도구:
  • 이미지 줌 (Image Zoom): 쇼핑몰 상세 페이지에서 가장 많이 쓰이는 방식입니다. 마우스를 올리면 옆에 큰 화면이 나오거나 이미지 안에서 돋보기 효과가 나타납니다.
  • Magic Zoom Plus: 가장 유명한 유료 라이브러리로, 반응형 웹과 모바일 터치까지 완벽하게 지원합니다.
  • ElevateZoom Plus: 무료(오픈소스)이면서 렌즈 모양, 윈도우 모양 등 다양한 돋보기 스타일을 제공합니다.

3. 윈도우 자체 기능: 돋보기 (Windows Magnifier)

프로그램 설치 없이 윈도우의 기본 기능을 활용하는 방법입니다.

• 단축키: Win + + (더하기 키)
• 설정: 돋보기 설정에서 **'렌즈 모드'(Ctrl + Alt + L)**를 선택하면 마우스 커서를 따라다니는 사각형 돋보기가 활성화됩니다. 웹사이트뿐만 아니라 모든 프로그램 위에서 작동합니다.

---

💡 추천 가이드

• 단순히 웹쇼핑 중에 자세히 보고 싶다면? 크롬 확장 프로그램인 **Hover Zoom+**를 추천합니다.
• 강의나 발표 중에 화면 일부를 강조하고 싶다면? 윈도우 기본 기능인 **돋보기(렌즈 모드)**가 가장 빠르고 확실합니다.
• 본인의 홈페이지에 이 기능을 넣고 싶다면? ElevateZoom 같은 라이브러리를 적용해 보세요.