핵심 정리
text
UXML -> 구조
USS -> 스타일
C# -> 로직과 이벤트 연결구조 이해
- UI Toolkit은 Unity의 최신 보류형(retained mode) UI 시스템입니다. 핵심 감각은 웹과 비슷합니다. 구조는 UXML, 스타일은 USS, 동작은 C#으로 나누어 관리합니다.
VisualElement는 모든 UI 요소의 기반이고, 이 요소들이 부모-자식 관계로 묶인 계층이 visual tree입니다. 즉 UI Toolkit에서는 화면을 "오브젝트 배치"보다 "트리 구조"로 보는 감각이 중요합니다.- UXML은 어떤 요소가 어떤 계층으로 놓이는지를 정의하고, USS는 그 요소가 어떻게 보이는지를 정의합니다. C#은 버튼 클릭, 데이터 바인딩, 동적 생성 같은 동작을 연결합니다.
UI Builder는 이 구조를 시각적으로 만들고 편집하는 툴입니다. 하지만 Builder는 편집 도구일 뿐이고, 실제 모델은 여전히 visual tree와 stylesheet에 있습니다.- 그래서 UI Toolkit을 잘 쓰려면 "좌표로 찍는 UI"에서 "트리와 스타일로 조합하는 UI"로 사고를 바꾸는 것이 중요합니다.
체크포인트
| 상황 | 적합한 선택 |
|---|---|
| UI 구조 정의 | UXML 파일로 계층 구조 선언 |
| 색상·폰트·레이아웃 스타일 | USS 파일로 분리 관리 |
| 버튼 클릭·데이터 바인딩 | C# 코드에서 이벤트 연결 |
| 시각적으로 UI 편집 | UI Builder (UXML/USS 편집 도구) |
| 같은 구조를 여러 화면에서 재사용 | UXML 템플릿과 클래스명 규칙부터 정리 |
주의할 점
UI Toolkit을 uGUI처럼 좌표 중심으로 다루거나, 반대로 C#에서 모든 트리를 즉석 생성하기 시작하면 장점이 줄어듭니다. 구조(UXML), 스타일(USS), 로직(C#)을 분리하는 방식으로 접근해야 유지보수성이 살아납니다.
csharp
// ❌ C#에서 위치·스타일을 직접 지정 — 유지보수 어려움
var btn = new Button();
btn.style.left = 100;
btn.style.top = 50;
btn.style.backgroundColor = Color.red;
// ✅ UXML로 구조, USS로 스타일 분리
// main.uxml
// <Button name="submit-btn" class="primary-btn" text="Submit"/>
// main.uss
// .primary-btn { background-color: red; width: 120px; height: 40px; }
// C# — 로직만 연결
var root = GetComponent<UIDocument>().rootVisualElement;
root.Q<Button>("submit-btn").clicked += OnSubmitClicked;
// ❌ 같은 구조를 화면마다 C#으로 복붙 생성
// → 스타일 중복, 쿼리 경로 중복, 수정 지점 분산참고 링크
3 sources