[CSS] : clip-path 속성으로 원하는 도형 그리기

미국의 결제 스타트업 스트라이프 페이지 - (https://stripe.com/)

개인적으로는 색과 "선" 을 잘 사용하는 것이 감각적인 페이지 디자인의 성패를 결정한다고 생각하는데요,

사실 CSS에서 직사각형이 아닌 도형을 다루는게 마냥 쉽지는 않습니다. 😂

코드가 지저분해 보인다면 정상입니다!

예를 들어 한쪽 귀퉁이가 접힌 사각형을 그려야 한다고 하면, 큰 사각형(하늘색)을 그린 후 흰색의 작은 사각형을 회전시켜 위에 포개는 방식으로 구현할 수 있습니다.

하지만 이건 너무 지저분하지 않나요?

모바일에서도 동일하게 보일 것이라는 보장도 없고, CSS의 신이 아닌 이상 몇 도를 회전시켜야 하는지 얼마나 Y축으로 이동시켜야 하는지 등을 한번에 예측하기 어렵습니다.

📎 clip-path 속성

그래서 이런 복잡한 도형을 구현할 때는 clip-path 라는 속성을 사용할 수 있습니다.

clip-path 속성은 이미지나 요소를 말 그대로 클립(잘라내기)할 수 있는 속성인데요, 이걸 사용한 트릭으로 다각형을 쉽게 그릴 수 있습니다.

MDN 문서를 읽어보면 아시겠지만 꼭 다각형이 아니더라도 디자이너가 원하는 어떤 형태로든 요소를 클립할 수 있는데요, 다만 인자가 꽤나 많고 복잡한 편이라 제대로 사용하기 어렵다고 느끼실 수도 있습니다.

 

그래서 clippy 라는 서비스를 활용해 원하는 클립을 간단히 생성하는 방법을 추천드립니다.

clippy를 사용하면 원하는 모양의 폴리곤을 쉽게 조작할 수 있으며, 이를 CSS 코드로 곧바로 제공하기 때문에 누구라도 쉽게 사용할 수 있습니다!

 

한번 clip-path 속성을 적용해 귀퉁이가 접힌 사각형을 다시 만들어보겠습니다.

전에는 작은 사각형을 만들고 복잡한 코드를 통해 큰 사각형을 덮어야 했지만, 이제 놀랍게도 저 한 줄이 끝입니다!

 

게다가 clip-path 속성은 "그 브라우저" 를 제외하면 대다수의 환경에서도 무리없이 지원하니, 앞으로는 감각적인 디자인을 위해 이런 다각형을 많이 활용해보고자 합니다. 😆