UI 객체의 위치와 크기 | 설명서 - Roblox 크리에이터 허브

UI 객체가 레이아웃 구조 또는 크기 조정기/제약의 제어 아래에 있지 않은 경우, 객체의 위치 및 크기에 대해 완전한 제어권을 가집니다. 또한 객체가 겹치는 Z‑index 레이어링 순서를 설정할 수 있습니다.

핵심 속성

모든 GuiObjects는 화면상의 컨테이너나 경험 내 컨테이너 내에서 객체를 위치, 크기, 앵커 및 레이어하기 위한 핵심 속성 집합을 공유합니다.

위치

Position 속성은 객체를 X 및 Y 축에 따라 위치시키는 UDim2 좌표 집합입니다. UDim2는 각 축에 대해 Scale 및 Offset 값으로 표현됩니다:

Scale 값은 해당 축에 따라 컨테이너 크기의 백분율을 나타내며, 어떤 Offset 값과 추가적으로 더해집니다.
Offset 값은 해당 축으로 객체를 몇 픽셀 이동시킬지를 나타내며, 어떤 Scale 값과 추가적으로 더해집니다.

선택된 GuiObject의 위치를 편집하려면, 속성 창에서 Position 필드를 클릭하고 새로운 UDim2 좌표 집합을 입력합니다.

Studio에서 UDim2를 입력할 때 대괄호와 공백은 선택 사항입니다 — 예를 들어 네 개의 값을 쉼표로 구분하여 0.25,40,0.1,20과 같이 간단히 입력하면 Studio는 의도된 값 집합을 추론합니다.

Studio는 단일 숫자가 입력되었을 때도 의도된 값 집합을 추론합니다. 예를 들어, 단순히 0.5를 입력하면 {0.5, 0},{0.5, 0}로 변환됩니다. 이는 0.5가 50%의 Scale 값일 가능성이 높기 때문입니다. 반대로, 20을 입력하면 {0, 20},{0, 20}로 변환되며, 이는 20이 20픽셀의 Offset 값일 가능성이 높습니다.

크기

Size 속성은 객체를 X 및 Y 축에 따라 크기를 설정하는 UDim2 좌표 집합입니다. UDim2는 각 축에 대해 Scale 및 Offset 값으로 표현됩니다:

Scale — 해당 축에 따라 컨테이너 크기의 백분율을 나타내며, 어떤 Offset 값과 추가됩니다.
Offset — 해당 축의 객체의 픽셀 크기를 나타내며, 어떤 Scale 값과 추가됩니다.

선택된 GuiObject의 크기를 편집하려면, 속성 창에서 Size 필드를 클릭하고 새로운 UDim2 좌표 집합을 입력합니다.

Studio에서 UDim2를 입력할 때 대괄호와 공백은 선택 사항입니다 — 예를 들어 네 개의 값을 쉼표로 구분하여 0.75,0,0.25,0과 같이 간단히 입력하면 Studio는 의도된 값 집합을 추론합니다.

AnchorPoint

AnchorPoint 속성은 객체가 위치 및 크기를 변경할 때의 원점을 정의합니다. 기본 AnchorPoint 값은 (0, 0)로, 객체의 왼쪽 상단 모서리에 앵커를 배치합니다.

AnchorPoint 값은 객체의 크기에 상대적인 0에서 1까지의 비율을 의미하여, AnchorPoint 값이 (0.5, 0.5)인 객체는 수평 및 수직으로 객체의 가운데(50%)에 앵커 포인트를 배치하고, 위치 또는 크기를 변경할 경우 이 지점에서 바깥쪽으로 이동하고 확대됩니다.

선택한 GuiObject의 앵커 포인트를 보기 및 편집하려면:

속성 창에서 AnchorPoint 필드를 클릭합니다.
새로운 Vector2 좌표를 입력하고 Enter를 누릅니다.

Studio는 단일 숫자가 입력되었을 때 의도된 값 쌍을 추론합니다. 예를 들어, 단순히 0.5를 입력하면 중심 앵커 포인트로 변환됩니다.0.5, 0.5

ZIndex

ZIndex 속성은 GuiObjects가 서로 렌더링되고 겹치는 순서를 정의합니다. 새로운 렌더링 레이어를 생성하려면 각 객체의 ZIndex 속성을 서로 다른 양의 정수 또는 음의 정수 값으로 설정해야 합니다.

ScreenGui와 같은 UI 컨테이너에서는 기본 ZIndexBehavior가 항상 자식이 부모 위에 렌더링되며, 각 자식의 ZIndex가 다른 객체 위에 렌더링되는 순서를 결정하는 데 사용됩니다.

객체의 ZIndex를 편집하려면, 속성 창에서 ZIndex를 찾아 새로운 정수 값을 입력합니다.

레이아웃 구조

레이아웃 구조는 GuiObjects를 신속하게 조직하고 표시할 수 있게 해줍니다. 예를 들어 수평 또는 수직 목록, 균일한 크기의 타일로 구성된 그리드, 페이지 시퀀스 등을 조정할 수 있습니다. 레이아웃은 일반적으로 제어하는 객체의 위치/크기를 오버라이드하거나 영향을 미칩니다.

레이아웃	설명
목록	UIListLayout는 형제 GuiObjects를 부모 컨테이너 내 수평 행 또는 수직 열로 배치합니다.
그리드	UIGridLayout는 형제 GuiObjects를 부모 컨테이너 내 동일한 크기의 균일한 셀의 그리드로 배치합니다.
테이블	UITableLayout는 형제 GuiObjects와 그 자식들을 테이블 형식으로 배치합니다.
페이지	UIPageLayout은 형제 GuiObjects를 스크립트를 통해 전환할 수 있는 고유한 페이지로 조직합니다.

크로스 플랫폼 요소

Roblox는 본질적으로 크로스 플랫폼으로, 플레이어가 자신의 전화기나 태블릿에서 경험을 발견하고 참여한 후, 나중에 PC나 콘솔에서 이어서 플레이할 수 있습니다. 당신은 지원하기로 선택한 모든 플랫폼에서 접근 가능하고 즐길 수 있는 Roblox 경험을 설계해야 하며, 하나의 플랫폼에 최적화하고 나머지를 무시해서는 안 됩니다.

예약 구역

모바일 장치에서는 기본 컨트롤이 화면의 왼쪽 하단 및 오른쪽 하단 부분을 차지합니다. 경험의 UI를 설계할 때는 이러한 구역에 중요한 정보나 가상 버튼을 배치하지 않도록 유의하십시오.

엄지손가락 구역

대부분의 모바일 플레이어는 한 손으로 가상 조이스틱을 조작하고 다른 손으로 점프 버튼을 조작합니다. 장치의 물리적 크기와 플레이어의 손 크기에 따라, 하단 모서리에서 너무 멀리 위치하는 것은 불편하거나 불가능할 수 있으므로 자주 사용하는 버튼이 쉽게 닿을 수 있는 구역 외부에 위치하지 않도록 해야 합니다.

플레이어의 오른쪽 엄지손가락으로 쉽게 닿을 수 있는 버튼

손이나 엄지를 뻗지 않으면 도달하기 어려운 버튼

편안한 손가락 구역은 전화기와 태블릿 간에 다르게 나타나므로, 태블릿은 화면이 더 크기 때문에 주의해야 합니다. 화면 상단 가장자리에서 40% 아래에 배치된 버튼은 전화기에서는 닿을 수 있지만 태블릿에서는 거의 닿을 수 없습니다.

전화기의 상단 가장자리에서 40% 떨어진 버튼, 플레이어의 엄지손가락으로 닿을 수 있는 위치

태블릿의 상단 가장자리에서 40% 떨어진 버튼, 손을 뻗지 않으면 닿기 어려움

전화기와 태블릿 모두에 대해 신뢰할 수 있는 접근법은 자주 사용하는 기본 점프 버튼과 가까운 사용자 정의 버튼의 상대적인 위치입니다. 이러한 버튼을 쉽게 닿을 수 있는 곳에 배치합니다.

다음 코드 블록을 StarterPlayerScripts 내의 클라이언트 측 스크립트에 배치하면 점프 버튼의 위치를 가져와서 왼쪽에 20픽셀 떨어진 자리를 위한 자리 표시자 버튼을 생성합니다.

클라이언트 스크립트 - 점프 버튼 옆의 사용자 정의 버튼
local Players = game:GetService("Players")
local UserInputService = game:GetService("UserInputService")

local player = Players.LocalPlayer
local playerGui = player:WaitForChild("PlayerGui")

if UserInputService.TouchEnabled then
	-- 점프 버튼이 완전히 로드될 때까지 대기
	while not (playerGui:FindFirstChild("JumpButton", true) and playerGui:FindFirstChild("JumpButton", true).IsLoaded) do
		task.wait()
	end
	local jumpButton = playerGui:FindFirstChild("JumpButton", true)

	-- 점프 버튼의 왼쪽에 새로운 사용자 정의 버튼 배치
	local customButton = Instance.new("ImageButton")
	customButton.AnchorPoint = Vector2.new(1, 1)
	customButton.Size = UDim2.fromOffset(jumpButton.Size.X.Offset * 0.8, jumpButton.Size.Y.Offset * 0.8)
	customButton.Position = jumpButton.Position + UDim2.fromOffset(-20, jumpButton.Size.Y.Offset)
	customButton.Parent = jumpButton.Parent
else
	warn("장치가 터치 기능을 지원하지 않거나 Studio가 터치 기능 지원 장치를 에뮬레이션하지 않습니다!")
end

모바일 장치에서는 화면 공간이 제한적이므로, 활동적인 게임 플레이 중에는 가장 중요한 정보만 표시해야 합니다. 예를 들어, 당신의 경험에 문이나 보물 상자를 여는 특별한 입력 액션이 포함된 경우, "열기" 버튼을 화면에 계속 표시하는 것은 의미가 없습니다. 대신 캐릭터가 문이나 상자에 접근할 때만 입력을 수락하기 위해 접근 프롬프트 또는 이와 유사한 방법을 사용하십시오.