clip-path 도형이 찌그러지는 이유

clip-path 생성기에서 고른 별 모양을 복사해 실제 페이지의 배너나 카드에 붙였더니, 도구에서 본 것과 다르게 옆으로 퍼지거나 위아래로 눌려 보인 적이 있을 겁니다. 이건 CSS가 잘못 동작해서가 아니라 clip-path의 퍼센트(%) 좌표가 항상 정사각형을 기준으로 계산되는 게 아니기 때문에 생기는 현상입니다. 요소의 가로·세로 비율만 확인하면 원인과 해결책을 코드만 보고도 찾을 수 있습니다.

요약 ① clip-path의 %는 요소의 가로·세로에 각각 따로 곱해집니다(참조 상자 기준). ② 요소가 정사각형이 아니면 같은 polygon() 값도 다르게 늘어나거나 눌려 보입니다. ③ 요소를 정사각형으로 고정하거나, 실제 비율에 맞춰 좌표를 다시 계산하면 해결됩니다.

문제 — 도구에서 본 모양과 실제 화면이 다른 이유

미리보기 도구에서 별·마름모 같은 도형을 고르면 대부분 정사각형(가로세로 비율 1:1) 박스 위에 표시됩니다. 이 값을 그대로 복사해 실제 페이지의 가로로 긴 배너나 넓은 카드 요소에 붙이면, 별의 위아래가 눌리거나 뾰족한 부분이 뭉툭해진 채로 나타납니다.

좌표 값은 하나도 안 건드렸는데 모양만 달라졌다면, clip-path 코드 자체가 틀린 게 아닙니다. 그 값을 적용한 요소의 가로세로 비율이 미리보기와 다르기 때문입니다.

원인 — 퍼센트 좌표는 요소의 폭·높이에 따로 곱해집니다

clip-path의 polygon()·circle()·ellipse() 안에 있는 %는 이미지의 실제 픽셀이 아니라 그 요소의 '참조 상자(reference box)' — 기본값은 테두리 상자(border-box) — 를 기준으로 계산됩니다. 이때 가로(x) 퍼센트는 요소의 너비에, 세로(y) 퍼센트는 요소의 높이에 각각 따로 곱해집니다.

정사각형(예: 180×180px)이면 두 축의 1%가 같은 길이(1.8px)라 도형 비율이 그대로 유지됩니다. 그런데 가로로 넓은 요소(예: 800×200px, 4:1 비율)에 같은 값을 적용하면 가로 1%는 8px, 세로 1%는 2px이 됩니다. 그 결과 세로 방향으로만 도형이 눌린 모양이 나옵니다.

이건 브라우저마다 다르게 동작하는 버그가 아니라 polygon()·circle() 같은 도형 함수가 애초에 좌표를 그렇게 정의하도록 만들어져 있기 때문입니다. 요소 크기가 바뀌어도 도형이 반응형으로 같이 늘어나게 하려고 절대 길이 대신 상대 비율(%)을 쓰는 대신, 가로세로가 다르면 축마다 배율이 달라지는 대가를 치르는 구조입니다.

확인하는 방법 — 도구 없이 코드만으로

별도 도구 없이도 브라우저 개발자 도구만으로 원인을 확인할 수 있습니다.

1. 모양이 이상한 요소를 개발자 도구에서 선택하고 Computed(계산됨) 탭에서 실제 렌더링된 width·height 픽셀 값을 확인합니다.
2. 두 값의 비율이 1:1이 아니면 그게 원인입니다.
3. Styles 패널에서 그 요소에 임시로 aspect-ratio: 1/1을 추가해 폭과 높이를 정사각형으로 맞춰 봅니다. 모양이 원래 의도대로 돌아오면 비율 문제가 맞다는 뜻입니다.

원인을 확인했다면 해결책은 두 가지입니다. 요소 자체를 정사각형으로 고정하거나(aspect-ratio: 1/1 + object-fit: cover), 아니면 실제 비율만큼 세로(y) 좌표들을 손으로 다시 계산해 도형을 눌린 만큼 미리 늘려 넣는 것입니다.

이 좌표를 하나씩 손으로 계산하고 값을 바꿔가며 눈으로 확인하려면 손이 많이 갑니다. 이 지점에서 프리셋과 값을 실시간 정사각형 미리보기로 비교하며 직접 수정할 수 있는 도구를 쓰면 빠릅니다.

직접 해보기 →

자주 막히는 지점

정리

• clip-path의 %는 요소의 가로·세로에 각각 따로 곱해지는 값입니다.
• 정사각형이 아닌 요소에 같은 값을 쓰면 도형이 늘어나거나 눌립니다.
• 해결은 두 가지입니다 — 요소를 정사각형으로 고정하거나, 실제 비율에 맞게 좌표를 다시 계산합니다.
• clip-path는 화면에서만 가리는 마스킹이라 원본 파일 자체는 바뀌지 않습니다.

자주 묻는 질문

clip-path 좌표는 왜 px이 아니라 %로 되어 있나요?

%는 참조 상자 크기에 비례해 자동으로 늘어나거나 줄어들어, 요소 크기가 반응형으로 바뀌어도 도형이 그 안에서 같은 위치 비율을 유지하도록 만들어졌습니다. polygon() 안에 px 같은 절대 길이를 섞어 쓸 수도 있지만, 그 경우 요소 크기가 바뀌어도 그 지점만 고정된 채로 남아 반응형에서는 오히려 모양이 깨지기 쉽습니다.

정사각형이 아닌 배너에 별 모양을 그대로 쓰고 싶으면 어떻게 하나요?

가장 간단한 방법은 그 요소에 aspect-ratio: 1/1을 걸어 강제로 정사각형 비율을 만들고, 배경 이미지는 object-fit: cover로 채우는 것입니다. 요소 자체의 원래 비율을 반드시 유지해야 한다면, 실제 가로세로 비율만큼 세로(y) 좌표들을 50%를 기준으로 안쪽으로 당기거나 바깥으로 늘려 시각적으로 보정해야 합니다.

clip-path 값을 수정했는데 모양이 하나도 안 바뀝니다. 왜 그런가요?

polygon()·circle() 등의 괄호나 콤마, % 기호 중 하나라도 문법에 어긋나면 브라우저는 clip-path 전체를 무시하고 원본 요소를 잘림 없이 그대로 보여줍니다. 값을 바꾼 직후 모양이 그대로라면 대부분 입력 오타이지, 브라우저가 지원하지 않아서가 아닙니다.

이미지에 clip-path를 적용하면 실제 파일도 그 모양대로 잘리나요?

아닙니다. clip-path는 화면에 보이는 영역만 가리는 CSS 마스킹입니다. 원본 이미지 파일의 픽셀·용량은 그대로이며, 브라우저는 여전히 전체 이미지를 내려받은 뒤 화면에서만 지정한 모양 바깥을 안 보이게 처리합니다. 파일 자체를 그 모양대로 잘라내려면 별도의 이미지 편집·크롭 과정이 필요합니다.