SVG 그라디언트와 패턴: linearGradient와 pattern 활용 화려한 배경 채우기

웹사이트 배경에 화려한 그라디언트 이미지나 반복적인 격자 패턴을 씌울 때, 수 메가바이트의 PNG 이미지 파일을 사용하면 페이지 로딩 속도가 걷잡을 수 없이 하락합니다. SVG의 linearGradient(선형 그라디언트), radialGradient(방사형 그라디언트), pattern(패턴) 노드를 선언하면 단 몇 줄의 텍스트 마크업만으로 무한히 수려한 배경을 구축할 수 있습니다.

1. linearGradient를 이용한 입체적인 채우기

각도를 지휘 제어하여 색상을 혼합하는 기본 마크업 형태입니다.

<defs>
  <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
    <stop offset="0%" style="stop-color:#3b82f6;stop-opacity:1" />
    <stop offset="100%" style="stop-color:#8b5cf6;stop-opacity:1" />
  </linearGradient>
</defs>
<rect width="100%" height="100%" fill="url(#grad1)" />

2. pattern을 활용한 격자무늬 타일링 기법

`pattern` 요소를 이용해 타일 한 조각을 정의해 두면, 가로세로 축을 따라 무한히 뻗어 나가는 격자나 빗금 무늬를 단 1KB 이하로 선사합니다.

<defs>
  <pattern id="grid" width="20" height="20" patternUnits="userSpaceOnUse">
    <rect width="20" height="20" fill="none" />
    <path d="M 20 0 L 0 0 0 20" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="1" />
  </pattern>
</defs>
<rect width="100%" height="100%" fill="url(#grid)" />

"웹 배경에 반복되는 패턴을 코드로 그리는 일은 비트맵 파일을 다운로드하는 트래픽 낭비를 차단하는 최고의 성능 가속 방법입니다."

3. 그라디언트와 패턴의 오버레이(Overlay) 융합

두 개의 사각형(`<rect>`)을 위아래로 쌓아, 아래쪽 사각형에는 부드러운 보라빛 `linearGradient`를 채우고 위쪽 사각형에는 반투명 흰색 선으로 이뤄진 `pattern`을 매칭하면, 마치 3D 홀로그램 공간 같은 모던 테크 감성의 랜딩 페이지를 손쉽게 구축할 수 있습니다.

4. 요약: 가장 가벼운 웹 비주얼 구축

화려한 무제한 타일 배경을 순수 코드로 그려내어 서버 비용과 로딩 대기 시간을 99% 절감해 보십시오.