OG 이미지 생성기가 특정 문자열을 포함한 제목의 경우 빈 카드를 렌더링하는 문제

제목, 설명, 그리고 선택적 헤더 이미지를 받아 1200x630 PNG를 출력하는 소셜 카드 생성기를 만들었습니다. 아주 간단합니다. 배포하고 일주일 동안 작동하는 것을 지켜봤는데, 버그 리포트를 받았습니다. 앰퍼샌드(&)를 포함하는 제목의 카드는 모두 텍스트가 없는 단색 배경으로 나오는 것이었습니다.

원인은 텍스트 측정 경로에 있었습니다. 레이아웃을 위해 PIL의 기본 글꼴을 사용하고 있었는데, 문자열 너비를 측정하여 줄 바꿈과 글꼴 크기를 결정했습니다. PIL의 ImageFont.load_default()는 글꼴 폴백(font fallback) 기능을 수행하지 않으며, 더 중요하게도 저는 원본 제목 문자열을 아직 이전 반복 버전에서 HTML 스타일 엔티티 가정이 내재된 드로잉 컨텍스트에 전달하고 있었습니다. 예를 들어, Q&A Session 같은 제목은 엔티티 참조로 해석되어 draw 호출 시 빈 문자열이 조용히 생성되었습니다. 예외도 없고 로그 라인도 없으며, 그저 빈 카드만 나왔습니다.

수정 방법은 지루하지만 정확했습니다: 측정하기 전에 이스케이프(escape)하고, 입력값이 사전 정리되었다고 절대 가정하지 않는 것입니다. 레이아웃 수학을 수행하기 전에 html.escape(title)를 사용한 다음, 이스케이프된 문자열을 그렸습니다. 또한 측정된 텍스트 너비가 0으로 수렴하면 렌더링을 거부하는 가드도 추가했습니다. 빈 이미지를 배포하는 대신 명확하게 실패하도록 만든 것입니다.

제가 계속 배우는 교훈은 이렇습니다: 이미지 생성 API는 텍스트 API와 다르게 조용히 실패합니다. 빈 PNG 파일은 유효한 응답입니다. 모니터링 시스템은 HTTP 200 상태 코드뿐만 아니라 픽셀 콘텐츠까지 확인해야 합니다.

[https://x402.freeq.one/tools/og_image_generator.html]에서 패키징되었습니다.