VberAI 비트맵 폰트: 글리프 업로드·스프라이트 자동 분할 BMFont
VberAI Studio: 글리프 이미지 업로드, 스프라이트 시트 자동 분할 지원. AngelCode BMFont(.fnt + PNG)를 캔버스에서 편집 후 Unity / Godot / Cocos로.
- vberai
- ai-studio
- bitmap-font
- bmfont
- fnt
- angelcode
- sprite-sheet
- glyph
- game-ui
- unity
- godot
- cocos
- tutorial
VberAI Studio(약칭 AI Studio, ≠ Google AI Studio)에는 비트맵 폰트 생성기가 있습니다. 패널에서 문자셋으로 생성하거나, 글리프 이미지를 업로드하거나, 스프라이트 시트를 업로드해 자동 분할해 메트릭이 있는 게임 폰트 아틀라스를 만듭니다. 결과는 같은 게임 캔버스에 남아 픽셀화, 매팅, 내보내기를 이어갈 수 있습니다. 엔진 간 교환 형식은 AngelCode BMFont .fnt + PNG입니다(내보내기 옵션은 패널 기준).
여기서 시작하세요: AI Studio. 용어집: 비트맵 폰트.
즉 게임 비트맵 폰트 / BMFont 워크플로입니다. 고정 문자 집합·스타일을 .fnt 메트릭과 함께 Unity / Godot / Cocos로 넘깁니다.
게임에 여전히 비트맵 폰트가 필요한 이유
동적 TTF / OTF는 긴 문장과 임의 크기에 적합합니다. HUD, 점수, 코인 카운터, 픽셀 타이틀, 외곽선이 있는 숫자는 보통 다른 것이 필요합니다: 고정된 크기, 텍스처에 구워진 스타일, 확대해도 흐려지지 않음, 예측 가능한 엔진 로딩입니다.
흔한 세 가지 우회로:
- 동적 폰트를 억지로 사용 — 확대하면 외곽선이 깨지고, 축소하면 픽셀 타이포가 뭉개지며, 바이리니어 필터링이 셀 가장자리를 부드럽게 만듭니다.
- 메트릭 없이 글리프별 PNG를 손으로 그리기 — 엔진이 너비, 높이, 베이스라인, 전진폭(advance)을 알지 못하므로 낱개의 스프라이트를 합성하는 셈입니다.
- 데스크톱 또는 온라인 BMFont 도구로 만든 뒤 다운로드 — 아틀라스와
.fnt를 받은 다음, 가장자리를 정리하고 픽셀화하고 Unity / Godot / Cocos로 가져오기 위해 다른 도구를 열게 됩니다.
AI Studio는 생성을 편집 가능한 게임 작업대 위에서 유지합니다: 폰트는 작업을 끝내는 zip이 아니라 에셋입니다.
| 독립형 BMFont 도구 | VberAI 비트맵 폰트 생성기 | |
|---|---|---|
| 진입 | 또 다른 데스크톱 앱 또는 사이트 | 동일한 AI Studio 캔버스 |
| 입력 | TTF / 시스템 폰트 rasterize가 대부분 | 패널 생성, 글리프 업로드, 스프라이트 시트 자동 분할 |
| 출력 | 보통 .fnt + 아틀라스 다운로드 | 아틀라스가 캔버스에 남아 추가 편집 가능 |
| 룩 | 원본 TTF와 도구의 효과 | 패널 스타일, 또는 업로드한 글리프 / 스프라이트 재사용 |
| 이후 | 대개 “엔진으로 가져오기”로 끝 | 캔버스에서 마무리한 뒤 엔진으로 출시 |
생성기에 넣는 세 가지 방법
패널 라벨은 제품을 따릅니다. 흔한 경로:
| 경로 | 언제 쓰나 |
|---|---|
| 문자셋에서 패널 생성 | 아트가 아직 없을 때—HUD 숫자, 픽셀 타이포, 스타일 숫자 |
| 글리프 이미지 업로드 | 글리프별 PNG는 있는데 .fnt의 너비, 높이, advance가 필요할 때 |
| 스프라이트 시트 업로드 + 자동 분할 | 0123456789 가로条, 글리프 그리드, 숫자 sprite sheet를 잘라 메트릭화 |
스프라이트 시트 분할은 인플레이스 슬라이스 / 레이어 분할와 비슷하지만, 출력은 UI Prefab이 아니라 BMFont 아틀라스 + .fnt 입니다.
비트맵 폰트 / BMFont란 무엇인가
출시 가능한 정의:
- 아틀라스 — 필요한 글리프를 하나(또는 몇 개)의 PNG 시트로 래스터화합니다.
- 메트릭 파일 — 보통 AngelCode BMFont
.fnt: 문자별 UV, 너비/높이, xoffset / yoffset, xadvance. - 런타임 — 엔진이 벡터 외곽선을 실시간으로 테셀레이션하는 대신 아틀라스를 샘플링해 Label을 조립합니다.
이는 고정 크기, 고정 스타일의 게임 텍스트를 다룹니다. TextMesh Pro SDF 본문 폰트가 아니며, 완전한 CJK 동적 폰트도 아닙니다.
| 비트맵 폰트 (BMFont) | 동적 TTF | SDF / MSDF | |
|---|---|---|---|
| 룩 | 스타일이 텍스처에 구워짐; 픽셀이 고정될 수 있음 | 각 크기마다 벡터를 래스터화 | 비교적 깔끔하게 확대 |
| 최적 용도 | HUD, 점수, 픽셀 타이틀, 스타일 숫자 | 긴 문장, 채팅, 설정 | 확대가 필요한 UI 본문 |
| 비용 | 새 크기 / 문자셋마다 새 아틀라스 필요 | 외곽선과 픽셀 룩 제어가 어려움 | 픽셀 그리드 고정이 진짜 비트맵보다 약함 |
언제 사용하고, 언제 사용하지 말아야 하는가
다음에 사용하세요: 체력 숫자, 스테이지 점수, 코인 / 젬 카운터, 스킬 쿨다운, 픽셀 타이틀, 외곽선 또는 메탈릭 숫자 스트립. 작은 문자셋, 고정 크기.
다음에는 건너뛰세요: 대사, 우편, 채팅, 설정 문구; 자유롭게 확대해야 하는 UI 본문; 완전한 한자 / 가나 / 한글 어휘. 완전한 CJK 세트는 아틀라스 크기를 폭발시킵니다 — 그런 용도에는 동적 폰트나 SDF를 유지하세요.
AI Studio에서 생성하는 방법
버튼 라벨은 현재 패널을 따릅니다. 경로는 네 단계입니다.
1. 비트맵 폰트 생성기 열기
AI Studio 캔버스에서 비트맵 폰트 생성기를 엽니다.

2. 입력 경로를 고르고 문자셋과 크기를 고정
패널 생성, 글리프 이미지 업로드, 스프라이트 시트 자동 분할 중 하나를 선택합니다(패널 기준). 어떤 경로든 게임에서 실제로 나올 문자를 먼저 적어 두세요.
HUD는 종종 0123456789, +$%/.,, 몇 개의 라틴 문자만 필요합니다. 빠진 글리프는 런타임에 빈칸이나 tofu가 되고, 불필요한 글리프는 아틀라스를 부풀립니다.
크기는 최종 HUD 픽셀 크기로 설정하세요—크게 그려 축소하지 마세요. 비트맵 폰트를 스케일하면 텍스처가 스케일됩니다. 스프라이트 시트 분할 후에는 셀 패딩과 advance를 확인해 숫자가 겹치지 않게 하세요.
3. 아틀라스 생성 및 미리보기
베이스라인, 외곽선이 이웃을 침범하는지, 반투명 가장자리의 지저분한 글로우, 낭비된 빈 공간을 확인하세요. 픽셀 룩을 원하면 같은 캔버스에서 이미지 픽셀화를 이어서 적용하고, 깔끔한 알파를 원하면 매팅을 이어서 적용하세요.
4. 내보내기, 그다음 엔진으로
내보내기 옵션은 패널을 따릅니다. Unity / Godot / Cocos Creator의 경우 다음이 있는지 확인하세요:
- 하나(또는 한 세트)의 PNG 아틀라스 시트
.fnt파일 (AngelCode BMFont 텍스트 또는 바이너리; 엔진 문서는.fnt를 기준으로 함)
파일 이름, 페이지 인덱스, .fnt 내부의 텍스처 참조가 일치해야 합니다 — 그렇지 않으면 엔진이 폰트를 받아들이고도 마젠타나 빈 글리프를 표시할 수 있습니다.
Unity / Godot / Cocos로 가져오기
이것은 전체 에디터 투어가 아니라 검수 체크리스트입니다. 가져온 뒤 0123456789SCORE를 렌더링하고 정렬, 자간, 알파 가장자리를 점검하세요.

Unity
- 아틀라스 Filter Mode를 Point로 설정해 픽셀 가장자리를 고정하세요; 바이리니어 필터링은 이를 흐리게 만듭니다.
- 레거시 UGUI: Custom Font + 아틀라스를 사용하는 머티리얼을 만들고 Text에 할당합니다.
- TextMesh Pro: Font Asset Creator에서 비트맵 폰트 에셋을 만들거나 BMFont 쌍을 가져오세요 (TMP 버전에 따름).
- 흔한 재작업: 빈 머티리얼 슬롯, 또는
.fnt텍스처 이름 ≠ 가져온 텍스처 이름.
Godot 4
Godot는 BMFont(.fnt)를 지원합니다. .fnt와 PNG를 같은 폴더에 두고 가져온 뒤 Label(또는 RichTextLabel) 폰트 슬롯에 할당하세요. PNG만으로는 글리프 사각형 정보가 없습니다.
Cocos Creator
Cocos 비트맵 폰트는 **.fnt + .png**입니다: .fnt가 각 문자 썸네일을 인덱싱합니다. 둘 다 에셋 폴더에 넣고 Label 폰트 타입을 비트맵 폰트로 설정하세요 (메뉴 이름은 3.x 패널을 따름). LabelAtlas(고정 셀 숫자 스트립)와 혼동하지 마세요 — LabelAtlas는 전체 BMFont 메트릭을 담지 않습니다.
재작업 체크리스트
- 빠진 글리프 — 문자셋을 확장하고 다시 생성하세요; 엔진 안에서 두 번째 TTF를 섞지 마세요.
- 고르지 않은 베이스라인 —
1대0, 쉼표, 소수점이 가장 먼저 드러냅니다. - 자간이 너무 좁음 / 넓음 —
.fnt의 xadvance를 편집하거나 생성기에서 간격을 다시 조정하세요. - 지저분한 외곽선 — 글로우가 이웃과 겹침; 아틀라스에 1–2 px 패딩을 두세요.
- 확대 시 흐림 — 비트맵을 벡터처럼 다루지 마세요; 확대해야 한다면 SDF / MSDF 또는 동적 폰트를 사용하세요.
- 아틀라스가 너무 큼 — 문자셋을 줄이거나 “숫자” 세트와 “타이틀” 세트를 분리하세요.
이런 팀에 맞습니다
HUD 점수·픽셀 타이틀·스타일 숫자를 쓰는 인디·소규모 팀—문자 집합이 작고 크기가 고정이며, .fnt + PNG를 빌드에 넣되 데스크톱 BMFont 도구와 엔진 사이를 오가고 싶지 않을 때.
경계
- 첫 아틀라스가 출시 가능한 최종본이 되는 경우는 드뭅니다; 상표 글리프, 빠진 로케일, 추가 해상도는 여전히 사람의 검수가 필요합니다.
- 압축, 패킹, 폰트 머티리얼, 필터 모드는 엔진 프로젝트에서 결정됩니다.
- 패널 문구, 입력(원본 폰트 / 스타일 레퍼런스), 내보내기 형식은 현재 AI Studio를 따릅니다.
- VberAI Studio ≠ Google AI Studio; 비교를 참고하세요.
마무리
“온라인 BMFont 하나 더”가 필요한 게 아닙니다. 메트릭과 함께 게임 에셋으로 출시되는 스타일 숫자와 픽셀 타이포가 필요합니다. 생성 → 아틀라스 미리보기 → 캔버스에서 가장자리 정리 또는 픽셀화 → .fnt + PNG를 Unity / Godot / Cocos로 — 모두 AI Studio에서.
자주 묻는 질문
비트맵 폰트 / BMFont란 무엇인가요?
비트맵 폰트는 글리프를 PNG 아틀라스에 그리고 메트릭 파일을 사용해 엔진이 각 문자를 어떻게 잘라낼지 알게 합니다. AngelCode BMFont(.fnt + PNG)는 Unity, Godot, Cocos가 모두 이해하는 교환 쌍입니다.
VberAI가 게임 비트맵 폰트를 생성할 수 있나요?
네. AI Studio 캔버스의 비트맵 폰트 생성기로 문자셋 아틀라스를 만들거나 글리프 / 스프라이트 시트를 업로드하고, 같은 캔버스에서 편집하거나 내보내세요(패널 기준).
글리프 이미지나 스프라이트 시트를 업로드할 수 있나요?
네. 글리프 이미지(글자별 PNG 등)를 폰트에 넣을 수 있습니다. 스프라이트 시트 업로드 + 자동 분할(숫자条, 글리프 그리드)로 BMFont .fnt + 아틀라스를 생성합니다(패널 기준).
비트맵 vs 동적 TTF vs SDF?
고정 크기 HUD, 픽셀 타이틀, 스타일 숫자 → 비트맵. 긴 문장과 확대해야 하는 UI → 동적 TTF 또는 SDF / MSDF.
Unity 가져오기에서 중요한 것은?
아틀라스에 Point 필터링; Custom Font 또는 TMP 비트맵 모두 BMFont 쌍을 사용할 수 있지만, 텍스처 이름이 .fnt와 일치해야 하고 머티리얼 슬롯이 비어 있으면 안 됩니다.
완전한 중국어 아틀라스를 구울 수 있나요?
실용적으로는 불가능합니다. 완전한 CJK 세트는 아틀라스를 폭발시킵니다. 비트맵 폰트는 숫자, 라틴 문자, 몇 개의 타이틀 글리프에 남겨두고 본문은 동적 폰트로 유지하세요.
계속 읽기
이 글도 추천합니다
Godot 4 HUD와 테마: Control 트리 핸드오프와 Play 승인
Figma가 Godot 4로 넘어올 때 Theme, StyleBox, 컨테이너 앵커, minimum_size 검증. Unity UGUI 체크리스트에 대응하는 6단계 Play와 수정 라우팅. 핸드오프 가이드.
- game-ui-design
- game-dev-ai
- ui-to-engine
- godot
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