SVG textPath 곡선 텍스트 연출 공식과 원형 패스 자간 정렬 가이드

직접 해보기 →

원형 로고 라벨, 엠블럼 뱃지 디자인, 타이포그래피 포스터 웹사이트 등에서 일반 직선의 줄글 텍스트를 원형이나 파도 형태로 구부려 배치하는 연출을 **곡선 텍스트(Curved Text / Text on Path)**라고 부릅니다.

일반 CSS transform: rotate()로 글자 한 자 한 자를 쪼개어 배치하면 간격이 왜곡되기 쉽지만, 웹 표준 SVG textPath 요소를 활용하면 텍스트가 패스(Path) 곡선의 유치 보간 라인을 따라 부드럽고 일정한 흐름으로 구부러집니다. 본 글에서는 SVG 곡선 텍스트의 패스 좌표 수식과 렌더링 제작법을 해설합니다.

---

1. SVG 원형 패스 및 textPath 보간 수식

원형 곡선을 따라 텍스트를 배치하기 위한 원형 SVG 패스(Path) 명령 구조와 시작점 위치 오프셋(startOffset) 계산 수식은 다음과 같습니다:

[ d = \text{"M } cx-r, cy \text{ a } r,r \ 0 \ 1,1 \ 2r,0 \text{ a } r,r \ 0 \ 1,1 \ -2r,0 \text{"} ]

주요 속성 요소 수식:

• 패스 ID 매핑: <path id="circlePath" ... /> 패스를 선언하고, <textPath href="#circlePath"> 형태로 하이퍼링크 매핑 바인딩을 수행합니다.
• 정중앙 정렬 오프셋 (startOffset="50%"): 텍스트를 곡선 패스의 가운데로 정렬하려면 text-anchor="middle" 속성과 함께 startOffset="50%"를 선언합니다.

---

2. SVG 원형 곡선 텍스트 구현 코드 예시

반지름 80px의 원형 패스를 따라 유려하게 구부러지는 텍스트 SVG 마크업 코드는 다음과 같습니다:

<svg width="240" height="240" viewBox="0 0 240 240">
  <defs>
    <!-- 원형 경로 지정 (중심 120, 120 / 반지름 80) -->
    <path id="textCirclePath"
          d="M 120, 120 m -80, 0 a 80,80 0 1,1 160,0 a 80,80 0 1,1 -160,0" fill="none" />
  </defs>

  <text font-size="16" font-weight="600" fill="#1e293b" letter-spacing="2">
    <textPath href="#textCirclePath" startOffset="50%" text-anchor="middle">
      PREMIUM QUALITY PRODUCTS • SINCE 2026 •
    </textPath>
  </text>
</svg>

[!NOTE] 매번 복잡한 SVG 패스 명령어 d="M ... a ..." 좌표를 일일이 수동으로 계산하며 텍스트 굴곡을 테스트하지 않고, 곡선 텍스트 생성기 도구를 활용하면 원하는 텍스트와 반지름, 곡률 방향을 입력하여 즉시 완성된 SVG 코드 소스를 복사해 사용할 수 있습니다.

---

3. 실무 곡선 타이포그래피 디테일 가이드

1. letter-spacing(자간) 조절: 텍스트가 안쪽 곡선(Concave)으로 굽어질 때는 글자끼리 겹치고, 바깥쪽 곡선(Convex)으로 벌어질 때는 자간이 넓어집니다. letter-spacing: 1px ~ 3px 속성을 미세 조정하여 글자 겹침을 방지하는 작업이 필수적입니다.
2. 패스 방향과 텍스트 뒤집힘 방지: SVG 패스를 그리는 방향(시계 방향 vs 반시계 방향)에 따라 텍스트가 바깥을 바라보거나 거꾸로 뒤집혀 렌더링될 수 있습니다. 텍스트가 읽기 편한 정방향을 바라보도록 패스의 arc 명령 파라미터(sweep-flag)를 올바르게 선언해야 합니다.