플로팅 데미지 숫자: 핸드오프 승인과 엔진 구현
팝업이 흐려지거나, 글리프가 빠지거나, 정렬이 틀리거나, 끊길 때의 실패 기준; TMP vs 비트맵 숫자 선택, 풀과 Canvas 순서, Unity UGUI 승인 단계, 디자인 숫자 아트 연결법.
- game-ui-design
- game-dev-ai
- ui-to-engine
- bitmap-font
- unity
- godot
- cocos
- vberai
- 2026
한 초에 열 번의 타격이 들어올 때, 플로팅 텍스트 문제는 “폰트를 더 크게” 하는 것으로 거의 해결되지 않는다: 에디터에서는 선명한데 기기에서는 흐릿함; 크리티컬 색상은 작동하지만 “K”나 마이너스가 빠져 있음; 숫자가 HUD 버튼 위에 앉아 탭을 가로챔; 또는 Instantiate가 GC 스파이크를 일으킴. 팝업은 고빈도, 단명 UI다—정적 HUD와 별도로 승인하라.
아래는 Unity UGUI / TextMeshPro(RectTransform, Canvas, sortingOrder)에 초점을 맞춘다. Godot: Label + Theme / 비트맵; Cocos: Label + 비트맵 폰트 + 풀—기준과 단계 순서는 동일하다. 정적 HUD 셸: 엔진 + MCP 체크리스트. 출시 전 항목 3(“흐릿한 아트 / 데미지 숫자”)—Release 기기에서 재테스트하라.
실패 기준 (하나라도 해당 = 미통과): 가독성 저하(흐림, 잘림, 글리프 누락); 대상 기기에서 팝업 없는 기준선 대비 전투 프레임 타임이 명확히 악화; 레이캐스트가 켜진 채 팝업이 필수 탭을 차단; 크리티컬/힐/미스 비주얼이 데이터 기반 스펙과 불일치; 숫자 포맷이 디자인 표와 불일치(예: 1.2K와 1200 혼용).
먼저 선택: TMP 또는 비트맵 숫자
| 시나리오 | 더 적합 | 흔한 함정 |
|---|---|---|
숫자 + 소수 기호(0-9 . + - %) | 비트맵 / 커스텀 숫자 메시 | 문자셋 누락; 잘못된 필터 → 흐림 |
| 완전한 현지화 문자열(“Critical”, “Immune”) | TMP + 문자열 테이블 | 숫자와 혼용 시 너비 흔들림 |
| 강한 외곽선, 그라디언트, 애니메이션 스타일 | 비트맵 또는 프레임 시퀀스 | 상태 누락 → 잘못된 색상 폴백 |
| 프로토타입 | 기본 TMP SDF | 레퍼런스 해상도 없음 → 기기에서 흐림 |
기기 흐림이 지속되면: Canvas Scaler 레퍼런스, TMP 패딩/아틀라스, 비트맵 Filter Mode(보통 Point)—그다음 문자셋 또는 SDF 품질. 비트맵 폰트 문자셋 계획 및 출시 전 항목 3 참조.


Unity: 구축과 승인 (6단계)
1. 전용 Canvas 또는 명시적 정렬
- 전용 Canvas(전투 카메라에 맞춘
Screen Space - Camera) 또는 HUD 자식 레이어를 사용하라. - **
sortingOrder**를 월드 UI 위, 모달 팝업 아래로 설정하라; 팝업 그래픽에raycastTarget = false. - 월드 팝업: 하나의 공유 World Canvas—숫자마다 Canvas 하나가 아님.

2. 오브젝트 풀
- 화면 최대 개수 이상으로 예열하라(스킬로 인한 스트레스; 보통 최소 16–32).
- 재활용 시: 위치, 알파, 스케일, 애니메이션 상태, 텍스트를 리셋하라.
- 타격마다
Instantiate/Destroy금지.
3. 데이터와 프레젠테이션 분리
- 전투는
DamagePopupEvent(값, 타입, 월드 위치/부착 지점, 크리티컬 플래그)를 발생시킨다. - 프레젠테이션이 색상, 접두사, 축약(K/M/B), 커브를 선택한다.
- 디자인 표가 타입 → 스타일 Prefab(Normal / Crit / Heal / Miss / Block)을 매핑한다.
4. 모션과 가독성
- 일반적: 위로 떠오름 + 페이드 + 약간의 스케일; 0.4–0.8초; 같은 앵커에서 스태거 또는 큐잉.
- 같은 프레임 다중 타격: 병합하거나 1–2프레임 오프셋으로 겹침 방지.
- 크기가 카메라 거리를 따르면 하나의 월드 스케일 규칙을 사용하라—UI Canvas 스케일과 이중으로 혼용하지 마라.

5. 문자셋과 포맷팅
- 비트맵:
0-9 . , + - % x K M B및 프로젝트 축약 규칙을 검증하라. - TMP: 필드나 스프라이트를 분리하라—하나의 문자열로 폰트를 바꾸는 데 의존하지 마라.
- 로케일 오버플로 시: 완전한 현지화 문장을 팝업 아트로 래스터화하지 마라.
6. 기기 스모크
- Dev 및 Release: 30초 몹 무리, 다중 틱 보스 스킬, 저RAM 기기.
- 팝업 있음 vs 없음 프레임 타임 비교; 크리티컬/힐/미스 각각 한 번 스크린샷.
- 통과 기준은 Prefab + 풀 설정에 있으며 테스트 Scene에만 있지 않다.
디자인 핸드오프 (숫자와 상태)
| 전달물 | 용도 |
|---|---|
| 상태별(Normal/Crit/Heal/Miss) 숫자 아트 또는 TMP 스타일 | 표 기반 Prefab/Material |
| 대상 해상도의 외곽선/그림자 | 기기 선명도 검사 |
| 숫자 위 크리티컬/콤보 색상 + 아이콘 | 코드에 하드코딩된 틴트 방지 |
| 문자셋 범위(숫자만 vs 현지화 단위) | 비트맵 또는 문자열 테이블 |
디자인 핸드오프 체크리스트: 팝업이 래스터라면 로케일별 여부를 명세하라; 기본은 비트맵 숫자 + TMP 라벨.
수정 라우팅
| 증상 | 가능 원인 | 조치 | 담당 |
|---|---|---|---|
| 기기에서 흐림, 에디터에서 선명 | Scaler / SDF / 비트맵 필터 | 레퍼런스 해상도 정렬; Point 필터; SDF 패딩 | 엔지니어링 |
| 글리프 누락 | 문자셋 / 기호 | 문자셋 확장; 또는 TMP | 엔지니어링 + 디자인 |
| 버튼 차단 | 정렬 / 레이캐스트 | 순서 낮춤 또는 레이캐스트 비활성 | 엔지니어링 |
| 끊김 | 풀 없음 / 너무 많은 FX+텍스트 | 풀; 같은 프레임 팝업 병합 | 엔지니어링 |
| 잘못된 크리티컬 외형 | 하드코딩 색상 | 타입→Prefab; 디자인 상태 | 엔지니어링 + 디자인 |
| HUD 스타일과 분리 | 두 개의 폰트 파이프라인 | 폰트 소스 또는 Theme 통일 | 디자인 + 엔지니어링 |
자주 묻는 질문
팝업이 반드시 World Space여야 하나?
아니다. 고정 2D는 보통 Screen Space - Camera; 자유 3D 카메라는 보통 World Canvas. 하나를 선택하고 문서화하라.
화려함을 위한 UI 파티클?
FX에는 괜찮다; 숫자는 로케일과 풀링을 위해 Label/TMP/메시로 유지하라.
데미지 로직과 하나의 스크립트?
로직에서 이벤트를 발생시켜라; 테스트와 접근성을 위해 프레젠테이션 토글(ShowDamageNumbers).
큰 숫자?
디자인에서 하나의 포맷터 규칙; 단일 구현—UI 스크립트에 복사-붙여넣기 금지.
계속 읽기
이 글도 추천합니다
VberAI 원클릭 번역: UI / Figma / PSD 텍스트만 번역—레이아웃 유지
VberAI Studio가 UI 목업과 Figma/PSD 텍스트 레이어를 AI 번역: 텍스트만 변경, 레이아웃·디자인·구조·계층 유지—더 빠른 다국어 및 글로벌 출시.
- vberai
- ai-studio
- ui-translate
- ui-translation
VberAI란 무엇인가? MCP 플러그인, AI Studio, AI Super Matting
게임 제작 파이프라인에서 VberAI의 Engine MCP(Unity/Godot/Cocos), AI Studio(디자인-엔진 UI), AI Super Matting의 위치를 설명합니다.
- vberai
- mcp
- ai-studio
- ai-super-matting
Cocos MCP 연결 문제 해결: Cursor에 cocos-creator가 표시되지 않음
VberAI Cocos Creator 2.x/3.x MCP 증상별 해결: 확장 누락, 활성화 실패, 서버 미실행, 포트 충돌, Cursor MCP 미설정/재로드 필요, 체크리스트 및 localhost 확인 포함.
- cocos
- cocos-creator
- mcp
- cursor