CSS 8방향 border-radius 수식과 유기적 블롭(Blob) 마스크 제작 가이드

직접 해보기 →

최근 웹 디자인 트렌드에서 딱딱한 사각형 상자나 완벽한 정원 대신, 물방울이나 아메바처럼 자발적이고 자연스럽게 일렁이는 곡선 도형인 블롭(Blob) 마스크가 프로필 사진 프레임과 배경 장식 요소로 크게 주목받고 있습니다.

이미지 파일(PNG, SVG)을 매번 디자인 툴로 깎아 만드는 대신, CSS3의 고급 border-radius 8개 축 속성을 조합하면 추가 이미지 로딩 없이 오직 순수 CSS 코드만으로 무한히 다양한 유기적 블롭 모양을 연출할 수 있습니다. 본 글에서는 8개 방향 border-radius 수식 공식과 블롭 마스킹 기법을 해설합니다.

---

1. 8개 모서리 축 border-radius 수식 구조

CSS에서 슬래시(/) 기호를 활용하면 모서리의 가로 반지름(Horizontal Radius) 4개와 세로 반지름(Vertical Radius) 4개를 독립적으로 부여하여 비대칭 유기체 곡선을 생성할 수 있습니다:

[ \text{border-radius: } H_1% \ H_2% \ H_3% \ H_4% \ / \ V_1% \ V_2% \ V_3% \ V_4% ]

구체적 수치 조합 예시:

• 자연스러운 물방울 블롭: border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
• 유기적 아메바 블롭: border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;

---

2. 블롭 마스크를 적용한 인프라 CSS 구현 소스

프로필 이미지나 배너 카드에 유기적 블롭 마스크 모양을 적용하는 CSS 스타일 예시는 다음과 같습니다:

.blob-container {
  width: 320px;
  height: 320px;
  background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
  border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
  overflow: hidden;
  box-shadow: 0 20px 30px rgba(99, 102, 241, 0.3);
  transition: border-radius 0.6s ease-in-out;
}

.blob-container:hover {
  border-radius: 58% 42% 38% 62% / 52% 65% 35% 48%;
}

.blob-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

[!NOTE] 8개 퍼센티지 수치를 수작업으로 입력하며 원하는 블롭 모양이 나올 때까지 렌더링을 복권 고르듯 시도하지 말고, CSS 블롭 모양 생성기 도구를 활용하면 8개 방향 핸들을 시각적으로 드래그 조절하면서 즉시 원하는 무정형 곡선을 만들고 CSS 코드를 복사해 사용할 수 있습니다.

---

3. 실무 웹 프론트엔드 디자인 활용 팁

1. border-radius 트랜지션 기반 유기적 변형 효과: 마우스 호버 시 border-radius 퍼센트 수치만 자연스럽게 변경해주면, 마치 살아있는 물방울이나 세포가 우물거리는 듯한 고급스러운 UI 애니메이션 반응을 손쉽게 연출할 수 있습니다.
2. clip-path: path() 및 SVG Mask 조합: 더욱 복잡하고 파격적인 정밀 곡선 형태가 필요한 경우, CSS clip-path: url(#blob-clip)과 SVG 요소를 연동하여 이미지 복잡도에 영향 없는 가벼운 베지어 곡선 블롭 마스크를 전개할 수 있습니다.