SVG Path의 d 속성 명령어 파헤치기: 직선(L), 베지에 곡선(C, S, Q, T), 아치(A) 드로잉

가장 강력하고 범용적인 SVG 요소는 단연 `<path>`입니다. 사각형, 원형, 다각형 등 모든 도형을 대체할 수 있으며, 이 세상에 존재하는 모든 자유 형태의 셰이프를 선언할 수 있습니다. `path` 내의 핵심 속성인 d(data) 속성 명령어 공식을 손으로 읽고 쓰는 기초 지식을 쌓아 봅니다.

1. 대문자(절대 좌표) vs 소문자(상대 좌표) 규칙

모든 path 명령어는 대소문자로 작동 방식이 나뉩니다.

• 대문자(M, L 등): 가상 캔버스의 고정 원점(0,0)을 기준으로 한 절대 좌표에 그립니다.
• 소문자(m, l 등): 현재 펜이 멈춰 있는 위치로부터 가로세로 얼만큼 이동할지 상대적 오프셋 좌표로 그립니다.

2. 필수 d 속성 드로잉 명령어 맵

기본적인 핵심 드로잉 명령어입니다.

• M / m (Move to): 펜을 그리지 않고 특정 좌표로 들어 올려 이동시킵니다.
• L / l (Line to): 현재 점에서 대상 지점까지 일직선을 그립니다.
• H / h & V / v: 가로(Horizontal) 또는 세로(Vertical) 일직선 드로잉.
• C / c (Cubic Bezier): 시작 제어점, 끝 제어점, 도착점을 선언해 부드러운 3차 베지에 곡선을 그립니다.
• A / a (Elliptical Arc): 원 또는 타원의 궤적을 빌려 둥근 아치(호)를 그립니다.

"d 속성의 수학 명령어를 직접 조작하면, 복잡한 로티(Lottie) 애니메이션 파일 없이도 완벽히 계산된 부드러운 형태 변화 모핑(Morphing)을 구현해 낼 수 있습니다."

3. 닫기 명령어 Z (Close Path)

명령어 문자열의 맨 끝에 `Z` 또는 `z`를 덧붙여 주면 현재 펜의 종점과 최초의 시작점을 일직선으로 이어주며 경로를 완전히 폐쇄시킵니다. 이 열려있는 면이 닫히면서 온전한 색상을 입힐 수 있는 면 구조(Fill)가 완성됩니다.

4. 요약: 수학으로 그리는 디자인 예술

베지에 곡선 수식의 매커니즘을 이해하고 XML 벡터 패스 좌표값을 텍스트 제어하여 극도로 가벼운 로고 그래픽이나 역동적인 차트를 직접 빚어 보십시오.