GUI 스타일링 구성 요소

구성 요소세부 사항
UIScale화면 크기에 따라 UI 요소를 확대/축소합니다.
UIAspectRatioConstraintUI 요소의 종횡비를 유지합니다.
UISizeConstraintUI 요소의 크기를 지정된 한도 내에서 제한합니다.
UIGradientUI 요소에 그라데이션 색상 효과를 적용합니다.
UIPaddingUI 요소 주위에 여백을 추가합니다.
UICornerUI 요소의 모서리를 둥글게 만듭니다.
UIStrokeUI 요소 주위에 외곽선이나 테두리를 추가합니다.

UIScale (UI 스케일)

Image 1
Image 2
Roblox Studio
local scale = 1.5

local frame = Instance.new("Frame")
frame.Size = UDim2.new(0, 300, 0, 300)
frame.Position = UDim2.new(0.5, -150 * scale, 0.5, -150 * scale)
frame.BackgroundColor3 = Color3.fromRGB(255, 165, 0)
frame.Parent = game.Players.LocalPlayer:WaitForChild("PlayerGui"):WaitForChild("ScreenGui")

local uiScale = Instance.new("UIScale")
uiScale.Scale = scale
uiScale.Parent = frame

local textLabel = Instance.new("TextLabel")
textLabel.Size = UDim2.new(0, 100, 0, 50)
textLabel.Position = UDim2.new(0.5, -50, 0.5, -25)
textLabel.BackgroundTransparency = 1  -- Remove the border by making the background fully transparent
textLabel.TextColor3 = Color3.fromRGB(255, 255, 255)
textLabel.Text = tostring(uiScale.Scale)
textLabel.TextScaled = true
textLabel.Parent = frame

UIAspectRatioConstraint (UI 종횡비 제한)

Image 1
Roblox Studio
local imageLabel = Instance.new("ImageLabel")
imageLabel.Size = UDim2.new(0, 300, 0, 300)
imageLabel.Position = UDim2.new(0.5, -150, 0.5, -150)
imageLabel.Image = "rbxassetid://8998222091"
imageLabel.Parent = game.Players.LocalPlayer:WaitForChild("PlayerGui"):WaitForChild("ScreenGui")

local aspectRatioConstraint = Instance.new("UIAspectRatioConstraint")
aspectRatioConstraint.AspectRatio = 20 / 5 
aspectRatioConstraint.Parent = imageLabel

UISizeConstraint (UI 크기 제한)

Image 1
Roblox Studio
local textLabel = Instance.new("TextLabel")
textLabel.Size = UDim2.new(0, 500, 0, 500)
textLabel.Position = UDim2.new(0.5, -250, 0.5, -250)
textLabel.Text = "with UISizeConstraint!"
textLabel.BackgroundColor3 = Color3.fromRGB(255, 165, 0)
textLabel.TextColor3 = Color3.fromRGB(255, 255, 255)
textLabel.TextScaled = true
textLabel.TextWrapped = true
textLabel.Font = Enum.Font.SourceSansBold
textLabel.Parent = game.Players.LocalPlayer:WaitForChild("PlayerGui"):WaitForChild("ScreenGui")

local sizeConstraint = Instance.new("UISizeConstraint")
sizeConstraint.MaxSize = Vector2.new(300, 300) -- Maximum size of 300x300
sizeConstraint.MinSize = Vector2.new(100, 100) -- Minimum size of 100x100
sizeConstraint.Parent = textLabel

-- Align text to center
textLabel.TextXAlignment = Enum.TextXAlignment.Center
textLabel.TextYAlignment = Enum.TextYAlignment.Center
Image 1
Roblox Studio
local textLabel = Instance.new("TextLabel")
textLabel.Size = UDim2.new(0, 500, 0, 500)
textLabel.Position = UDim2.new(0.5, -250, 0.5, -250)
textLabel.Text = "without UISizeConstraint"
textLabel.BackgroundColor3 = Color3.fromRGB(255, 165, 0)
textLabel.TextColor3 = Color3.fromRGB(255, 255, 255)
textLabel.TextScaled = true
textLabel.TextWrapped = true
textLabel.Font = Enum.Font.SourceSansBold
textLabel.Parent = game.Players.LocalPlayer:WaitForChild("PlayerGui"):WaitForChild("ScreenGui")

-- Align text to center
textLabel.TextXAlignment = Enum.TextXAlignment.Center
textLabel.TextYAlignment = Enum.TextYAlignment.Center

UIGradient (UI 그라데이션)

Image 1
Roblox Studio
local frame = Instance.new("Frame")
frame.Size = UDim2.new(0, 300, 0, 300)
frame.Position = UDim2.new(0.5, -150, 0.5, -150)
frame.Parent = game.Players.LocalPlayer:WaitForChild("PlayerGui"):WaitForChild("ScreenGui")

local uiGradient = Instance.new("UIGradient")
uiGradient.Color = ColorSequence.new{
    ColorSequenceKeypoint.new(0, Color3.fromRGB(255, 165, 0)), -- Orange
    ColorSequenceKeypoint.new(1, Color3.fromRGB(255, 255, 255))  -- White
}
uiGradient.Parent = frame

UIPadding (UI 여백)

Image 1
Roblox Studio
local textLabel = Instance.new("TextLabel")
textLabel.Size = UDim2.new(0.8, 0, 0.8, 0)  -- Increased size of the TextLabel
textLabel.Position = UDim2.new(0.1, 0, 0.1, 0)  -- Center the TextLabel within the Frame
textLabel.Text = "This text has padding!"
textLabel.BackgroundColor3 = Color3.fromRGB(255, 165, 0) -- Orange background
textLabel.TextColor3 = Color3.fromRGB(0, 0, 0) -- Black text
textLabel.TextScaled = true -- Scale text to fit within the label
textLabel.Parent = game.Players.LocalPlayer:WaitForChild("PlayerGui"):WaitForChild("ScreenGui")

local uiPadding = Instance.new("UIPadding")
uiPadding.PaddingTop = UDim.new(0, 30)
uiPadding.PaddingBottom = UDim.new(0, 30)
uiPadding.PaddingLeft = UDim.new(0, 30)
uiPadding.PaddingRight = UDim.new(0, 30)
uiPadding.Parent = textLabel
Image 1
Roblox Studio
local textLabel = Instance.new("TextLabel")
textLabel.Size = UDim2.new(0.8, 0, 0.8, 0)  -- Increased size of the TextLabel
textLabel.Position = UDim2.new(0.1, 0, 0.1, 0)  -- Center the TextLabel within the Frame
textLabel.Text = "This text has no padding!"
textLabel.BackgroundColor3 = Color3.fromRGB(255, 165, 0) -- Orange background
textLabel.TextColor3 = Color3.fromRGB(0, 0, 0) -- Black text
textLabel.TextScaled = true -- Scale text to fit within the label
textLabel.Parent = game.Players.LocalPlayer:WaitForChild("PlayerGui"):WaitForChild("ScreenGui")

UICorner (UI 둥근 모서리)

Image 1
Roblox Studio
local frame = Instance.new("Frame")
frame.Size = UDim2.new(0, 300, 0, 300)
frame.Position = UDim2.new(0.5, -150, 0.5, -150)
frame.BackgroundColor3 = Color3.fromRGB(255, 165, 100)
frame.Parent = game.Players.LocalPlayer:WaitForChild("PlayerGui"):WaitForChild("ScreenGui")

local uiCorner = Instance.new("UICorner")
uiCorner.CornerRadius = UDim.new(0, 20) -- Rounds the corners by 20 pixels
uiCorner.Parent = frame

UIStroke (UI 외곽선)

Image 1
Roblox Studio
local frame = Instance.new("Frame")
frame.Size = UDim2.new(0, 300, 0, 300)
frame.Position = UDim2.new(0.5, -150, 0.5, -150)
frame.BackgroundColor3 = Color3.fromRGB(255, 165, 0)
frame.Parent = game.Players.LocalPlayer:WaitForChild("PlayerGui"):WaitForChild("ScreenGui")

local uiStroke = Instance.new("UIStroke")
uiStroke.Thickness = 5 -- Thickness of the outline
uiStroke.Color = Color3.fromRGB(255, 0, 0) -- Red outline
uiStroke.Parent = frame

이 튜토리얼이 도움이 되셨다면, 저의 작업을 지원하기 위해 커피 한 잔을 사주시면 감사하겠습니다.

지원해 주셔서 정말 감사합니다!

커피 한 잔 사주기