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