FontForge SVG 가져오기: 그림을 글리프 윤곽으로 만들기

FontForge로 SVG를 가져오려면 사용할 글리프 슬롯을 열고 File → Import에서 형식을 SVG로 바꾼 뒤 파일을 선택하세요. 결과는 해당 글리프 편집 창의 윤곽 형상입니다. 사용할 수 있는 글꼴을 생성하기 전에 위치, 크기, 윤곽과 간격을 확인해야 합니다.

원본이 그림일 때 이 구분은 중요합니다. 추적은 픽셀에서 도형을 복원할 수 있지만, 서체의 의도한 기준선, 전진 폭이나 간격 리듬을 결정할 수는 없습니다. 글리프 하나로 시작해 이 확인을 끝내고 알파벳 전체를 가져오세요.

열린 글꼴 창이 아닌 글리프 슬롯으로 가져오기

새 FontForge 문서를 만들거나 작업 중인 글꼴을 연 뒤 편집할 문자 슬롯을 두 번 클릭하세요. 해당 윤곽 창 안에서 File → Import로 SVG를 가져오세요. 파일 선택기에 비트맵 형식이 먼저 나오면 형식 필터를 SVG로 바꾸세요. FontForge의 윤곽 가져오기 튜토리얼에 나온 순서입니다.

먼저 대상을 확인하세요. 직접 만든 소문자 g를 추가한다면 원하는 g 슬롯을 편집 중인지 확인하세요. g.svg라는 파일 이름으로 글리프와 매핑 확인을 대신할 수는 없습니다. 기존 윤곽을 교체하기 전에 글꼴 사본을 저장하세요.

가져온 후 점 하나를 선택해 편집 가능한 윤곽이 있는지 확인하세요. 추적 참조용 그림만 있다면 같은 결과에 도달한 것이 아닙니다. FontForge의 File 메뉴 문서는 이미지 가져오기, 글리프 윤곽과 글꼴 파일 작업을 구분합니다.

이 안내의 목표는 일반적인 윤곽 글리프입니다. 특수한 다중 레이어나 컬러 글꼴 작업에는 추가 요구 사항이 있습니다. 브라우저에 표시할 수 있는 일러스트가 자동으로 그런 글꼴이 되는 것도 아닙니다.

원본 벡터가 있다면 사용하기

벡터 편집기에서 글리프를 그렸다면 해당 도안을 직접 준비하세요. 원래 윤곽을 보관하고 별도의 가져오기 사본에서 지원되지 않는 표현 기능을 단순화하세요. 기존 벡터의 이미지를 다시 추적하면 이미 제어할 수 있던 도형이 바뀔 수 있습니다.

원본이 래스터 그림이나 생성 심볼이라면 PerfectVector로 이미지를 벡터 경로로 변환하고 SVG를 확인하세요. 편집을 시작할 윤곽을 얻을 수 있습니다. 글리프 메트릭, 간격과 글꼴 동작은 여전히 FontForge에서 만들어야 합니다.

손으로 그린 디자인은 선명하고 대비가 높은 원본을 선택하세요. 주변 문자와 종이의 불필요한 부분은 자르되 어센더와 디센더는 온전히 보존하세요. 손글씨 벡터화 안내는 원본 준비 단계를 다루고, 이미지 벡터화 설명은 변환이 실제로 무엇을 만드는지 설명합니다.

추적한 글자는 여전히 도안 형상입니다

넓은 내부 공간 하나와 뚜렷한 디센더가 있는 직접 만든 래스터 소문자 g를 준비하고 PerfectVector로 변환했습니다. 원본 SVG에는 닫힌 경로 3개가 있었습니다. 거의 흰색인 캔버스 배경, 검은 글자 실루엣과 거의 흰색인 글자 내부 공간 도형입니다. 내장 이미지는 없었습니다.

흰색 내부 공간은 검은 실루엣 위에 칠해져 있었습니다. 완성된 글꼴 글리프의 내부 윤곽이 이미 만들어진 것은 아닙니다. 흰 도형만 제거하면 아래의 꽉 찬 검정이 드러납니다. 가져오기 사본에서 확인된 배경을 제거하고 내부 공간을 실제 열린 공간으로 만든 뒤 글리프 채우기를 평가하세요.

비교는 확인한 윤곽 자료를 보여 주며 FontForge 시험이 아닙니다. 이 출력에 기준선, em 크기, 전진 폭이나 커닝을 지정하지 않았습니다. 깔끔해 보이는 디센더는 그림이 어디까지 뻗는지 보여 주지만 글꼴의 기준선 위치를 알려 주지는 않습니다.

메트릭을 조정하기 전에 명확한 윤곽 준비하기

수정하지 않은 SVG와 별도 작업 사본을 보관하세요. 작업 사본에서 관계없는 배경 도형을 제거하고, 눈에 보이는 두께가 글리프를 정의한다면 스트로크를 채워진 윤곽 도형으로 변환하며, 마스크나 클리핑 효과를 보존할 도형으로 바꾸세요. 가져오기 참조에 따르면 FontForge는 SVG의 일부 기능만 가져옵니다.

내부 공간이 있는 글자는 바깥 경계와 안쪽 경계를 모두 확인하세요. 두 경계는 의도한 채워진 영역을 나타내야 합니다. 흰 덮개는 흰 페이지에서 모습을 흉내 낼 수 있지만 글꼴에 올바른 윤곽 구조를 제공하지 않을 수 있습니다.

준비한 도안을 가져온 후 열린 끝, 의도치 않은 겹침과 자기 교차를 확인하세요. Element → Correct Direction은 바깥 윤곽과 중첩 윤곽의 방향을 번갈아 설정하지만 스플라인이 교차하면 예상치 못한 결과를 낼 수 있습니다. 명령을 신뢰하기 전에 교차를 해결하세요. FontForge는 Element 메뉴 참조에서 이 제한을 설명합니다.

목표 노드 수만 기준으로 단순화하지 마세요. 그림을 정의하는 모서리, 획 끝과 곡선을 보존하세요. 과도한 SVG 노드 안내는 불규칙한 윤곽을 진단하는 데 도움이 되지만, 글꼴 윤곽에는 실제로 읽힐 크기에서의 타이포그래피 판단도 필요합니다.

높이를 판단하기 전에 기준선 맞추기

가져온 도안이 너무 작거나 크거나 의도한 원점에서 벗어날 수 있습니다. 글리프의 모든 점을 선택해 함께 이동하거나 크기를 조정하세요. FontForge의 가져오기 튜토리얼은 윤곽을 제자리로 이동하고 Element → Transform → Transform에서 균일 배율을 적용하는 방법을 설명합니다.

소문자 g의 가장 낮은 점을 기준선에 맞추지 마세요. 그 점은 디센더에 속합니다. 의도한 기준선과 x높이를 기준으로 글자 몸통을 설정하고 디센더를 그 아래에 두세요. 같은 디자인에 이미 이웃 소문자 글리프가 있다면 비교하세요.

더 많은 글자를 준비할 때 일관된 원본 좌표계를 사용하세요. FontForge 튜토리얼은 1,000단위 작업 방식을 제시하고, Design With FontForge 가져오기 안내는 SVG의 수직 좌표와 어센트 및 디센트의 관계를 설명합니다. 이는 서로 맞추기 위한 설정 안내이며 모든 기존 SVG를 정사각형으로 늘려야 한다는 규칙은 아닙니다.

em당 단위가 다른 글꼴에는 그에 맞는 계획이 필요합니다. 마찬가지로 각 글자를 높이가 다른 SVG 페이지에 딱 맞게 자르면 일관된 배치에 필요한 공통 기준을 잃을 수 있습니다. 나머지를 처리하기 전에 글리프 1~2개로 기준을 정하세요.

문맥에서 간격 설정하기

글자의 눈에 보이는 너비와 전진 폭은 다릅니다. 전진 폭은 다음 문자가 어디에서 시작할지 알려 주고, 윤곽 주변의 빈 공간은 단어의 리듬을 만듭니다.

Window 메뉴에서 Metrics 창을 열고 다른 글자 옆의 글리프를 확인하세요. FontForge의 메트릭 튜토리얼은 윤곽을 이동해 왼쪽 사이드 베어링을 바꾸고 전진 폭 선으로 오른쪽 사이드 베어링을 바꾸는 방법을 설명합니다.

첫 g에서는 반복 문자와 이미 그린 글리프와의 짧은 조합을 비교하세요. 예를 들면 gg, ng, go입니다. 윤곽뿐 아니라 사이의 공간을 보세요. 잘못 정한 기본 사이드 베어링을 모두 커닝으로 보완하지 마세요. 먼저 일반적인 이웃 문자에 합리적인 간격을 정한 다음 예외적인 쌍을 다루세요.

SVG 페이지의 중앙에 있는 글리프도 텍스트에서는 어색하게 놓일 수 있습니다. 반대로 양쪽의 수치상 공간이 같다고 항상 보기 좋은 간격이 되는 것은 아닙니다. SVG 경계는 형상 참조로 보관하고 글꼴은 한 줄의 문자 안에서 판단하세요.

검증하고 시험용 글꼴 생성하기

글꼴 파일을 생성하기 전에 편집 가능한 FontForge 프로젝트를 저장하세요. Save는 작업 원본을 보존하며, Generate Fonts는 TrueType이나 OpenType 같은 글꼴 형식을 만듭니다. 검사와 생성 튜토리얼은 이 구분을 설명합니다.

준비한 글리프에 Element → Find Problems를 실행하세요. 제안된 모든 변경을 자동으로 받아들이지 말고 보고된 문제를 검토하세요. FontForge는 일부 검사 결과가 의도된 디자인 선택일 수 있다고 설명합니다. 그런 다음 글리프를 눈으로 다시 살펴보세요.

시험용 글꼴을 생성하고 사용할 애플리케이션에서 시험하세요. 작은 글자 크기와 큰 글자 크기 모두에서 문자 매핑, 내부 공간, 기준선, 디센더 여유와 간격을 확인하세요. 아직 작은 프로토타입이라면 시험 범위를 명확히 하세요. 윤곽 하나를 성공적으로 가져왔다고 전체 서체가 완성된 것은 아닙니다.

FAQ

FontForge에서 SVG의 크기나 위치가 잘못되는 이유는 무엇인가요? 원본 좌표와 페이지 치수가 글꼴의 em 및 기준선 설정과 맞지 않을 수 있습니다. 가져온 윤곽을 일관되게 이동하고 크기를 조정한 뒤 추가 글리프를 준비하기 전에 공통 좌표 계획을 정하세요.

PerfectVector로 그림을 완전한 글꼴로 만들 수 있나요? PerfectVector는 래스터 도안을 벡터 경로로 변환합니다. 글리프 윤곽, 매핑, 메트릭, 간격과 생성할 글꼴 파일을 준비하려면 여전히 글꼴 편집기가 필요합니다.

글자의 내부 공간이 채워지는 이유는 무엇인가요? 구멍처럼 보이는 부분이 흰 덮개인지, 안쪽 윤곽이 있는지, 윤곽 방향이나 교차를 수정해야 하는지 확인하세요. 원본 SVG가 흰 페이지에서 어떻게 보였는지에 의존하지 말고 준비한 글리프의 채우기를 확인하세요.

SVG 글자를 한 번에 모두 가져와야 하나요? 먼저 대표 글리프 하나를 완성하세요. 배율, 기준선, 윤곽과 간격을 확인한 뒤 나머지 글자에 일관된 준비 방식을 적용하세요. 일괄 가져오기는 해당 디자인 값을 대신 결정하지 않습니다.

Sources

1. FontForge 윤곽 가져오기 튜토리얼 — 글리프 슬롯 가져오기, 위치 조정, 균일 배율과 원본 치수 맞추기.
2. FontForge File 메뉴 — 가져오기 유형, SVG 지원과 원본 파일 및 글꼴 파일 작업.
3. FontForge Element 메뉴 — 윤곽 방향 수정과 교차 관련 제한.
4. Design With FontForge: 글리프 가져오기 — SVG 좌표, 어센트와 디센트 설정.
5. FontForge 메트릭 튜토리얼 — 사이드 베어링, 전진 폭, 문맥 속 간격과 커닝.
6. FontForge 검사와 생성 튜토리얼 — 문제 검토와 사용 가능한 글꼴 형식 생성.

첫 글리프가 픽셀로만 있다면 그림을 편집 가능한 벡터로 변환하고, 내부 공간과 바깥 윤곽을 확인한 뒤 FontForge에서 해당 글리프 하나를 완성하세요. 올바르게 배치하고 간격을 설정해 시험한 윤곽이 나머지 글꼴의 유용한 출발점입니다.