내장된 스타일 편집기는 토큰, 디자인 시트, 스타일 규칙, 테마의 조합을 통해 Roblox 게임을 위한 UI 스타일을 생성, 관리 및 적용할 수 있는 포괄적인 도구입니다.
UI 탭을 통해 스타일 편집기에 접근하세요.
열리면 디자인 생성 버튼을 클릭하여 기본 스타일 세트를 생성하세요.
스타일 편집기를 통해 디자인 스타일 세트를 생성하면 ReplicatedStorage 내의 Design 폴더에 BaseStyleSheet가 생성됩니다. 이 기본 시트는 [163, 162, 165]의 Color3 기본값과 스튜디오의 삽입 워크플로우에서 오는 기본값을 동기화합니다. 기본 스타일 시트를 삭제하거나 수정하지 않는 것이 강력히 권장됩니다. 대신, UI 목표에 맞게 디자인 시트를 중심으로 토큰과 스타일 규칙을 구축하세요.
또한, Design 폴더에 기본 스타일 시트를 참조하는 StyleSheet 시트가 생성됩니다. 이 StyleDerive를 제거하면 GuiObjects의 스타일이 없는 값이 예기치 않은 값이 될 수 있습니다. 예를 들어 기본 Size는 0, 0, 0, 0이 될 수 있습니다.
스타일 토큰
스타일 토큰은 StyleSheet의 속성을 통해 정의되며, 스타일과 구성 요소 전반에 걸쳐 사용할 수 있는 UI 속성 변수를 나타냅니다. 예를 들어, Frame.BackgroundColor3, TextLabel.TextColor3, UIStroke.Color에 대한 공통 색상이 있을 수 있습니다. 토큰은 CSS 변수와 유사합니다.
UI 스타일링에 필수는 아니지만, 토큰은 확장 가능한 UI 디자인과 시간이 지남에 따라 스타일 업데이트를 위해 강력히 권장됩니다. 보편적인 스타일링의 다른 측면과 어떻게 연결되는지 이해하기 위해 다음 토큰을 생성하는 것으로 시작하세요.
새 토큰 스타일 시트를 생성합니다:
- 스타일 편집기의 왼쪽 열에서 토큰 위에 마우스를 올리고 **⊕**를 클릭한 후 새 토큰 스타일시트를 선택합니다.
- 새 시트의 이름을 TokenSheet로 변경합니다.
디자인 시트
디자인 스타일 시트는 스타일 규칙을 집계하고 UI 인스턴스에 스타일 속성을 적용하기 위해 DataModel 트리에 연결될 수 있습니다. 주어진 트리에 적용할 수 있는 StyleSheet는 하나만 존재할 수 있지만, 테마를 사용하여 UI 전반에 걸쳐 관련 스타일을 교체할 수 있습니다. 이 개념은 이 가이드의 후반부에서 다룰 것입니다.
디자인 생성 버튼을 통해 미리 채워진 디자인 시트인 StyleSheet가 생성됩니다. 이 시트는 Frame 및 TextLabel과 같은 일반 UI 객체에 대한 클래스 규칙을 포함하고 있습니다. 또한 기본 스타일 시트에서 토큰과 스타일을 파생(상속)하는 두 개의 StyleDerive 인스턴스를 포함하고 있습니다.
디자인 시트를 생성한 후, 스타일 편집기와 함께 사용할 테스트 화면 컨테이너를 설정하거나 원한다면 게임 내 컨테이너를 설정할 수 있습니다.
탐색기에서 StarterGui 위에 마우스를 올리고 ScreenGui를 삽입합니다.
스타일 규칙
스타일 규칙은 규칙의 Selector 정의와 일치하는 모든 인스턴스에 적용되어 클래스 이름, 인스턴스 태그 및 계층 관계와 같은 특성을 일치시킵니다. 높은 수준에서 인스턴스 일치 및 수정은 규칙의 Selector 정의를 통해 작동합니다:
- 인스턴스 이름 선택은 UI 객체의 Instance.Name 값에 따라 결정됩니다.
클래스 규칙
스타일 클래스 선택자는 주어진 UI 클래스의 모든 인스턴스를 대상으로 합니다. 다음 규칙 설정은 모든 Frames에 균일한 배경색과 크기를 스타일링합니다.
스타일 편집기의 왼쪽 열에서 UI Elements 분기에서 Frame을 선택합니다.
두 개의 Frame 속성에 두 개의 이전에 생성된 스타일 토큰을 연결합니다:
속성 스타일 토큰 BackgroundColor3 $Magenta Size $SquareL - 메인 패널에서 **속성 추가…**를 클릭하고 필요한 속성을 선택합니다. 드롭다운 메뉴에서 속성을 더 빠르게 찾기 위해 키워드를 입력할 수 있습니다.
- 정적 값을 입력하는 대신 ⋮ 버튼을 클릭하고 토큰 링크를 선택합니다.
- 값 필드에 나타나는 $를 클릭하고 적절한 연결된 토큰을 선택합니다.
태그 규칙
인스턴스 태그 선택자는 CollectionService를 통해 태그가 지정된 특정 UI 객체를 대상으로 합니다. 다음 규칙 설정은 ButtonPrimary로 태그가 지정된 TextButton에 사용자 정의 배경색, 글꼴 및 텍스트 크기를 스타일링합니다.
스타일 편집기의 왼쪽 열에서 StyleSheet 시트 위에 마우스를 올리고 ⋮ 버튼을 클릭한 후 새로 만들기 ⟩ 태그로 이동합니다.
새 태그 규칙의 이름을 .ButtonPrimary로 변경합니다(선행 .에 유의).
세 개의 이전에 생성된 스타일 토큰을 세 개의 TextButton 속성에 연결합니다:
속성 스타일 토큰 BackgroundColor3 $Gold FontFace $Oswald TextSize $Text32 - 메인 패널에서 **속성 추가…**를 클릭하고 필요한 속성을 선택합니다. 드롭다운 메뉴에서 속성을 더 빠르게 찾기 위해 키워드를 입력할 수 있습니다.
- 정적 값을 입력하는 대신 ⋮ 버튼을 클릭하고 토큰 링크를 선택합니다.
- 값 필드에 나타나는 $를 클릭하고 적절한 연결된 토큰을 선택합니다.
이전에 생성하고 연결한 ScreenGui에 새 TextButton을 삽입하고 ButtonPrimary로 태그 지정합니다. 편리한 단축키는 다음과 같습니다:
- 새로운 TextButton이 탐색기에서 선택되어 있는지 확인합니다.
- 스타일 편집기의 왼쪽 열에서 .ButtonPrimary 태그 규칙이 선택된 상태에서 메인 패널에서 태그 적용을 클릭합니다. 정의한 스타일이 버튼에 자동으로 적용되어야 합니다.
UI 수정자
인스턴스 수정자 선택자는 UICorner 또는 UIStroke와 같은 유령 UIComponents를 적용하여 객체의 스타일을 추가로 설정합니다. 다음 규칙 설정은 사용자 정의 텍스트 크기와 둥근 모서리를 가진 TextLabel을 스타일링합니다.
스타일 편집기의 왼쪽 열에서 UI Elements 분기에서 TextLabel을 선택합니다.
유사 인스턴스는 다른 요소에 둥근 모서리를 구성하고 적용하는 데 필요합니다. 하나를 생성하려면:
왼쪽 열에서 TextLabel 위에 마우스를 올리고 ⋮ 버튼을 클릭한 후 새로 만들기 ⟩ 유사 인스턴스 ⟩ UICorner로 이동합니다.
새로운 UICorner 유사 인스턴스가 왼쪽 열의 TextLabel 요소 아래에 나타납니다.
왼쪽 열에서 새 UICorner 인스턴스를 선택한 상태에서 이전에 생성된 스타일 토큰을 CornerRadius 속성에 연결합니다:
- 메인 패널에서 **속성 추가…**를 클릭하고 CornerRadius 속성을 선택합니다.
- 정적 값을 입력하는 대신 ⋮ 버튼을 클릭하고 토큰 링크를 선택합니다.
- 값 필드에 나타나는 $를 클릭하고 $Rad20 토큰을 선택합니다.
상태 규칙
GuiObject 상태 선택자는 GuiState 열거형 값 중 하나에 해당하여, 상호작용 상태에 대한 스타일 변경을 자동으로 구성할 수 있습니다. 다음 규칙 설정은 모든 ImageButtons에 대해 -4도 회전하는 호버 상태를 생성합니다.
스타일 편집기의 왼쪽 열에서 UI Elements 분기에서 ImageButton을 선택합니다.
⋮ 버튼을 클릭하고 새로 만들기 ⟩ GuiState ⟩ Hover로 이동합니다.
새로운 Hover 상태 수정자 인스턴스가 왼쪽 열의 ImageButton 요소 아래에 나타납니다.
새로운 Hover 수정자가 선택된 상태에서 메인 패널에서 **속성 추가…**를 클릭하고 Rotation을 선택합니다. 드롭다운 메뉴에서 속성을 더 빠르게 찾기 위해 키워드를 입력할 수 있습니다.
속성의 값 필드에 -4를 입력합니다.
이전에 생성하고 연결한 ScreenGui에 새 ImageButton을 삽입합니다. 뷰포트에서 버튼 위에 마우스를 올리면 4도 반시계 방향으로 회전해야 합니다.
스타일 쿼리
스타일 쿼리는 CSS 컨테이너 및 미디어 쿼리와 유사하게, 컨테이너 크기, 입력 유형 또는 기타 요소에 따라 UI에 조건 논리를 적용할 수 있게 해줍니다. 스타일 편집기는 쿼리 논리(조건)와 결과 스타일을 통합된 세트로 생성하는 간소화된 워크플로를 제공합니다.
내장 쿼리
일부 StyleQuery 조건은 매우 일반적이며, 예를 들어 ViewportDisplaySize에 따라 속성을 변경하는 것입니다. 이를 단순화하기 위해 스타일 편집기에는 StyleQuery의 유사 인스턴스가 필요 없이 조건부 규칙을 생성할 수 있는 내장 쿼리가 포함되어 있습니다. 대신, ViewportDisplaySizeSmall과 같은 미리 정의된 선택기를 가진 쿼리 규칙을 사용하면 됩니다.
다음 단계는 TextLabel에 대해 Small, Medium, Large 뷰포트 크기를 처리하기 위해 내장 쿼리를 생성하는 방법을 보여줍니다.
스타일 편집기의 왼쪽 열에서 TextLabel 위에 마우스를 올리고 ⋮ 버튼을 클릭한 후 새로 만들기 ⟩ StyleQuery ⟩ Builtin ⟩ ViewportDisplaySize로 이동합니다.
이렇게 하면 TextLabel 규칙 아래에 Queries 폴더가 생성되며, 세 개의 쿼리 규칙이 포함됩니다:
- @ViewportDisplaySizeLarge — 뷰포트가 Large일 때 적용되는 속성을 정의합니다.
- @ViewportDisplaySizeMedium — 뷰포트가 Medium일 때 적용되는 속성을 정의합니다.
- @ViewportDisplaySizeSmall — 뷰포트가 Small일 때 적용되는 속성을 정의합니다.
쿼리를 확인하려면 디바이스 에뮬레이터를 사용하여 UI가 세 가지 서로 다른 장치에서 다양한 해상도에 어떻게 반응하는지 테스트합니다:
디바이스 에뮬레이터에서 장치를 변경하여 텍스트가 실시간으로 변경되는 것을 확인합니다.
사용자 정의 쿼리
기존 규칙에 스타일 쿼리를 추가하여 컨테이너에 따라 적응하는 반응형 UI를 생성할 수 있습니다. 다음 설정은 TextLabel이 너비가 400픽셀 이상으로 확장될 때만 자동으로 외관을 변경하도록 구성합니다.
스타일 편집기의 왼쪽 열에서 TextLabel 위에 마우스를 올리고 ⋮ 버튼을 클릭한 후 새로 만들기 ⟩ StyleQuery ⟩ Custom으로 이동합니다.
이 작업은 TextLabel 규칙 아래에 Queries 폴더를 생성하며, 두 개의 연결된 항목이 포함됩니다:
- ::StyleQuery 유사 인스턴스 규칙으로 조건을 정의합니다.
- @StyleQuery 규칙으로 해당 조건이 충족될 때 적용할 속성을 정의합니다.
메인 패널에서 부모 TextLabel 규칙을 선택하고 다음 기본 속성을 정의합니다:
속성 값 BackgroundColor3 $Magenta Text Default Text ::StyleQuery 규칙을 선택하고 **조건 추가…**를 클릭한 후 다음을 구성합니다:
조건 값 MinSize 400, 0 StyleQuery.IsActive를 참조하여 ::StyleQuery 규칙을 통해 사용할 수 있는 다른 조건을 확인하세요.
@StyleQuery 규칙을 선택하고 쿼리가 활성화될 때 적용할 속성을 설정합니다:
속성 값 BackgroundColor3 $Gold Text Large Text
쿼리를 확인하려면 뷰포트에서 TextLabel의 크기를 수동으로 조정할 수 있습니다.
너비를 조정하여 스타일이 실시간으로 변경되는 것을 확인합니다.
TextLabel의 너비가 작을 때, MinSize 조건이 충족되지 않아 레이블은 기본 배경색과 텍스트를 사용합니다.
수동 크기 조정은 반응형 논리를 확인하는 빠른 방법이지만, 더 정밀한 테스트를 위해 스튜디오의 내장 에뮬레이션 도구를 사용할 수도 있습니다:
- 디바이스 에뮬레이터를 사용하여 UI가 특정 화면 해상도 및 ViewportDisplaySize 조건에 어떻게 반응하는지 테스트합니다.
- 컨트롤러 에뮬레이터를 사용하여 게임패드가 감지될 때 스타일을 전환하는 PreferredInput 논리를 확인합니다.
스타일 전환
스타일 전환은 CSS 전환과 유사하게, 설정된 기간 동안 속성 값을 트윈할 수 있게 해줍니다.
기본
같은 매개변수로 많은 UI 속성을 트윈하려면, 특정 속성에 대해 명시적으로 다른 전환이 설정되지 않는 한 모든 속성에 적용되는 기본 전환을 설정할 수 있습니다.
UI Elements 분기에서 TextButton을 선택한 후, 메인 패널에서 다음 값을 가진 세 개의 새 속성을 추가합니다:
속성 값 AutoButtonColor false BackgroundColor3 #335FFF Rotation 0 
부모 TextButton 행 위에 마우스를 올리고 ⋮ 버튼을 클릭한 후 새로 만들기 ⟩ GuiState ⟩ Hover로 이동합니다.
이전에 생성하고 연결한 ScreenGui에 새 TextButton을 삽입합니다. 뷰포트에서 버튼 위에 마우스를 올리면 점차 밝아지고 5도 반시계 방향으로 회전해야 합니다.
토큰 연결
여러 규칙에서 전환 동작을 재사용하려면 TweenInfo 데이터 유형을 나타내는 토큰을 정의할 수 있습니다. 다음 규칙 설정은 모든 TextButtons를 -5도 회전 및 더 밝은 배경색으로 전환하는 호버 상태를 생성합니다.
아직 생성하지 않았다면, 토큰 스타일 시트인 TokenSheet를 생성합니다.
UI Elements 분기에서 TextButton을 선택한 후, 메인 패널에서 다음 값을 가진 세 개의 새 속성을 추가합니다:
속성 값 AutoButtonColor false BackgroundColor3 #335FFF Rotation 0 AutoButtonColor를 제외한 각 새 속성에 대해, 해당 행 위에 마우스를 올리고 ⋮ 버튼을 클릭한 후 삽입 ⟩ 전환을 선택합니다.
각 속성 아래의 새 전환 행 위에 마우스를 올리고 ⋮ 버튼을 클릭한 후 토큰 링크를 선택합니다. 그런 다음 정적 값을 입력하는 대신 값 필드에 나타나는 $를 클릭하고 적절한 전환 토큰을 선택합니다.
속성 전환 전환 토큰 BackgroundColor3 $CubicOut Size $QuadInOut 
부모 TextButton 행 위에 마우스를 올리고 ⋮ 버튼을 클릭한 후 새로 만들기 ⟩ GuiState ⟩ Hover로 이동합니다.
이전에 생성하고 연결한 ScreenGui에 새 TextButton을 삽입합니다. 뷰포트에서 버튼 위에 마우스를 올리면 점차 밝아지고 5도 반시계 방향으로 회전해야 합니다.
스타일 테마
스타일 테마는 색상 토큰과 같이 교체할 수 있는 특정 토큰 세트로 구성됩니다. 예를 들어 "밝은" 및 "어두운" 테마를 정의합니다.
테마 생성
확장성을 위해 테마는 폴더로 구성됩니다. 단일 폴더가 대부분의 목적에 충분할 수 있지만, 원한다면 "색상" 또는 "글꼴"과 같은 폴더로 테마를 구성할 수 있습니다.
새 테마 폴더를 생성합니다:
- 스타일 편집기의 왼쪽 열에서 테마 위에 마우스를 올리고 **⊕**를 클릭한 후 새 테마를 선택합니다.
- 새 폴더 항목의 이름을 일반으로 변경합니다.
새 테마 스타일 시트를 생성합니다:
- 새 일반 폴더 위에 마우스를 올리고 ⋮ 버튼을 클릭한 후 새 테마 스타일시트를 선택합니다.
- 이름을 ThemeA로 변경합니다.
테마 토큰
테마가 구성되면, 해당 토큰을 BackgroundColor3와 같은 다양한 UI 객체 속성에 연결할 수 있습니다. 테마 시트는 올바르게 작동하기 위해 공통 토큰 세트를 사용해야 합니다.
스타일 편집기의 왼쪽 열에서 ThemeA가 선택된 상태에서:
세 개의 이전에 생성된 스타일 토큰을 세 개의 새로운 테마 토큰에 연결합니다:
테마 토큰 스타일 토큰 BackColor $Gold ButtonFont $Oswald ButtonTextSize $Text32 - 메인 패널에서 **토큰 추가…**를 클릭하고 테마 토큰의 이름을 입력합니다.
- 값 필드에 나타나는 $를 클릭하고 연결된 스타일 토큰을 선택합니다.
스타일 편집기의 왼쪽 열에서 TextButton을 UI Elements 분기에서 선택합니다.
테마의 토큰을 세 개의 새로운 TextButton 속성에 연결합니다:
속성 테마 토큰 BackgroundColor3 $BackColor FontFace $ButtonFont TextSize $ButtonTextSize - 메인 패널에서 **속성 추가…**를 클릭하고 필요한 속성을 선택합니다.
- 정적 값을 입력하는 대신 ⋮ 버튼을 클릭하고 토큰 링크를 선택합니다.
- 값 필드에 나타나는 $를 클릭하고 적절한 테마 토큰을 선택합니다.
테마의 토큰을 연결할 때, 테마에서 오는 토큰인지 확인하기 위해 호버 오버에서 $[Token] in ThemeA를 찾아보세요. 이는 테마가 이미 전역 토큰을 파생하고 있음을 기억하세요.
테마 복제
테마가 일반적으로 설정되면, 이를 복제하고 다양한 토큰을 변경하여 고유한 테마 스타일을 정의할 수 있습니다.
스타일 편집기의 왼쪽 열에서 ThemeA 테마 위에 마우스를 올리고 ⋮ 버튼을 클릭한 후 복제를 선택합니다.
복제된 테마의 이름을 ThemeB로 변경합니다.
테마의 두 개의 토큰을 두 개의 다른 스타일 토큰에 연결합니다:
테마 토큰 스타일 토큰 BackColor $Magenta ButtonTextSize $Text24 - 속성의 값 필드 오른쪽에 있는 ⋮ 버튼을 클릭하고 토큰 연결 해제를 선택합니다.
- **⋮**를 다시 클릭하고 토큰 링크를 선택합니다.
- 값 필드에서 $를 클릭하고 새로 연결된 스타일 토큰을 선택합니다.
테마 전환
여러 테마를 보유하게 되면, 테마 폴더를 통해 또는 SetDerives()에서 설명한 대로 스크립트를 통해 테마를 전환할 수 있습니다.
스타일 편집기의 왼쪽 열에서 테마 분기에서 일반 폴더를 선택합니다.
메인 패널에서 라디오 버튼을 사용하여 테마를 전환합니다.
