블롭 가이드
블롭은 불규칙하지만 매끄러운 가장자리를 가진 부드러운 유기적 도형으로, 2020년 이후 수많은 히어로 배경, 아바타, 섹션 장식 뒤에 있는 디자인 트렌드입니다. 고전적인 CSS 기법은 8값 border-radius로 평범한 직사각형을 유기적 형태로 구부립니다.
랜덤 생성을 눌러 새 모양을 만들고, 곡률 슬라이더로 가장자리를 더 둥글거나 독특하게, 색상을 고르세요. border-radius 코드를 CSS에 바로 복사 — 이미지도 SVG 파일도 필요 없고 완전 반응형입니다.
Pro Tips
- 블롭은 큰 크기와 부드러운 그라데이션에서 가장 아름답습니다. 장식 배경으로 쓰며 미묘한 애니메이션을 더하면 더 세련됩니다: @keyframes morph { 50% { border-radius: 다른 값; } }.
- 텍스트 뒤에 낮은 투명도의 블롭을 놓아 깊이를 만드세요. 크고 천천히 떠다니는 블롭 몇 개면 콘텐츠를 방해하지 않는 현대적 히어로 배경이 됩니다.
Frequently Asked Questions
Q: border-radius 블롭 기법의 원리는?
border-radius 블롭 기법의 원리는? 8값 구문 border-radius: a b c d / e f g h는 각 모서리에 서로 다른 가로·세로 반지름을 설정합니다. 비대칭 값이 직사각형을 매끄러운 유기적 모양으로 왜곡합니다.
Q: 블롭을 애니메이션할 수 있나요?
블롭을 애니메이션할 수 있나요? 네. @keyframes나 transition으로 두 유기적 값 세트 사이에서 border-radius를 애니메이션하면 모양이 부드럽게 변형됩니다 — 시그니처 "모핑 블롭" 효과.
Q: 2026년에도 블롭이 트렌드인가요?
2026년에도 블롭이 트렌드인가요? 네. 유기적 도형은 2020년 트렌드에서 현대 디자인의 기본으로 진화했습니다 — Stripe, Vercel, 수많은 SaaS 히어로에서 볼 수 있습니다. 글래스모피즘과 그라데이션에 완벽하게 어울립니다.
Q: 블롭은 SVG와 CSS 중 무엇으로?
블롭은 SVG와 CSS 중 무엇으로? CSS border-radius는 더 가볍고 편집이 쉬워 장식 배경에 완벽합니다. SVG 패스는 로고와 일러스트에 정밀한 제어를 주지만 복잡성 비용이 있습니다.
Q: 블롭을 배경으로 쓰려면?
블롭을 배경으로 쓰려면? 블롭 border-radius를 가진 position div를 만들고, 낮은 z-index, 그라데이션 채움과 선택적 블러를 더한 뒤 콘텐츠를 위에 배치하세요. 천천히 애니메이션해 "살아있는 배경"으로 만듭니다.
한국 전통색·오방색
오방색은 한국 전통 색채 체계로, 청(동)·적(남)·황(중앙)·백(서)·흑(북)의 다섯 가지 기본색이 방위와 계절을 상징합니다. 단청과 한복, 오방장두루마기에 사용되며, 현대 디자인에서도 전통미를 살리는 배색으로 활용됩니다.
청색 #3B5BA5동쪽과 봄을 상징하는 오방색의 파랑
적색 #C12127남쪽과 여름을 상징하는 강렬한 빨강
황색 #EAC102중앙과 대지를 상징하는 노랑
백색 #F5F5F5서쪽과 가을을 상징하는 순백
흑색 #17191C북쪽과 겨울을 상징하는 깊은 검정
쪽빛 #0067A3쪽풀로 물들인 전통 남색. 청바지의 원조
연두색 #81C147새싹의 연한 초록. 단청에 자주 쓰임
살구색 #F7CE68살구 열매를 닮은 부드러운 노란빛
자주색 #583B7E고귀함을 상징하는 전통 보라
단청색 #2E8B8B궁궐과 사찰 단청의 청록색
Q: 오방색이란 무엇인가요?
오방색이란 무엇인가요? 오방색은 한국 전통 색채 체계로 청(동)·적(남)·황(중앙)·백(서)·흑(북)의 다섯 색이 방위와 계절을 상징합니다. 단청, 한복, 오방장두루마기에 사용됩니다.
Q: 단청에 쓰이는 색은 무엇인가요?
단청에 쓰이는 색은 무엇인가요? 단청은 궁궐과 사찰의 목조건축을 장식하는 채색 기법으로, 오방색을 기본으로 청록색(#2E8B8B)과 연두색(#81C147) 등을 조화롭게 사용합니다.