Unity UI 툴킷 가이드
이 문서는 Unity의 사용자 인터페이스(UI) 생성 및 스타일링에 대한 내용을 담고 있습니다. UI 툴킷은 웹 레이아웃 모델인 Flexbox를 기반으로 한 강력한 레이아웃 시스템을 제공합니다. 이 가이드를 통해 UI 구성 요소의 포지션 및 크기를 설정하는 방법을 알아보겠습니다.
UI 툴킷 소개
레이아웃 시스템
UI 툴킷에서는 스타일 프로퍼티의 레이아웃 파라미터를 바탕으로 요소의 포지션 및 크기를 자동으로 계산합니다. 레이아웃 시스템은 부모 요소의 영향을 받으며, 자식 요소는 부모의 크기에만 영향을 줄 수 있습니다.
위치 지정
UI 툴킷에는 두 가지 포지션 유형이 있습니다:
| 종류 | 설명 |
|---|---|
| 상대 | 요소의 계산된 포지션을 기준으로 합니다. 레이아웃 시스템은 부모 요소를 고려하여 자식 요소의 포지션을 계산합니다. |
| 절대 | 부모 요소를 기준으로 합니다. 형제 요소의 포지션에 영향을 미치지 않으며, 직접 포지션을 설정할 수 있습니다. |
코드 예제
다음 코드는 시각적 요소의 포지션 및 좌표 공간을 설정하는 방법을 보여줍니다.
var newElement = new VisualElement();
newElement.style.position = Position.Relative;
newElement.style.left = 15;
newElement.style.top = 35;
좌표 시스템
각 VisualElement에는 포지션 및 회전에 로컬 오프셋을 추가하는 트랜스폼 프로퍼티가 있습니다. 이 오프셋은 계산된 레이아웃 프로퍼티에 표시되지 않습니다. 기본적으로 트랜스폼은 ID입니다.
WorldBound프로퍼티는 레이아웃 포지션과 트랜스폼을 모두 고려한 최종 창 공간 좌표를 검색합니다.
좌표 간 변환
UI 개발에서 아래의 확장 메서드를 사용하여 좌표 시스템 간의 변환을 수행할 수 있습니다:
| 메서드 | 설명 |
|---|---|
WorldToLocal |
Panel 공간에서 요소 내 레퍼렌셜로 변환합니다. |
LocalToWorld |
Vector2 또는 Rect를 Panel 공간 레퍼렌셜로 변환합니다. |
ChangeCoordinatesTo |
하나의 요소의 로컬 공간에 있는 Vector2 또는 Rect를 다른 로컬 공간으로 변환합니다. |
추가 리소스
더 깊이 있는 정보와 예제를 원하신다면 Unity의 공식 문서를 참고하시기 바랍니다. UI 툴킷과 관련된 튜토리얼, 커뮤니티의 답변, 기술 자료 등을 활용하면 유익합니다.
- 튜토리얼: Unity의 공식 웹사이트에서 다양한 튜토리얼을 확인하세요.
- 커뮤니티: 질문이 있다면 Unity 포럼에서 커뮤니티와 소통하세요.
- 에셋 스토어: 필요한 UI 패키지를 쉽게 찾을 수 있습니다.
Unity 기술 문서와 자료를 통해 더욱 깊이 있는 학습을 이어가세요.