블롭 모양 만들기

말랑한 둥근 도형, 무한으로 만들어요

요즘 웹사이트·앱 소개 화면·카드뉴스·PPT 배경에는 반듯한 원 대신 살짝 찌그러진 둥근 덩어리(블롭) 모양이 자주 쓰여요. 직접 펜 도구로 그리려면 시간이 걸리는데, 여기서는 막대 몇 개로 원하는 느낌의 모양을 바로 만들고 SVG로 받아 피그마·일러스트레이터·파워포인트·웹 코드에 그대로 넣을 수 있어요.

쓰는 법

• 꼭짓점 수 — 모양을 이루는 기준 점의 개수예요. 3~5는 단순한 조약돌, 10 이상은 꽃잎처럼 복잡해져요.
• 울퉁불퉁함 — 점마다 반지름을 얼마나 들쭉날쭉하게 할지예요. 0%면 거의 원이에요.
• 둥글기 — 점 사이를 이을 때 곡선을 얼마나 부드럽게 할지예요. 낮추면 각진 모양이 돼요.
• 모양 번호(시드) — 같은 번호와 설정이면 언제나 같은 모양이 나와요. ‘새로 만들기’는 번호를 무작위로 바꿔요.
• 사진을 이 모양으로 자르기 — 사진을 넣으면 블롭 모양 밖을 투명하게 한 정사각 PNG를 바로 받아요. 프로필·후기 사진 틀로 좋아요.

어떻게 만드나요

중심 둘레에 점을 고르게 놓고, 각 점의 각도와 반지름을 시드로 만든 의사 난수로 조금씩 흔들어요. 그다음 점들을 캣멀-롬(Catmull-Rom) 스플라인으로 매끄럽게 잇고, 이를 SVG가 이해하는 3차 베지어 곡선(C 명령)으로 바꿔 닫힌 경로를 만들어요. 그래서 결과 SVG에는 path 하나만 들어 있어 편집 프로그램에서 점을 고치기도 쉬워요.

활용 팁

블롭 여러 개를 겹쳐 투명도를 낮추면 은은한 배경이 되고, 그라데이션 블롭에 흐림(blur)을 주면 요즘 유행하는 ‘메시 그라데이션’ 느낌이 나요. 테두리만 고르면 손으로 그린 듯한 강조 동그라미로 쓸 수 있어요. 만든 모양은 출처 표시 없이 자유롭게 쓸 수 있어요.

참고한 자료

• Wikipedia — Centripetal/Catmull–Rom spline
• MDN — SVG path 명령 (C: 3차 베지어)