런타임 바인딩 시작

버전: 2023.2+

런타임 데이터 바인딩을 생성하는 방법이 궁금하신가요? 이 예시를 사용하여 시작할 수 있습니다. 이 예시에서는 데이터 소스 에셋을 생성하고 UI Builder를 사용하여 데이터 소스를 UI에 바인딩합니다.

개요 예시

이 예시에서는 다음을 보여 줍니다.

• 바인딩하려는 프로퍼티가 포함된 데이터 소스 에셋을 만드는 방법
• UI Builder에서 만든 데이터 소스 에셋에 UI를 바인딩하는 방법
• 데이터 소스와 UI 간에 변경 사항이 모사되는 방식을 설정하는 데 사용할 수 있는 다양한 바인딩 모드 바인딩 모드에 대한 자세한 내용은 바인딩 모드 정의를 참조하십시오.
• 데이터 소스와 UI 간에 데이터 타입을 전환하는 타입 컨버터를 생성하는 방법. 타입 컨버터에 대한 자세한 내용은 데이터 타입 전환을 참조하십시오.

이 예시에서 생성하는 완성된 파일은 GitHub 저장소에서 확인할 수 있습니다.

선행 조건

이 가이드는 Unity 에디터, UI 툴킷, C# 스크립팅에 익숙한 개발자용입니다.시작하기 전에 먼저 다음을 숙지하십시오.

• UI 빌더
• UXML

데이터 소스 에셋 생성

바인딩할 프로퍼티를 포함하는 데이터 소스 에셋을 생성합니다. 이 예시에서는 string 프로퍼티, Vector3 프로퍼티, float 프로퍼티를 포함하는 ExampleObject라는 ScriptableObject 에셋을 생성합니다. float 프로퍼티는 Vector3 프로퍼티의 x, y, z 값의 합을 반환하는 읽기 전용 프로퍼티입니다. 또한 데이터 소스 에셋은 float를 Color 및 string으로 전환하는 로컬 컨버터를 포함합니다.

1. 템플릿을 사용하여 Unity에서 프로젝트를 생성합니다.

2. 프로젝트의 Assets 폴더에서 다음 콘텐츠가 포함된 ExampleObject.cs라는 C# 스크립트를 생성합니다.

   [!code-cs[(Modules/UIElements/Tests/UIElementsExamples/Assets/ui-toolkit-manual-code-examples/runtime-data-binding/ExampleObject.cs)]

3. 메뉴에서 Assets > Create > Example Object를 선택합니다. 이렇게 하면 프로젝트의 Assets 폴더에 에셋이 생성됩니다.

4. 에셋의 이름을 ExampleObject.asset으로 변경합니다.

UI 만들기

이전 단계에서 생성한 데이터 소스 에셋에 바인딩되는 UI를 생성합니다. 이 예제에서는 Vector3Field, FloatField 및 Label을 자식 요소로 갖는 VisualElement를 포함하는 UXML 파일을 생성합니다.

1. 프로젝트의 Assets 폴더에서 ExampleObject.uxml이라는 UXML 파일을 생성합니다.
2. ExampleObject.uxml 파일을 더블 클릭하여 UI Builder에서 엽니다.
3. 계층 구조 패널에서 VisualElement를 추가합니다.
4. 계층 구조 패널에서 VisualElement를 선택합니다.
5. Vector3Field, FloatField, Label을 VisualElement의 자식 요소로 추가합니다.

데이터 소스에 Vector3Field 바인딩

이전 단계에서 생성한 데이터 소스 에셋에 UI를 바인딩합니다. 루트 VisualElement에 대한 데이터 소스를 설정하고 Vector3Field 요소의 label 및 value 프로퍼티를 데이터 소스 에셋의 vector3Label 및 vector3Value 프로퍼티에 바인딩합니다.

1. VisualElement의 인스펙터 패널에서 Bindings > Data Source > Asset 목록을 통해 ExampleObject를 선택합니다.
2. Vector3Field의 인스펙터 패널에서 Label 프로퍼티를 오른쪽 클릭하고 Add binding을 선택합니다.
3. Add Binding 창의 Data Source Path 목록에서 vector3Label을 선택합니다.
4. Binding Mode 목록에서 To Target을 선택합니다. 이렇게 하면 데이터 소스가 변경될 때 UI가 업데이트됩니다.
5. Add binding을 선택하여 변경 사항을 저장합니다.
6. 인스펙터 패널에서 Value 프로퍼티를 오른쪽 클릭하고 Add binding을 선택합니다.
7. Add Binding 창의 Data Source Path 목록에서 vector3Value를 선택합니다.
8. Binding Mode 목록에서 To Source를 선택합니다. 이렇게 하면 UI가 변경될 때 데이터 소스가 업데이트됩니다.
9. Add binding을 선택하여 변경 사항을 저장합니다.

데이터 소스에 Float 바인딩

Float의 value 프로퍼티를 데이터 소스 에셋의 sumOfVector3Properties 프로퍼티에 바인딩합니다.

1. Float의 인스펙터 패널에서 Value 프로퍼티를 오른쪽 클릭하고 Add binding을 선택합니다.
2. Add Binding 창의 Data Source Path 목록에서 sumOfVector3Properties을 선택합니다.
3. Binding Mode 목록에서 To Target을 선택합니다. 이렇게 하면 데이터 소스가 변경될 때 UI가 업데이트됩니다.
4. Add binding을 선택하여 변경 사항을 저장합니다.

데이터 소스에 Label 바인딩

Label의 프로퍼티를 데이터 소스 에셋의 프로퍼티에 바인딩하고 Label에 대한 타입 컨버터를 적용합니다.

1. 계층 구조 패널에서 Label을 선택합니다.

2. 인스펙터 패널에서 Text 프로퍼티를 오른쪽 클릭하고 Add binding을 선택합니다.

3. Add Binding 창에서 다음을 수행합니다.

   • Data Source Path 목록에서 dangerLevel을 선택합니다.
   • Binding Mode 목록에서 To Target을 선택합니다. 이렇게 하면 데이터 소스가 변경될 때 UI가 업데이트됩니다.
   • Advanced Settings > Converters > To target property (UI) 목록에서 Value To Progress를 선택합니다. 이렇게 하면 플로트가 문자열로 전환됩니다.

4. Add binding을 선택하여 변경 사항을 저장합니다.

5. 인스펙터 패널에서 Background 필드를 확장합니다.

6. Color 프로퍼티를 오른쪽 클릭하고 Add binding을 선택합니다.

7. Add Binding 창에서 다음을 수행합니다.

   • Data Source Path 목록에서 dangerLevel을 선택합니다.
   • Binding Mode 목록에서 To Target을 선택합니다. 이렇게 하면 데이터 소스가 변경될 때 UI가 업데이트됩니다.
   • Advanced Settings > Converters > To target property (UI) 목록에서 Value To Progress를 선택합니다. 이렇게 하면 플로트가 색상으로 전환됩니다.

8. Add binding을 선택하여 변경 사항을 저장합니다.

9. 저장하고 UI Builder를 닫습니다. ExampleObject.uxml 파일이 다음과 같이 표시됩니다.

   [!code-cs[(Modules/UIElements/Tests/UIElementsExamples/Assets/ui-toolkit-manual-code-examples/runtime-data-binding/ExampleObject.uxml)]

UI Builder 프리뷰 모드에서 바인딩 테스트

데이터 소스 에셋에서 Vector3Field의 레이블 텍스트를 업데이트하면 UI에서 변경 사항이 모사되는 것을 확인할 수 있습니다. UI에서 Vector3 프로퍼티의 값을 업데이트하면 데이터 소스 에셋에 모사된 변경 사항을 확인할 수 있습니다. 데이터 소스에서 위험 레벨의 슬라이더를 옮겨 레이블에 모사된 변경 사항을 확인할 수 있습니다.

1. 프로젝트의 Assets 폴더에서 ExampleObject.asset 파일을 선택합니다.
2. 인스펙터 창의 Vector 3 Label 필드에 무작위 텍스트를 입력합니다. UI 빌더 뷰포트에서 Vector3Field의 레이블이 입력한 텍스트로 변경됩니다.
3. UI Builder Viewport에서 Preview를 선택합니다.
4. Vector3Field의 X, Y, Z 필드에 무작위 숫자를 입력합니다. ExampleObject.asset의 인스펙터 창에 있는 Vector3 Value가 입력한 숫자로 변경됩니다.
5. ExampleObject.asset의 인스펙터 창에서 Danger Level 슬라이더를 옮깁니다. UI 빌더 뷰포트에서 Label의 텍스트와 배경색이 Danger Level의 값에 따라 변경됩니다.

추가 리소스

• 런타임 데이터 바인딩
• 런타임 데이터 바인딩 생성
• 커스텀 바인딩 타입 생성
• 데이터 소스 정의
• 로깅 레벨 정의