이미지 비교 슬라이더 구현 (Before / After)

두 개의 이미지를 겹쳐 놓고, 슬라이더(막대)를 X축 방향으로 이동시켜가며 전후 이미지를 비교할 수 있도록 구현했다. 중심 아이디어는 다음과 같다.

 

1. 두 이미지를 같은 위치에 겹쳐 놓는다.
2. 슬라이더 막대(ref 부여)를 마우스로 드래그할 수 있게 만든다.
3. 이미지를 clip 속성으로 잘라서, 슬라이더 기준으로 보여질 영역을 조정한다.

 

 

---

이미지 2개 겹치기

<div className="crop1">
  <img src="WhiteImage" />
</div>

<div className="line">
  <span className="circle"><-></span>
</div>

<div className="crop2">
  <img src="GrayImage" />
</div>

두 개의 이미지를 position: absolute로 완전히 겹치게 만들고, 슬라이더 막대는 중앙에 배치한다.

---

막대 드래그 로직

• ref로 막대 DOM에 접근
• 마우스 이벤트로 position.x 좌표값 변경
• transform: translateX를 통해 실시간 이동

const onMouseMove = useCallback((event) => {
  if (pressed) {
    setPosition({ x: position.x + event.movementX });
  }
}, [position.x, pressed]);

useEffect(() => {
  if (ref.current) {
    ref.current.style.transform = `translate(${position.x}px, 0px)`;
  }
  handleResize(); // clip 좌표 재계산
}, [position]);

---

clip으로 이미지 잘라 보여주기

슬라이더 위치를 기준으로 이미지의 보이는 영역을 동적으로 설정하기 위해 clip 속성을 사용했다.

.crop1 {
  clip: rect(0, 전체너비, 전체높이, 막대X);
}
.crop2 {
  clip: rect(0, 막대X, 전체높이, 0);
}

즉, crop1은 막대 오른쪽을 잘라서 왼쪽만 보이게 하고, crop2는 반대로 왼쪽을 잘라 오른쪽만 보이게 처리했다.

---

반응형 대응: resize 시 위치 재계산

윈도우 사이즈가 바뀌면 clip 기준값도 달라지기 때문에, resize 이벤트로 레이어와 막대의 위치를 다시 계산했다.

useEffect(() => {
  window.addEventListener("resize", handleResize);
  return () => {
    window.removeEventListener("resize", handleResize);
  };
});

---

전체 흐름 요약

1. 이미지 두 개를 겹친다.
2. 슬라이더를 드래그해서 X축 위치를 변경한다.
3. clip 속성을 이용해서 양쪽 이미지를 슬라이더 위치 기준으로 보여준다.
4. 반응형 대응을 위해 resize 이벤트 처리도 추가했다.

---