물결·웨이브 SVG. 사인파·삼각·블롭. 웹 섹션 구분·SNS 배경.
🌊 미리보기
사용법
- 웨이브 종류 선택 (사인·삼각·블롭·레이어드)
- 가로/세로 크기 입력
- 주기 수·진폭 조정
- 색·그라데이션 설정
- SVG/PNG 다운로드 (웹 헤더·푸터에 활용)
주요 기능
- 4가지 종류 (사인·삼각·블롭·레이어드)
- 주기 1~12, 진폭 10~90%
- 그라데이션 또는 단색
- 5가지 프리셋 (시안·핑크·지그재그·오렌지·그린)
- 아래로 뒤집기 + 투명 배경 옵션
활용 예시
- 웹사이트 섹션 디바이더 — 부드러운 영역 전환
- 히어로 배너 하단 — 직사각형 탈출
- 인스타 카드 배경 — 모던 디자인
- 유튜브 썸네일 — 다이내믹 배경
- 이벤트 포스터 — 바다·여름 테마
웨이브 디자인의 인기 이유
2020년대 웹디자인 트렌드입니다. 깨끗한 직사각형 섹션 디자인이 지루해지면서, 곡선·웨이브로 영역을 구분하는 것이 표준이 됐습니다. 사인파는 자연스럽고 부드럽고, 삼각파는 모던하고 기술적이며, 블롭은 친근하고 유기적입니다. 레이어드(여러 웨이브 겹치기)는 깊이감을 더해 프로페셔널 느낌을 줍니다.
자주 묻는 질문
HTML에 직접 넣기?
SVG 복사 후 HTML `<section>` 사이에 붙여넣기. width:100%로 설정하면 반응형. SVG는 preserveAspectRatio="none" 으로 늘려 사용.
위·아래 뒤집기?
"아래로 뒤집기" 체크박스. 또는 SVG에 `transform: scaleY(-1)` 적용.
레이어드(다중)이란?
여러 웨이브를 반투명하게 겹쳐 깊이감을 줍니다. Stripe·Airtable 등에서 자주 사용.
무료인가요?
네.