UI 해상도·배율 점검

1280×720부터 4K까지, 정수 배율과 1.25·1.5·1.75배를 나란히 보고 글자 넘침과 명암비까지 확인하세요.

미리보기는 패널이나 버튼을 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)를 계산합니다. 브라우저 안의 계산이며 엔진의 레이아웃 처리가 아닙니다.

이미지을(를) 여기에 놓으세요여러 개를 한 번에 처리할 수 있습니다

업로드 없음 · 이 기기에서 처리

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

정수 배율에서는 원본 픽셀 하나가 화면 픽셀 덩어리 하나가 됩니다. 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로 적고 있어 미리보기가 그리는 값과 같습니다.

결과 확인

배율 비교: 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로 전환	안전 영역 여백 이상의 여백을 주거나, 안전 영역 컨테이너 안에 앵커 걸기
대비는 통과했는데 그림 위 라벨이 읽기 어려움	비율은 단색 두 개를 비교하고 글자 뒤 그림은 변함	글자 뒤에서 가장 밝은 픽셀과 가장 어두운 픽셀을 측정	라벨 뒤에 받침 패널·외곽선·그림자 넣기

다른 방법

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

이 방법의 한계

엔진 레이아웃 처리가 아닙니다. 컨테이너·크기 플래그·테마 여백은 모델링하지 않고 앵커 계산만 합니다.
콘솔·휴대폰 프리셋은 없습니다. 기기마다 다른 안전 영역은 사용자 여백으로 넣습니다.
텍스트 폭은 게임 폰트가 아니라 브라우저 폰트로 잰 값입니다.

버전과 출처

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 공식 문서를 따릅니다.

참고한 공식 문서