SVG 웨이브 구분자 튜토리얼: 섹션 구분자 & 모양 전환

SVG 웨이브의 구조

SVG 웨이브 구분자는 일반적으로 4개 명령이 있는 단일 <path> 요소입니다:

<svg viewBox="0 0 1440 120" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M0,64 C320,0 1120,128 1440,64 L1440,120 L0,120 Z" fill="#7c5cfc" />
</svg>

분해하면:

M0,64 — 시작점으로 이동 (왼쪽 가장자리, 중간 높이)
C320,0 1120,128 1440,64 — 두 개의 제어점이 있는 큐빅 베지어 곡선
L1440,120 L0,120 — 오른쪽으로 내려가고 아래쪽으로 가로지르는 선
Z — 시작점으로 닫아 채울 수 있는 모양 만들기

큐빅 베지어 제어점 이해하기

C x1,y1 x2,y2 x,y 구문은 현재 점에서 (x,y)까지의 곡선을 설명하며, 곡선의 모양은 두 제어점에 의해 제어됩니다:

첫 번째 제어점은 시작 근처에서 곡선을 끌어당김
두 번째 제어점은 끝 근처에서 곡선을 끌어당김
기준선 위의 제어점은 피크를 만들고, 아래는 골짜기를 만듦
제어점이 기준선에서 멀수록 곡선이 더 극적

웨이브를 반응형으로 만들기

중요한 속성은 preserveAspectRatio="none"입니다. 기본적으로 SVG는 종횡비를 유지하므로 컨테이너가 더 넓어도 웨이브는 디자인된 비율을 유지합니다. 그건 구분자에는 잘못된 것입니다 — 컨테이너 너비에 맞게 가로로 늘어나야 합니다.

<svg
  viewBox="0 0 1440 120"
  preserveAspectRatio="none"
  style="display:block; width:100%; height:auto;">
  <path d="M0,64 C320,0 1120,128 1440,64 L1440,120 L0,120 Z" fill="#7c5cfc" />
</svg>

width:100%는 SVG를 컨테이너에 늘립니다. display:block은 SVG 아래에 나타나는 인라인 요소 공백을 제거합니다.

웨이브 뒤집기

섹션 위쪽에서 아래로 굽는 웨이브는 이전 섹션의 아래쪽에서 위로 굽습니다. 두 버전을 디자인하거나 CSS로 뒤집으세요:

.wave-flip {
  transform: rotate(180deg);
}

/* 또는 가로로 미러 */
.wave-mirror {
  transform: scaleX(-1);
}

레이어 패럴랙스 웨이브

다른 투명도와 오프셋으로 두세 개의 웨이브를 쌓으면 깊이감이 생깁니다:

<div class="wave-container">
  <svg viewBox="0 0 1440 120" preserveAspectRatio="none" class="wave wave-back">
    <path d="M0,80 C400,40 1040,120 1440,60 L1440,120 L0,120 Z"
          fill="#7c5cfc" opacity="0.3"/>
  </svg>
  <svg viewBox="0 0 1440 120" preserveAspectRatio="none" class="wave wave-mid">
    <path d="M0,70 C360,20 1080,130 1440,50 L1440,120 L0,120 Z"
          fill="#7c5cfc" opacity="0.6"/>
  </svg>
  <svg viewBox="0 0 1440 120" preserveAspectRatio="none" class="wave wave-front">
    <path d="M0,64 C320,0 1120,128 1440,64 L1440,120 L0,120 Z"
          fill="#7c5cfc"/>
  </svg>
</div>

웨이브 애니메이션

미묘한 바다 효과를 위해 d 속성을 직접 SMIL로 애니메이션화하거나 CSS transform: translateX()를 사용해 컨테이너보다 큰 웨이브를 가로로 슬라이드하세요:

.wave-animate svg {
  width: 200%;  /* 크게 만들기 */
  animation: slide 20s linear infinite;
}
@keyframes slide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

그라디언트 채워진 웨이브

단색도 좋지만 그라디언트가 더 모던합니다:

<svg viewBox="0 0 1440 120" preserveAspectRatio="none">
  <defs>
    <linearGradient id="waveGradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#7c5cfc"/>
      <stop offset="100%" stop-color="#ec4899"/>
    </linearGradient>
  </defs>
  <path d="M0,64 C320,0 1120,128 1440,64 L1440,120 L0,120 Z"
        fill="url(#waveGradient)"/>
</svg>

성능 참고사항

HTML 인라인 SVG는 외부 파일 대비 HTTP 요청을 절약합니다. 페이지당 1-2개 웨이브에 인라인을 사용하세요.
원시 SVG 소스는 일반적으로 300-800바이트 — 무시할 수 있는 무게.
이미지 폴백 피하기 (background-image: url(wave.svg)) — 섹션 색상 매칭을 위한 CSS currentColor 트릭을 방지합니다.
애니메이션 성능 — transform을 애니메이션하고 path d는 피하세요. 경로 모핑은 비용이 많이 드는 재래스터화를 트리거합니다.

자주 묻는 질문

SVG 웨이브 아래에 흰색 공백이 남는 이유는?: SVG 요소는 기본적으로 inline이므로 줄 높이 공백이 발생합니다. SVG에 display: block을 설정하거나 컨테이너에 line-height: 0을 설정하세요.
웨이브가 두 섹션 색상과 정확히 일치하게 하려면?: 두 가지 옵션: (1) 두 색상 섹션 사이에 SVG를 배치하고 아래 섹션 색상으로 채우기. 시청자는 웨이브 모양을 전환으로 인식. (2) 위 섹션 색상에서 아래 섹션 색상으로 전환하는 그라디언트 채우기 사용.
SVG 없이 웨이브 구분자를 만들 수 있나요?: 순수 CSS 웨이브 구분자가 존재하지만 mask-image가 필요하고 단순한 사인파 패턴으로 제한됩니다. SVG는 전체 베지어 제어를 제공합니다.
왜 어떤 화면에서 웨이브가 들쭉날쭉해 보이나요?: 일반적으로 preserveAspectRatio="none"이 누락된 경우 — 웨이브가 비균일하게 늘어납니다. 또한 컨테이너에 구체적 너비(max-content가 아닌)가 있는지 확인하세요.
사용자 정의 웨이브 모양을 생성하려면?: 수공예 웨이브의 경우 시각적 베지어 편집이 가능한 도구를 사용하세요. 빠른 옵션의 경우 인터랙티브 웨이브 생성기로 제어점을 드래그하고 경로를 복사할 수 있습니다.