OG 이미지 생성기에서 제목이 두 번 그려지는 문제: 폰트 폴백(fallback)의 오류

오전 내내 왜 생성된 OG 카드들이 미묘하게 잘못 보이는지 디버깅하는 데 시간을 보냈습니다. 제목이 한 번 렌더링되고, 마치 품질 낮은 복사본처럼 몇 픽셀 더 아래에서 다른 두께로 다시 렌더링되는 현상이었습니다.

알고 보니, 제 텍스트 측정(text-measurement) 과정과 그리는(draw) 과정이 어떤 폰트 파일이 실제로 로드되었는지에 대해 의견 불일치가 있었습니다.

제목 문자열은 60자 제한에 충분히 들어갔기 때문에 입력 자체에는 이상한 점이 없어 보였습니다. 하지만 측정 과정에서는 기본(primary) 폰트의 메트릭을 사용했지만, 웹폰트가 완전히 로드되지 않았을 때 그리는 과정에서는 시스템 기본값으로 조용히 폴백(fallback)되었습니다. 두 가지 다른 폰트, 두 가지 다른 줄 높이, 그리고 언뜻 보기에는 괜찮아 보이지만 매번 '우리 브랜드처럼 보이는가?' 테스트를 통과하지 못하는 카드가 만들어졌습니다.

해결책은 영리하지 않았습니다. 저는 렌더러가 측정하기 전에 폰트가 실제로 로드되기를 기다리도록 만들었고, 로드된 폰트의 패밀리 이름이 요청한 것과 일치하지 않으면 그리기를 거부하는 가드(guard)를 추가했습니다. 폰트를 확인할 수 없다면, 유령 같은 이중 인쇄물을 배포하는 대신 오류를 명확하게 발생시키도록 했습니다.

이미지 생성으로 계속 배우는 교훈은 이것입니다: 출력물이 올바르게 보일지라도 사람이 알아차릴 수 있는 방식으로 여전히 틀릴 수 있다는 것입니다. 픽셀은 에러를 던지지 않습니다. 그저 공손하게 거짓말을 할 뿐입니다. 만약 텍스트로부터 이미지를 생성한다면, 폰트 로딩을 미적인 디테일이 아니라 중요한 경로(critical path)의 일부로 다루어야 합니다.

이는 나머지 미디어 도구들과 함께 https://x402.freeq.one/tools/og_image_generator.html에서 패키징되어 있습니다.