UI 객체의 위치 및 크기

*이 콘텐츠는 AI(베타)를 사용해 번역되었으며, 오류가 있을 수 있습니다. 이 페이지를 영어로 보려면 여기를 클릭하세요.

UI 객체가 레이아웃 구조 또는 크기 수정기/제약 조건의 제어를 받지 않는 한, 객체의 위치와 크기를 완전히 제어할 수 있습니다. 또한 객체가 겹치는 Z-인덱스 레이어링 순서를 설정할 수 있습니다.

핵심 속성

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

위치

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

Scale 값은 해당 축을 따라 컨테이너 크기의 백분율을 나타내며, 이는 모든 Offset 값에 추가됩니다.
Offset 값은 해당 축을 따라 객체를 얼마나 픽셀 이동시킬지를 나타내며, 이는 모든 Scale 값에 추가됩니다.

선택한 GuiObject의 위치를 편집하려면 속성 창에서 위치 필드를 클릭하고 새로운 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 값일 가능성이 높고 2000%의 스케일이 아니기 때문입니다.

크기

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

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

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

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

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

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

컨텍스트 기반 UI

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

한국어