HTML 그래픽 – Clipping & Masking

SVG 클리핑과 마스킹

SVG 그래픽에서 클리핑(Clipping)과 마스킹(Masking)은 요소의 일부분만 보이도록 제어하는 강력한 기능이다. 이 두 기능을 활용하면 복잡한 시각적 효과를 만들 수 있다.

SVG 클리핑 패스

클리핑 패스(Clipping Path)는 요소의 특정 부분만 보이도록 하는 영역을 정의한다. 클리핑 패스로 정의된 영역 내부는 표시되고, 외부는 숨겨진다. 이는 마치 종이에 구멍을 뚫어 그 아래의 내용만 볼 수 있게 하는 것과 유사하다.

clipPath 요소

SVG에서 클리핑 패스는 clipPath 요소를 사용하여 정의한다. 이 요소는 다른 요소의 표시 영역을 제한하는 경로나 기본 도형을 포함할 수 있다.

다음 예제에서는 원형 클리핑 패스를 사용하여 사각형의 일부만 표시한다.

<svg height="200" width="300">

  <defs>

    <clipPath id="circleClip">

      <circle cx="100" cy="100" r="80" />

    </clipPath>

  </defs>

  <rect x="10" y="10" width="200" height="180" fill="orange" clip-path="url(#circleClip)" />

</svg>

• defs 섹션에서 clipPath 요소를 사용하여 원형 클리핑 패스를 정의한다.
• 클리핑 패스에 고유한 ID(circleClip)를 할당한다.
• 사각형에 clip-path 속성을 적용하여 클리핑 패스를 참조한다.
• 결과적으로 원형 영역 내부의 사각형 부분만 표시된다.

복잡한 클리핑 패스

클리핑 패스는 단순한 원형뿐만 아니라 복잡한 도형이나 경로로도 만들 수 있다. 다음은 다각형을 클리핑 패스로 사용하는 예제이다.

<svg height="200" width="300">

  <defs>

    <clipPath id="starClip">

      <polygon points="100,10 40,180 190,60 10,60 160,180" />

    </clipPath>

  </defs>

  <image href="landscape.jpg" width="200" height="180" clip-path="url(#starClip)" />

</svg>

이 예제에서는 별 모양의 다각형을 클리핑 패스로 사용하여 이미지의 특정 부분만 표시한다.

SVG 마스킹

마스킹은 클리핑과 유사하지만 더 다양한 효과를 제공한다. 마스크는 요소의 투명도를 조절하여 아래 요소가 얼마나 보일지 결정한다. 흰색 영역은 완전히 보이고, 검은색 영역은 완전히 투명해지며, 회색 영역은 부분적으로 투명해진다.

mask 요소

SVG에서 마스크는 mask 요소를 사용하여 정의한다. 마스크는 색상과 불투명도를 조합하여 복잡한 투명도 효과를 만들 수 있다.

기본적인 마스크 예제를 살펴보자.

<svg height="200" width="300">

  <defs>

    <mask id="gradientMask">

      <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">

        <stop offset="0%" stop-color="white" stop-opacity="0" />

        <stop offset="100%" stop-color="white" stop-opacity="1" />

      </linearGradient>

      <rect x="0" y="0" width="200" height="200" fill="url(#gradient)" />

    </mask>

  </defs>

  <rect x="10" y="10" width="200" height="180" fill="blue" mask="url(#gradientMask)" />

</svg>

• mask 요소 내에 선형 그라데이션을 정의한다.
• 그라데이션은 왼쪽(투명)에서 오른쪽(불투명)으로 진행된다.
• 마스크를 사각형에 적용하면 왼쪽은 보이지 않고 오른쪽으로 갈수록 점점 더 불투명해진다.

마스크와 이미지

마스크는 이미지나 텍스트에도 적용할 수 있어 흥미로운 효과를 만들 수 있다.

<svg height="200" width="300">

  <defs>

    <mask id="textMask">

      <text x="10" y="100" font-family="Arial" font-size="80" fill="white">SVG</text>

    </mask>

  </defs>

  <image href="pattern.jpg" width="300" height="200" mask="url(#textMask)" />

</svg>

이 예제에서는 “SVG” 텍스트 모양으로 마스크를 만들어 이미지에 적용했다. 결과적으로 텍스트 모양의 영역 내부에만 이미지가 표시된다.

💡 클리핑과 마스킹의 차이점:
• 클리핑 패스는 영역을 완전히 표시하거나 숨기는 이진적 작업이다.
• 마스크는 투명도를 조절할 수 있어 더 다양한 효과를 제공한다.
• 클리핑 패스는 계산 비용이 적어 성능이 더 좋다.
• 마스킹은 그라데이션이나 복잡한 투명도 효과에 적합하다.

클리핑과 마스킹의 활용

클리핑과 마스킹 기능은 SVG에서 다양한 방식으로 활용될 수 있다.

성능 고려사항

복잡한 클리핑 패스와 마스크는 브라우저 렌더링 성능에 영향을 미칠 수 있다. 특히 애니메이션과 결합할 때 성능 이슈가 발생할 수 있으므로, 필요한 경우에만 사용하고 가능한 단순하게 유지하는 것이 좋다.

💡 최적화 팁:
• 복잡한 패스보다 단순한 기하학적 모양을 사용한다.
• 마스크 내부에 복잡한 그래픽 효과를 최소화한다.
• 자주 변경되지 않는 요소에는 렌더링된 이미지를 캐시하는 것이 좋다.

브라우저 호환성

SVG 클리핑과 마스킹은 대부분의 현대 브라우저에서 지원된다. 그러나 일부 오래된 브라우저나 모바일 기기에서는 제한된 지원을 제공한다. 중요한 디자인 요소에 이러한 기능을 사용할 때는 적절한 대체 방법을 제공하는 것이 좋다.

SVG의 클리핑과 마스킹을 활용하면 웹 그래픽에 창의적이고 다이나믹한 효과를 추가할 수 있다. 이 강력한 기능을 마스터하면 웹 디자인의 표현 가능성이 크게 확장된다.