OG 이미지 생성기가 헤드라인의 절반을 캔버스 바깥으로 잘라냄 — 캔버스 텍스트는 자동으로 줄바꿈되지 않는다

저는 OG(Open Graph) 이미지 생성기를 만들었습니다. 이 도구에 제목과 설명, 선택적으로 헤더 이미지를 보내면 소셜 미리 보기 카드용 1200x630 PNG를 반환합니다. 제가 테스트한 제목들은 "My New Tool"이나 "Release Notes v2" 같은 문자열들이었습니다. 정말 멋졌죠.

그러다가 실제 블로그 게시물 헤드라인, 60자 이상의 긴 문장을 넣었더니, HTTP 200 응답과 함께 이미지가 렌더링되었지만, 실제 링크 미리 보기에서 확인해보니 헤드라인의 마지막 3분의 1이 사라져 있었습니다. 겹치거나 짜여 들어간 것이 아니라, 그저 존재하지 않았고, 캔버스의 오른쪽 가장자리에서 깔끔하게 잘려나갔습니다.

근본 원인은 다음과 같습니다: 라스터라이저는 브라우저가 아니기 때문입니다. HTML에서는 긴 텍스트가 줄바꿈됩니다. 하지만 캔버스(canvas) 위에서는 텍스트가 앵커 포인트(anchor point)에서 단일 선으로 그려지며, 캔버스 경계를 넘어서는 부분은 조용히 잘려나갑니다. 오류 메시지도, 경고도 없이, 깨진 카드와 함께 200 OK를 반환했습니다. 제가 사용한 모든 테스트가 짧은 문자열이었기 때문에, 실제 길이의 문장이 들어올 때까지 이 문제를 발견하지 못했던 것입니다.

이 문제에 대한 수정 사항은 작은 텍스트 레이아웃 엔진으로 발전시켰습니다:

1. 실제 글꼴과 실제 크기로 제목 문자열을 측정합니다.
2. 공백 기준으로 분할하고, 측정된 너비가 콘텐츠 박스에 맞는지 확인하면서 라인을 채워나갑니다.
3. 줄 수를 제한(제목의 경우 3줄)하고, 초과되는 내용은 말줄임표(...)로 자릅니다.
4. 설명에 대해서도 반복한 후, 전체 블록을 수직으로 중앙 정렬합니다.

수정된 과정에서 발견한 미묘한 버그가 하나 있었습니다: 실제 글꼴이 완전히 로드되기 전에 폴백(fallback) 글꼴로 측정했기 때문에, 줄바꿈 지점이 너무 일찍 결정되어 라인이 이상하게 끊어지는 현상이 발생했습니다. 따라서 측정과 그리기는 매번 동일한 글꼴과 같은 크기를 사용해야 합니다.

API에 설정된 60/120자 제한은 이제 안전장치일 뿐입니다. 실제 작업은 측정 기반의 줄바꿈 기능이 수행합니다. 이 개선된 버전이 제가 운영하는 OG 이미지 생성기입니다: [https://x402.freeq.one/tools/og_image_generator.html]

일반적인 교훈은 이렇습니다: 텍스트를 고정 크기 이미지에 렌더링하는 모든 도구는 비밀리에 레이아웃 엔진을 재구현하고 있다는 것입니다. 브라우저는 리플로우(reflow) 기능을 무료로 제공하지만, 드로잉 컨텍스트(drawing context)는 아무것도 제공하지 않습니다. 그리고 실패 모드는 최악의 종류입니다. 실제 사용자가 작성하는 정확한 크기에서만 나타나는 조용한 잘림 현상인데, 이는 귀하의 테스트가 결코 커버하지 못한 부분입니다.