순수 CSS로 복잡한 도형 그리기, shape() 함수의 시대
CSS로 복잡한 도형을 만들려면 그동안 SVG 파일이나 길고 암호 같은 path() 좌표 문자열에 기대야 했다. 이제 shape() 함수가 그 자리를 대신한다. line·arc·curve 같은 명령을 사람이 읽을 수 있는 문법으로 이어 붙여, 물결 구분선부터 유기적인 블롭까지 순수 CSS만으로 그린다. 2026년 2월 이 기능이 Baseline에 올라 모든 주요 브라우저에서 쓸 수 있게 되면서, 이미지 없이 도형을 다루는 방식이 본격적으로 바뀌고 있다.
"The main trick is to ensure two adjacent curve create a smooth curvature so that the full shape appears as one continuous curve."CSS-Tricks
무슨 일인가
CSS-Tricks의 Temani Afif는 여러 개의 curve 명령을 연결해 복잡한 도형을 만드는 원리를 정리했다. 비결은 인접한 두 curve의 연결점을 두 제어점이 이루는 구간 안에 놓아, 전체 경로가 하나의 연속된 곡선처럼 보이게 하는 것이다. 물결 구분선은 가장자리에 제어점을 여러 개 두고 수직으로 무작위 오프셋을 준 뒤 이웃한 점들의 중간점을 이어 그리고, 블롭은 원 둘레에 점을 분포시켜 중심 쪽으로 무작위로 당겨 유기적인 윤곽을 만든다. 무엇보다 shape() 안에서 calc()·CSS 변수·단위를 그대로 쓸 수 있어, 좌표를 고정한 SVG와 달리 반응형으로 동작한다.
여러 시각
같은 shape()를 두 자료가 다른 층위에서 본다.
- web.dev(2026년 2월 Baseline 다이제스트) — 표준·호환성 관점.
shape()가 2월 Baseline "Newly available"에 올라 모든 엔진에서 쓸 수 있게 됐고,path()의 후계자로서 CSS 단위와calc()·변수를 지원한다고 짚는다. - CSS-Tricks(shape() Commands) — 문법 입문 관점.
line·arc·curve명령이path()의 암호 같은 좌표보다 "평범한 영어"처럼 읽힌다는 가독성 이점을 강조한다. 작성 시점엔 애니메이션이 안 됐는데, 약 1년 만의 위 글에서 애니메이션이 가능해진 점이 이 기능의 성숙 속도를 보여준다.
왜 중요한가
그동안 복잡한 도형은 디자이너가 만든 SVG 자산이거나, 손으로 다듬기 어려운 path() 문자열이었다. shape()는 도형의 기하를 CSS 안으로 가져와 변수·calc()로 매개변수화한다. 즉 화면 크기나 디자인 토큰에 따라 도형이 반응하고, 같은 점 개수를 가진 두 변형은 부드럽게 전환·애니메이션할 수 있다. 디자인 자산과 코드의 경계가 흐려지고, 도형이 정적 이미지가 아니라 살아 있는 스타일이 된다는 뜻이다.
실무 적용
shape()는 점진적 향상으로 도입하고, 미지원 환경을 위해 단순한 폴백 도형이나clip-path대체를 함께 설계한다.- 물결 구분선·블롭 같은 반복 도형은 제어점 개수(granularity)와 크기를 CSS 변수로 빼서 한 곳에서 조절하는 토큰으로 만든다.
- 애니메이션을 쓸 땐 두 도형 변형의 점 개수를 반드시 동일하게 맞추고,
animation-timeline: scroll()과 결합해 스크롤 기반 효과로 확장한다.
Kenny의 관점
프론트엔드 관점에서 shape()의 진짜 의미는 "도형의 코드화"다. 그동안 곡선 하나 바꾸려면 디자이너에게 SVG를 다시 받아야 했지만, 이제 곡률이 변수가 되어 개발자가 직접 조율한다. 다만 강력함은 복잡함을 부른다. 제어점과 중간점 계산이 쌓이면 CSS는 금세 읽기 어려워진다. 나는 shape()를 "토큰으로 관리되는 소수의 재사용 도형"으로 한정하고, 일회성 장식은 여전히 SVG에 맡기는 분업을 권한다.
출처
이 글은 아래 원문을 바탕으로 Kenny가 한국어로 요약·정리한 큐레이션입니다.
원문 보기 — CSS-Tricks ↗