블롭(blob) 모양, CSS와 SVG의 차이
히어로 배경이나 아바타 마스크에 쓸 물방울 모양 도형이 필요할 때, 검색하면 CSS border-radius 트릭과 SVG path 방식 두 가지가 나옵니다. 화면만 보면 비슷해 보여도 이 둘은 굴곡을 만드는 방식 자체가 다르고, 그래서 만들 수 있는 모양의 폭도 다릅니다. 이 글은 그 구조 차이를 코드 단위로 짚고, 도구 없이 손으로 좌표를 계산하는 방법까지 보여드립니다.
요약 ① CSS border-radius는 네 모서리에 가로·세로 반지름을 하나씩, 총 8개 값만 쓸 수 있어 굴곡이 최대 4개로 묶여 있습니다. ② SVG path 블롭은 원 둘레에 점을 원하는 개수만큼 찍어 굴곡 수를 자유롭게 늘릴 수 있습니다. ③ 점들을 매끄러운 곡선으로 잇는 계산식(Catmull-Rom → 베지어 변환)까지 알면 도구 없이도 직접 좌표를 뽑을 수 있습니다.
문제 — 블롭 모양이 늘 비슷비슷하다
히어로 섹션 배경에 쓸 유기적 도형을 만들려고 border-radius: 30% 70% 70% 30% / 30% 30% 70% 70% 같은 값을 검색해서 붙여넣어 본 적이 있을 겁니다. 숫자를 이리저리 바꿔봐도 결과는 네 귀퉁이가 둥글게 부푼 비슷한 형태에서 크게 벗어나지 않습니다.
반면 디자인 레퍼런스에서 보는 블롭은 굴곡이 6개, 8개씩 있어 훨씬 유기적입니다. 왜 CSS만으로는 그 정도 복잡도가 잘 안 나오는지 원리를 모르면, 값을 무작위로 바꿔가며 감으로 맞추는 수밖에 없습니다.
해결 — 굴곡을 만드는 구조 자체가 다릅니다
border-radius는 네 모서리(좌상·우상·우하·좌하) 각각에 가로 반지름과 세로 반지름을 하나씩 줍니다. 슬래시(/) 앞 네 값이 가로 반지름, 뒤 네 값이 세로 반지름이라 전체 값은 최대 8개입니다. 각 모서리는 결국 타원 호 하나이므로, 숫자를 아무리 바꿔도 굴곡은 모서리 개수인 4개를 넘을 수 없습니다.
SVG path 블롭은 다른 방식으로 굴곡을 만듭니다. 원 둘레에 점을 n개 찍고(이 도구는 312개까지 조절 가능), 각 점의 반지름에 -11 사이의 난수를 복잡도 비율(5~90%)만큼 곱해 흔듭니다. 점이 6개면 굴곡도 최대 6개, 9개면 9개까지 나올 수 있어 border-radius의 4개 한계를 구조적으로 넘어섭니다.
이렇게 찍은 점을 직선으로 이으면 각진 다각형이 되어 버립니다. 그래서 각 구간(현재점→다음점)마다 앞뒤 점 위치를 참고해 제어점 두 개를 계산하고, 3차 베지어 곡선(cubic Bezier)으로 이어 붙입니다. 이 계산법이 Catmull-Rom 스플라인을 베지어로 바꾸는 변환식입니다.
직접 좌표를 뽑고 싶다면 다음 순서를 그대로 따르면 됩니다.
- 중심점과 기본 반지름을 정합니다.
- 점 개수 n으로 360도를 나눠 각 점의 각도를 구합니다(i/n × 360도).
- 각 점의 반지름에 -1~1 사이 난수 × 복잡도 비율을 곱해 더하거나 뺍니다.
- 각도·반지름으로 점의 x, y 좌표를 구합니다(x = 중심x + cos(각도)×반지름).
- 구간마다 제어점을 계산합니다: 제어점1 = 현재점 + (다음점 − 이전점)/6, 제어점2 = 다음점 − (다음다음점 − 현재점)/6.
- M 시작점 뒤에 C 제어점1 제어점2 다음점을 구간 수만큼 이어 붙이고 마지막에 Z로 닫습니다.
삼각함수 계산만 되면 스프레드시트나 메모장에서도 이 좌표를 뽑아 SVG 코드를 손으로 완성할 수 있습니다. 다만 점 개수가 늘어날수록 각도·좌표·제어점 수가 그만큼 배로 늘어납니다.
저희 도구로 확인하기. 점 9개짜리 블롭 하나만 해도 좌표 9쌍에 제어점 18개를 손으로 계산해야 하는데, 슬라이더 두 개와 버튼 클릭 한 번이면 같은 결과가 바로 나옵니다.
무료 · 가입 불필요 · 꼭짓점·복잡도·색상만 조절하면 SVG 코드가 바로 나옵니다
자주 막히는 지점
| 상황 | 원인 | 확인 방법 |
|---|---|---|
| border-radius 숫자를 바꿔도 굴곡이 4개를 안 넘음 | 8개 값이 모서리 4개에 가로·세로 반지름으로만 배분되는 구조라서 | 굴곡 5개 이상이 필요하면 border-radius 대신 clip-path: polygon()이나 SVG path로 접근 |
| 점 개수·복잡도는 그대로인데 누를 때마다 모양이 다름 | '새 모양 생성'을 누를 때마다 반지름에 더할 난수를 새로 뽑기 때문 | 같은 모양을 다시 보고 싶으면 그 순간의 SVG 코드(좌표)를 따로 복사·저장 |
| 복잡도를 낮췄는데도 한쪽이 뾰족하게 남음 | 점 개수 자체가 적으면 곡선 하나가 담당하는 각도 구간이 커져 완만해지기 어려움 | 복잡도보다 점 개수를 먼저 6개 이상으로 늘려서 확인 |
| SVG 블롭을 다른 크기에 넣었더니 비율이 달라 보임 | path 좌표는 viewBox 기준 상대값이라 실제 표시 크기와 별개로 정해짐 | viewBox 숫자는 그대로 두고 태그의 width·height만 바꿔서 크기 확인 |
정리
border-radius 블롭과 SVG path 블롭은 겉모습이 비슷해 보여도 굴곡을 만드는 자릿수 자체가 다릅니다. border-radius는 모서리 4개, 각 모서리에 가로·세로 반지름 하나씩 총 8개 값으로 굴곡이 묶여 있고, SVG path는 점 개수만큼 굴곡을 늘릴 수 있습니다.
굴곡이 많은 유기적 모양이 필요하면 path 기반 방식이 구조적으로 유리하고, 버튼 모서리 정도의 단순한 곡선이면 border-radius로 충분합니다. 원리를 알면 숫자를 감으로 바꾸는 대신 원하는 굴곡 수에 맞춰 바로 방식을 고를 수 있습니다.
무료 · 가입 불필요 · 꼭짓점·복잡도·색상만 조절하면 SVG 코드가 바로 나옵니다
자주 묻는 질문
블롭 모양은 저작권 문제 없이 써도 되나요?
수학 공식으로 브라우저가 그 자리에서 계산해 그리는 순수 SVG 도형이라 이미지 저작권 문제에서 자유롭습니다. 다만 결과 모양이 특정 브랜드 로고와 비슷하지 않은지는 사용 전에 직접 한 번 눈으로 확인해두는 편이 안전합니다.
점 개수·복잡도가 같은데 '새 모양 생성'을 누를 때마다 모양이 다른 이유는?
버튼을 누를 때마다 새 난수 시드를 뽑아 각 점의 반지름을 다시 흔들기 때문입니다. 점 개수와 복잡도는 굴곡이 몇 개고 얼마나 울퉁불퉁한지의 범위만 정하고, 실제 좌표는 시드마다 새로 계산됩니다.
border-radius로도 굴곡을 5개 이상 만들 수는 없나요?
표준 border-radius 속성 하나로는 불가능합니다. 모서리가 4개뿐이라 굴곡도 그 수에 묶여 있습니다. 5개 이상의 굴곡이 필요하면 clip-path: polygon()으로 각진 다각형을 만들거나, SVG path 자체로 도형 테두리를 그리는 방법을 씁니다.
SVG 블롭 색을 반투명하게 만들 수 있나요?
네. fill에 쓰는 HEX 색상 코드 뒤에 두 자리 알파 값을 붙이면 됩니다. 예를 들어 #6366f180은 약 50% 투명도의 인디고색입니다. 배경 위에 겹쳐 은은한 텍스처를 낼 때 활용할 수 있습니다.