SVG clipPath와 mask: 선명한 경계와 부드러운 전환 선택하기

이미지가 정해진 윤곽선에서 멈춰야 하면 SVG <clipPath>를 사용하세요. 부분 투명도로 서서히 사라져야 하면 SVG <mask>를 쓰세요. 마스크도 확실하게 자를 수 있지만 선명한 기하 경계에는 클리핑 경로가 더 간단한 의도를 표현합니다. CSS Masking 명세는 별도의 가시성 연산으로 정의합니다.

로고 모양 이미지를 다른 편집기로 보낼 때 선택이 중요합니다. 둘 다 보이는 것을 제어하며 숨긴 픽셀을 삭제된 도형으로 만들거나 이미지를 벡터 경로로 변환하지 않습니다. 가이드는 직접 만든 래스터 장면 하나와 윤곽선 하나를 사용하고 가시성 규칙만 바꿉니다. 내보내기 전에 자신의 그림에 같은 테스트를 적용할 수 있습니다.

필요한 경계에 맞춰 선택하기

클립의 보이는 경계에도 일반 렌더링 안티앨리어싱은 있을 수 있습니다. 하지만 클리핑 도형 안의 회색조·불투명도 그라디언트로 의도한 부분 표시 띠를 표현할 수는 없습니다. MDN 클리핑과 마스킹 튜토리얼은 작은 SVG 예제로 차이를 설명합니다.

세 가시성 규칙으로 이미지 하나 비교하기

테스트를 위해 작은 풍경을 그려 400 × 240 PNG로 래스터화하고 모든 패널에서 같은 잎 모양 윤곽선 아래 같은 픽셀을 배치했습니다. 왼쪽은 윤곽선으로 클리핑합니다. 가운데는 흰색·검정 휘도 마스크, 오른쪽은 불투명·투명 알파 마스크입니다. 두 그라디언트는 왼쪽에서 오른쪽으로 같은 페이드 효과를 만들도록 선택했습니다. 각 결과를 밝은·어두운 배경에 표시해 사라지는 가장자리 판단을 쉽게 합니다.

두 마스크 열이 비슷한 이유가 있습니다. 흰색·검정 휘도 그라디언트와 흰색 불투명도 그라디언트가 비슷한 마스크 값을 표현합니다. 입력 자체는 교환 가능하지 않습니다. 불투명 검정은 휘도 마스킹에서는 숨기지만 알파 마스킹에서는 계속 보입니다. 알파 모드에서는 픽셀 불투명도가 결과를 결정하고 검정·흰색은 무관합니다. CSS Masking 마스크 처리 정의는 두 계산을 명시합니다.

윤곽선 하나로 클립·마스크 만들기

다음을 clip-or-mask.svg로 저장하고 자신의 photo.png를 옆에 둔 뒤 같은 폴더에서 HTTP로 두 파일을 제공하세요. 두 이미지는 400 × 240 좌표계 하나를 사용합니다. clip-path와 mask만 다릅니다.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 840 280">
  <defs>
    <path id="motif"
      d="M30 175 C65 82 140 28 232 41 C290 44 304 75 374 39
         C361 122 310 196 236 219 C139 246 75 217 30 175 Z" />
 
    <clipPath id="hard" clipPathUnits="userSpaceOnUse">
      <use href="#motif" />
    </clipPath>
 
    <linearGradient id="fade" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0" stop-color="white" stop-opacity="1" />
      <stop offset=".45" stop-color="white" stop-opacity="1" />
      <stop offset="1" stop-color="white" stop-opacity="0" />
    </linearGradient>
    <mask id="soft" mask-type="alpha" maskUnits="userSpaceOnUse"
      maskContentUnits="userSpaceOnUse" x="0" y="0" width="400" height="240">
      <use href="#motif" fill="url(#fade)" />
    </mask>
  </defs>
 
  <g transform="translate(20 20)">
    <image href="photo.png" width="400" height="240"
      clip-path="url(#hard)" />
  </g>
  <g transform="translate(440 20)">
    <image href="photo.png" width="400" height="240"
      mask="url(#soft)" />
  </g>
</svg>

참조 ID는 SVG 내부에서 고유해야 합니다. 클립·마스크 모두 userSpaceOnUse를 써 모티프 좌표가 각 이미지의 로컬 400 × 240 영역에 맞습니다. MDN <clipPath> 참고 문서는 대상의 고유 도형을 바꾸지 않고 칠해지는 영역을 제한한다고 설명합니다. MDN <mask> 참고 문서는 영역 위치를 정하는 maskUnits와 그림 위치를 정하는 maskContentUnits를 구분합니다.

휘도를 시도하려면 마스크를 다른 ID로 복제하고 mask-type="luminance"로 설정한 뒤 그라디언트를 시작의 불투명 흰색과 끝의 불투명 검정으로 바꾸세요. 새 ID와 mask 참조를 맞추세요. SVG <mask>의 기본은 휘도입니다. 예제는 이후 편집에서 검정 의미가 조용히 바뀌지 않도록 모드를 명시합니다. MDN mask-type 참고 문서를 참고하세요.

내보내기 전에 결과 확인하기

1. 옅은 배경과 어두운 배경에서 SVG를 렌더링하세요. 흰색에서 안 보이는 전환이 어두운 배경에서는 명확할 수 있습니다.
2. 이미지와 모티프의 좌표가 같은지 확인하세요. 이미지만 크기를 조절하면 윤곽선이 어긋날 수 있습니다. 다른 크기의 대상에 재사용할 클립은 clipPath 단위 가이드가 좌표 선택을 설명합니다.
3. 부드러운 가장자리가 갑자기 끝나면 그라디언트뿐 아니라 마스크의 x, y, width, height를 확인하세요. 마스크 영역은 밖의 그림을 자를 수 있어 그라디언트만 넓혀도 좁은 영역은 고쳐지지 않습니다. MDN은 마스크 영역 기본값을 나열하지만 전달물에는 명시적 경계가 검토하기 쉽습니다.
4. 실제 사용할 앱에서 저장 SVG를 다시 여세요. 올바른 브라우저 렌더링이 다른 가져오기 도구의 클립, 마스크, 링크 이미지나 편집 가능성 보존을 입증하지는 않습니다.
5. 파일 구조를 검사하세요. <image>가 남아 있으면 클리핑 윤곽선이 벡터여도 래스터 픽셀이 있습니다. 삽입 래스터 검사는 구분 방법을 보여 줍니다.

예제 이미지는 PNG로 남습니다. 클리핑·마스킹은 추적하지 않습니다. 실제 절단 도형이나 영구 투명 구멍이 필요하면 편집기에서 해당 경로를 만들고 내보내기를 검사하세요. 채워진 구멍 문제 가이드는 실제 구멍과 흰 캔버스에서만 빈 것처럼 보이는 흰 패치를 구분하는 데 도움이 됩니다.

PerfectVector의 역할

필요한 윤곽선이 PNG나 JPG 로고에만 남았다면 PerfectVector의 이미지 벡터 작업 흐름으로 편집 가능한 SVG 후보를 얻을 수 있습니다. <clipPath>나 <mask>에 윤곽선을 복사하기 전에 바깥 경로, 작은 틈과 원하지 않는 배경 도형을 확인하세요. 여전히 가시성 방식을 선택하고 SVG 편집기에서 효과를 구성해야 합니다. 깔끔한 벡터 원본이 있으면 유지하세요.

사진을 마스크 뒤에 넣으려고 벡터화할 필요는 없습니다. 세부 보존이 중요하면 사진 픽셀을 이미지로 남기세요. SVG 내부 이미지 대신 CSS가 제어하는 단색 아이콘은 SVG CSS 마스크 가이드가 별도 작업 흐름을 다룹니다.

FAQ

SVG clipPath가 점진적 전환을 만들 수 있나요? 아닙니다. 클리핑 경로는 경계의 일반 안티앨리어싱 외에 대상의 어느 부분이 보이는지 정의합니다. 의도한 전환에는 중간 불투명도·휘도 값의 마스크를 쓰세요.

모든 SVG 마스크에서 검정이 이미지를 숨기나요? 아닙니다. 불투명 검정은 휘도 마스킹에서는 숨기지만 알파 마스킹에서는 여전히 불투명해 드러냅니다. 완전 투명 그림은 두 모드 모두 숨깁니다.

클리핑·마스킹이 PNG를 벡터 그림으로 바꾸나요? 아닙니다. 둘 다 렌더링 시 가시성을 바꿉니다. SVG에는 래스터 <image>가 남을 수 있으며 벡터 전용 전달물에는 별도 추적·경로 편집이 필요할 수 있습니다.

Sources

1. W3C — CSS Masking Module Level 1 — 클리핑, 마스킹과 알파·휘도 마스크 값을 정의합니다.
2. MDN — 클리핑과 마스킹 — 선명한 클리핑과 부드러운 마스크 예제입니다.
3. MDN — <clipPath> — 클립 동작, 좌표 선택과 유지되는 원래 도형을 설명합니다.
4. MDN — <mask> — 마스크 영역, 콘텐츠 좌표계와 참조 동작을 설명합니다.
5. MDN — mask-type — SVG 마스크 그림의 알파·휘도 해석을 설명합니다.

래스터 로고에 먼저 편집 가능한 윤곽선이 필요하면 PerfectVector로 SVG 후보를 만들고 복원 경로를 확인하세요. 클립·마스크를 적용하고 대상에서 내보낸 파일을 다시 여세요.