SVG 클리핑 & 마스킹: clipPath와 mask를 이용한 이미지 비정형 크롭 기술

비트맵 이미지를 원형이나 단순 모서리가 둥근 사각형으로 오려내는 것은 CSS의 `border-radius`만으로 손쉽게 처리됩니다. 그러나 물방울이나 로고 실루엣 등 복잡하고 유기적인 비정형의 모습으로 칼처럼 도려내거나, 안개가 걷히듯 부드럽게 그라데이션으로 지워내려면 SVG의 clipPath(클리핑 패스)와 mask(마스크) 기술이 유일한 해답입니다.

1. clipPath: 경계를 칼같이 오려내는 이진법 자르기

도형의 내부 영역(1)과 바깥 영역(0)을 픽셀 단위로 완벽하게 구분하여 경계를 잘라냅니다.

<svg width="0" height="0">
  <defs>
    <clipPath id="circle-clip">
      <circle cx="100" cy="100" r="80" />
    </clipPath>
  </defs>
</svg>

<!-- 이미지 노드에 클리핑 매핑 -->
<image href="photo.jpg" width="200" height="200" clip-path="url(#circle-clip)" />

2. mask: 휘도(Luminance)와 투명도로 부드럽게 지워내기

클리핑과 달리 마스크는 하얀색 노출(100% 보임), 검은색 차단(100% 숨김), 그리고 회색 반투명(그라디언트)에 대응하여 부드러운 전환 효과를 구현합니다.

<defs>
  <mask id="fade-mask">
    <!-- 하얀색에서 검은색으로 가는 마스킹 그라디언트 생성 -->
    <rect width="200" height="200" fill="url(#grad)" />
  </mask>
</defs>

"SVG 클리핑과 마스킹을 제어하면 포토샵으로 미리 누끼를 딴 PNG 이미지를 여러 장 준비할 필요 없이, 서버 자원을 전혀 쓰지 않는 모던 반응형 카드 크롭 효과를 만들 수 있습니다."

3. 텍스트 마스크(Text Masking)와 인터랙션 조합

SVG의 `<text>` 태그를 `clipPath`에 적용하면 화려한 배경 비디오나 우주 은하수 이미지가 텍스트 글자 모양 안에서만 찰랑거리며 렌더링되는 시각적 걸작을 손쉽게 완성할 수 있습니다.

4. 요약: 최종 비주얼을 정돈하라

단순 크로핑을 넘어 이미지와 텍스트의 투명 마스킹을 활용해 사이트 방문자들에게 강력한 첫인상을 선사하는 고해상도 히어로 영역을 디자인해 보십시오.