Version: 2023.2
언어: 한국어
USS 베스트 프랙티스
UI 툴킷 디버거

TSS(테마 스타일시트)

TSS(테마 스타일시트) 파일은 일반 USS 파일입니다.UI 툴킷은 TSS를 별개의 에셋 타입으로 취급하여 관리 목적으로 사용합니다.

일반적인 USS 구문과 포맷은 TSS 파일에 적용되지만, 일반적으로 테마 파일에는 @import 규칙을 통해 다른 USS 파일에 대한 레퍼런스가 포함되어 있습니다.

참고:USS 파일은 또한 @import 규칙을 지원합니다.

TSS 만들기

테마별로 서로 다른 TSS 파일을 만들고 런타임 시 서로 전환할 수 있습니다. 일반적으로 스타일에는 USS를 사용해야 합니다. 다양한 플랫폼이나 기기에 맞게 디자인(look and feel)을 커스터마이즈하거나, 게임이나 애플리케이션이 여러 언어를 지원하는 경우 언어별로 다른 폰트를 사용할 때 TSS를 고려합니다.

참고: 프로젝트의 게임 오브젝트에 첫 번째 UIDocument를 추가하면 Assets/UI Toolkit/UnityThemes/UnityDefaultTheme.tss에 기본 런타임 테마 에셋이 생성됩니다. TSS를 처음부터 생성할 수도 있지만, 모든 기본 UI 컨트롤이 작동하도록 하려면 기본 런타임 테마를 임포트한 다음 새 스타일을 덮어쓰거나 추가하여 커스텀 테마를 만들어야 합니다.

새 TSS를 만들려면:

  1. 커스텀 스타일이 있는 USS 파일을 하나 이상 생성합니다.

  2. 다음 중 하나를 수행합니다.

    • Assets > Create > UI Toolkit > TSS Theme File을 선택하여 빈 테마 파일을 생성하고 기본 테마를 임포트합니다.
    • Assets > Create > UI Toolkit > Default Runtime Theme File을 선택하여 기본 런타임 테마 파일의 사본을 생성합니다. 원하는 경우 파일의 이름을 변경할 수 있습니다.
  3. 스타일 USS 파일을 테마에 임포트합니다.

TSS 미리보기

커스텀 테마는 UI 빌더의 Viewport 테마 목록에도 표시됩니다. 테마를 미리 보려면 Viewport에서 선택합니다.

TSS 적용

USS를 사용하는 것과 동일한 방법으로 C# 또는 UXML에서 TSS를 참조할 수 있습니다.

패널 설정 에셋의 기본 테마로 TSS를 설정할 수도 있습니다.패널 설정이 두 개 이상인 경우 각 패널 설정은 서로 다른 TSS 파일을 사용할 수 있습니다.

참고: 패널 설정 에셋에 TSS를 설정해도 TSS가 전체 프로젝트의 글로벌 스타일이 되는 것은 아닙니다. 여전히 UXML 또는 C#에서 TSS를 참조해야 합니다.

테마 임포트

TSS 에셋의 인스펙터(Inspector) 창 또는 @import 규칙을 사용하여 테마를 임포트할 수 있습니다.

참고: 현재 TSS와 임포트한 스타일 시트 모두에서 USS 변수 또는 스타일을 정의하는 경우, 현재 TSS는 임포트한 스타일 시트를 오버라이드합니다.

인스펙터 창으로 테마 임포트

  1. 해당 TSS 에셋을 선택합니다.
  2. Inspector > Inherited Themes로 이동합니다.
  3. +를 선택합니다.그러면 새로운 레퍼런스 필드가 추가됩니다.
  4. 참조 필드에서 목록 아이콘을 선택합니다. 드롭다운 목록에 프로젝트의 모든 스타일 시트가 표시됩니다.
  5. 사용할 스타일시트를 선택합니다.
  6. Apply를 선택합니다.

@import 규칙으로 기본 테마 임포트

기본 Unity 런타임 테마를 임포트하려면 다음 구문을 사용해야 합니다.

@import url("unity-theme://default");

참고: 이 구문의 URL은 특수한 사례이며 엔진 내 빌트인 기본 테마를 참조합니다. 다른 테마에는 이 구문을 사용할 수 없습니다.

@import 규칙으로 다른 테마 임포트

기본 테마가 아닌 테마나 USS 파일을 임포트하려면 다음 구문을 사용합니다.

@import url("<path-to-file>/<file-name-with-extension>");

상대 경로나 절대 경로를 사용할 수 있습니다.

  • 절대 경로는 프로젝트의 Assets 폴더에서 시작하며 / 또는 project://database/로 시작합니다. 예를 들면 /Assets/myFolder/myFile.uss 또는 project://database/Assets/myFolder/myFile.uss입니다.
  • 상대 경로는 현재 파일에서 시작하고 /를 제외합니다. 예를 들면 ../myFolder/myFile.uss입니다.

참고: 패키지에서 파일을 참조하려면 Packages 폴더에서 시작하는 패키지 파일의 절대 경로를 사용합니다. 예를 들어 /Packages/com.unity.package.name/file-name.uss 또는 project://database/Packages/com.unity.package.name/file-name.uss와 같이 패키지 이름에 package name이 아닌 com.unity.package.name 형식을 사용해야 합니다.

추가 리소스

USS 베스트 프랙티스
UI 툴킷 디버거