다국어 앱스토어 스크린샷, 텍스트가 박스를 넘칠 때 Canvas로 맞춘 기록

앱스토어에 올릴 홍보 스크린샷을 언어별로 만들다 보면, 같은 문구인데 언어마다 길이가 제각각이에요. 영어로는 한 줄에 딱 들어가던 카피가 다른 언어로 바꾸면 박스 밖으로 삐져나오고, 짧은 언어는 또 휑하게 남더라고요. 혹시 언어 하나 추가할 때마다 스크린샷을 손으로 다시 그려 본 적 있나요?

처음엔 라이프케어로그 스크린샷을 만들면서 폰트를 48px로 고정해 뒀어요. 영어 기준으로 예쁘게 맞춰 놓고 12개 언어를 한 번에 뽑았는데, 돌려 보니 서너 개 언어에서 글자가 이미지 가장자리를 넘겼어요. 눈으로 하나씩 확인하고 크기를 다시 줄이는 건 스크린샷 10장 × 12개 언어면 손이 남아나질 않죠.

왜 자꾸 넘칠까

핵심은 같은 의미라도 언어마다 문자열의 픽셀 폭이 다르다는 거예요. 라틴 계열 언어는 영어보다 길어지는 경우가 흔하고, 공백과 자간까지 더해지면 고정 폰트로는 감당이 안 돼요. 사람이 일일이 맞추는 대신, 그리기 직전에 폭을 재서 폰트를 스스로 줄이게 만드는 쪽이 편했어요.

measureText로 실제 폭을 재기

Canvas에는 텍스트의 픽셀 폭을 알려 주는 measureText가 있어요. 지금 폰트에서 문구가 몇 px인지 재고, 박스 너비를 넘으면 폰트를 한 단계 줄이는 식이에요.

function fitFont(ctx, text, maxWidth, max = 48, min = 28) {
  let lo = min, hi = max + 1; // hi = 아직 넘칠 수 있는 상한 경계
  while (hi - lo > 1) {
    const mid = (hi + lo) >> 1;
    ctx.font = `${mid}px Pretendard`;
    if (ctx.measureText(text).width <= maxWidth) lo = mid;
    else hi = mid;
  }
  return lo; // min에서도 넘치면 min 반환 → 줄바꿈으로 폴백
}

한 px씩 줄이는 반복문으로도 되지만, 이진탐색으로 바꾸니 48px에서 28px 사이를 대여섯 번이면 찾더라고요. 좌우 여백을 64px 잡고 박스 너비를 계산해서 넘겨줬어요.

무작정 줄이면 안 돼서 하한을 둠

테스트해 보면 폰트를 끝없이 줄이는 것도 답은 아니에요. 24px 밑으로 내려가면 스크린샷에선 글씨가 잘 안 읽혀요. 그래서 하한을 28px로 정하고, 거기서도 넘치면 더 줄이는 대신 줄바꿈으로 넘겼어요. 단어 단위로 끊어서 두 줄로 배치하니 대부분 해결됐어요.

적용해 봤더니 언어를 새로 추가해도 스크린샷 생성 스크립트를 한 번 돌리면 알아서 맞아떨어졌어요. 손으로 언어별 크기를 만지던 작업이 사라진 게 제일 컸어요.

다국어 대응은 결국 사람이 매번 확인하던 걸 코드가 재게 만드는 방향이 편하더라고요. 작은 도구 하나가 반복을 꽤 줄여 줬어요. 앱스토어 스크린샷을 여러 언어로 뽑는 분이라면, measureText로 폭부터 재 보는 걸 권해요.