게임 UI 로케일 오버플로: 디자인 여유 공간과 VberAI Studio 번역 내보내기 QA

출시 가능한 UI는 번역 품질이 아닌 다른 이유로 현지화에 실패하는 경우가 많습니다: 동일한 레이아웃이 번역된 문구를 담지 못하는 것입니다. 버튼 텍스트가 RectTransform에 의해 잘리고, 목록 행이 두 줄에서 한 줄로 접히며, 탭은 여전히 빽빽한데 말줄임표가 표시됩니다. 영어 플레이스홀더로 Unity 에디터에서 통과해도 독일어나 스페인어를 테스트하면 문제가 드러나며, 이후 수정은 보통 디자인 원본과 Prefab 모두를 건드립니다.

아래 레이아웃 및 클리핑 예시는 Unity UGUI(RectTransform, Prefab 등)를 사용합니다. Godot Control과 Cocos UI도 앵커, minimum_size, 프리팹을 통해 동일한 개념을 사용하며, 디자인 여유 공간과 오버플로 기준도 같은 방식으로 적용됩니다.

디자인 핸드오프 체크리스트 항목 9–11은 이미 문구 길이 여유 공간과 동일 구조 로케일을 언급합니다. 이 글은 참조 범위, 디자인 측 점검 목록, VberAI Studio 번역 후 캔버스 QA, 출시 전 불합격 기준을 추가합니다. 기기에서의 Safe Area, Release 빌드 에셋 및 관련 점검은 출시 전 UI 체크리스트 항목 1, 5, 6에 있습니다.

불합격 기준 (하나라도 해당 = 불합격): 읽을 수 있는 문구가 잘리거나 겹침; 제품 사양 없이 말줄임표나 마퀴 사용; 시각적 버튼 프레임이 히트 영역과 불일치; 특정 로케일의 메인 흐름 화면이 전체 텍스트를 표시하려면 고유한 Hierarchy 변경이 필요함(동일 구조 다국어 목표와 충돌).

---

문구 확장: 디자인을 위한 참조 범위

현지화 팀은 종종 영어 또는 소스 언어 대비 증가율을 추정합니다. 이는 계약상 SLA가 아니며, UI 서체와 크기에 맞춰 내부 임계값을 설정하십시오. 이 표를 사용해 핸드오프 전 디자인 검토를 위한 2–3개의 스트레스 로케일을 선정하되, 정확한 문자열 길이를 예측하려 하지 마십시오.

관계	일반적 패턴 (모바일 버튼, 짧은 레이블)	디자인 조치
DE / ES / PT vs 짧은 중국어 레이블	같은 의미가 종종 ~+25%에서 +40% 가로 공간 필요 (복합어, 관사)	버튼 최소 너비와 탭 고정 너비 또는 줄바꿈 규칙을 사양에 명시
동일 버튼에서 EN vs ZH	길이가 비슷하거나 EN이 약간 더 김—EN 너비를 모든 로케일의 승인 기준으로 삼지 말 것	EN 외에 DE 또는 ES도 표본 점검
FR / IT	중간~긴 길이; 목록 부제목이 종종 두 줄 필요	두 번째 줄을 확보하거나 부제목 길이 제한
VI / ID	라틴 문자지만 단어 길이 가변	ES와 동일한 스트레스 수준
AR	길이에 더해 RTL 및 숫자 형태; 미러 레이아웃은 별개 주제	이 글은 LTR 동일 구조를 가정; RTL은 자체 디자인 또는 엔진 미러 규칙 필요
JA / KO	전각 혼합: 시각적 너비가 문자 수에 선형 비례하지 않음	대상 크기에서 렌더링된 문자열 너비를 측정; 문자 수만 세지 말 것

엔진 참고: Unity TextMeshPro Auto Size는 최소/최대 폰트 크기 사이에서만 축소합니다. 최소 크기에서도 텍스트가 넘치면 이는 레이아웃 용량 문제이며, 더 줄여서 해결할 것이 아니라 컨테이너를 넓히거나 디자인에서 문구를 변경해야 합니다.

---

오버플로에 초점을 맞춘 12가지 디자인 점검 (점검 목록)

일반적인 12항목 핸드오프 목록에 더해, 로케일 관련 항목을 점검하십시오:

#	점검	합격 기준
1	기본 버튼 문구가 텍스트 레이어이며 래스터 표시 서체가 아님	교체 가능한 문자열; 현지화되지 않는 표시 서체는 사양에 명시
2	버튼 컨테이너에 최소 너비 있음 (Figma Auto Layout 또는 고정 너비)	DE/ES 의사 로케일 또는 실제 문자열이 넘치지 않음
3	탭 / 하단 바: 고정 셀 또는 명시적 두 줄 허용	”한 줄처럼 보이지만 실제로는 잘림” 없음
4	목록 행: 제목과 부제목이 별도 줄; 부제목에 최대 줄 수 있음	두 줄이 실패하면 문구를 줄이거나 목록을 넓힘
5	숫자, 통화, 타이머, 단위가 별도 필드	문장 전체 래스터 없음; 형식은 문자열 테이블에 존재
6	아이콘 + 텍스트: 텍스트 너비가 아이콘과 독립적	더 긴 문구가 아이콘을 찌그러뜨리지 않음
7	나인슬라이스 패널 패딩과 콘텐츠 패딩이 충분	핸드오프 항목 6 참조; 늘어나는 영역이 텍스트에 붙지 않음
8	대화상자 제목, 본문, 기본/보조 버튼이 별도 레이어	제목이 길 때 줄바꿈 또는 한 단계 작은 서체 사양
9	이벤트 배지와 빨간 점 근처의 짧은 문구에 최대 길이	한도 초과 운영 문구는 수정 요청—긴급 압축 아님
10	다국어 변형: 동일 Frame 구조, 텍스트만 변경	사양이 허용하지 않는 한 로케일 전용 컨트롤 없음
11	내보내기 노트에 검토한 스트레스 로케일 명시	엔지니어링 / QA가 승인 기준선을 인지
12	전체 화면 콘셉트에도 읽을 수 있는 텍스트 존재	텍스트 레이어를 분리하거나 엔진 전 재내보내기 수용 (인플레이스 슬라이스)

Figma Auto Layout hug/fill, 최소/최대 너비, 텍스트 truncate는 엔지니어링 합의와 일치해야 합니다—제품이 말줄임표를 금지한다면 truncate만으로 목업을 통과시키지 마십시오.

---

VberAI Studio 경로: 번역 → 비교 → 전체 트리 재내보내기

VberAI Studio(AI Studio, ≠ Google AI Studio) 원클릭 번역은 읽을 수 있는 문구만 변경—지오메트리와 계층 구조는 그대로 유지하는 것을 목표로 합니다. 이는 CSV / 문자열 테이블만 변경되고 Prefab 구조는 유지되는 엔진 작업과 일치합니다—동일한 현지화 파이프라인의 서로 다른 단계입니다: AI Studio는 다국어 시각 디자인과 내보내기를 담당하고, TMP와 문자열 테이블은 런타임 전환을 담당합니다.

권장 순서 (캔버스 → Prefab과 동일):

단계	작업	승인 기준
1	캔버스 또는 Figma/PSD에서 기본 레이아웃 확정	텍스트 레이어와 버튼 경계가 명확
2	화면별로 원클릭 번역 실행 (출시 로케일 배치 또는 다중 로케일별)	레이어 계층과 노드 이름 불변
3	캔버스에서 텍스트가 가장 긴 2–3개 로케일을 나란히 또는 토글로 비교 (DE 또는 ES + 주 출시 로케일 포함)	오버플로 없음, 겹침 없음
4	너무 긴 기계 번역 문자열 검토	사양 내에서 문구 편집 또는 크기 조정; 법률/브랜드 문구는 사람이 승인
5	Prefab 전체 트리 재내보내기 (Unity UGUI / Godot Control / Cocos UI)	캔버스와 일치; 디자인 원본 동기화 없이 프로젝트에서 Text만 편집하지 말 것
6	프로젝트의 Prefab 기본 문구와 문자열 테이블 정렬	플레이 모드 로케일 전환이 캔버스와 일치

동일 레이아웃, 테마만 변경: 리스킨. 리스킨 후 새 출시 로케일을 추가하면 여전히 번역 후 내보내십시오—Scene에서 Text를 수동 편집하는 동안 저장소 Prefab이 어긋나는 것을 피하십시오(출시 전 항목 6).

---

출시 전 승인: 테스트 체크리스트와의 연계

출시 전 체크리스트 항목 2는 홈과 주요 팝업에서 모든 라이브 로케일을 요구합니다. 권장 실행:

항목	실천
로케일 우선순위	전체 로케일 통과 전에 스트레스 로케일 + 주 출시 로케일 스모크 테스트
범위	메인 HUD, 고빈도 팝업, 결제/연령/법률 장문 화면
환경	Unity 에디터 로케일 전환은 기기 폰트 렌더링 점검을 대체하지 않음 (특히 CJK + 라틴 혼합)
합격	클립 없음, 미선언 말줄임표 없음, 히트 영역이 비주얼과 일치

엔진에서만 문자열이 변경되고 레이아웃은 그대로인데 오버플로가 지속되면 → 디자인 여유 공간 부족 또는 스트레스 로케일 캔버스 QA 누락으로 간주하고 아래 표에 따라 수정하십시오—Prefab에 영구적인 전역 폰트 축소를 적용하지 마십시오.

---

수정 라우팅

증상	가능한 원인	조치	담당
단일 버튼 또는 레이블 오버플로	최소 너비가 너무 작음; 표시 서체를 본문으로 사용	디자인에서 넓히거나 문구 단축; 텍스트 레이어로 이동	디자인
한 화면에서 다수 오버플로	기본 목업이 너무 빡빡함; 스트레스 로케일 검토 없음	Figma/캔버스 Auto Layout → AI Studio 재번역 → 전체 트리 재내보내기	디자인 + 엔지니어링
Unity 에디터는 정상, 한 로케일이 기기에서 실패	폴백 폰트가 더 넓음; DPI	기기에서 재테스트; Font Asset / 컨테이너 조정	엔지니어링
한 로케일에서만 목록이 두 줄	부제목 번역이 너무 김	현지화에서 단축하거나 행 높이 증가 (구조 변경 시 재내보내기)	현지화 + 디자인
런타임 전환 실패, 캔버스는 정상	문자열 테이블과 Prefab 불일치	테이블과 기본 Text 정렬; 줄바꿈 확인	엔지니어링
이벤트 리스킨 후 로케일이 여전히 이전 레이아웃 표시	리스킨이 아트만 교체, Prefab 재내보내기 없음	리스킨 후 로케일별로 번역 + 내보내기 재실행	디자인

결정 규칙: 구조가 그대로면 → 문구, 최소 너비, VberAI Studio 캔버스 QA 후 재내보내기를 우선하십시오. 노드를 추가/제거하거나 탭 수를 변경해야 하면 → 레이아웃 변경—기본 목업과 모든 로케일 사양을 업데이트하십시오; 한 로케일의 Prefab만 패치하지 마십시오.

---

”문자열 테이블만” 접근과의 역할 분담

접근	적합	부적합
엔진 문자열 테이블 / TMP	레이아웃 검증됨; 런타임 로케일 전환만	스트레스 로케일 QA 없는 최초 UI 임포트
VberAI Studio 번역 + 내보내기	디자인 주도; 다국어 시각적 동등성; Figma/PSD 원본	법률 또는 결제 컴플라이언스 검토 대체
Prefab Text 수동 편집	한두 문자열의 긴급 핫픽스	장기 다국어 유지보수 (Scene 어긋남)

전체 체인: 디자인 여유 공간 → VberAI Studio 다국어 목업 → Prefab 내보내기 → 문자열 테이블과 기본값 정렬 → 출시 전 전 로케일 스모크. 임포트 후 바인딩 및 플레이 QA: 엔진 + MCP 체크리스트.

---

자주 묻는 질문

TMP Auto Size를 최소로 해도 여전히 넘침—엔지니어링 버그인가요?
보통 아닙니다. Auto Size는 컨테이너 내부에서만 스케일합니다. 핸드오프 시 너비가 고정되었다면 디자인을 넓히거나 문구를 변경하거나 사양에 따라 두 줄을 허용하십시오.

번역 후 레이아웃이 “이론상 그대로”—그래도 Prefab을 재내보내야 하나요?
UI가 VberAI Studio 내보내기에서 나왔다면 문구 확정 후 전체 트리 재내보내기가 저장소 Prefab을 캔버스와 정렬 유지합니다. 캔버스 동기화 없이 프로젝트에서 Text만 편집하면 다음 리스킨이나 재내보내기에서 손실됩니다.

RTL(아랍어 등)도 이 동일 구조 체크리스트를 사용할 수 있나요?
LTR 동일 구조 너비 규칙은 여전히 도움이 됩니다. RTL은 미러 레이아웃과 숫자 방향도 필요합니다—번역 문자열만으로 출시하기에 충분하다고 가정하지 마십시오.

이벤트 리스킨 시 재번역해야 하나요?
리스킨이 문구를 변경하지 않으면 아닙니다. 이벤트 문구가 스킨과 함께 변경되고 노드 이름이 그대로면 캔버스에서 스트레스 로케일을 재점검한 후 재내보내십시오.

독일어가 길어—해당 로케일만 폰트 크기를 줄여도 되나요?
제품 사양이 해당 로케일에 전역 “−1 단계”를 정의한 경우에만 가능합니다. 그렇지 않으면 최소 너비와 더 짧은 문구를 우선하여 버튼 전반의 가독성을 일관되게 유지하십시오.

VberAI Studio는 Google AI Studio와 같은가요?
아닙니다. VberAI Studio는 게임 UI 캔버스, 번역, 멀티 엔진 내보내기이고, Google AI Studio는 Google의 범용 AI 개발 환경입니다. 비교를 참조하십시오.