Softonic

SVG 웨이브 생성기

단계 1 / 2
다음

곡선 웨이브는 거의 모든 랜딩 페이지가 언젠가 찾게 되는 섹션 구분선입니다. 이 생성기는 부드러운 사인 곡선을 샘플링해 채워진 단일 <path>를 만들고, 진폭·주파수·수직 위치를 조절할 수 있게 하며, 임의의 단색으로 칠합니다. 추가 CSS 없이 두 섹션 사이에 바로 넣을 수 있습니다. 인라인 SVG 코드를 복사해 페이지에 그대로 붙여넣으세요.

SVG 웨이브를 생성하는 방법

  1. 1

    색상 설정

    색상 선택기로 웨이브에 쓸 단색 채우기 색을 고릅니다.

  2. 2

    진폭 조절

    진폭(0~150)을 높이면 곡선이 깊어지고, 낮추면 잔잔한 물결이 됩니다.

  3. 3

    주파수 설정

    너비를 가로질러 1~8주기를 고릅니다. 주기가 많을수록 촘촘하고 물결이 많은 패턴이 됩니다.

  4. 4

    위 또는 아래 선택

    푸터 웨이브는 아래 가장자리에, 헤더 웨이브는 위 가장자리에 채우기를 고정합니다.

  5. 5

    SVG 복사

    인라인 SVG 코드를 복사해 HTML이나 CSS 배경에 붙여넣습니다.

웨이브가 실제로 제값을 하는 곳

  • 섹션 전환. 색이 있는 히어로와 흰색 본문 사이에 두어, 시선이 딱딱한 경계선에 부딪히지 않고 흐르게 합니다.
  • 푸터. 곡선 윗변이 링크의 어두운 블록을 부드럽게 합니다.
  • 가격 카드. 전체 배경 이미지 없이 은은하게 칠한 모서리를 만듭니다.
  • 히어로 배너. 아래 가장자리의 웨이브가 독자의 시선을 본문으로 이끕니다.

패스 구조

생성기는 사인 곡선을 샘플링해 1440 x 320 viewBox 안에 채워진 단일 <path>를 만듭니다.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none" width="100%" height="320"><path d="M 0,160 L 24,180 L 48,199 ... L 1440,320 L 0,320 Z" fill="#6366F1"/></svg>

패스는 사인파를 따라가는 짧은 직선 구간으로 너비를 가로지른 뒤, 아래 가장자리(또는 위 가장자리)까지 닫혀 단색 채우기를 이룹니다. 진폭을 높이면 마루와 골이 넓어지고, 주기를 늘리면 너비에 더 촘촘히 들어갑니다.

반응형으로 만들기

  • SVG에 이미 preserveAspectRatio="none"이 설정돼 있어, 웨이브가 어떤 너비로도 늘어납니다.
  • width="100%"가 포함돼 있습니다. 높이는 CSS(height: auto 또는 고정값)로 원하는 대로 조절하세요.
  • 깊이를 위해 웨이브를 겹치려면, 자신의 CSS에 사본 두 개를 두고 절대 위치로 지정한 뒤 각각 다른 색과 불투명도를 주세요.

접근성

웨이브는 장식입니다. aria-hidden="true"와 role="img"을 추가해 스크린 리더가 요소를 건너뛰게 하고, 의미 있는 콘텐츠는 모두 실제 인접 HTML 요소에 둡니다.

자주 묻는 질문

채우기 색이 CSS 변수(다크 모드, 테마)에 반응하길 원하면 HTML에 SVG를 인라인하세요. 웨이브가 순전히 장식이고 브라우저가 별도로 캐시하길 원하면 background-image를 사용하세요.

네. preserveAspectRatio="none"이 적용된 벡터 <path>라, 어떤 너비로도 계단 현상 없이 확대·축소됩니다. 확대하면 흐려지는 래스터 이미지와 다릅니다.

네. 패스를 SVG로 감싸고 CSS 키프레임으로 d 속성이나 transform: translateX()를 애니메이션하세요. 움직임은 은은하게 유지하세요. 자동 재생되는 웨이브 애니메이션은 금세 식상해집니다.

보통 1KB를 크게 밑돕니다. 채우기 한 색의 단일 패스이기 때문입니다. 이는 어떤 PNG 대응물과 비교해도 아주 작은 일부에 불과합니다.

관련 도구

ASCII 표 참조

NUL, LF, DEL 같은 제어 문자를 포함해 모든 문자에 대한 10진수, 16진수, 8진수, 2진수, HTML 숫자 문자 참조를 담은 0부터 127까지의 전체 ASCII 표.

HTML 문자 참조

HTML 엔티티의 검색 가능한 목록, 각 엔티티의 이름 및 숫자 코드, 그리고 특수 문자 및 기호에 대한 1클릭 복사 기능을 제공합니다.

FPS 카운터

requestAnimationFrame으로 브라우저 FPS를 측정하세요. 스무딩, 최소/최대 프레임레이트, 경고 임계값, 선택형 그래프를 제공합니다. 업로드나 API 없이 로컬에서 실행됩니다.

키보드 단축키 참고표

macOS, Windows, Linux에서 VS Code, Chrome, GNU Readline을 쓰는 Bash의 문서화된 기본 단축키를 검색합니다.

색상 혼합기

두 HEX 색상을 2-20개의 균등한 색상 견본으로 섞습니다. 양 끝 색상을 포함해 각 중간 색상을 대문자 HEX 코드로 확인하세요.

색상 틴트 생성기

기준 색의 밝은 틴트를 생성합니다. 디자인 시스템 토큰, 배경, 호버 상태를 위한 3-20단계 스케일.

이 도구는 다른 언어로도 제공됩니다