mask, clipPath, marker

이번에는 SVG의 조금 고급 기능인 mask, clipPath, marker를 봅니다.

이 셋은 편집기에서 프레임 clipping, 이미지 마스크, 화살표 connector 같은 기능으로 이어집니다. 이름은 각각 다르지만 공통점이 있습니다. 원본 그래픽을 그대로 보여주지 않고, 어떤 규칙으로 보이게 만들거나 장식을 붙입니다.

clipPath는 geometry로 자른다

clip result = source inside clip geometry

clipPath는 특정 도형 안쪽만 보이게 합니다. frame이나 crop 기능에 잘 대응됩니다. 경계는 geometry 기준이라 비교적 단호합니다.

mask는 alpha로 가린다

mask는 도형의 안팎만 보는 것이 아니라 alpha나 luminance를 이용해 부분적으로 가립니다.

mask result alpha = source alpha * mask luminance/alpha

그래서 부드러운 fade, texture, soft reveal 같은 효과에 더 가깝습니다. clipPath가 가위라면 mask는 투명도 필터에 가깝습니다.

marker는 path 끝 장식이다

화살표 connector를 만들 때 marker가 유용합니다.

marker position follows path endpoint tangent

path의 끝점과 tangent 방향을 따라 marker가 배치됩니다. 선 끝에 화살표가 자연스럽게 붙는 이유가 여기 있습니다.

편집기에서 쓰는 방식

프레임 clipping은 clipPath나 CSS overflow: hidden으로 만들 수 있습니다. 이미지 마스크는 SVG mask를 쓰면 부드러운 alpha 효과를 표현하기 좋습니다. connector arrowhead는 marker가 잘 맞습니다.

복잡한 vector effect가 DOM/CSS만으로 버거워지면 SVG element나 SVG overlay로 분리하는 편이 낫습니다. CSS가 잘하는 일과 SVG가 잘하는 일을 나누면 구현이 덜 억지스러워집니다.

데모에서 볼 것

데모에서는 clipPath와 mask를 같은 모양으로 적용했을 때 edge 처리와 alpha 결과가 어떻게 다른지 비교합니다.

오늘의 핵심은 clipping과 masking을 구분하는 것입니다. 하나는 geometry로 자르고, 하나는 alpha로 가립니다. 비슷해 보여도 편집 모델에서는 다른 기능입니다.