독일어는 왜 프레임 밖으로 넘칠까 — 캔버스 텍스트 자동 맞춤

영어로 딱 맞게 넣은 배너를 독일어로 바꿨더니 글자가 프레임 밖으로 삐져나온 적, 혹시 없나요? 저도 처음엔 언어마다 이미지를 손으로 다시 맞췄어요. 그게 은근히 시간을 잡아먹더라고요.

왜 하필 독일어에서 넘칠까

독일어는 명사를 그대로 이어 붙여 긴 합성어를 만들어요. "설정"이 "Einstellungen"이 되는 식이죠. 게다가 짧은 영어 단어일수록 다른 언어로 옮길 때 더 크게 늘어나는 경향이 있어요. 같은 문구를 12개 언어로 배너에 넣어 보니, 독일어와 핀란드어에서 유독 두 배 가까이 길어져서 프레임을 넘겼어요.

1인 브랜드에겐 이게 왜 문제냐면

혼자 운영하면 이미지 한 장이 곧 첫인상이에요. 글자가 삐져나온 배너 하나면 "대충 만들었네" 소리를 듣기 딱 좋죠. 그렇다고 언어마다 폰트 크기를 눈으로 맞추면, 언어 5개에 이미지 3종만 해도 15번을 손봐야 해요. 브랜드가 커질수록 이 반복이 발목을 잡아요.

텍스트 폭 측정→프레임 폭과 비교→초과하면 축소·줄바꿈

캔버스 텍스트 자동 맞춤이 하는 일

핵심은 그려보기 전에 폭을 먼저 재는 거예요. HTML 캔버스에는 ctx.measureText(text).width가 있어서, 글자를 실제로 그리기 전에 픽셀 폭을 알 수 있어요. 이 값이 프레임 폭을 넘으면 폰트를 조금 줄이거나 줄을 바꾸면 되고요.

제가 쓰는 방식은 단순해요. 폰트를 48px에서 시작해서, 텍스트 폭이 프레임 안에 들어올 때까지 한 단계씩 줄여요. 적용해 봤더니 어떤 언어가 들어와도 프레임을 벗어나지 않았어요. 언어별 분기 없이 규칙 하나로 끝나는 게 제일 마음에 들었어요.

운영에서 챙긴 작은 규칙

돌려 보니 함정이 하나 있었어요. 무작정 줄이기만 하면 독일어에서 글자가 너무 작아져서 안 읽혀요. 그래서 폰트 하한을 정해두고, 그 아래로 내려갈 상황이면 축소 대신 두 줄로 바꾸게 했어요. 이 하한값 하나만 정해두면 가독성이 확 안정돼요.

• ✓그리기 전 폭 측정
• ✓폰트 하한 설정
• ✓축소 대신 줄바꿈 전환

라이프케어로그에서 플랜씨(plan-c)나 플랜엘(plan-l) 소개 이미지를 만들 때도 이 규칙을 자산 파이프라인에 넣어뒀어요. 카피만 바꿔 넣으면 프레임은 알아서 맞으니, 이미지 12장짜리 세트를 다시 뽑는 데 10분이면 충분하더라고요.

결국 다국어 배너에서 브랜드 일관성을 지키는 일은, 디자인 감각보다 "그리기 전에 재본다"는 습관에 가까웠어요. 언어마다 손보는 게 지친다면, 자동 맞춤 규칙 하나부터 넣어보세요.