SDF 폰트 가이드 작성하기
I’m happy to help translate the text, but I don’t see the content you’d like translated—only the source line is provided. Could you please paste the text you want translated (excluding any code blocks or URLs you want to keep unchanged)? Once I have the content, I’ll translate it into Korean while preserving the original formatting.
Background
2024년에 나는 서명 거리 필드(SDF) 렌더링을 이용해 폰트에 아웃라인과 그림자를 한 번에 구현하려는 실험을 시작했습니다. 게임과 맵 생성기에 적용할 수 있는 프로토타입을 만들었지만, 왜 어떤 접근 방식은 성공하고 다른 방식은 실패하는지 완전히 이해하지 못했습니다. 그때의 메모가 “sdf fonts” [1] 검색 결과 상위에 나타나면서, 제대로 된 가이드를 만들게 되었습니다.
나는 시도한 내용들을 22장의 일기 형식 페이지와, 여러 SDF 폰트 라이브러리(msdfgen, stb_truetype, tiny‑sdf 등)를 다루는 미완성 “overview” 페이지로 정리했습니다. 개요 페이지에는 각 라이브러리의 출력물을 보여주는 코드 스니펫, 다이어그램, 스크린샷이 포함되었습니다.
Sketch of distance fields, created with Excalidraw [2]
첫 번째 개요 시도
원래 범위가 너무 방대했습니다. 저는 대부분의 시간을 msdfgen에 할애했으며, 다른 라이브러리에 대한 충분한 지식이 없어 일관된 가이드를 작성할 수 없었습니다. 따라서 초점을 좁히기로 결정했습니다.
Redesign 2 – msdfgen에 집중
가이드를 msdfgen에만 한정하면서도 아틀라스 크기, 안티앨리어스 폭, 셰이더 파생값, 스무딩 함수와 같은 트레이드‑오프에 대해서는 여전히 논의했습니다. 개념을 설명하기 위해 여러 다이어그램을 만들었습니다:
Redesign 2에서 만든 다이어그램, Excalidraw로 제작 [3]
또한 다양한 아틀라스 크기의 영향을 비교하기 위해 광범위한 테스트를 수행하고, 많은 스크린샷을 캡처하고 사용된 명령을 기록했습니다. 하지만 이전 블로그 포스트(one 및 two)에서 이미 문서화한 동일한 테스트를 반복하는 것은 중복된 작업처럼 느껴졌기에 방향을 바꾸었습니다.
Redesign 3 – JavaScript와 GPU 구현을 이용한 “How‑to” 페이지
새로운 방향은 먼저 개념을 제시하고, 그 다음 두 가지 구현을 제공하는 것이었습니다:
- JavaScript를 사용한 CPU 렌더링.
- 프래그먼트 셰이더를 이용한 GPU 렌더링.
다이어그램을 더 깔끔한 스타일로 새롭게 정리했습니다:
Redesign 3에서 만든 다이어그램, 손으로 그린 SVG
페이지가 진행되고 있었지만, 여전히 지나치게 기술적인 느낌이었으며—쉘 명령어와 저수준 코드가 가득해 제가 아니라면 유용하게 느끼기 어려웠습니다.
재설계 4 – 개념 중심 페이지
구현 세부 사항을 제거하고 가이드를 다음에 집중시켰습니다:
- SDF 폰트로 구현할 수 있는 시각 효과.
- SDF가 내부적으로 어떻게 작동하는지.
- 이러한 효과를 만들기 위해 SDF를 사용하는 실용적인 조언.
이전에 작성된 코드 중심 자료는 별도의 미완성 페이지로 이동했습니다. 또한 지난 1년간의 활동을 시각화한 타임라인을 추가했습니다:
지난 1년간의 작업, Cal‑heatmap으로 생성 [4]
최종 결과
여러 디자인을 반복해서 시도한 끝에, 드디어 이 페이지에 만족하게 되었습니다. 이제 이 페이지는 SDF 폰트에 대한 간결하고 개념 중심의 가이드 역할을 하며, 명확한 다이어그램과 실용적인 권장 사항을 제공하고, 필요로 하는 사람들을 위해 구현 세부 사항도 그대로 유지하고 있습니다.
검색 엔진이 결국 사용자들을 이보다 더 유용한 리소스로 안내해 주기를 바랍니다.