SVG 손코딩 마스터: XML 구조와 기본 도형(Path, Rect, Circle) 벡터 렌더링 원리

대부분의 디자이너와 프론트엔드 개발자들은 일러스트레이터나 피그마에서 SVG를 내보내기하여 웹사이트에 붙여넣습니다. 그러나 불필요한 메타데이터가 섞이고 코드 제어가 되지 않습니다. SVG의 XML 노드 구조를 이해하고 직접 코드로 드로잉하는 노하우를 얻으면 무한히 확장되면서도 바이트 단위로 극단적으로 압축된 벡터 자산을 다룰 수 있습니다.

1. SVG의 뼈대: XML 마크업 규격

SVG는 XML(Extensible Markup Language)을 기반으로 한 2차원 벡터 그래픽 포맷입니다.

• <svg> 루트 노드: 가상의 캔버스 공간과 주소 네임스페이스(`xmlns="http://www.w3.org/2000/svg"`)를 정의합니다.
• 벡터 렌더링: 픽셀 격자(비트맵) 대신 좌표와 수학 공식으로 이미지를 묘사하므로, 모바일 레티나 고해상도 화면에서도 전혀 깨지지 않는 선명함을 보장합니다.

2. 기본 도형(Basic Shapes) 직접 코딩해보기

간단한 도형의 마크업 형태입니다.

<svg width="200" height="200" viewBox="0 0 100 100">
  <!-- 사각형 -->
  <rect x="10" y="10" width="30" height="30" fill="#3b82f6" rx="5" />
  
  <!-- 원형 -->
  <circle cx="70" cy="25" r="15" fill="#ef4444" />
  
  <!-- 다각형 -->
  <polygon points="50,55 30,85 70,85" fill="#10b981" />
</svg>

"컴퓨터 그래픽을 이루는 기본 수식의 궤적을 이해할 때, 웹 퍼포먼스의 극한을 구현할 수 있습니다."

3. 왜 피그마의 복사 코드를 정제해야 하는가?

피그마에서 복사된 SVG 파일은 다양한 메타데이터와 복잡하게 감싸진 `<g>` 그룹 태그, 절대 경로 `id`가 뒤엉켜 중복 적용 시 스타일 오염이 일어나기 쉽습니다. 따라서 손코딩 규칙에 맞게 필요한 태그만 최소화하여 정제하는 것이 가볍고 빠릅니다.

4. 요약: 가장 완벽하고 확장 가능한 그래픽

수학적 좌표로 구성된 SVG 구조를 정복하여 인터랙티브한 웹 애니메이션 컴포넌트의 토대를 완성해 보시기 바랍니다.