UI Toolkit: 테마 및 USS 변수

비디오: UI Toolkit: 테마 및 USS 변수
채널: Unity
길이: 8분 48초
출처: 자막 (수동, en-US)

전체 UI의 시각적 스타일을 바꾸는 데 단 한 번의 클릭만 필요하다면 어떨까요?
이 버튼을 누르면 라이트 모드 (light mode)에서 다크 모드 (dark mode)로 전환됩니다.
오늘은 스타일 시트 (style sheets)와 USS 변수 (USS variables)를 사용하여 테마 (themes)를 만들어 보겠습니다.
테마란 UI의 일관성을 유지해 주는 관련 스타일들의 집합입니다.
개별 요소마다 색상을 선택하는 대신, 이러한 결정 사항들을 하나로 그룹화하는 것입니다.
그렇게 하면 모든 것이 일관성을 유지하게 됩니다.
그다음 테마를 교체하여 UI의 외형을 변경합니다.
이 영상에서는 USS 변수를 사용하여 UI Toolkit에서 깔끔하고 확장 가능한 테마 시스템을 구축해 보겠습니다.
이 시스템을 구축하기 위해 몇 가지 부분을 사용할 것이므로, 하나씩 나누어 살펴보겠습니다.

첫째, 공유 스타일 시트 (shared stylesheet)가 인터페이스의 기본 스타일링을 정의합니다.
레이아웃 (layout), 간격 (spacing), 텍스트 또는 타이포그래피 (type)에 대한 기본 스타일 같은 것들입니다.
하지만 색상을 하드코딩 (hardcoding)하는 대신, USS 변수를 사용합니다.
USS 변수는 이름이 지정된 값 (named values)입니다.
보통 두 개의 하이픈으로 시작합니다. 예를 들어, --app-bg와 같습니다.
변수를 한 번 정의한 다음 var 함수를 사용하여 참조합니다.
따라서 색상을 직접 설정하는 대신 변수를 참조합니다.
그 변수는 단지 레이블 (label)일 뿐입니다.
그 자체로 색상을 정의하지는 않습니다.
테마가 값을 할당할 때 비로소 의미를 갖게 됩니다.

둘째, 각 테마는 자신만의 스타일 시트를 가집니다.
이 예시에서는 theme-light.uss와 theme-dark.uss를 생성하며, 각각 동일한 변수 세트에 값을 할당합니다.
라이트 모드는 한 세트의 값을 정의하고, 다크 모드는 다른 값을 정의합니다.
이 값들은 general.uss 스타일 시트의 기본값을 덮어씁니다 (override).

셋째, 작은 C# 스크립트가 런타임 (runtime)에 활성화된 테마 스타일 시트를 교체합니다.
이는 UI를 다시 구축하거나 레이아웃을 변경하지 않습니다.
대신, 현재 부착된 테마 스타일 시트가 무엇인지 교체합니다.
해당 스타일 시트는 새로운 USS 변수 값 세트를 제공합니다.
그러면 UI Toolkit은 해당 변수들을 다시 해석 (resolve)하며, 변수에 의존하는 모든 스타일이 자동으로 업데이트됩니다.

UXML을 살펴보겠습니다.

이것은 우리 레이아웃의 구조이며,
테마 스타일을 적용하더라도
변경되지 않습니다.
루트 컨테이너, 토글 버튼이 있는
헤더,
그리고 메인 콘텐츠 영역이 있습니다.
파일을 열어보면,
이와 같은 모습을 볼 수 있습니다.
다시 말씀드리지만, 여기에는 루트,
헤더, 그리고 메인 콘텐츠가 있습니다.
이 섹션들을 펼쳐보면, 우리가
인라인 스타일 (inline styles)을
사용하지 않도록 주의했다는 점을
알 수 있습니다.
또한 여기에는 테마에 특화된
내용도 전혀 없습니다.
이 파일은 구조만을 정의합니다.
우리는 모든 스타일링이
스타일시트 (stylesheets)로부터
나오기를 원합니다.
기본 스타일 세트를 정의하기 위해,
general.uss라는 이름의
일반 스타일시트를 만들 것입니다.
여기에는 UI의 모든 주요 요소를
스타일링하는 USS
클래스 선택자 (class selectors)가 포함됩니다.
루트 의사 클래스 (root pseudo-class)는
USS 변수 (variables)를 사용하여
RGB 색상 팔레트를 정의합니다.
다음은 샘플 USS
클래스 선택자입니다.
고정된 값 대신,
많은 속성들이
var 키워드를 사용하여
변수를 참조합니다.
루트에서 USS
변수를 정의한 다음,
var 함수를 사용하여
스타일에 적용합니다.
UI Builder에서도 USS
변수를 설정할 수 있습니다.
인스펙터 (inspector)에서
루트 의사 클래스를 선택하세요.
변수 (variable) 섹션을 엽니다.
플러스 버튼을 클릭하여
새 변수를 추가합니다.
유형을 선택합니다.
이름을 지정하고
값을 할당합니다.
이 경우에는 색상을 선택하겠습니다.
이를 사용하려면 스타일을 선택하세요.
배경색 (background color)과 같은
속성으로 이동하여
옵션 메뉴에서
'Set Variable'을 선택합니다.
그런 다음 드롭다운에서
변수를 선택합니다.
이제 해당 속성은
그 변수를 참조하며,
값이 변경될 때
자동으로 업데이트됩니다.
우리는 이러한 USS 변수들을
사용하여 테마 스타일시트를 만들 것입니다.
각 스타일시트는
단순히 변수 값들의 목록입니다.
여기 theme dark와
theme light 스타일시트가 있습니다.
이들은 공유된 general 스타일시트와
동일한 변수 이름을 사용하지만,
UI Builder에서
다른 값을 할당합니다.
루트 의사 클래스를 선택하여
해당 값들을 미리 볼 수 있습니다.
우리는 이 스타일시트들을
UXML에 연결합니다.

이 데모에서는 색상만 사용하고 있지만,
USS 변수 (USS variables)
는 폰트 (fonts) 및 텍스처 (textures)를 포함한
다른 유형들도 나타낼 수 있으며,
테마를 구축할 때
이러한 다른 에셋 (assets)들도
동일한 방식으로 사용할 수 있습니다.
런타임 (runtime) 시에는
컨트롤러 스크립트 (controller script)를 사용하여
스타일시트 (stylesheets)를 교체합니다.
테마 버튼에 콜백 (callback)을 추가하여
클릭 시
현재 모드를 확인하고
테마를 전환합니다.
apply theme 메서드는
현재 테마를 제거하고,
새로운 테마를 추가한 다음,
버튼 라벨 (label)을 업데이트합니다.
테마를 전환할 때
공유된 일반 스타일시트 (general stylesheet)는
영향을 받지 않으며,
UXML에 그대로 연결된 상태를 유지합니다.
스타일이 서로를 오버라이드 (override)함에 따라
루트 (root)에 있는
USS 변수 (USS variables)들이
새로운 값을 갖게 됩니다.
모든 것이 변수 (variables)를 기반으로 구축되었기 때문에
UI Toolkit은 스타일을 재계산하고
UI를 자동으로
업데이트합니다.
새로운 모습이 즉시 적용됩니다.
테마를 별도의 스타일시트에 유지하면
스타일 세트 간의
명확한 경계를 만들 수 있습니다.
다른 테마가 필요한 경우,
새로운 스타일시트를 추가하고
컨트롤러를 업데이트하기만 하면 됩니다.
UI 하단에는
theme token preview라고 불리는
커스텀 엘리먼트 (custom element)가 있습니다.
단순히 작은 텍스트 블록과
컬러 칩 (color chip)일 뿐이지만,
커스텀 엘리먼트가
테마 변경에 어떻게 반응할 수 있는지
보여주는 방법을 제공합니다.
여기서 차이점은 이것이
커스텀 비주얼 엘리먼트 (custom visual element)이므로
C# 스크립트에서 정의된다는 점입니다.
보통 사용되는 변수들은
스타일시트 내부에서 사용되지만,
C#에서 이를 읽고 싶다면
커스텀 스타일 API (custom style API)를 사용해야 합니다.
이 데모를 위해,
이 엘리먼트만을 위한 몇 가지 추가 USS
변수 (USS variables)를 정의했습니다.
--token-demo-bg, --token-demo-accent, 그리고 --token-
demo-text입니다.
이것들은 일반적인 USS 변수입니다.
우리는 스크립트 상단에서
USS 대신
코드에서 이들에 접근하고 있습니다.
각 변수에 대해
제네릭 타입 Color인
CustomStyleProperty를 선언합니다.
각 프로퍼티 (property)는
두 개의 하이픈 접두사를 포함하여
정확한 USS 변수 이름과 일치합니다.
다음으로,
CustomStyleResolvedEvent를
등록합니다.
이를 통해 스타일이 준비되었을 때를
알 수 있으므로,
USS 변수를 읽을 시점임을 알 수 있습니다.

이것은 첫 로드 시, 그리고 테마가 변경될 때마다 실행됩니다.
콜백(callback) 내부에서
evt.customStyle을 사용하여
각 값을 읽습니다.
배경(background) 변수를 사용할 수 있는지
TryGetValue로 확인합니다.
확인되면 이를 요소의 배경에 적용합니다.
텍스트 색상은 레이블(label)에 적용하고,
강조(accent) 색상은 컬러 칩(color chip)에 적용합니다.
또한 디버그 레이블이 런타임(runtime)에
해당 값들을 표시할 수 있도록
이 값들을 RGB 문자열로 변환합니다.
따라서 USS 스타일 시트(style sheet)가
여전히 테마를 정의합니다.
C# 스크립트는 단지 그 값들을 읽어서
UI에 적용할 뿐입니다.
UI Toolkit에는
테마 스타일 시트(Theme Style Sheets, TSS)도
포함되어 있습니다.
이는 테마를 적용하기 위한
패널 수준(panel-level)의 시스템입니다.
이번 데모에서는 사용하지 않았지만,
동일한 원리를 따릅니다.
테마 스타일 시트는
USS 파일들을 하나의 에셋(asset)으로 묶습니다.
여기에는 앞서 사용했던 것과 동일한
스타일 시트로 구축된
라이트(light) 및 다크(dark) 테마가 있습니다.
모드를 전환하려면
패널 설정(panel settings)에서
TSS 에셋을 교체하면 되며,
그러면 해당 패널을 사용하는
모든 UI가 업데이트됩니다.
중앙 집중식의 일관된 테마 설정이 필요한
대규모 UI 시스템이나 에디터 도구(editor tools)에는
테마 스타일 시트를 사용하세요.
Dragon Crashers 데모에는
설정 메뉴에서 TSS를 사용하는
테마 매니저(theme manager)가 포함되어 있습니다.
UI의 일부에만 테마를 적용해야 하는 경우라면
드롭다운(dropdown)을 통해
시즌별 테마를 전환할 수 있습니다.
TSS 없이도
스타일 시트를 직접 교체할 수 있습니다.
프로젝트에 적합한
방식을 사용하기만 하면 되며,
이것이 UI Toolkit에서 확장 가능한
테마 시스템을 구축하는 방법입니다.
UI Toolkit과 USS 변수에 대해
더 자세히 알고 싶다면,
설명란의 리소스를 확인해 보세요.
공식 문서에서도
더 자세한 내용을 찾을 수 있습니다.
시청해 주셔서 감사합니다.