섹션 사이를 부드럽게 연결하는 물결 SVG 디바이더를 만듭니다. 모던 웹사이트의 인기 디자인 요소.
SVG 코드
Wave SVG 사용법
- 색상·높이·진폭·곡선 수를 슬라이더로 조정합니다.
- 방향(위/아래)과 스타일(부드러움/지그재그)을 선택합니다.
- 미리보기로 섹션 사이 어떻게 보이는지 확인합니다.
- SVG 코드를 복사해 두 섹션 사이에 삽입합니다.
주요 기능
- 물결 모양 SVG 자동 생성
- 색상·높이·진폭·주파수 자유 조절
- 위/아래 방향 선택
- 부드러운 곡선 + 지그재그 스타일
- SVG raw 코드 + 다운로드
활용 예시
- 랜딩 페이지 섹션 디바이더
- 히어로 영역 하단 장식
- 푸터 위 디자인 액센트
- 카드·박스의 상단 곡선
- 모던 SaaS 사이트 디자인
웨이브 디바이더가 트렌드인 이유
플랫 디자인 시대에 단조로움을 깨는 유기적 곡선이 인기입니다. 직선 경계는 딱딱하지만 물결은 자연스럽고 부드러운 인상을 주며, 사용자의 시선을 다음 섹션으로 자연스럽게 유도합니다.
자주 묻는 질문
HTML에 어떻게 삽입하나요?
두 섹션 사이에 SVG 코드를 그대로 붙여 넣으세요. 또는 SVG를 background-image로 사용해도 됩니다.
모바일에서도 잘 보이나요?
네, SVG는 벡터라 모든 화면 크기에서 선명합니다. preserveAspectRatio="none"이 설정되어 화면 너비에 맞게 자동 늘어납니다.
물결을 애니메이션할 수 있나요?
가능합니다. CSS animation으로 SVG path를 변형하거나 background-position을 움직이면 흐르는 물결 효과가 됩니다.
여러 색의 물결을 겹칠 수 있나요?
네, SVG를 여러 개 겹쳐서 다양한 투명도와 색으로 깊이감 있는 디자인을 만들 수 있습니다.