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

2026년 7월 23일

원형 로고 라벨, 엠블럼 뱃지, 타이포그래피 포스터 등에서 직선의 텍스트를 원형이나 파도 모양으로 구부려 배치하는 연출을 **곡선 텍스트(Curved Text)**라고 부릅니다. CSS의 transform: rotate()로 글자를 한 자씩 회전시켜 배치하는 방법은 글자 수가 늘어날수록 간격이 어긋나기 쉬워서, 실무에서는 웹 표준인 SVG의 textPath 요소를 주로 사용합니다. 이 글에서는 원형 패스의 좌표 규칙과 텍스트를 그 위에 정렬하는 실제 코드 작성법을 정리합니다.

요약 ① SVG의 path로 원형 곡선을 그리고, textPath로 텍스트를 그 위에 얹습니다. ② startOffset="50%"와 text-anchor="middle"을 함께 쓰면 텍스트가 곡선 정중앙에 정렬됩니다. ③ 곡률에 따라 자간이 달라지고, 패스를 그린 방향에 따라 텍스트가 뒤집힐 수 있어 두 가지를 함께 확인해야 합니다.

글자마다 회전시키는 방식의 한계

원형 로고나 스탬프 느낌을 내려고 글자마다 transform: rotate()를 걸어 하나씩 배치하는 방법을 먼저 시도하는 경우가 많습니다. 문제는 글자 수가 늘어날수록 각도 계산에 오차가 쌓여, 특정 구간에서 글자끼리 겹치거나 벌어진 채로 렌더링된다는 점입니다. 반지름이나 텍스트 길이가 바뀔 때마다 글자마다 각도를 다시 계산해야 하는 점도 유지보수를 어렵게 만듭니다.

이 문제는 브라우저가 이미 지원하는 SVG textPath로 해결할 수 있습니다. 글자 하나하나의 각도를 계산하는 대신, 곡선(패스) 자체를 한 번만 정의하면 텍스트가 그 패스를 따라 자동으로 배치됩니다.

원형 패스와 textPath로 직접 만드는 방법

원형 곡선은 SVG의 path 요소에 원을 그리는 d 속성값을 지정해 만듭니다. 중심 좌표를 cx, cy, 반지름을 r이라고 할 때, d 속성이 따르는 규칙은 다음과 같습니다. 아래는 값을 대입하기 전의 규칙을 문자로 표기한 것이라 cx, cy, r을 실제 숫자로 바꾸지 않으면 SVG에 그대로 붙여넣어도 해석되지 않습니다.

d="M (cx-r),cy a r,r 0 1,1 (2r),0 a r,r 0 1,1 (-2r),0" (cx, cy, r은 실제 좌표·반지름 숫자로 치환해야 하는 자리표시자)

이 규칙은 중심에서 반지름만큼 왼쪽으로 이동한 지점(M)에서 시작해, 반원 두 개(a 명령 두 번)를 이어 붙여 완전한 원을 그리는 것을 의미합니다. cx, cy, r 자리에 실제 숫자를 대입한 결과는 아래 전체 코드에서 바로 확인할 수 있습니다.

이 경로에 텍스트를 얹으려면 두 가지를 함께 지정해야 합니다.

패스와 텍스트 연결: <path id="textCirclePath" ... />로 패스를 선언하고, <textPath href="#textCirclePath">로 그 id를 참조해 텍스트를 매핑합니다.
정중앙 정렬: 텍스트를 곡선 가운데로 맞추려면 text-anchor="middle" 속성과 startOffset="50%"를 함께 지정합니다.

반지름 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>

참고 이 d 속성 좌표를 텍스트 길이나 반지름이 바뀔 때마다 손으로 다시 계산하고 브라우저에서 결과를 확인하는 과정은 반복이 많습니다. 곡선 텍스트 생성기 도구를 쓰면 텍스트, 반지름, 자간, 휘는 방향을 슬라이더로 조절하며 미리보기로 바로 확인하고, 완성된 SVG 코드를 그대로 복사할 수 있습니다.

좌표를 직접 맞추는 과정을 건너뛰고 싶다면 저희 도구로 확인하기.

곡선 텍스트 생성기

원하시는 문구와 원형 패스 반지름, 자간을 입력하여 원형 및 파도 곡선을 따라 구부러지는 SVG 타이포그래피 코드를 즉시 생성해 보세요.

이 화면에서 문구와 반지름, 자간을 조절하면 위에서 설명한 d 속성과 textPath 속성이 실시간으로 반영된 SVG 코드가 나타납니다.

자주 막히는 지점

증상	원인	해결
안쪽으로 굽을 때 글자가 겹침	오목한(Concave) 방향에서는 글자 사이 실제 간격이 좁아짐	`letter-spacing`을 조금씩 늘리며 겹치지 않는 지점을 확인(적정 값은 글꼴 크기·반지름·텍스트 길이마다 달라 고정값이 없음)
텍스트가 거꾸로 뒤집혀 보임	path를 그린 방향(시계 방향 vs 반시계 방향)에 따라 텍스트가 안쪽을 보고 배치됨	arc 명령의 sweep-flag 값을 반대로 바꿔 방향 전환
곡선 중앙에 텍스트가 안 옴	text-anchor 또는 startOffset 값 누락	`text-anchor="middle"`과 `startOffset="50%"`를 함께 지정

세 가지 모두 반지름과 텍스트 길이 조합에 따라 함께 나타나는 경우가 많아, 하나를 고치면 다른 하나가 다시 어긋나기도 합니다.

정리

SVG textPath는 글자마다 회전시키는 방식보다 곡선을 따라 안정적으로 텍스트를 배치합니다.
원형 패스의 d 속성은 M(시작점)과 a(반원 두 개)로 구성됩니다.
text-anchor="middle"과 startOffset="50%"를 함께 써야 텍스트가 곡선 중앙에 정렬됩니다.
오목한 곡선에서는 letter-spacing을 늘리고, 텍스트가 뒤집히면 sweep-flag를 반전시켜야 합니다.
좌표를 직접 계산하는 대신 도구로 값을 조절하며 결과를 바로 확인할 수 있습니다.

곡선 텍스트 생성기

원하시는 문구와 원형 패스 반지름, 자간을 입력하여 원형 및 파도 곡선을 따라 구부러지는 SVG 타이포그래피 코드를 즉시 생성해 보세요.

📖 현장의 뼈저린 경험담: 곡선 텍스트와 씨름한 3가지 사연

실무 현장에서 곡선 텍스트를 다루다 보면 다양한 한계와 예상치 못한 문제를 마주하게 됩니다. 다음은 디자이너와 개발자들이 겪은 3가지 실전 사례입니다.

사연 1: 30개의 태그를 하나씩 회전시킨 뱃지 디자이너의 눈물

프리랜서 디자이너 A씨는 브랜드 인증 뱃지를 CSS만으로 구현하기 위해 태그 30개를 각각 transform: rotate(12deg) translateY(-80px)로 수동 배치했습니다. 하지만 클라이언트가 브랜드명을 12자에서 18자로 변경하자, 모든 글자의 각도와 자간을 다시 계산하며 6시간을 재작업해야만 했습니다. 이후 SVG 를 도입한 결과, 텍스트가 몇 자이든 패스 길이에 맞춰 즉시 자동으로 흘러가게 배치되는 기적을 맛보았습니다.

사연 2: 굿즈 제작자의 뒤집힌 타이포그래피 미스터리

커스텀 티셔츠 쇼핑몰을 운영하는 B씨는 하단으로 둥글게 굽은 곡선 타이포그래피를 SVG로 제작했습니다. 그런데 브라우저에 렌더링된 글자는 안쪽으로 거꾸로 뒤집혀(Upside down) 읽을 수 없는 형태가 되었습니다. 며칠을 헤맨 끝에 SVG 원호 명령(Arc Command)의 sweep-flag 값이 0으로 설정된 탓에 시계 반대 방향으로 패스가 그려진 것을 발견했고, 이 값을 1로 수정하자 마법처럼 글자가 정방향으로 돌아오는 것을 경험했습니다.

사연 3: 고급 시계 브랜드 웹사이트의 자간 겹침 대참사

웹 에이전시 개발팀 C씨는 고급 시계 다이얼처럼 하단(오목한 부분)에 곡선 텍스트를 배치했습니다. 하지만 폰트의 상단이 안쪽으로 좁아지면서 글자끼리 부딪혀 까만 덩어리처럼 뭉개지는 현상이 발생했습니다. 원인을 분석한 결과, 볼록한 곡선과 달리 오목한(Concave) 곡선에서는 자간이 심하게 압축된다는 사실을 깨달았습니다. 결국 letter-spacing을 2px~4px 추가하고 패스 곡률을 세밀하게 조정하여 가독성을 완벽하게 복구할 수 있었습니다.

🔬 핵심 기술 메커니즘 — SVG 패스와 정렬의 물리학

문제가 발생하는 근본적인 기술적 배경을 이해하면 어떤 상황에서도 당황하지 않고 올바른 해결책을 도출할 수 있습니다.

SVG 원호 명령(Elliptical Arc Command 'A' 또는 'a')의 해부

원형 패스를 그릴 때 사용하는 속성은 다음과 같습니다: a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy

rx, ry: 타원의 가로, 세로 반지름입니다. 정원일 경우 두 값이 같습니다.
large-arc-flag (0 또는 1): 두 점을 연결하는 호(Arc) 중 180도 미만의 짧은 호를 그릴지(0), 180도 이상의 긴 호를 그릴지(1) 결정합니다.
sweep-flag (0 또는 1): 각도가 양수 방향(시계 방향, 1)으로 그려질지, 음수 방향(반시계 방향, 0)으로 그려질지를 결정합니다. 이 플래그가 뒤집히면 텍스트가 위아래로 완전히 뒤집혀 렌더링됩니다!

SVG 정렬의 물리학

곡선 텍스트를 완벽하게 제어하기 위한 핵심 속성 3가지는 다음과 같습니다.

href="#pathId": 텍스트 문자열을 수학적인 벡터 경로(Path)에 바인딩합니다.
startOffset="50%": 텍스트의 앵커(기준점)를 전체 패스 길이의 정확히 50%(중앙) 지점에 위치시킵니다.
text-anchor="middle": 텍스트 문자열 자체의 중앙을 위에서 설정한 50% 앵커 포인트에 정렬합니다. 두 속성이 결합해야 완벽한 중앙 정렬이 완성됩니다.

볼록(Convex) vs 오목(Concave) 곡률의 압축 원리

볼록한 곡선 (원의 상단): 글자의 윗부분이 바깥쪽으로 부채꼴처럼 퍼지며 자간이 자연스럽게 넓어집니다.
오목한 곡선 (원의 하단): 글자의 윗부분이 안쪽으로 좁아지면서 압축이 발생해 글자끼리 충돌할 위험이 높습니다. 이를 방지하려면 하단 곡선에서는 반드시 letter-spacing을 2px~4px 정도 여유 있게 주어야 합니다.

📊 상황별 최적의 설정 및 비교 분석 가이드

곡선 텍스트를 구현하는 다양한 기술의 장단점을 명확하게 비교해 보았습니다.

구현 기술	반응형 스케일링	동적 텍스트 편집	SEO 검색 색인	크로스 브라우징	타이포그래피 정밀도
SVG	완벽함 (ViewBox)	실시간 지원	100% 색인 가능	모든 최신 브라우저	매우 높음 (벡터 렌더링)
CSS transform: rotate()	매우 어려움	불가능에 가까움	텍스트 파편화 위험	우수함	낮음 (수동 계산 오차)
CSS offset-path	제한적 가능	실시간 지원	100% 색인 가능	일부 구형 브라우저 미지원	중간 (모션 초점)
Canvas 렌더링	크기 변경 시 픽셀화	스크립트 재호출 필요	불가능 (캔버스 내 숨김)	우수함	높음
정적 이미지 (PNG/WebP)	반응형 가능	불가능 (재작업 필요)	Alt 태그 의존	100% 호환	디자인 툴 의존

표에서 보듯, 완벽한 반응형 렌더링과 SEO, 유지보수성을 모두 잡기 위해서는 SVG 기반의 접근이 압도적으로 유리합니다.

⚠️ 곡선 텍스트 제작 시 피해야 할 치명적인 실수 5가지

수많은 사용자들이 무심코 반복하는 대표적인 실수 패턴들을 사전에 점검하여 시행착오를 제로(0)로 줄일 수 있습니다.

text-anchor="middle" 누락: startOffset="50%"만 지정하면 텍스트의 '시작점'이 50% 지점에 맞춰져 오른쪽으로 크게 치우칩니다. 반드시 두 속성을 함께 사용해야 합니다.
반시계 방향으로 패스 그리기: 경로를 거꾸로 그리면 텍스트가 바닥을 향해 거꾸로 뒤집힙니다. 위쪽을 향하게 하려면 반드시 시계 방향(sweep-flag=1)으로 그려야 합니다.
오목한 하단 곡선에서 letter-spacing 무시: 하단으로 굽은 곡선에서는 글자 상단이 좁아지며 충돌이 발생합니다. 자간을 확보하지 않으면 글자를 읽을 수 없게 됩니다.
내의 패스에 display: none 적용: 시각적으로 패스를 숨기려고 display: none을 사용하면 Safari 등 일부 브라우저에서 렌더링 자체가 깨집니다. 패스에는 fill="none"을 사용해야 합니다.
반응형 ViewBox 없이 고정 font-size 사용: 고정 픽셀로 폰트 크기를 지정하면 화면이 작아질 때 디자인이 붕괴됩니다. SVG의 viewBox 비율에 맞춘 상대적인 크기를 사용해야 합니다.

💡 왜곡 없는 SVG 타이포그래피 워크플로우 5단계

실무에서 실패 없이 곡선 텍스트를 구현하기 위한 표준 프로세스입니다.

1단계 (중심점과 곡률 계산): 중앙 좌표 (cx, cy)와 원하는 원의 반지름 r을 결정합니다.
2단계 (SVG 원형 패스 구축): 두 개의 반원 원호 명령을 결합하여 완벽한 원형 패스를 작성합니다. (M (cx-r),cy a r,r 0 1,1 2r,0 a r,r 0 1,1 -2r,0)
3단계 (텍스트 바인딩): 작성된 패스에 유니크한 ID를 부여하고, 로 텍스트를 연결합니다.
4단계 (중앙 정렬 적용): 요소에 startOffset="50%"와 text-anchor="middle" 속성을 추가하여 디자인 밸런스를 맞춥니다.
5단계 (자간 조정 및 디바이스 검수): letter-spacing으로 자간을 보정하고, 데스크톱과 모바일 뷰포트에서 타이포그래피가 선명한지 최종 검증합니다.

🔍 전문가가 공개하는 곡선 타이포그래피 팁 7선

수년간의 실무 노하우와 기술 표준 분석을 바탕으로 도출된 핵심 전문가 팁입니다.

대문자 뱃지에는 0.1em~0.2em 자간 필수: 둥근 뱃지에 들어가는 All-Caps 영문 텍스트는 약간 넓은 자간이 주어져야 원형의 곡선미가 훨씬 살아나고 가독성이 극대화됩니다.
상단/하단 이중 곡선에는 sweep-flag 반전 패스 두 개 활용: 로고 위아래로 텍스트가 정방향으로 읽히도록 하려면, 윗부분은 시계 방향, 아랫부분은 시계 반대 방향으로 향하는 별도의 패스 두 개를 결합해야 합니다.
벡터 경로는 내부에 보관: 텍스트를 이끌어주는 기본 뼈대인 요소는 태그 안에 넣어 화면에 노출되지 않으면서도 참조 가능하도록 깔끔하게 구조화하세요.
viewBox="0 0 300 300"으로 비율 고정: 고정 폭 대신 viewBox를 활용해 SVG 내의 텍스트가 컨테이너 크기에 비례하여 완벽하게 반응형으로 줄어들거나 늘어나게 만듭니다.
CSS @keyframes로 무한 회전 애니메이션 부여: 스탬프 로고에 생동감을 불어넣고 싶다면 부모
타이포그래피 대비 테스트: 두꺼운 지오메트릭 산세리프(Bold Geometric Sans)와 슬랩 세리프(Slab Serif)를 대조해 보며 곡선에서 어떤 글꼴이 왜곡을 덜 받는지 테스트해 보세요.
생성기 도구로 시간 단축: 복잡한 좌표 수식을 직접 계산하기보다는 전용 웹 툴을 활용하여 즉각적으로 SVG 마크업을 생성하고 미세 조정하는 것이 효율적입니다.

🎯 최종 결정 트리: 어떤 형태의 곡선을 선택해야 할까?

목적에 맞는 최선의 디자인 형태를 결정하기 위한 가이드라인입니다.

시나리오 A (단순하고 안정적인 스마일 형태) ➔ 상단 단일 아치 (Top Arc): 로고 상단에 슬로건을 배치할 때 가장 가독성이 높습니다.
시나리오 B (하단을 받쳐주는 묵직한 형태) ➔ 하단 오목 아치 (Bottom Arc): 설립 연도나 짧은 인증 마크를 삽입할 때 유용하며 자간 추가가 필수입니다.
시나리오 C (클래식한 인증 뱃지 및 스탬프) ➔ 상/하단 이중 원형 배열 (Dual Circular Badge): 브랜드명과 슬로건이 로고 심볼을 완전히 감싸는 형태로 신뢰감을 줍니다.
시나리오 D (창의적이고 역동적인 브랜딩) ➔ 파도 물결 패스 (Wave Path): 자유롭고 유연한 무드를 연출할 때 텍스트가 물결치듯 흐르도록 디자인합니다.

📑 핵심 용어 사전 및 1줄 치트시트

실무 작업을 진행할 때 반드시 숙지해 두어야 할 필수 용어 요약집입니다.

텍스트패스(textPath): 문자를 지정된 벡터 선(Path)을 따라 흐르도록 결합해 주는 SVG의 핵심 요소입니다.
SVG 원호 명령(Arc Command 'a'): 수학적 파라미터(반지름, 축 회전, 플래그 등)를 통해 곡선을 그리는 SVG 명령어입니다.
sweep-flag(그리기 방향 플래그): 원호를 시계 방향으로 그릴지 반시계 방향으로 그릴지 결정하여 글자 뒤집힘을 제어하는 속성입니다.
볼록/오목 곡률(Convex vs Concave): 바깥으로 팽창하는 둥근 형태(볼록)와 안쪽으로 파고드는 형태(오목)를 뜻하며, 자간 렌더링에 직접적인 영향을 미칩니다.
자간(letter-spacing): 글자와 글자 사이의 간격을 뜻하며, 특히 오목한 곡선에서 글자 겹침을 방지하기 위해 필수적으로 조절해야 합니다.

자주 묻는 질문

현업 실무자들과 사용자들이 가장 궁금해하는 심화 질문들을 엄선하여 명쾌한 해답을 정리했습니다.

Q1. 곡선 텍스트를 만들었는데 글자가 왜 자꾸 위아래로 뒤집혀 나오나요?

A1. 이는 SVG 패스가 그려진 방향 때문입니다. 패스를 왼쪽에서 오른쪽(시계 반대 방향)으로 그리면 텍스트가 안쪽을 바라보며 렌더링됩니다. 이 문제를 해결하려면 원호 명령에서 sweep-flag 값을 반대로 변경하여 패스가 시계 방향으로 그려지도록 수정해야 텍스트가 정방향으로 똑바로 서게 됩니다.

Q2. 원의 하단 곡선(오목한 부분)에 글자를 넣으면 왜 글자가 겹치고 뭉개지나요?

A2. 부채꼴이 안으로 접히는 원리와 같습니다. 폰트의 하단(Baseline)은 넒은 호를 타지만, 글자의 상단은 안쪽 좁은 호를 향하기 때문에 글자 위쪽이 서로 충돌하게 됩니다. 이 현상은 정상적인 기하학적 압축이므로, 오목한 곡선에서는 반드시 letter-spacing 값을 여유 있게 주어 충돌을 인위적으로 분산시켜야 합니다.

Q3. 만들어진 곡선 텍스트 SVG를 모바일에서도 깨지지 않게 반응형으로 만들려면 어떻게 하나요?

A3. SVG 태그에 명시적인 width나 height 픽셀 값을 고정하지 말고, 대신 viewBox="0 0 width height" 속성만을 남겨 비율을 정의해야 합니다. 그리고 CSS에서 svg { width: 100%; height: auto; }를 적용하면 화면 크기가 작아지더라도 텍스트의 곡률과 벡터 해상도가 완벽하게 유지되면서 부드럽게 축소됩니다.