SVG 물결 구분선 만들기

섹션 사이에 물결을 넣어요

웹페이지의 섹션을 일직선 대신 부드러운 물결로 나누면 화면이 한결 부드러워 보여요. 이 도구는 물결 개수, 높이, 불규칙한 정도, 겹 수, 색을 고르면 바로 물결 그림을 만들고, 위아래 섹션 사이에 넣었을 때 어떻게 보이는지 미리 보여 줘요. 같은 설정에서도 ‘다른 모양’을 누르면 물결의 높낮이만 새로 바뀌어요.

조절할 수 있는 것

• 물결 개수 — 화면 너비 안에 들어가는 마루(볼록한 부분)의 수예요.
• 물결 높이·불규칙함 — 높이가 클수록 출렁임이 크고, 불규칙함이 클수록 마루마다 높이가 달라져 자연스러워 보여요. 0%면 규칙적인 물결이에요.
• 겹 수 — 2겹 이상이면 연한 색의 물결이 뒤에 겹쳐 깊이감이 생겨요. 맨 앞(맨 아래) 겹이 고른 색이에요.
• 모양 — 부드러운 곡선, 뾰족한 산, 계단 중에서 골라요.
• 뒤집기 — 물결이 위쪽 섹션에서 아래로 내려오는 모양이 필요하면 켜요.

웹사이트에 넣는 법

SVG 코드를 복사해 두 섹션 사이에 그대로 넣거나, ‘CSS 배경 코드’를 복사해 구분선 요소의 배경으로 쓰면 돼요. SVG에는 preserveAspectRatio="none"이 들어 있어 너비에 맞춰 늘어나요. 높이를 고정하려면 감싸는 요소에 height를 주세요. 물결 아래 섹션의 배경색을 물결 색과 같게 맞추면 이음새 없이 이어져요.

파일로 받기

SVG 파일은 아무리 키워도 깨지지 않아 웹·인쇄용으로 좋고, PNG는 PPT·카드뉴스·SNS 이미지에 넣기 편해요. PNG 너비를 고르면 비율에 맞는 높이로 저장해요(배경은 투명).