CSS clip-path를 적용하면 클릭 및 호버 영역도 잘리나요?

네, 잘립니다. 잘린 영역은 시각적으로만 사라지는 게 아니라 클릭과 호버 이벤트도 받지 않습니다. 시각적 클리핑만 적용하고 전체 영역에서 이벤트를 받으려면 JavaScript 처리나 pointer-events 조정이 필요합니다.

CSS clip-path 도형에 애니메이션을 적용하려면 어떻게 하나요?

같은 도형 함수를 사용하고 꼭짓점 수가 동일한 두 clip-path 값 사이에서는 CSS transition이나 animation으로 부드럽게 전환됩니다. 단, circle()에서 polygon()으로의 전환처럼 함수 자체가 다르면 보간이 되지 않고 바로 전환됩니다.

clip-path를 적용하면 box-shadow가 사라지는 이유가 뭔가요?

clip-path는 도형 경계 밖의 모든 것을 잘라내기 때문에, 요소 경계 바깥에 렌더링되는 box-shadow도 함께 잘립니다. 해결책은 filter: drop-shadow()를 사용하는 것입니다. 이 함수는 합성 이후에 그림자를 적용하기 때문에 실제 보이는 도형 윤곽을 따라갑니다.

반응형 디자인에서도 clip-path가 제대로 작동하나요?

퍼센트 기반 값을 사용하면 됩니다. 퍼센트는 요소 자체의 크기를 기준으로 계산되기 때문에 요소가 커지거나 작아져도 도형 비율이 유지됩니다. 고정 픽셀 값은 반응형으로 동작하지 않습니다.

모바일 브라우저에서 clip-path가 지원되나요?

최신 모바일 브라우저(iOS Safari 13.4 이상, Android Chrome)는 접두사 없이 기본 clip-path 함수를 지원합니다. 구형 iOS Safari에서는 -webkit- 접두사가 필요했으나, 현재 대부분의 실무 환경에서는 신경 쓰지 않아도 됩니다.

CSS Clip Path 생성기: 복잡한 도형을 쉽게 만드는 방법 (2026)

육각형 아바타를 처음 봤을 때

처음으로 멈춰서 "저거 어떻게 만든 거지?"라고 생각했던 게 게임 리더보드 사이트였습니다. 프로필 사진이 원형이 아니라 정육각형이었거든요. 당연히 PNG 마스크나 캔버스 같은 걸 쓴 줄 알았는데, 알고 보니 CSS 여섯 줄이 전부였습니다.

그게 clip-path를 처음 만난 순간이었고, 솔직히 그날 이후로 웹에서 도형을 다루는 방식 자체가 달라졌습니다. 그전까지는 도형이라고 하면 border-radius, SVG, 아니면 이미지 정도였는데 — 이제는 브라우저 자체가 가위가 됩니다.

우리가 여기까지 온 이야기

clip-path가 CSS 속성으로 자리 잡기 전에는 직사각형이 아닌 도형을 만들려면 꽤 복잡한 우회로가 필요했습니다. SVG clipPath 요소를 정의하고 CSS에서 참조하는 방식이 있었는데, 마크업 전혀 다른 위치에서 전혀 다른 문법으로 도형을 정의해야 했습니다. 아니면 overflow: hidden과 border-radius를 조합하는 방법이 있었는데, 이건 둥근 형태밖에 안 됐습니다.

CSS clip-path는 이 모든 걸 정리했습니다. SVG를 따로 끌어오지 않고 CSS에서 직접 도형을 정의하면 브라우저가 마스킹을 처리합니다. 예전 방식으로 날린 시간이 얼마인지 생각하면 조금 억울한 감도 있습니다.

도형 함수들, 하나씩 살펴보기

`polygon()` — 핵심이자 가장 많이 쓰는 함수

실무에서 가장 자주 쓰게 될 함수입니다. 도형의 꼭짓점을 좌표 쌍으로 나열하면 됩니다. 기본값은 요소의 너비와 높이에 대한 퍼센트입니다.

기본 삼각형:

.triangle {
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

세 점: 위 중앙, 왼쪽 아래, 오른쪽 아래. 이게 전부입니다.

대각선 섹션 구분에 자주 쓰는 평행사변형:

.parallelogram {
  clip-path: polygon(10% 0%, 100% 0%, 90% 100%, 0% 100%);
}

이 글을 쓰게 만든 그 육각형:

.hexagon {
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

꼭짓점이 많아질수록 좌표 나열이 길어집니다. 별 모양처럼 점이 10개 넘어가면 손으로 치는 게 의미 없어집니다. 시각적 생성기가 빛을 발하는 이유이기도 합니다.

5각별 예시:

.star {
  clip-path: polygon(
    50% 0%, 61% 35%, 98% 35%, 68% 57%,
    79% 91%, 50% 70%, 21% 91%, 32% 57%,
    2% 35%, 39% 35%
  );
}

이걸 손으로 계산하실 분은 없을 겁니다.

`circle()` — 단순하지만 유연성이 떨어짐

.avatar {
  clip-path: circle(50%);
}

반지름 50%인 원으로 요소를 클리핑합니다. border-radius: 50%와 시각적으로 비슷하지만 레이아웃에는 영향을 주지 않습니다. 중심점도 지정할 수 있습니다:

.off-center-circle {
  clip-path: circle(40% at 60% 50%);
}

솔직히 말하면, 단순히 원형 이미지를 만드는 용도라면 border-radius가 낫습니다. circle()은 다른 clip-path 효과와 조합하거나 애니메이션이 필요할 때 더 유용합니다.

`ellipse()` — 타원형

.ellipse-crop {
  clip-path: ellipse(60% 40% at 50% 50%);
}

첫 두 값이 수평·수직 반지름입니다. 타원형 이미지 크롭이나 렌즈 효과에 활용할 수 있는데, 개인적으로 자주 쓰지는 않습니다. 필요한 디자인에서는 유용합니다.

`inset()` — 생각보다 쓸 곳이 많은 함수

주목받지 못하는 함수인데 실제로는 꽤 유용합니다. 요소의 각 면에서 안쪽으로 잘라내는 직사각형 영역을 정의합니다. padding을 거꾸로 적용한다고 생각하면 됩니다:

.inset-crop {
  clip-path: inset(10px 20px 10px 20px);
  /* 위 오른쪽 아래 왼쪽 */
}

border-radius도 추가할 수 있습니다:

.rounded-inset {
  clip-path: inset(10% round 12px);
}

inset()이 특히 빛나는 경우는 카드 귀퉁이를 잘라낸 "노치" 효과입니다. 일반 CSS로는 구현하기 까다로운 디자인인데, inset()으로 하면 간단합니다.

실제로 쓰이는 패턴들

대각선 히어로 섹션

히어로 섹션 아래쪽 경계를 사선으로 처리하는 디자인이 많습니다. 이렇게 합니다:

.hero {
  clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
}

아래쪽 모서리를 사선으로 잘라내면 그 아래 콘텐츠가 자연스럽게 이어집니다. 예전에 transform: rotate()로 가상 요소를 돌리던 방식보다 훨씬 깔끔합니다.

육각형 사용자 아바타

.avatar-hex {
  width: 120px;
  height: 120px;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  object-fit: cover;
}

object-fit: cover는 필수입니다. 이게 없으면 클리핑 전에 이미지가 레터박스 처리됩니다.

사선 잘린 카드 귀퉁이

오른쪽 하단 귀퉁이를 사선으로 잘라낸 카드 — 미묘하지만 완성도 있어 보이는 디자인입니다:

.notched-card {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%);
}

반드시 알아야 할 두 가지 함정

함정 1: clip-path가 box-shadow를 잘라버림

처음 겪으면 당황스럽습니다. 카드에 그림자를 예쁘게 만들고, 대각선 커팅을 위해 clip-path를 적용했더니 그림자가 사라집니다. clip-path가 도형 경계 밖의 모든 것을 잘라내기 때문인데, box-shadow는 요소 경계 바깥에 렌더링되니 같이 잘립니다.

해결책은 filter: drop-shadow()입니다:

/* 그림자가 사라짐 */
.broken {
  clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

/* 올바르게 작동함 */
.fixed {
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.2));
  clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
}

filter: drop-shadow()는 합성 이후에 그림자를 적용하므로 실제 보이는 도형의 윤곽을 따라갑니다. 단점은 inset 그림자나 여러 레이어 그림자를 지원하지 않는다는 점입니다. CSS Box Shadow 생성기에서 값을 설계한 다음 drop-shadow() 문법으로 변환해서 사용하면 됩니다.

함정 2: 호버와 클릭 영역도 클리핑됨

생각해보면 당연한 일인데, 처음에는 놀랍습니다. 잘린 영역은 시각적으로만 사라지는 게 아니라 마우스 이벤트도 받지 않습니다. 디자인 특성상 사용자가 클릭할 만한 위치가 잘려있다면, 그 클릭은 아무 반응이 없습니다.

단순한 시각적 장식에 clip-path를 쓰는 경우라면 문제없습니다. 하지만 복잡한 모양의 인터랙티브 요소에는 히트 영역을 꼭 테스트해야 합니다. CSS만으로 "시각적 클리핑은 하되 전체 영역에서 이벤트 받기"는 불가능하고, JavaScript나 마크업 구조 변경이 필요합니다.

clip-path 애니메이션 — 가능한 것과 불가능한 것

좋은 소식: clip-path에 애니메이션을 적용할 수 있습니다:

.btn {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  transition: clip-path 0.3s ease;
}

.btn:hover {
  clip-path: polygon(0 0, 100% 0, 85% 100%, 0 100%);
}

호버 시 버튼 오른쪽 하단이 사선으로 잘리는 효과입니다. JavaScript 없이 CSS만으로 부드럽게 동작합니다.

나쁜 소식: 같은 함수, 같은 꼭짓점 수의 두 clip-path 사이에서만 보간이 됩니다. circle()에서 polygon()으로 전환하려 하면 부드러운 변화 없이 딱 끊겨 바뀝니다. 꼭짓점 수가 다른 두 polygon 사이도 마찬가지입니다.

위상이 다른 도형 간 morphing 애니메이션이 필요하다면 SVG clip-path와 GSAP 같은 라이브러리가 더 유연합니다. 단순한 효과라면 CSS 방식으로 충분합니다.

반응형에서의 clip-path

퍼센트 기반 값을 쓰면 반응형으로 잘 동작합니다. 퍼센트는 요소 자체의 크기를 기준으로 계산되므로 요소가 리사이즈되어도 도형 비율이 유지됩니다:

/* 반응형으로 잘 작동함 */
.responsive-diagonal {
  clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
}

고정 픽셀 값은 반응형으로 동작하지 않습니다:

/* 작은 화면에서 엉망이 됨 */
.broken-responsive {
  clip-path: polygon(0 0, 800px 0, 800px 90%, 0 100%);
}

유동적 컨테이너 안에 들어가는 도형은 퍼센트를 써야 합니다. calc()와 조합하면 더 세밀한 조정도 가능합니다:

.notched {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0 100%);
}

생성기 활용법

polygon 좌표를 손으로 입력하는 건 정말 비효율적입니다. 시각적 clip-path 생성기를 쓰면 워크플로가 완전히 달라집니다 — 미리보기에서 핸들을 드래그하면서 도형이 실시간으로 변하는 걸 보다가 마음에 들면 CSS를 복사하면 됩니다.

효율적으로 쓰는 팁:

프리셋에서 시작하기 — 대부분의 생성기에는 삼각형, 육각형, 평행사변형, 별 등의 프리셋이 있습니다. 처음부터 만들기보다 프리셋에서 조정하는 게 훨씬 빠릅니다.
실제 콘텐츠와 비슷한 환경에서 미리보기 — 단색 박스와 사진 위에서 도형의 느낌은 완전히 다릅니다. 실제 쓸 배경과 비슷한 환경에서 확인하세요.
데스크톱과 모바일 너비 모두 확인 — 데스크톱에서 우아해 보이는 얕은 각도의 사선이 모바일에서는 답답하게 보일 수 있습니다.
필요한 것만 복사 — 생성기가 전체 clip-path 속성을 줍니다. filter: drop-shadow()가 필요한 경우에는 두 속성을 같이 붙여넣어야 합니다.

다른 CSS 도구와의 조합

clip-path는 실제 프로젝트에서 단독으로 쓰이는 경우가 드뭅니다. 자주 쓰는 조합들:

CSS 그라디언트: 그라디언트 배경을 polygon으로 클리핑하면 기하학적인 장식 섹션을 만들 수 있습니다. 그라디언트가 먼저 렌더링되고, 그 위에 도형이 클리핑됩니다.
CSS Flexbox: Flexbox로 클리핑된 요소 주변 레이아웃을 잡습니다. clip-path는 문서 흐름에 영향을 주지 않습니다 — 요소는 원래 직사각형 영역을 그대로 점유하고, 다른 요소들은 보이는 도형이 아닌 원래 경계 상자 기준으로 배치됩니다.
CSS Box Shadow: 그림자 값을 설계한 다음 클리핑된 요소에 적용할 때는 box-shadow가 잘리므로 filter: drop-shadow() 문법으로 변환해서 씁니다.

브라우저 지원: 솔직한 현황

기본 clip-path 도형 함수들 — polygon(), circle(), ellipse(), inset() — 은 최신 브라우저에서 접두사 없이 잘 동작합니다. Chrome, Firefox, Safari, Edge 모두 지원합니다.

주의할 상황:

iOS Safari 13.4 이전 버전은 기본 도형에 -webkit- 접두사가 필요했습니다
구형 Android WebView에서 복잡한 polygon 경로가 제대로 렌더링 안 될 수 있습니다
레거시 환경을 지원해야 한다면 SVG 기반 clip-path: url(#myClip)이 더 넓은 범위를 커버합니다

대부분의 현대 프로젝트에서는 clip-path를 자유롭게 써도 됩니다. 지원 범위가 넓어야 하는 프로젝트라면 복잡한 clip-path 효과 전에 BrowserStack에서 테스트해보세요.

마무리

clip-path는 익숙해지면 "왜 이걸 이제야 알았지"라는 생각이 드는 CSS 속성 중 하나입니다. 대각선 섹션, 기하학적 아바타, 노치 카드 — 예전에는 이미지 에셋이나 SVG 우회 방법이 필요했던 것들이 이제 CSS 몇 줄로 됩니다.

핵심 요약:

polygon()이 가장 유연합니다 — 반응형을 위해 퍼센트 값을 쓰세요
clip-path는 box-shadow를 잘라냅니다 — filter: drop-shadow()를 대신 사용하세요
클릭과 호버 영역도 클리핑 경계를 따라갑니다
같은 함수, 같은 꼭짓점 수의 도형 사이에서만 애니메이션이 부드럽게 동작합니다
육각형 꼭짓점을 손으로 계산하는 시간에 더 유용한 일을 하세요 — 시각적 생성기를 쓰세요