SVG ViewBox와 종횡비(preserveAspectRatio) 완벽 반응형 레이아웃 설계법

SVG의 가장 강력한 강점 중 하나는 기계나 뷰포트 크기에 맞춰 유연하게 변형되는 반응형 성능입니다. 그러나 이 반응형 레이아웃을 마음먹은 대로 제어하려면 `viewBox` 속성과 `preserveAspectRatio` 속성을 완벽하게 장악해야 합니다. SVG 좌표 공간 매핑 원리를 상세 가이드합니다.

1. viewBox 속성의 4대 파라미터 파헤치기

`viewBox="min-x min-y width height"`는 가상 캔버스의 내부 좌표계를 설정합니다.

• 예시 `viewBox="0 0 100 100"`: 너비와 높이가 100 단위인 논리적 격자를 선언합니다. 이 캔버스는 외부 `width`와 `height`에 따라 늘어나거나 줄어듭니다.
• 크로핑 효과: `min-x`와 `min-y`를 양수나 음수로 바꿈으로써 가상 카메라의 초점(카메라 렌즈 앵글)을 움직이듯 내부 도형의 일부만 보여줄 수 있습니다.

2. preserveAspectRatio를 활용한 종횡비 수식

뷰포트와 viewBox의 가로세로 비율이 다를 때 처리하는 공식입니다.

<svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">
  ...
</svg>

• align 파라미터: `xMidYMid` (중앙 정렬), `xMinYMin` (좌상단 정렬), `xMaxYMax` (우하단 정렬) 등 정렬 기준점 매핑.
• meet vs slice: `meet`은 전체 그래픽이 잘리지 않고 다 보이도록 비율 축소(CSS의 contain에 해당). `slice`는 뷰포트를 채우기 위해 확대되면서 넘친 부분 절단(CSS의 cover에 해당).

"viewBox는 웹 표준 레이아웃 디자인에서 해상도 독립성을 보장하는 가장 가볍고 직관적인 아키텍처입니다."

3. CSS flexbox/grid 레이아웃 내에서 SVG 반응형 정렬 주의점

외부 스타일시트에서 SVG 노드의 `width: 100%; height: auto;`를 적용할 때, 반드시 SVG 태그 내부에 `viewBox` 속성이 들어가 있어야 브라우저가 종횡비(Aspect Ratio)를 올바르게 계산하여 여백이 깨지는 문제를 피할 수 있습니다.

4. 요약: 깨지지 않는 디자인의 기초

viewBox와 preserveAspectRatio 속성을 적절히 혼합하여 데스크톱과 모바일 화면 어디에서도 자연스럽게 확장되는 무결점 벡터 환경을 구현해 보십시오.