이미지 위 커서/터치 지점을 확대 렌즈로 크게 보여주는 hover 줌.
포인터 좌표를 이미지 기준으로 변환해, 같은 이미지를 배율만큼 키운 배경의 background-position을 이동시켜 그 영역만 렌즈에 확대합니다.
상품 상세지도도면처럼 원본은 작게, 디테일은 크게 봐야 할 때. 별도 라이브러리 없이 구현됩니다.
onPointerMove에서 커서를 이미지 내부로 클램프한 좌표만 state로 둡니다.
렌즈 배경 background-size = 이미지배율, position = -(좌표배율 - 렌즈 반지름)으로 커서 지점이 렌즈 중앙에 오게 합니다.
배율렌즈 크기원/사각은 컨트롤로 조절.
좌표 클램프를 안 하면 가장자리에서 빈 영역이 보입니다.
touch-none으로 터치 스크롤을 막아야 모바일에서 렌즈가 따라옵니다.
잔글씨 같은 고해상 디테일이 있어야 줌 효과가 드러납니다(데모는 자체 SVG 사용).
쇼핑몰 상품 이미지 확대
도면/사진 디테일 뷰어
import type { Metadata } from "next";
import { ImageMagnifierDemo } from "./-components/ImageMagnifierDemo";
export const metadata: Metadata = {
title: "이미지 돋보기 (렌즈 줌) (데모)",
description:
"마우스/터치 위치에 확대 렌즈가 따라다니며 이미지의 해당 부분을 크게 보여주는 hover 돋보기. background-size·position 계산으로 리렌더 최소화, 줌 배율·렌즈 크기·모양 조절.",
robots: { index: false, follow: false },
};
export default function Page() {
return (
<main className="flex min-h-[100dvh] items-center justify-center bg-gradient-to-br from-slate-50 via-white to-sky-50/40">
<ImageMagnifierDemo />
</main>
);
}