UI 스타일링

UI 스타일링은 Roblox의 스타일시트 솔루션으로, CSS와 유사한 UI 인스턴스 속성에 대한 전역 오버라이드를 선언하고 적용할 수 있게 해줍니다. 이 엔진 수준의 지원은 스타일 편집기와 end-to-end 토큰 파이프라인의 기초가 됩니다.

개념

스타일 규칙(StyleSheet의 일부)은 규칙의 Selector 정의에 일치하는 모든 인스턴스에 적용되어 클래스 이름, 인스턴스 이름 및 계층 관계와 같은 특성을 일치시킵니다. 자세한 내용은 Selector 문서를 참조하십시오.

스타일 토큰은 토큰 StyleSheet의 속성을 통해 정의되며 스타일과 구성 요소 전반에 걸쳐 사용할 수 있는 UI 속성 변수를 나타냅니다. 예를 들어 Frame.BackgroundColor3, TextLabel.TextColor3, 및 UIStroke.Color 등을 위한 공통 색상입니다. 토큰은 CSS 변수와 비교할 수 있습니다.

스타일 테마는 테마 StyleSheet의 속성을 통해 구성되며, 특정 토큰 세트로 구성되어 교체할 수 있습니다. 예를 들어 "라이트" 테마와 "다크" 테마를 정의하는 색상 토큰을 포함합니다. 관련 테마는 올바르게 작동하기 위해 동일한 토큰 세트를 가져야 합니다.

스타일 쿼리는 UI의 컨텍스트 또는 환경에 따라 조건부로 스타일을 적용할 수 있게 해줍니다. 이는 CSS 컨테이너 쿼리 및 미디어 쿼리에 비교할 수 있으며, UI가 화면 크기, 입력 유형 또는 사용자 접근성 설정에 적응할 수 있도록 합니다.

규칙 전파

StyleLink 인스턴스는 StyleSheet와 그에 연결된 규칙을 상위 ScreenGui 및 그 안에 있는 모든 GuiObjects에 연결합니다. 주어진 트리에 적용할 수 있는 StyleSheet는 하나만 존재할 수 있습니다.

선택자 정의

전체적으로 인스턴스 일치 및 수정을 위한 규칙의 Selector 정의는 다음을 통해 작동합니다:

Roblox 클래스 선택자는 주어진 GuiObject 클래스의 모든 인스턴스를 타겟합니다. 예를 들어 Frame, ImageLabel, TextButton 등입니다.
특정 UI 객체에 대해 CollectionService를 통해 적용된 인스턴스 태그입니다.
UI 객체의 Instance.Name 값에 따라 인스턴스 이름 선택입니다.
CSS 의사 요소와 유사한 인스턴스 수정자로, UICorner 또는 UIStroke와 같은 팬텀 UIComponents을 통해 적용됩니다.
GuiObject 상태 선택자는 CSS 의사 클래스 선택자와 유사하며, GuiState 열거형 중 하나인 Hover와 상응합니다.
Roblox 쿼리 선택자는 CSS 컨테이너 및 미디어 쿼리와 유사하며, @ 접두사를 사용하여 동일한 이름의 StyleQuery 인스턴스 또는 의사 인스턴스가 활성 상태일 때만 스타일을 적용합니다.

다음 설정은 크기 및 색상 토큰, 테마, 그리고 "Frame"의 클래스 선택자가 200×200 픽셀 크기의 마젠타 Frame를 생성하는 방법을 보여줍니다.

코드 예제

UI 클래스 선택자
local CollectionService = game:GetService("CollectionService")
local ReplicatedStorage = game:GetService("ReplicatedStorage")

local screenGui = script.Parent

-- 토큰
local tokens = Instance.new("StyleSheet")
tokens.Name = "Tokens"
tokens.Parent = ReplicatedStorage
tokens:SetAttribute("SquareS", UDim2.fromOffset(50, 50))
tokens:SetAttribute("SquareM", UDim2.fromOffset(100, 100))
tokens:SetAttribute("SquareL", UDim2.fromOffset(200, 200))
tokens:SetAttribute("Fit", UDim2.fromScale(1, 1))
tokens:SetAttribute("Magenta", Color3.fromHex("FF0099"))
tokens:SetAttribute("Gold", Color3.fromHex("FFCC00"))
tokens:SetAttribute("Aqua", Color3.fromHex("0093F0"))

-- ThemeA
local themeA = Instance.new("StyleSheet")
themeA.Name = "ThemeA"
themeA.Parent = ReplicatedStorage
local tokensDerive = Instance.new("StyleDerive")
tokensDerive.StyleSheet = tokens  -- 전역 토큰 파생
tokensDerive.Parent = themeA
themeA:SetAttribute("FrameSize", "$SquareM")
themeA:SetAttribute("FrameColor", "$Aqua")

-- ThemeB
local themeB = Instance.new("StyleSheet")
themeB.Name = "ThemeB"
themeB.Parent = ReplicatedStorage
local tokensDerive = Instance.new("StyleDerive")
tokensDerive.StyleSheet = tokens  -- 전역 토큰 파생
tokensDerive.Parent = themeB
themeB:SetAttribute("FrameSize", "$SquareL")
themeB:SetAttribute("FrameColor", "$Magenta")

-- DesignSheet
local designSheet = Instance.new("StyleSheet")
designSheet.Name = "DesignSheet"
designSheet.Parent = ReplicatedStorage
local themeDerive = Instance.new("StyleDerive")
themeDerive.StyleSheet = themeB  -- ThemeB에서 파생
themeDerive.Parent = designSheet

-- DesignSheet를 ScreenGui에 링크
local styleLink = Instance.new("StyleLink")
styleLink.StyleSheet = designSheet
styleLink.Parent = screenGui

-- 규칙 구성
local rule = Instance.new("StyleRule")
rule.Selector = "Frame"  -- 클래스 선택자
rule.Parent = designSheet

-- 규칙 속성 설정
rule:SetProperties({
	["BackgroundColor3"] = "$FrameColor",
	["Size"] = "$FrameSize",
	["BorderSizePixel"] = 0
})

local frame = Instance.new("Frame")
frame.Parent = screenGui

스타일링에 의해 영향을 받는 인스턴스 속성은 속성 창에서 **⚠**로 표시되며, 영향을 받는 속성에 마우스를 올리면 어떤 스타일이 그 속성에 영향을 미치는지 표시됩니다. 예를 들어, 스타일 규칙이 태그가 있는 Frame에 AnchorPoint의 값을 0.5, 0.5로 사용하도록 지시하면 해당 객체 속성은 기본값인 0, 0를 표시하지만 실제 AnchorPoint는 규칙의 스타일된 값을 사용합니다.

특정 UI 객체에 대해 기본 또는 스타일된 속성 값이 추가로 수정되면, 그것은 굵게 표시되어 오버라이드된 값을 나타냅니다. 예를 들어 — 기본 AnchorPoint의 값이 0, 0라고 가정할 때 — 해당 속성을 특정 인스턴스에 대해 1, 1로 설정하면 굵게 표시된 오버라이드가 드러납니다:

모든 오버라이드된 속성 값에 대해 속성 창에서 마우스 오른쪽 버튼을 클릭하고 기본값으로 재설정을 선택하여 스타일된 값으로 재설정하거나, 스타일이 적용되지 않은 경우 기본 속성 값으로 재설정할 수 있습니다.

개념

규칙 전파

선택자 정의

수정된 속성