게임 UI 배율 미리보기 · 해상도·앵커·안전 영역

패널이나 버튼을 실제로 그려질 곳에서 보세요. 목표 해상도와 화면비의 가상 화면에 앵커 프리셋으로 배치하고, 비정수 배율 버전과 나란히 봅니다.

미리보기는 패널이나 버튼을 1280 × 720부터 3840 × 2160까지(4:3·16:9·16:10·21:9) 가상 화면 안에 그리고, Godot 방식 앵커로 배치하며, 90% 타이틀 세이프나 93%·95% 액션 세이프 영역을 겹쳐 보이고, 1×·1.25×·1.5×·1.75×·2×·2.5×·3×로 보여 줍니다. 정수 배율은 픽셀 아트를 선명하게 유지하고 비정수 배율은 흐리게 만듭니다. 같은 점검 단계에서 한국어·영어·일본어 라벨이 상자에 들어가는지 재고 WCAG 대비(검정 위 흰색 21:1)를 계산합니다. 브라우저 안의 계산이며 엔진의 레이아웃 처리가 아닙니다.

UI 패널·버튼·글리프 시트·UI 시트(PNG)를 끌어다 놓으세요

UI 랩 열기

브라우저에서 처리하며 파일은 업로드되지 않습니다.

UI 랩: 나인 슬라이스 가이드와 여러 크기 미리보기가 있는 CC0 UI 패널 — CC0 에셋(Kenney)을 연 실제 UI 랩 화면입니다.

출력

Nine-slice측정 확인· Pillow
Bitmap font측정 확인· independent .fnt parser
Button states측정 확인· Pillow
Engine import미검증

배율·안전 영역·대비를 숫자로

정수 배율에서는 원본 픽셀 하나가 화면 픽셀 덩어리 하나가 됩니다. 2×에서 16px 아이콘은 32px이고 픽셀마다 2 × 2입니다. 1.5×에서는 원본 픽셀 두 개가 화면 픽셀 세 개를 덮어야 하므로, 최근접 필터면 열 너비가 1px과 2px로 번갈아 나오고 선형 필터면 이웃 색이 섞여 가장자리가 흐려집니다. 미리보기는 비정수 배율을 부드럽게 그립니다. Godot 4.2 이상에는 배율을 내림하는(2.5가 2가 되는) 스트레치 배율 모드 Integer가 있고, 문서는 픽셀 아트 게임에 viewport 스트레치 모드와 함께 이를 권합니다.

안전 영역은 텔레비전에서 왔습니다. EBU R 95(버전 1.1, 2017)는 중요한 동작을 모든 가장자리에서 3.5%, 그래픽을 5% 안쪽에 두도록 하며, 이것이 미리보기가 그리는 93% 액션 세이프와 90% 타이틀 세이프 사각형입니다. 95% 프리셋은 더 느슨한 추가 옵션으로 R 95에 없는 값입니다. 휴대폰과 콘솔은 실행 중에 자기 안전 영역을 알려 주므로(Unity Screen.safeArea는 픽셀 단위, Godot DisplayServer.get_display_safe_area()), 여기서는 프리셋이 아니라 사용자 여백으로 입력합니다.

대비는 WCAG 2.2 공식을 씁니다. sRGB 채널을 선형으로 바꾼 뒤 상대 휘도 L = 0.2126 R + 0.7152 G + 0.0722 B를 구하고, 밝은 색을 앞에 두어 (L1 + 0.05) ÷ (L2 + 0.05)로 비율을 냅니다. 범위는 1:1부터 21:1입니다. 성공 기준 1.4.3은 텍스트 4.5:1, 큰 텍스트(18pt 또는 굵은 14pt, 미리보기에서는 24px·18.66px) 3:1을, 1.4.6은 7:1을, 1.4.11은 UI 컴포넌트의 시각 요소에 3:1을 요구합니다. 비율은 단색 두 개에 대한 값이라 그림 위 글자는 픽셀마다 비율이 다릅니다.

정수 배율: 배율이 정수여서 원본 픽셀 하나가 화면 픽셀 덩어리 하나를 정확히 덮는 경우.
타이틀 세이프(그래픽 세이프): 화면 안쪽 90%. EBU R 95에서 모든 변에 5% 여백.
액션 세이프: 화면 안쪽 93%. EBU R 95에서 모든 변에 3.5% 여백.
상대 휘도: sRGB를 선형으로 바꾼 뒤 0(검정)~1(흰색)로 나타낸 색의 밝기. 대비 계산에 씀.
앵커: 요소가 부모 안 어디에 고정되는지를 0~1 숫자 네 개(왼쪽·위·오른쪽·아래)로 나타낸 것.

예시: 점검 단계가 계산하는 숫자

아래 값은 모두 미리보기와 같은 함수로 계산했습니다.

대비       L = 0.2126 R + 0.7152 G + 0.0722 B   (먼저 sRGB 선형화)
흰색/검정          (1.00 + 0.05) / (0.00 + 0.05) = 21.0 : 1
#767676 / 흰색     L = 0.1812 → 1.05 / 0.2312 = 4.54 : 1   4.5:1을 0.04 차이로 통과
흰색 / #3182f6     L = 0.2327 → 1.05 / 0.2827 = 3.71 : 1   UI 3:1·큰 텍스트: 통과 · 16px 텍스트 AA: 미달
안전 1920×1080     타이틀 90% → x 96, y 54, 1728 × 972   액션 93% → x 67, y 38, 1786 × 1004
앵커               오른쪽 아래, 300 × 80 버튼, 여백 32px → x = 1920 − 300 − 32 = 1588, y = 1080 − 80 − 32 = 968
배율               기준 640 × 360 → 1920 × 1080은 정확히 3×;  1366 × 768은 2.13× → Integer 모드는 2×(1280 × 720)로 그림

대비 탭의 기본 색은 #3182f6 위 흰색입니다. 큰 라벨이나 아이콘에는 괜찮지만 16px 본문 텍스트에는 부족합니다. 1920 × 1080에서 EBU R 95도 너비의 3.5%를 67px로 적고 있어 미리보기가 그리는 값과 같습니다.

이렇게 작동합니다

1280×720~3840×2160, 4:3·16:9·16:10·21:9 화면. Godot 4 앵커 값의 앵커 프리셋.
안전 영역: 90% 타이틀 세이프, 93%·95% 액션 세이프(방송 관례로 표시), 사용자 여백.
1×~3× 배율 비교, 정수 배율은 선명함으로 표시.
언어별 텍스트 넘침(측정한 폭)과 WCAG 대비 공식.

사용 방법

UI 요소를 끌어다 놓습니다.
화면·앵커·안전 영역을 고릅니다.
배율·텍스트 넘침·대비 탭을 확인합니다.
그림이나 배치를 그에 맞게 고칩니다.

결과 확인

배율 비교: 2×와 3×의 픽셀 아트는 가장자리가 딱딱해야 합니다. 1.5× 결과가 받아들일 수 없다면 정수 단계나 목표 화면을 나누어떨어지게 하는 기준 해상도를 계획하세요.
크기 탭: 배포할 모든 화면비(21:9 포함)에서 요소 사각형이 안전 영역 숫자 안에 있어야 합니다.
현지화 탭: 모든 언어가 "fits"(줄바꿈을 허용하는 UI라면 "wraps")여야 합니다. 미리보기는 브라우저 폰트로 재므로 게임 폰트로 한 번 더 확인하세요.
대비 탭: 본문 크기 라벨은 4.5:1 이상, 큰 라벨과 아이콘은 3:1 이상이어야 합니다.

문제 해결

증상	유력한 원인	확인 방법	해결
픽셀 아트 UI가 일부 모니터에서 흐림	UI가 비정수 배율(예: 1366 × 768에서 2.13×)과 선형 필터로 그려짐	배율 비교의 1.5×와 2× 칸을 비교	Godot에서는 viewport 스트레치 모드와 Integer 배율 모드, Nearest 필터 사용. Godot 픽셀 아트 흐림 참고
미리보기에서는 맞는데 게임에서 라벨이 넘침	미리보기는 브라우저 폰트로 쟀고 게임 폰트는 폭이 다름	같은 문자열을 게임 폰트로 재기(폰트 단계에서 만들 수 있음)	여유 폭을 두거나, 줄바꿈을 허용하거나, 번역을 줄이기
한국어·일본어가 단어 중간에서 끊김	공백이 없는 텍스트는 미리보기의 탐욕적 줄바꿈이 글자 단위로 끊음	현지화 탭에서 줄이 끝나는 위치 확인	글자 단위 줄바꿈을 받아들이거나 명시적으로 줄을 나누기. 엔진은 자체 줄바꿈 규칙이 있음
21:9에서만 요소가 안전 영역을 벗어남	화면 가장자리에 앵커를 걸었는데 넓은 화면에서 그 가장자리가 이동함	안전 영역을 켜고 화면비를 21:9로 전환	안전 영역 여백 이상의 여백을 주거나, 안전 영역 컨테이너 안에 앵커 걸기
대비는 통과했는데 그림 위 라벨이 읽기 어려움	비율은 단색 두 개를 비교하고 글자 뒤 그림은 변함	글자 뒤에서 가장 밝은 픽셀과 가장 어두운 픽셀을 측정	라벨 뒤에 받침 패널·외곽선·그림자 넣기

다른 방법

방법	이럴 때 더 낫습니다
엔진에서 목표 해상도마다 씬 실행	실제 레이아웃이 필요할 때: 컨테이너, 크기 플래그, 테마 여백, 엔진 자체의 텍스트 렌더링.
픽셀 퍼펙트 검사	게임 스크린샷이 있고 정수배로 확대됐는지 알고 싶을 때.

출력 파일과 검증 방법

"측정 확인"은 내려받은 파일을 페이지 밖에서(Pillow·numpy·별도 파서) 다시 열어 그 속성을 측정했다는 뜻입니다. 게임 엔진에서 불러오는 것은 시험하지 않았습니다.

대상	파일	검증
Nine-slice	`nine-slice.json · previews · SETUP.md`	측정 확인 Pillow크기를 바꾼 모든 미리보기에서 네 모서리 블록을 늘이지 않습니다. Chromium에서는 바이트 동일, Firefox에서는 반투명 픽셀이 알파 반올림 한 단계만큼 다를 수 있습니다. 빈틈·겹침 0.
Bitmap font	`font.png · font.fnt (BMFont text) · font.json`	측정 확인 independent .fnt parser테스트에 따로 작성한 파서로 .fnt를 다시 읽어 헤더와 모든 글리프 영역이 일치했습니다.
Button states	`states/*.png · strip · states.json`	측정 확인 Pillownormal은 원본과 같습니다(Chromium에서는 바이트 동일, Firefox에서는 반투명 픽셀의 색이 알파 반올림 한 단계 이내). states.json의 모든 영역이 스트립에서 해당 상태를 정확히 잘라 냅니다.
Engine import	`Godot NinePatchRect · Unity Sprite border · BMFont import`	미검증Godot·Unity에서 실행하지 않았습니다.

검증 근거

나인 슬라이스 모서리가 100×40·300×80·800×200·420×120에서 늘어나지 않음, 동일한 열 12개에서 테두리 6·6·6·6 제안. 버튼 상태: normal이 원본과 같음, disabled는 알파 128 회색, focus 링 정확. .fnt 글리프 레코드가 JSON과 일치. .po의 누락 글리프를 정확히 나열. 흰 바탕 검정 글자 21:1 측정. 이미지는 브라우저 캔버스를 거칩니다. Chromium은 바이트가 그대로이고, Firefox는 반투명 픽셀의 색을 미리 곱한 값 한 단계로 반올림합니다(Kenney 버튼에서 측정: 알파 63에서 최대 4단계). 알파와 불투명 픽셀은 그대로입니다.

한계

엔진 레이아웃 처리가 아닙니다. 컨테이너·크기 플래그·테마 여백은 모델링하지 않고 앵커 계산만 합니다.
콘솔·휴대폰 프리셋은 없습니다. 기기마다 다른 안전 영역은 사용자 여백으로 넣습니다.
텍스트 폭은 게임 폰트가 아니라 브라우저 폰트로 잰 값입니다.
커닝 쌍 없음, 폰트 페이지 1장, MSDF 없음. SDF 출력은 베타입니다.
TTF의 cmap을 해석하지 않으므로 누락 글리프 점검에는 .fnt나 랩의 폰트가 필요합니다.
아틀라스는 1페이지이고, 서로 닿은 요소는 하나로 셉니다.
Godot·Unity에서 렌더링해 보지 않았습니다. 엔진용 값(patch margin, L·B·R·T 테두리)은 문서 기준이며 엔진에서 시험하지 않았습니다.

버전과 출처

docs/UI-LAB.md를 위해 Chromium에서 측정했습니다. 3840 × 2160의 타이틀 세이프는 192, 108 · 3456 × 1944, 여백 64px의 왼쪽 위 앵커는 64, 64에 놓였고, 120px 상자에서 영어 라벨은 넘치고 한국어 예시는 들어갔으며, 흰 바탕 검정은 정확히 21:1, #767676/흰색은 4.54:1이었습니다. 예시 값은 같은 함수로 다시 계산했습니다. 안전 영역 비율은 EBU R 95, 대비 공식은 WCAG 2.2, 정수 배율 모드는 Godot 4.7 공식 문서를 따릅니다.

참고한 공식 문서

자주 묻는 질문

엔진의 레이아웃 계산인가요?

아닙니다. 앵커 계산(Unity 프리셋도 같은 Godot의 앵커 값 네 개)을 브라우저에서 흉내 낸 것이며 그렇게 표시합니다.

콘솔 안전 영역도 있나요?

아니요. 콘솔과 휴대폰 노치 값은 기기마다 달라 프리셋으로 제공하지 않습니다. 사용자 여백을 쓰세요.

무료인가요? 계정이 필요한가요?

이 페이지의 기능은 모두 무료이며 계정 없이 쓸 수 있습니다. 워터마크나 막혀 있는 내보내기가 없습니다.

스프라이트가 업로드되나요?

아니요. Studio는 이 브라우저 탭 안에서 디코딩·패킹·내보내기를 합니다. 프로젝트는 브라우저(IndexedDB)에 자동 저장되며 .nerulio 파일로 저장할 수 있습니다.

Aseprite나 엔진 플러그인을 설치해야 하나요?

아니요. .aseprite 파일은 브라우저에서 읽고 씁니다. 엔진별 번들에는 그 엔진에 필요한 것이 들어 있습니다(Godot는 가져오기 설정과 씬, Unity와 Godot 타일셋은 작은 편집기 스크립트).