---
title: "화면 하나가 파일 두 개와 오브젝트 하나가 된다"
description: "UI Toolkit 으로 화면을 만들면 무엇이 어디에 생기는지부터 봅니다. uxml 과 uss 가 각각 무엇을 적는 파일인지, VisualElement 가 uGUI 의 무엇 자리인지, UI Document 와 Panel Settings 가 왜 따로 있는지를 정리했습니다."
author: "유니얼"
pubDate: 2026-09-18
category: "game-dev/unity/ui"
tags: ["Unity", "UI", "UI Toolkit"]
canonical: https://blog.unialgames.com/posts/uitk-uxml-uss-basics/
---
[UI Toolkit 은 화면에 오브젝트를 놓지 않는다](/posts/unity-ui-toolkit-vs-ugui/)에서 두 체계가 다르다는 것까지 봤습니다. 이제 실제로 만들어 봅니다.
시작은 **무엇이 어디에 생기는지**입니다. uGUI 에 익숙하면 이 부분이 제일 낯섭니다. 버튼을 만들었는데 하이어라키에 아무것도 안 생기거든요.
## 화면 하나가 파일 두 개와 오브젝트 하나가 됩니다
파일 셋과 오브젝트 하나. 이게 전부입니다.
- **`.uxml`**: 무엇이 어떤 순서로 있는지
- **`.uss`**: 그것들이 어떻게 보일지
- **Panel Settings**: 해상도를 어떻게 맞출지, 여러 화면 중 무엇이 위인지
- **UI Document**: 씬 오브젝트에 붙는 컴포넌트. 위의 것들을 물고 화면에 띄웁니다
앞의 셋은 **프로젝트 창의 에셋**이고 마지막 하나만 씬에 있습니다. 그래서 하이어라키를 열면 오브젝트 하나뿐입니다.
Panel Settings 가 왜 따로 떨어져 있는지는 이유가 있습니다. **여러 화면이 같은 것을 씁니다.** 해상도 규칙을 화면마다 다시 정하지 않으려고 한곳에 모아 둔 것입니다. 그 안에 무엇이 있는지는 따로 한 편에서 봅니다.
## UXML 은 무엇이 어떤 순서로 있는지 적습니다
XML 입니다. 확장자만 다릅니다.
```xml
```
읽을 때 필요한 것은 셋입니다.
- **루트는 ``.** 문서가 "includes attributes for the namespace prefix definitions and the location of schema definition files" 라고 적어 뒀습니다. 맨 위의 `xmlns:` 들이 그 접두사 정의입니다. `xmlns:engine="UnityEngine.UIElements"` 가 `engine` 이라는 접두사를 그 네임스페이스로 묶습니다
- **태그 이름이 곧 클래스 이름입니다.** `Button`, `Label`, `Toggle`, `VisualElement` 는 실제 C# 타입 이름입니다. 없는 태그를 적으면 그런 타입이 없다고 합니다
- **`name` 과 `class` 는 쓰임이 다릅니다.** `name` 은 나중에 코드에서 그 하나를 찾을 때, `class` 는 스타일을 걸 때 씁니다
구조를 글로 적으면 그 순서대로 쌓입니다.
들여쓴 만큼 자식이 되고, 위에 적은 것이 위에 놓입니다. uGUI 의 하이어라키에서 순서가 그리는 순서였던 것과 비슷하지만, 여기서는 **쌓이는 방향**이 세로라서 그렇습니다. 그 얘기는 레이아웃 편에서 합니다.
## USS 는 어떻게 보일지 적습니다
CSS 처럼 생겼습니다. 앞 UXML 에 붙일 스타일이라면 이렇습니다.
```css
.popup {
background-color: rgb(28, 28, 34);
padding: 16px;
}
.row {
flex-direction: row;
justify-content: flex-end;
}
#ok {
background-color: rgb(80, 120, 240);
}
```
- **`.popup`** 처럼 점으로 시작하면 클래스 선택자입니다. UXML 의 `class="popup"` 에 걸립니다
- **`#ok`** 처럼 샵으로 시작하면 이름 선택자입니다. `name="ok"` 에 걸립니다
- 점도 샵도 없이 **`Button`** 이라고만 적으면 타입 선택자입니다. 그 타입 전부에 걸립니다
생김새가 CSS 라서 그대로 될 것 같지만 아닙니다. 문서가 못을 박아 뒀습니다.
> USS supports a set of simple selectors that are analogous, but not identical, to simple selectors in CSS.
무엇이 되고 무엇이 안 되는지는 선택자 편에서 따로 봅니다. 여기서는 **파일이 나뉘어 있다는 것**만 알면 됩니다. 구조를 고치는 것과 모양을 고치는 것이 서로 다른 파일을 건드리는 일이 됩니다.
## VisualElement 는 uGUI 의 오브젝트 자리입니다
uxml 에 적은 태그 하나가 실행 중에는 `VisualElement` 하나가 됩니다. uGUI 로 치면 오브젝트 하나 자리입니다.
**다만 오브젝트가 아닙니다.** 게임오브젝트도 아니고 컴포넌트도 아니고, 그냥 C# 객체입니다. 그래서 하이어라키에 안 보이고, `GetComponent` 로 못 찾고, 프리팹으로 못 만듭니다.
찾는 방법이 따로 있습니다.
```csharp
var root = GetComponent().rootVisualElement;
var ok = root.Q