GPU에서 Bézier 곡선으로 폰트를 렌더링하는 Slug 알고리즘, 10년의 여정

Eric Lengyel • March 17, 2026

Slug 알고리즘의 시작

GPU에서 Bézier 곡선으로 폰트를 직접 렌더링하는 기법인 Slug 알고리즘은 2016년 가을에 개발되었습니다. 올해가 탄생 10주년이 되는 셈이네요. 저는 2017년 중반에 이 기법에 관한 논문을 JCGT에 발표했고, 곧 이어 Slug Library 1.0의 첫 라이선스 계약을 체결했습니다.

그 이후로 Slug는 게임 업계에서 광범위하게 채택되었습니다. 과학 시각화, CAD, 비디오 편집, 의료 장비, 플래너테이움까지 다양한 분야의 기업들이 사용하고 있거든요. Activision, Blizzard, id Software, 2K Games, Ubisoft, Warner Brothers, Insomniac, Zenimax, Adobe 같은 대형 회사들이 우리 클라이언트입니다. 제가 만든 소프트웨어 중에서 가장 성공한 제품이 되었다고 자부합니다.

Slug를 만든 이유

원래 Slug는 C4 Engine의 텍스트 렌더링을 개선하기 위해 만들었습니다. GUI뿐 아니라 게임 레벨 내부에서도 폰트가 아름답게 보여야 했거든요. 게임 레벨에선 텍스트가 매우 크게 표시되거나 비스듬한 각도에서 보일 수 있으니까요.

최근에는 Slug를 Radical Pie 수식 편집기를 만드는 데 사용했습니다. 이 도구는 매우 높은 품질의 폰트 렌더링이 필요할 뿐 아니라, 괄호, 근호, 화살표, 강조 표시 같은 벡터 그래픽도 렌더링해야 합니다. 메인 편집 창의 전체 사용자 인터페이스와 모든 대화 상자도 Slug로 그리고 있어요.

2017년 이후의 변화

이 글에서는 2017년 논문 발표 이후 렌더링 방법에서 어떤 부분이 변했는지 살펴보겠습니다. 그리고 마지막에는 자신의 프로젝트에서 Slug 알고리즘을 구현하려는 분들을 위한 흥미로운 소식으로 마무리하겠습니다.

Slug는 어떻게 작동하나?

Slug는 텍스트와 벡터 그래픽을 Bézier 곡선 데이터에서 직접 GPU로 렌더링합니다. 미리 계산되거나 캐시된 이미지를 담은 텍스처는 전혀 사용하지 않아요.

이렇게 구현하면서 동시에 빠르고 높은 품질을 유지하는 것은 꽤 까다로운 문제입니다. 부동소수점 반올림 오차를 다뤄야 하거든요. 견고한 렌더링이란 어떤 상황에서도 픽셀 손실, 번쩍임, 줄무늬 같은 아티팩트가 절대 나타나지 않는다는 의미입니다. 이건 증명 가능해야 해요.

빠르다는 것은 2016년의 게임 콘솔에서 화면 프레임 속도에 크게 영향을 주지 않으면서 어떤 양의 텍스트든 렌더링할 수 있다는 뜻입니다. 높은 품질이라는 것은 어떤 크기에서든, 어떤 각도에서든 깔끔하게 안티앨리어싱된 텍스트와 부드러운 곡선, 날카로운 모서리를 얻는다는 의미죠.

렌더링 알고리즘의 핵심 원리

Slug 렌더링 알고리즘이 이 모든 조건을 만족시키는 원리는 다음 다이어그램에 요약되어 있습니다. (PDF 버전을 보려면 클릭하세요.)

변경 사항들

견고성을 담당하는 근의 적격성 판정 방법과 winding number 계산 방법은 2017년 Slug 첫 출시 이후로 거의 변하지 않았습니다. 다만 논문에 서술된 렌더링 코드의 다른 부분들은 연도가 지나면서 조금씩 개선되었어요.

먼저 작은 변경 사항들을 간단히 설명하고, 그 다음에 "동적 확대(dynamic dilation)"라는 중요한 추가 기능에 대해 자세히 이야기하겠습니다.

Band Split 최적화 제거

원래 논문에는 글리프가 큰 크기로 렌더링될 때 사용할 수 있는 "band split 최적화"가 포함되어 있었습니다. 큰 글리프의 경우 속도 향상이 있었지만, 픽셀 셰이더의 발산을 유발했습니다. 그 결과 작은 크기의 텍스트 렌더링 성능이 조금 저하되었어요.

이 최적화는 또한 각 밴드와 교차하는 곡선들의 목록을 두 번 저장해야 했습니다. 한 번은 한쪽 방향의 레이를 위해 정렬하고, 다시 한 번은 반대 방향을 위해 정렬해야 했죠. 속도 개선 폭이 크지 않고 항상 효과가 있는 것도 아니어서, 결국 이 최적화를 제거하기로 했습니다.

덕분에 픽셀 셰이더의 복잡도가 줄어들었고, 더 중요하게는 밴드 데이터 크기를 절반으로 줄일 수 있었습니다. 밴드 데이터를 담은 텍스처는 이제 4개 16비트 컴포넌트 대신 2개만 사용하게 되었어요.

슈퍼샘플링 제거

논문의 확장 섹션에서는 슈퍼샘플링에 대해 다뤘습니다. 일반적인 크기의 텍스트 렌더링에는 필수는 아니지만, Slug 초기 버전에서는 매우 작은 크기의 텍스트 품질을 높이기 위해 적응형 슈퍼샘플링을 구현했습니다.

3D 씬에서 멀리 있는 작은 텍스트를 렌더링할 때, 슈퍼샘플링은 카메라가 움직일 때 앨리어싱을 크게 줄여줬거든요. 그리고 적응형이었으므로 더 큰 텍스트는 여전히 한 번만 샘플링했습니다.

하지만 슈퍼샘플링도 결국 제거했습니다. 이유는 두 가지인데, 첫째는 거의 읽을 수 없을 정도로 작은 텍스트에만 효과가 있었다는 점입니다. 둘째는 아래에서 설명할 확대 기법 덕분에 아주 작은 텍스트의 앨리어싱이 상당히 개선되었거든요.

슈퍼샘플링을 빼니 픽셀 셰이더가 훨씬 간단해졌습니다. (물론 조건부 컴파일로 비활성화되었던 코드지만, 제거하면서 일반 단일 샘플 셰이더가 더 빨라지진 않았어요.)

멀티컬러 이모지 렌더링

논문의 확장 섹션에서는 멀티컬러 이모지를 렌더링하기 위해 픽셀 셰이더에 루프를 추가하는 것도 논의했습니다.