UI 빌더 시작하기

UI 빌더로 UI를 생성하는 방법을 배우고 싶으신가요? 다음 예시를 사용하여 시작하십시오.

UI 빌더에서 UI를 만들려면:

1. 새__ UI__(사용자 인터페이스) 사용자가 애플리케이션과 상호 작용하도록 해 줍니다. Unity는 현재 3개의 UI 시스템을 지원합니다. 자세한 정보
   See in Glossary 문서(UXML)를 만듭니다.
2. 요소를 추가하여 UI 계층 구조를 만듭니다.
3. 인스펙터에서 속성 및 스타일 프로퍼티를 설정합니다.
4. 두 개 이상의 요소에 동일한 스타일 프로퍼티가 필요한 경우 USS 스타일시트 및 선택자를 만듭니다.
5. UI를 테스트하고 결과가 만족스러우면 인라인 스타일 프로퍼티를 USS 클래스로 추출합니다.
6. UI 문서(UXML)를 저장합니다.

선행 조건

시작하기 전에 먼저 다음을 숙지하십시오.

• 시각적 요소와 시각적 트리 소개
• UXML 소개
• USS 소개
• UI 빌더 인터페이스 개요

개요 예시

이 예시에서는 리스트 뷰 런타임 UI 생성 예시의 메인 뷰를 생성합니다. 두 개의 컨테이너가 있는 루트 요소를 배경으로 만듭니다. 한 컨테이너에는 캐릭터 이름 리스트가 있고 또 다른 컨테이너에는 캐릭터 세부 정보가 있습니다. 캐릭터 세부 정보 컨테이너에서 배경과 전경 프레임을 추가합니다. 마지막으로 캐릭터 이름에 두 개의 레이블을 추가합니다. 이 예시에서는 캐릭터 이름 리스트 엔트리 UI를 생성하지 않습니다.

루트 요소 생성

새 프로젝트를 생성한 다음, 화면 전체를 덮는 루트 시각적 요소를 생성합니다. 루트 요소의 배경색을 지정하고 화면 중앙에 있는 모든 자식 요소를 가운데에 배치합니다.

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

2. Window > UI Toolkit > UI Builder를 선택합니다.

3. UI Builder 창의 Viewport 창 왼쪽 상단에서 File > New를 선택하여 새 UXML 문서를 생성합니다.

   

4. 이름을 MainView.uxml로 지정하고 저장합니다.

5. Library에서 VisualElement를 계층 구조 패널로 드래그합니다.

   

   팁: 해당 컨트롤을 더블 클릭하여 계층 구조 패널에 추가할 수도 있습니다.

6. 계층 구조 패널에서 해당 요소를 선택합니다.

7. 인스펙터 패널에서 Flex > Grow가 1인지 확인합니다. 이렇게 하면 flex-grow 프로퍼티가 1로 설정되어 화면 전체를 덮습니다.

   

8. 모든 자식 요소를 가운데에 배치하려면 Align Items와 Justify Content를 모두 Center로 설정합니다.

   

9. Background > Color를 #732526으로 설정합니다.

   참고: 기본적으로 컬러의 알파 값은 0이므로 완전히 투명합니다. 컬러를 불투명하게 만들려면 알파 값을 255로 설정합니다.

   

부모 컨테이너 생성

루트 요소 아래에 새 VisualElement를 생성합니다. 이 요소는 UI의 왼쪽 및 오른쪽 섹션의 부모 컨테이너가 됩니다.

1. Library에서 VisualElement를 계층 구조 패널의 루트 VisualElement로 드래그합니다.

   

2. 계층 구조 패널에서 해당 요소를 선택합니다.

3. 인스펙터 패널에서 Flex > Direction을 row로 설정합니다.

4. Flex > Grow를 0으로 설정합니다.

5. Size > Height를 350픽셀로 설정합니다.

   

캐릭터 이름 리스트 컨테이너 생성

컨테이너의 자식 요소로 ListView를 추가하여 캐릭터 이름을 저장합니다.

1. Library에서 ListView를 계층 구조 패널의 해당 컨테이너 VisualElement로 드래그합니다.

2. 계층 구조 패널에서 해당 요소를 선택합니다.

3. 인스펙터 패널에서 Name을 CharacterList로 설정합니다.

   

4. Size > Width를 230픽셀로 설정합니다.

5. Spacing > Margin > Right를 6 픽셀로 설정합니다.

   

6. Background > Color를 #6E3925로 설정합니다.

7. Border > Color를 #311A11로 설정합니다.

8. Border > Width를 4픽셀로 설정합니다.

9. Border > Radius를 15픽셀로 설정합니다.

   

캐릭터 세부 정보 컨테이너 생성

캐릭터 세부 정보 컨테이너를 유지하기 위해 #CharacterList와 동일한 부모 아래에 새 VisualElement를 추가합니다. 사용자가 왼쪽 리스트에서 캐릭터를 선택하면 캐릭터의 사진, 이름, 클래스가 표시됩니다.

1. Library에서 VisualElement를 계층 구조 패널의 컨테이너 요소로 드래그합니다. 이는 오른쪽에 있는 모든 요소를 고정하는 컨테이너입니다.

2. 계층 구조 패널에서 해당 요소를 선택합니다.

3. 인스펙터 패널에서 Align > Align Items를 flex-end로 설정합니다.

4. Align > Justify Content를 space-between으로 설정합니다.

   

5. 오른쪽 컨테이너의 자식으로 또 다른 VisualElement를 추가합니다.

6. 계층 구조 패널에서 해당 요소를 선택합니다.

7. Flex > Grow를 0으로 설정합니다.

8. Size > Width를 276픽셀로 설정합니다.

9. Align 섹션에서 Align Items와 Justify Content를 모두 center로 설정합니다.

10. Spacing > Padding을 8픽셀로 설정합니다.

    

11. Background > Color를 #AA5939로 설정합니다.

테두리 스타일에 대한 USS 클래스 생성

캐릭터 세부 정보 컨테이너는 캐릭터 이름 리스트 컨테이너와 동일한 테두리 스타일을 사용합니다. 두 컨테이너에 모두 적용할 USS 클래스를 생성합니다.

1. StyleSheet 창에서 + > Create New USS를 선택합니다.
2. 이름을 MainView.uss로 지정하고 Save를 선택합니다.
3. Add new selector… 필드를 클릭하고 .border를 입력합니다. StyleSheet 패널에 .border 선택자가 표시됩니다.
4. StyleSheet 패널에서 .border를 선택합니다.
5. 인스펙터 패널에서 Border > Color를 #311A11로 설정합니다.
6. Border > Width를 4픽셀로 설정합니다.
7. Border > Radius를 15픽셀로 설정합니다.
8. StyleSheet 패널에서 .border를 캐릭터 세부 정보 컨테이너 VisualElement로 드래그합니다.
9. StyleSheet 패널에서 .border를 #CharacterList로 드래그합니다.
10. #CharacterList를 선택합니다.
11. 인스펙터 창에서 Border를 오른쪽 클릭하고 Unset를 선택하여 앞서 설정했던 인라인 스타일을 제거합니다.

그러면 UI 레이아웃이 다음과 같이 표시됩니다.

캐릭터 초상 배경 생성

캐릭터 세부 정보 컨테이너에 개별 UI 컨트롤을 추가합니다. 첫 번째 단계는 캐릭터 사진 배경을 추가하는 것입니다.

1. Library에 있는 VisualElement를 해당 캐릭터 세부 정보 컨테이너로 드래그합니다.

2. 계층 구조 패널에서 해당 요소를 선택합니다.

3. Size 섹션에서 Width 및 Height를 모두 120픽셀로 설정합니다.

4. Spacing > Padding을 4픽셀로 설정합니다.

5. Background > Color를 #FF8554로 설정합니다.

6. Border > Color를 #311A11로 설정합니다.

7. Border > Width를 2픽셀로 설정합니다.

8. Border > Radius를 13픽셀로 설정합니다.

   

캐릭터 초상 전경 생성

캐릭터 세부 정보 컨테이너의 다음 단계는 실제 이미지의 전경을 추가하는 것입니다.

1. Library에 있는 VisualElement를 해당 캐릭터 세부 정보 컨테이너로 드래그합니다.

2. 계층 구조 패널에서 해당 요소를 선택합니다.

3. Name을 CharacterPortrait로 설정합니다.

4. Flex > Grow를 1로 설정하면 이미지가 사용 가능한 공간을 모두 사용할 수 있습니다.

5. Background > Scale Mode를 scale-to-fit으로 설정하면 올바른 종횡비를 유지하면서 요소 크기에 맞게 이미지 크기를 조정할 수 있습니다.

   

레이블 생성

캐릭터 세부 사항 컨테이너에 레이블 컨트롤 두 개를 추가하여 선택한 캐릭터의 이름과 클래스를 표시합니다.

1. Library에서 Label을 계층 구조 패널에 있는 해당 캐릭터 세부 정보 컨테이너로 드래그합니다.

2. Name을 CharacterName으로 설정합니다.

3. Library에서 Label을 계층 구조 패널에 있는 해당 캐릭터 세부 정보 컨테이너로 드래그합니다.

4. Name을 CharacterClass으로 설정합니다.

   

5. #CharacterName 요소를 선택합니다.

6. Text > Font Style을 B로 설정합니다.

7. Text > Size를 18픽셀로 설정합니다.

   

8. Viewport 창에서 File > Save를 선택하여 변경 사항을 MainView.uxml로 저장합니다.

인라인 스타일 추출

UI 빌더에서는 요소 수가 적어도 요소를 만들고 인라인 스타일만 사용하여 실험할 수 있습니다. UI를 더 복잡하게 빌드할수록 스타일시트를 사용하여 스타일을 더 쉽게 관리할 수 있습니다. UI 빌더에서 스타일시트에 인라인 스타일을 추출할 수 있습니다.

1. 루트 시각적 요소를 선택합니다.
2. 인스펙터 창에서 Style Class List 필드에서 클래스 이름으로 .background를 입력합니다.
3. Extract Inlined Styles to New Class를 선택합니다. 이렇게 하면 루트 요소에 설정한 인라인 스타일이 포함된 .background 클래스 선택자가 생성되고 루트 시각적 요소의 UI 문서(UXML)가 인라인 스타일 대신 클래스 선택자를 사용하도록 업데이트됩니다.
4. Viewport 창에서 File > Save를 선택합니다.

리스트 뷰 런타임 UI 생성 예시 작업을 계속 진행하려면 다른 모든 요소에 대한 스타일을 추출하는 단계를 반복하고 지침에 따라 예시를 만들면 됩니다.

추가 리소스

• UI 빌더로 요소 스타일 지정