로블록스 UI가 중앙에서 밀릴 때: UDim2·AnchorPoint 배치 비교법
Position을 0.5로 설정했는데 버튼이 중앙 오른쪽에 보이거나 휴대폰에서 사라진다면, 부모 크기·자식 크기·AnchorPoint를 함께 봐야 합니다. 기본 사각형에서 세 값을 분리해 검산한 뒤 프로젝트의 추가 배치 요소를 확인하는 방법입니다.
Position과 왼쪽 위 좌표가 다른 이유, 작은 부모에서 고정 Offset이 벗어나는 이유를 숫자로 비교할 수 있습니다. 예제는 기본 배치 모델이며 실제 Studio 실행 결과나 특정 기기의 화면 캡처가 아닙니다.
1. 계산을 시작하기 전에 UI의 관리 주체를 봅니다
Frame의 Position과 Size를 바꿔도 화면이 예상대로 움직이지 않는다면 먼저 부모 안의 UIListLayout·UIGridLayout, 자식의 Constraints와 UIScale 같은 추가 요소를 확인하세요. 레이아웃이나 크기 조절 속성이 배치를 관리하는 상태에서는 입력한 네 값만 계산해도 최종 화면과 다를 수 있습니다.
첫 비교는 회전이 없는 부모 Frame 하나와 자식 Frame 하나에서 시작하는 편이 원인을 좁히기 쉽습니다. SizeConstraint는 RelativeXY로 두고 AutomaticSize·UIScale·크기 제약을 적용하지 않은 기본 상태를 기준으로 합니다. 실제 프로젝트의 기능을 한꺼번에 지우지 말고, 테스트용 복사본에서 요소를 하나씩 확인하세요.
| 현상 | 첫 확인 | 별도로 확인할 요소 |
|---|---|---|
| 중앙에 둔 UI가 오른쪽 아래로 밀림 | AnchorPoint와 자식 크기 | 회전·부모 위치 |
| 작은 화면에서 버튼이 안 보임 | 부모 실제 크기와 고정 Offset | inset·안전 영역·클리핑 |
| Position을 바꿔도 제자리에 있음 | UIListLayout·UIGridLayout | Script가 매 프레임 값을 덮어쓰는지 |
| Size 계산값과 실제 크기가 다름 | AutomaticSize·UIScale·Constraints | SizeConstraint와 부모 계층 |
| 사각형은 들어오는데 글자가 잘림 | 텍스트 길이·줄바꿈·크기 | 언어별 길이와 TextScaled |
2. Scale과 Offset의 역할을 따로 적습니다
UDim2의 네 값은 X Scale, X Offset, Y Scale, Y Offset 순서입니다. Position은 기준점을 놓는 위치를, Size는 사각형의 크기를 계산하는 데 사용합니다. 부모 가로 800px에 X Scale 0.5와 X Offset 20px를 넣으면 X축 값은 800×0.5+20=420px입니다. 부모 가로가 390px로 줄면 같은 값은 215px로 바뀝니다.
‘Scale을 쓰면 언제나 반응형’이라고 외우기보다 어떤 축을 부모 크기에 따라 움직이고 어떤 부분을 고정 간격으로 유지할지 정하세요. 예를 들어 너비는 부모의 80%로 유지하면서 높이는 120px로 고정하는 기본 사각형은 Size (0.8, 0, 0, 120)으로 비교할 수 있습니다. 이 예제는 텍스트가 충분히 들어갈 높이까지 판단해 주지는 않습니다.
3. Position이 놓는 점은 왼쪽 위가 아닐 수 있습니다
부모 800×450에서 Position (0.5, 0, 0.5, 0)은 기준점을 (400, 225)에 놓습니다. 자식이 240×120이면 AnchorPoint가 (0, 0)일 때 왼쪽 위가 (400, 225)입니다. AnchorPoint를 (0.5, 0.5)로 바꾸면 자식의 중앙을 그 점에 맞추므로 왼쪽 위는 (280, 165)입니다.
둘 다 Position이 같지만 실제 사각형의 시작 위치는 다릅니다. 계산식은 왼쪽 = 기준점 X − 자식 너비 × AnchorPoint X, 위 = 기준점 Y − 자식 높이 × AnchorPoint Y입니다. 부모 기준 상대 좌표라는 점도 중요합니다. 화면 전체의 AbsolutePosition과 비교하려면 부모의 위치와 다른 배치 효과를 추가로 고려해야 합니다.
| AnchorPoint | 왼쪽 위 | 오른쪽 아래 | 기준점에 맞춰지는 부분 |
|---|---|---|---|
| (0, 0) | (400, 225) | (640, 345) | 자식 왼쪽 위 |
| (0.5, 0.5) | (280, 165) | (520, 285) | 자식 중앙 |
| (1, 1) | (160, 105) | (400, 225) | 자식 오른쪽 아래 |
4. 부모 크기를 바꾸어 고정 위치와 비율 위치를 비교합니다
자식 크기 240×120, AnchorPoint (0, 0), X Position이 (0, 700)이면 부모가 넓을 때도 좁을 때도 왼쪽은 700px입니다. 부모 가로 800px에서는 오른쪽 940px 중 140px가 부모 밖이고, 부모 가로 390px에서는 자식 전체가 오른쪽 바깥에 있습니다. 큰 부모에서 일부만 보였던 문제도 작은 부모에서는 완전히 안 보일 수 있습니다.
반면 X Position을 (0.5, 0), AnchorPoint X를 0.5로 두면 자식 중앙이 부모 가로의 절반에 맞춰집니다. 부모 가로 390px에서 기준점은 195px이고, 너비 240px의 왼쪽은 75px입니다. 부모 크기 변화만으로 좌표가 어떻게 달라지는지 먼저 검산한 뒤 실제 기기에서 확인하세요.
이때 실험용 390×844라는 숫자를 특정 휴대폰의 실제 Roblox UI 영역이라고 생각하면 안 됩니다. 실제 부모 컨테이너는 inset, 기기 방향과 다른 UI 계층에 영향을 받습니다. 계산기에는 Studio에서 확인한 해당 부모의 크기를 입력하는 것이 목적입니다.
5. 사각형이 부모에 들어오는지 네 방향을 확인합니다
왼쪽과 위가 0 이상인지, 오른쪽이 부모 가로 이하인지, 아래가 부모 세로 이하인지 봅니다. 오른쪽은 왼쪽+너비, 아래는 위+높이로 계산합니다. 네 조건을 만족해도 다른 창이나 텍스트가 가리지 않는다는 보장은 없습니다. 이 검사로 알 수 있는 것은 기본 사각형과 부모 사각형의 기하 관계입니다.
실험실의 ‘부모 밖 잘라서 보기’는 해당 기본 사각형이 클리핑될 때를 설명하는 모델입니다. Roblox의 회전된 UI, 상위 계층의 클리핑과 복합 레이아웃을 재현하지 않습니다. 결과의 ‘부모와 겹치는 면적’도 플레이어에게 실제로 보이는 비율이 아니라 두 사각형의 교집합 비율입니다.
6. 테스트용 프로젝트에서 하나씩 대조하는 순서
- 부모·자식 Frame만 있는 테스트 화면을 준비하고, 부모 크기와 자식 Size·Position·AnchorPoint를 기록합니다.
- 기본 계산기에서 같은 값을 넣어 부모 기준 왼쪽 위와 크기를 구합니다.
- AnchorPoint만 0 → 0.5 → 1로 바꾸어 기준점은 유지되고 사각형의 시작 위치가 바뀌는지 확인합니다.
- 부모 크기만 줄여 고정 Offset과 Scale의 차이를 비교합니다.
- 원래 프로젝트에 적용할 때는 레이아웃·Constraints·UIScale을 하나씩 다시 포함합니다.
- 기기 방향·화면 크기·문자 길이를 달리해 눌러야 하는 버튼과 설명문을 함께 확인합니다.
아래는 기존 GuiObject에 적용할 값의 예시입니다. 자동으로 새 UI를 생성하는 코드가 아니며, 실제 계층과 Script 위치를 맞춰 사용해야 합니다.
local ui = script.Parent
ui.AnchorPoint = Vector2.new(0.5, 0.5)
ui.Position = UDim2.new(0.5, 0, 0.5, 0)
ui.Size = UDim2.new(0, 240, 0, 120)
-- 부모가 800×450인 기본 모델에서 왼쪽 위는 (280, 165)7. 두 부모 크기에서 직접 실행한 계산 기록
2026년 10월 22일 Windows의 Microsoft Edge에서 이 사이트 배치 실험실에 같은 Position·Size·AnchorPoint를 넣고 부모 크기만 바꾸어 계산했습니다. 아래 값은 브라우저 도구를 실제 실행한 출력입니다. 입력 자체는 설명용 가상 값이며 Roblox Studio나 휴대폰 게임 UI를 측정한 자료가 아닙니다.
| 배치 조건 | 부모 폭 800px | 부모 폭 390px |
|---|---|---|
| 폭 240px, X Offset 700px, AnchorPoint X 0 | 왼쪽 700px·오른쪽 끝 940px, 부모와 겹침 41.667% | 왼쪽 700px·오른쪽 끝 940px, 부모와 겹침 0% |
| 폭 Scale 0.8, Position X Scale 0.5, AnchorPoint X 0.5 | 폭 640px·왼쪽 80px | 폭 312px·왼쪽 39px |
첫 행의 세로 위치는 Offset 100px, 높이는 120px로 두어 두 부모에서 모두 세로 범위 안에 있게 했습니다. 그래서 겹침 차이를 가로 배치 문제로 분리할 수 있습니다. 두 번째 행은 자식의 고정 너비가 아니라 부모 비율을 유지해야 할 때 비교할 수 있는 대안입니다. 어느 방식이 적절한지는 텍스트 길이와 실제 레이아웃에 따라 달라집니다.
- 배치 실험실의 현재 부모를 800×450으로 설정하고 첫 행의 입력을 적용합니다.
- 결과 아래 두 부모 비교에 390×844를 넣습니다. Position·Size·AnchorPoint는 바꾸지 않습니다.
- 왼쪽·오른쪽 끝과 겹치는 면적을 함께 읽습니다. 값은 같아도 부모 경계가 달라졌는지 확인합니다.
- 입력·좌표 TXT를 저장한 뒤 실제 프로젝트에서 부모의 AbsoluteSize와 Layout·Constraints 적용 여부를 대조합니다.
8개 배치 사례의 전체 입력·예상값·브라우저 출력 기록에서 AnchorPoint 0·0.5·1과 두 부모 폭의 차이를 다시 확인할 수 있습니다.
출처와 확인 범위
- Creator Hub — Position and size UI objects: Position·Size·AnchorPoint의 의미.
- UDim2: 값의 순서와 생성자.
- Size modifiers and constraints: 기본 계산을 바꾸는 크기 조절 요소.
- SizeConstraint: Scale의 기준 축.
2026년 10월 12일에 정리한 기본 모델에 2026년 10월 22일 공식 문서 재확인과 두 부모 브라우저 비교 기록을 추가했습니다. 비교 표와 실험용 값은 설명을 위해 구성했으며 실제 Roblox Studio·휴대폰에서 Place를 실행하거나 AbsolutePosition을 측정하지 않았습니다. 계산기 입력 검증, 기준점 변화와 부모 범위 판정을 테스트했습니다. 실제 적용에서 차이가 나면 부모 계층과 추가 속성부터 확인하고 글 주소와 함께 제보해 주세요.