[Clip Path] 다각형 마스킹과 Hover 모핑

한 줄 요약

clip-path의 polygon·circle·inset으로 요소를 도형으로 잘라내고 hover 시 부드럽게 모핑하는 순수 CSS 마스킹 — 이미지 자산 0.

이럴 때 필요해요

clip-path는 SVG 마스크급 효과를 CSS만으로, 별도 이미지 없이 낼 수 있는 강력한 도구다. 하지만 매번 polygon 좌표를 계산하느라 시간이 새고, hover 모핑이 안 부드러우면 영문도 모른 채 망가진다. 자주 쓰는 도형 4종 + 모핑 3종을 모아두면 다음 작업 때 복붙 출발점이 된다.

어떻게 동작하나

1. 정적 도형 4종 — hexagon·diamond·arrow·ticket(반원 노치). polygon 좌표를 % 단위로 잡아 어떤 크기에도 적용된다.
2. Hover 모핑 — top-left cut ↔ bottom-right cut. 두 polygon의 vertex 개수가 같아야(5개) transition이 부드럽다.
3. Image reveal — inset(0 100% 0 0) → inset(0 0 0 0). 오른쪽 끝까지 잘라 완전히 가린 상태에서 0으로 풀어 좌우 슬라이드.
4. Spotlight — circle(22% at 50% 50%) → circle(75%). 반지름만 키우는 단순 트릭.

놓치기 쉬운 것

• polygon() 사이 transition은 vertex 개수가 같아야 보간된다 — 다르면 즉시 점프. 모핑 의도라면 처음부터 개수를 맞춰 설계.
• vertex는 선언 순서대로 1:1 보간 — 의미상 같은 위치의 점을 같은 index에 둬야 자연스럽고, 순서가 엉키면 뒤집힌 모핑.
• clip-path로 잘린 영역은 클릭 이벤트도 무시 — 버튼·링크에 적용 시 hit area가 줄어든다.
• 접근성: 시각적으로 가려져도 스크린리더엔 그대로 읽힌다. 의도적으로 가려야 하면 aria-hidden 병행.

이런 곳에 써요

• 항공권·티켓 카드 (반원 노치 ticket shape)
• "더 보기" hover 시 콘텐츠가 wipe로 드러나는 카드
• 헤더의 비대칭 wave/cut 디자인
• 다크 hero에서 spotlight으로 강조되는 CTA 영역