SVG 물결 배경, 화면마다 다르게 보이는 이유

물결(웨이브) 모양 SVG를 만들어 랜딩페이지 섹션 사이에 붙였는데, 도구 화면에서 보던 곡선과 실제 사이트에 올라간 모습이 다르게 보인 적이 있을 겁니다. 큰 모니터에서는 파도가 완만하게 퍼져 보이고, 좁은 화면에서는 같은 코드인데도 더 뾰족하게 눌려 보입니다.

이 차이는 코드가 잘못돼서가 아니라 SVG의 내부 좌표계와 실제 렌더링 폭이 서로 다른 값이기 때문에 생기는 현상입니다. 붙이기 전에 숫자 몇 개만 계산해 보면 내 사이트에서 어떻게 보일지 미리 알 수 있습니다.

요약 ① 물결 SVG는 가로 폭이 화면(부모 요소)에 맞춰 100%로 늘어나지만, 세로 높이는 고정된 숫자값이라 폭이 바뀌어도 그대로입니다. ② "물결 1개당 실제 가로 폭"은 섹션의 렌더링 폭을 물결 개수로 나눠서 직접 계산할 수 있습니다. ③ 이 값이 굴곡(진폭)보다 훨씬 크면 완만하게, 비슷하거나 작으면 뾰족하게 보입니다.

문제 — 미리보기와 실제 화면이 다르게 보이는 이유

물결 생성기에서 곡선을 마음에 들게 맞춘 뒤 SVG 코드를 복사해 사이트에 붙여 넣습니다. 그런데 데스크톱 모니터로 열어 보면 물결이 밋밋하게 퍼져 있고, 같은 페이지를 휴대폰으로 열면 물결이 촘촘하고 뾰족하게 보입니다.

색상·높이·굴곡 값은 하나도 안 바꿨는데 벌어지는 일이라 코드가 깨졌다고 오해하기 쉽습니다. 실제로는 물결 SVG가 원래 그렇게 동작하도록 만들어져 있어서 생기는 정상적인 현상입니다.

원인 — 가로는 화면에 맞춰 늘어나고 세로는 고정됩니다

이런 물결 SVG는 보통 viewBox="0 0 1440 높이" 형태의 내부 좌표계를 가집니다. 1440은 데스크톱 화면 폭으로 흔히 쓰는 단위이고, 이 좌표계 위에 물결 개수만큼 곡선이 균등한 간격으로 배치됩니다.

동시에 <svg> 태그에는 width="100%"와 height="180"처럼 높이가 고정된 숫자로 박혀 있습니다. width는 퍼센트라 부모 요소 폭에 맞춰 계속 늘어나지만, height는 화면 폭과 무관하게 항상 같은 픽셀 값을 유지합니다.

가로는 늘었다 줄었다 하는데 세로는 그대로이니, 내부 좌표계의 물결 모양은 화면 폭에 따라 가로로만 눌리거나 늘어납니다. 화면이 넓을수록 물결 1개가 차지하는 가로 폭이 늘어나 완만해 보이고, 화면이 좁을수록 가로 폭이 줄어 상대적으로 급하고 뾰족하게 보입니다.

확인 방법 — 계산으로 먼저 맞혀보기

이 비율은 도구를 열지 않아도 숫자 두 개만 있으면 계산할 수 있습니다. 필요한 건 물결을 붙일 섹션의 실제 렌더링 폭과, 사용하려는 물결 개수뿐입니다.

1. 브라우저 개발자 도구(요소 검사)로 물결을 넣을 섹션의 실제 렌더링 폭(px)을 확인합니다.
2. 그 값을 원하는 물결 개수로 나눕니다. 섹션 폭이 1200px이고 물결이 3개면, 물결 1개당 가로 폭은 400px입니다.
3. 이 400px을 원하는 굴곡(진폭) 값과 비교합니다. 진폭이 40px이면 가로 폭이 진폭의 10배라 상당히 완만하게 보이고, 진폭이 150px이면 가로 폭과 비슷해 뾰족하게 보입니다.

같은 물결 개수·굴곡 값이라도 섹션 폭이 다른 모바일과 데스크톱에서는 이 비율이 각각 따로 계산됩니다. 데스크톱 기준으로만 맞추면 모바일에서 예상보다 뾰족해 보일 수 있습니다.

저희 도구로 확인하기. 매번 폭을 재고 나누는 계산이 번거롭다면, 이 도구의 미리보기 자체가 부모 폭에 맞춰 늘어나는 진짜 SVG이므로 브라우저 창을 좁혀 보거나 휴대폰으로 열어 보는 것만으로 눌리는 정도를 바로 볼 수 있습니다.

직접 해보기 →

자주 막히는 지점

정리

물결 SVG가 화면마다 다르게 보이는 건 코드 오류가 아니라, 가로는 퍼센트로 늘어나고 세로는 고정 숫자로 박혀 있는 구조가 만드는 정상적인 동작입니다. 화면 폭이 바뀌면 물결 1개당 비율도 함께 바뀝니다.

사이트에 붙이기 전에 섹션 폭을 물결 개수로 나눠 진폭과 비교해 보면 실제로 어떻게 보일지 미리 가늠할 수 있습니다. 데스크톱과 모바일 폭을 각각 계산해 두면 예상치 못한 모양 차이를 줄일 수 있습니다.

자주 묻는 질문

물결 1개당 실제 가로 폭은 어떻게 계산하나요?

섹션의 실제 렌더링 폭(px)을 물결 개수로 나누면 됩니다. 예를 들어 섹션 폭이 1440px이고 물결을 3개로 설정했다면, 물결 1개는 약 480px의 가로 폭을 차지합니다. 이 값이 굴곡(진폭)보다 클수록 완만하게 보입니다.

다른 곳에서 받은 물결 SVG에도 같은 원리가 적용되나요?

내부 좌표계 폭(viewBox의 세 번째 숫자)에 비해 실제 렌더링 폭이 늘거나 줄면서 높이는 고정돼 있는 구조라면 같은 원리가 적용됩니다. 코드에서 viewBox 값과 width·height 속성이 각각 무엇으로 지정돼 있는지 먼저 확인하면 정확합니다.

굴곡(진폭)을 원하는 만큼 크게 올릴 수 없는 이유는 무엇인가요?

진폭이 높이의 절반에 가까워지면 물결의 봉우리와 골이 위아래 경계를 넘어가면서 모양이 깨지기 때문에, 높이값에 맞춰 진폭의 상한이 자동으로 제한됩니다. 높이를 먼저 늘리면 그만큼 진폭도 더 크게 올릴 수 있습니다.