PC 화면에서 딱 맞게 만든 Roblox UI가 모바일에서 오른쪽으로 잘리거나 버튼끼리 겹치는 문제는 매우 흔합니다. 원인은 대부분 “픽셀 기준으로 고정한 UI를 다른 화면에서도 그대로 보여주려고 한 것”에서 시작합니다. Roblox의 UDim2는 Scale과 Offset을 함께 사용하므로 두 값의 역할을 이해하면 반응형 UI를 훨씬 쉽게 만들 수 있습니다.
Scale과 Offset의 차이
Scale은 부모 컨테이너 크기에 대한 비율이고 Offset은 고정 픽셀 값입니다. 예를 들어 X Scale이 0.5라면 부모 폭의 절반 지점을 기준으로 위치합니다. 반대로 Offset 300은 화면이 작든 크든 300픽셀을 의미합니다. 그래서 큰 모니터에서 맞춘 Offset 중심 UI는 작은 휴대폰에서 쉽게 넘칩니다.
모든 것을 Scale 100%로 바꾸는 것도 답은 아닙니다
비율만 쓰면 작은 화면에서 버튼과 글자까지 지나치게 작아질 수 있습니다. 보통 큰 구조는 Scale로 잡고, 여백이나 최소 크기처럼 일정하게 유지할 부분에 Offset을 섞는 방식이 실용적입니다. 핵심은 각 값이 왜 필요한지 알고 쓰는 것입니다.
AnchorPoint를 함께 봅니다
가운데 정렬을 하면서 Position만 0.5로 두고 AnchorPoint를 0,0으로 두면 UI의 왼쪽 위 모서리가 가운데에 놓입니다. 진짜 중앙에 두려면 AnchorPoint도 0.5,0.5처럼 기준점을 맞추는 것이 일반적입니다. 화면 크기가 달라질 때 위치가 이상하면 Position만 보지 말고 AnchorPoint를 같이 확인하세요.
비율 유지에는 UIAspectRatioConstraint가 유용합니다
정사각형 아이콘이나 카드가 화면에 따라 찌그러진다면 가로·세로 비율을 제한하는 제약을 사용할 수 있습니다. 이미지 버튼이나 썸네일처럼 형태가 중요할수록 단순 Size 값만으로 맞추기보다 비율 제약을 함께 쓰는 편이 좋습니다.
텍스트는 자동 크기만 믿지 않습니다
TextScaled를 켜면 공간에 맞게 글자가 줄어들 수 있지만 작은 화면에서 너무 작아지거나 큰 화면에서 과도하게 커질 수 있습니다. UITextSizeConstraint로 최소·최대 범위를 정하거나, 카드 크기와 텍스트 크기를 함께 설계하는 편이 안정적입니다.
스크롤이 필요한 화면은 억지로 한 화면에 넣지 않습니다
상점 상품 20개를 모바일 한 화면에 모두 보여주려고 하면 버튼이 작아지고 정보가 읽기 어려워집니다. ScrollingFrame과 UIListLayout, UIGridLayout을 활용해 사용자가 스크롤할 수 있게 만드는 편이 낫습니다. 화면이 작을수록 정보 우선순위를 정해야 합니다.
Device Simulator로 여러 화면을 빠르게 확인합니다
Roblox Studio의 Device Simulator를 사용하면 실제 기기를 모두 갖고 있지 않아도 화면 크기와 방향을 바꿔 볼 수 있습니다. 휴대폰 작은 화면, 큰 태블릿, PC를 번갈아 확인하면서 같은 UI가 어떻게 변하는지 보세요.
초보가 가장 먼저 고칠 것
모바일에서 UI가 깨진다면 Position과 Size의 Offset이 과도하게 큰지, AnchorPoint가 맞는지, 비율 제약이 필요한지부터 확인하세요. 한 화면에 모든 것을 밀어 넣기보다 핵심 버튼은 크게 유지하고 덜 중요한 정보는 접거나 스크롤로 보내는 것이 실제 사용성도 더 좋습니다.
UI를 만들 때 최소 화면을 기준으로 시작해도 좋습니다
큰 PC 화면부터 만든 뒤 모바일에 억지로 줄이는 것보다, 가장 작은 목표 화면에서 핵심 버튼과 정보가 들어가는지 먼저 확인한 뒤 큰 화면에서 여백을 확장하는 방식이 편할 때가 많습니다. 특히 상점, 인벤토리, 퀘스트처럼 정보량이 많은 화면은 작은 화면에서 우선순위를 정하면 전체 구조도 더 깔끔해집니다.