Unity 사용자 매뉴얼: 사용자 인터페이스(UI) 생성
이 문서는 Unity의 사용자 인터페이스(UI) 생성에 대해 설명합니다. 여기서는 UI 툴킷, USS(스타일 시트), 그리고 커스텀 프로퍼티를 다룹니다.
UI 툴킷
UI 툴킷은 Unity에서 UI를 구축하는 데 필요한 다양한 도구와 기능을 제공합니다. 이를 통해 개발자는 효과적이고 직관적인 사용자 인터페이스를 손쉽게 만들 수 있습니다.
USS (Unity Style Sheets)
USS는 UI 스타일을 정의하는 데 사용됩니다. 사용자 인터페이스의 색상, 배경, 텍스트 스타일 등을 설정할 수 있습니다. 여기서는 USS에서 사용할 수 있는 몇 가지 주요 개념을 소개합니다.
빌트인 변수
빌트인 변수는 에디터와 런타임 UI의 기본값을 지정합니다. 이를 통해 커스텀 인터페이스를 Unity 스타일과 일치시킬 수 있습니다. 각 빌트인 변수의 이름은 변수의 용도와 사용 장소를 나타냅니다.
예를 들어, --unity-colors-button-text-hover라는 변수 이름은 다음과 같은 정보를 제공합니다:
- 그룹: colors (색상 데이터)
- 역할/컨트롤: button (버튼에 적용)
- 하위 요소: text (텍스트에 적용)
- 유사 상태: hover (마우스 포인터가 요소 위에 있을 때 적용)
이 변수는 버튼 위에 마우스를 올리면 텍스트 색상을 변경하는 데 사용됩니다.
변수 구조
변수 이름은 하이픈으로 구분된 여러 부분으로 구성됩니다. 각 부분은 다음과 같은 정보를 포함합니다:
| 구성 요소 | 설명 |
|---|---|
| 그룹 | 변수가 나타내는 데이터의 종류 |
| 역할/컨트롤 | 영향을 미치는 요소의 개념적 그룹 |
| 하위 요소 | 변수가 영향을 미치는 요소 |
| 유사 상태 | Unity가 변수를 사용하는 상태 |
그룹 예시
그룹에는 다양한 용도가 있습니다:
| 그룹 | 용도 |
|---|---|
| colors | 배경 색상, 테두리 색상 등 |
| metrics | 크기와 모양 제어 (예: margin, padding) |
| icons | 일반 Unity 아이콘 이미지 |
역할과 컨트롤
역할은 유사한 목적의 요소들을 그룹화하고, 컨트롤은 동일한 유형의 요소 그룹을 나타냅니다.
| 역할 | 설명 |
|---|---|
| default | 텍스트 컬러, 배경 등 기본 스타일 설정 |
| error | 사용자에게 오류를 전달하는 요소 |
| highlight | 강조 표시된 UI 부분 |
| 컨트롤 | 설명 |
|---|---|
| button | UI의 버튼 |
| dropdown | 드롭다운 리스트 |
| toolbar | 에디터 툴바 |
하위 요소
하위 요소는 변수가 영향을 미치는 요소의 일부입니다. 변수 이름에는 여러 하위 요소가 있습니다.
| 그룹 | 하위 요소 | 설명 |
|---|---|---|
| colors | background | 요소의 배경 색상 |
| metrics | margin | 요소의 여백 값 |
유사 상태
유사 상태는 UI 상태에 따라 변수를 사용하는 조건을 정의합니다.
| 유사 상태 | 설명 |
|---|---|
| (없음) | 일반 상태 |
| checked | 체크박스 선택됨 |
| hover | 마우스 포인터 위에 있음 |
활용 예제
이러한 변수를 활용하여 커스텀 UI를 생성하는 방법에 대해 간단한 예시를 소개합니다.
버튼 색상 설정
.button {
background-color: var(--unity-colors-button-background);
color: var(--unity-colors-button-text-default);
}
.button:hover {
color: var(--unity-colors-button-text-hover);
}
리스트 뷰 스타일링
.list-item {
background-color: var(--unity-colors-list-item-background);
}
.list-item:focus {
border-color: var(--unity-colors-list-item-border-focused);
}
이 예시들은 사용자가 UI 요소와 상호 작용할 때 어떤 방식으로 스타일이 변경되는지를 보여줍니다.
결론
Unity의 UI 생성 및 USS의 활용 방법에 대해 알아보았습니다. 다양한 변수를 적절히 사용하면 보다 직관적이고 아름다운 사용자 인터페이스를 만들 수 있습니다. Unity에서 제공하는 빌트인 변수를 이해하고 효율적으로 활용하여 앞선 예제들을 참조하길 바랍니다.