곡선 텍스트 로고, SVG로 둥글게 만드는 법
로고 옆에 브랜드명이 원을 따라 동그랗게 휘어져 있는 디자인을 자주 봅니다. 폰트를 눕히거나 자간을 벌려서 흉내 내봐도 실제 곡선처럼 매끈하게 나오지 않는데, 이건 글자 하나하나가 회전한 게 아니라 눈에 보이지 않는 곡선 경로를 따라 배치되어 있기 때문입니다. 이 원리를 알면 폰트 스타일이 아니라 SVG의 path 요소가 필요한 이유가 명확해집니다.
요약 ① 둥근 로고 글자는 폰트가 휜 게 아니라 SVG textPath가 문자를 원형 경로 위에 배치한 결과입니다 ② CSS의 transform이나 letter-spacing으로는 글자마다 다른 각도로 휘는 곡선을 만들 수 없습니다 ③ 경로의 시작점·끝점·반지름만 알면 원하는 곡률을 직접 그려서 만들 수 있습니다
로고 글자가 둥글게 휘는데 폰트로는 안 되는 이유
일반적인 텍스트는 보이지 않는 직선 기준선(baseline) 위에 글자가 나란히 놓이는 방식으로 그려집니다. CSS의 transform으로 글자 전체를 회전시키거나 letter-spacing으로 간격을 벌릴 수는 있지만, 이건 문자열 전체를 한 덩어리로 다루는 것이라 곡선의 각 지점마다 다른 각도로 기울어지는 효과는 나오지 않습니다.
로고에서 보는 둥근 글자는 기준선 자체가 직선이 아니라 원의 일부, 즉 곡선(arc)이기 때문에 만들어집니다. 글자마다 이 곡선 위의 서로 다른 위치에 놓이면서 자연스럽게 다른 각도로 회전해 보이는 것입니다. 이걸 구현하려면 폰트 속성이 아니라 텍스트가 따라갈 경로 자체를 정의해야 합니다.
확인하는 방법 — 곡선 경로 위에 텍스트를 배치하는 법
수작업으로 만들려면 먼저 SVG 안에 눈에 보이지 않는 경로 하나를 그립니다. 이 경로는 원의 일부인 호(arc)로, 시작점과 끝점, 반지름만 정하면 곡률이 자동으로 결정됩니다. 경로의 선 색상(stroke)은 투명하게 처리해서 경로 자체는 화면에 나타나지 않게 합니다.
다음으로 text 요소 안에 textPath 요소를 넣고, href 속성으로 방금 그린 경로의 id를 참조하게 합니다. 그러면 텍스트 안의 글자들이 경로를 따라 순서대로 놓이면서 각 글자의 위치와 회전각이 경로의 굴곡에 맞춰 자동으로 계산됩니다. 폰트가 아니라 경로가 텍스트 모양을 결정하는 원리가 바로 이것입니다.
여기에 startOffset을 50%, text-anchor를 middle로 맞추면 텍스트가 경로의 정중앙을 기준으로 좌우 대칭으로 배치됩니다. 이 두 값을 빼먹으면 글자가 경로 시작점에 쏠려서 원치 않는 위치에서 시작되는 경우가 많습니다.
저희 도구로 확인하기. 경로 좌표와 곡률을 손으로 계산하는 대신, 슬라이더로 반경·자간·글꼴 크기를 조절하며 결과를 바로 눈으로 확인할 수 있습니다.
무료 · 가입 불필요 · 브라우저에서 바로 곡선 텍스트 SVG 생성
자주 막히는 지점
| 상황 | 원인 |
|---|---|
| 자간(letter-spacing)만 벌려서 곡선처럼 보이려 함 | 글자 사이 간격만 넓어질 뿐 글자 자체는 여전히 일직선입니다 |
| textPath 없이 텍스트 전체에 회전만 적용 | 문자열 전체가 한 각도로 기울 뿐, 글자마다 다르게 휘는 곡선은 아닙니다 |
| 경로(path)에 stroke가 남아 있음 | 곡선 경로선까지 로고에 그대로 노출되어 지저분해 보입니다 |
| 반경(radius)을 텍스트 길이에 비해 너무 작게 설정 | 글자 사이 간격이 좁아져 서로 겹치거나 밀려납니다 |
표에 정리된 것처럼, 곡선 텍스트가 어색해지는 원인은 대부분 '경로 없이 글자만 손보려 했는가'로 귀결됩니다. 처음부터 경로를 기준으로 시작하면 이런 시행착오 자체가 줄어듭니다.
정리
로고 옆의 둥근 브랜드명은 폰트가 휜 게 아니라, SVG의 path로 그린 곡선 경로 위에 textPath로 글자를 얹은 결과입니다. CSS만으로는 이 효과를 낼 수 없고, 경로의 시작점·끝점·반지름을 정해야 곡률이 결정됩니다.
경로 좌표를 손으로 계산하고 눈대중으로 맞추는 대신, 슬라이더로 반경과 자간을 조절하며 곧바로 결과를 확인하면 원하는 곡선을 훨씬 빠르게 찾을 수 있습니다.
무료 · 가입 불필요 · 브라우저에서 바로 곡선 텍스트 SVG 생성
자주 묻는 질문
CSS 속성만으로 텍스트를 둥글게 만들 수 있나요?
표준 CSS에는 텍스트 전체를 하나의 곡선을 따라 배치하는 속성이 없습니다. transform으로 글자를 회전시키거나 letter-spacing으로 간격을 벌릴 수는 있지만, 글자마다 다른 각도로 휘는 곡선 형태는 SVG의 textPath처럼 경로 기반으로 배치하는 방식이 아니면 만들 수 없습니다.
로고에 곡선 경로선이 같이 보이면 어떻게 하나요?
경로(path)의 stroke 속성이 투명이 아니라 색상 값으로 남아 있으면 경로선까지 함께 보입니다. stroke를 transparent로 설정하면 텍스트가 따라갈 기준선 역할만 하고 화면에는 나타나지 않습니다.
곡선이 위로 볼록한지 아래로 볼록한지는 어떻게 정하나요?
경로를 그릴 때 쓰는 호(arc) 명령의 방향 플래그(sweep flag) 값으로 결정됩니다. 같은 시작점과 끝점이라도 이 값을 0으로 두느냐 1로 두느냐에 따라 위로 볼록한 곡선이 될 수도, 아래로 볼록한 곡선이 될 수도 있습니다.