6. 사용자 인터페이스 만들기6. Creating user interfaces

이 자습서에서는 Unity의 TextMeshPro 구성 요소와 함께 MRTK의 단추와 메뉴 프리팹을 사용하여 간단한 사용자 인터페이스를 만드는 방법에 대해 알아봅니다.In this tutorial, you will learn how to create a simple user interface using MRTK's button and menu prefabs alongside Unity's TextMeshPro component. 또한 이벤트를 트리거하도록 단추를 구성하고, 사용자에게 추가 정보를 제공하기 위해 동적 도구 설명 UI 요소를 추가하는 방법에 대해서도 알아봅니다.You will also learn how to configure the buttons to trigger events and add dynamic tooltip UI elements to provide the user with additional information.

목표Objectives

  • 컬렉션에서 단추를 구성하는 방법 알아보기Learn how to organize buttons in a collection
  • MRTK의 메뉴 프리팹을 사용하는 방법 알아보기Learn how to use MRTK's menu prefabs
  • UI 요소 및 단추를 사용하여 홀로그램과 상호 작용하는 방법 알아보기Learn how to interact with holograms using UI menus and buttons
  • 텍스트 요소를 추가하는 방법 알아보기Learn how to add text elements
  • 개체에 대한 도구 설명을 동적으로 생성하는 방법 알아보기Learn how to spawn tooltips on objects dynamically

정적 단추 패널 만들기Creating a static panel of buttons

[계층 구조] 창에서 마우스 오른쪽 단추로 RoverExplorer 개체를 클릭하고, 빈 항목 만들기 를 선택하여 빈 개체를 RoverExplorer의 자식으로 추가하고, 개체 이름을 Buttons 로 지정하고, 변환 구성 요소를 다음과 같이 구성합니다.In the Hierarchy window, right-click on the RoverExplorer object and select Create Empty to add an empty object as a child of the RoverExplorer, name the object Buttons, and configure the Transform component as follows:

  • 위치: X = -0.6, Y = 0.036, Z = -0.5Position: X = -0.6, Y = 0.036, Z = -0.5
  • 회전: X = 90, Y = 0, Z = 0Rotation: X = 90, Y = 0, Z = 0
  • 배율: X = 1, Y = 1, Z = 1Scale: X = 1, Y = 1, Z = 1

새로 만든 Buttons 개체가 선택되고 배치된 Unity

[프로젝트] 창에서 Assets > MRTK.Tutorials.GettingStarted > Prefabs 폴더로 차례로 이동하고, PressableRoundButton 프리팹을 클릭하여 Buttons 개체로 끈 다음, 마우스 오른쪽 단추로 PressableRoundButton을 클릭하고, 중복 을 선택하여 복사본을 만듭니다. 총 세 개의 PressableRoundButton 개체 복사본을 만들 때까지 반복합니다.In the Project window, navigate to the Assets > MRTK.Tutorials.GettingStarted > Prefabs folder, click-and-drag the PressableRoundButton prefab on to the Buttons object, then right-click on the PressableRoundButton and select Duplicate to create a copy, repeat until you have a total of three PressableRoundButton objects:

새로 추가한 PressableRoundButton 프리팹이 있는 Unity

[계층 구조] 창에서 Buttons 개체를 선택한 다음, [검사기] 창에서 구성 요소 추가 단추를 사용하여 GridObjectCollection 구성 요소를 추가하고 다음과 같이 구성합니다.In the Hierarchy window, select the Buttons object, then in the Inspector window, use the Add Component button to add the GridObjectCollection component and configure it as follows:

  • 정렬 유형: 자식 순서Sort Type: Child Order
  • 레이아웃: 수평Layout: Horizontal
  • 셀 너비: 0.2Cell Width: 0.2
  • 앵커: 왼쪽 가운데Anchor: Middle Left

그런 다음, 컬렉션 업데이트 단추를 클릭하여 Buttons 개체의 자식 개체에 대한 위치를 업데이트합니다.Then click the Update Collection button to update the position of the Buttons object's child objects:

GridObjectCollection 구성 요소가 추가, 구성 및 적용된 Unity Buttons 개체

[계층 구조] 창에서 단추 이름을 Hints, ExplodeReset 으로 지정합니다.In the Hierarchy window, name the buttons Hints, Explode, and Reset.

각 단추에 대해 SeeItSayItLabel > TextMeshPro 자식 개체를 차례로 선택한 다음, [검사기] 창에서 각 TextMeshPro - 텍스트 구성 요소 텍스트를 단추 이름과 일치하도록 변경합니다.For each button, select the SeeItSayItLabel > TextMeshPro child object, then in the Inspector window, change the respective TextMeshPro - Text component text to match the button names:

단추 텍스트 레이블이 구성된 Unity

완료되면 Buttons 개체의 자식 개체를 접습니다.Once done, collapse the Buttons object's child objects.

[계층 구조] 창에서 Hints 단추 개체를 선택한 다음, [검사기] 창에서 Interactable.OnClick () 이벤트를 다음과 같이 구성합니다.In the Hierarchy window, select the Hints button object, then in the Inspector window, configure the Interactable.OnClick () event as follows:

  • RoverAssembly 개체를 없음(개체) 필드에 할당합니다.Assign the RoverAssembly object to the None (Object) field
  • 함수 없음 드롭다운에서 PlacementHintsController > TogglePlacementHints () 를 차례로 선택하여 이 함수를 이벤트가 트리거될 때 실행할 작업으로 설정합니다.From the No Function dropdown, select PlacementHintsController > TogglePlacementHints () to set this function as the action to be executed when the event is triggered

Hints 단추 개체 OnClick 이벤트가 구성된 Unity

Interactable 구성 요소는 모든 객체가 입력에 쉽게 상호 작용하고 응답할 수 있도록 하는 일체형 컨테이너입니다.The Interactable component is an all-in-one container to make any object easily interactable and responsive to input. Interactable은 터치, 손 광선, 말하기 등을 포함한 모든 유형의 입력에 대한 캐치 올(catch-all) 역할을 하며 이러한 상호 작용을 이벤트 및 시각적 테마 응답으로 전달합니다.Interactable acts as a catch-all for all types of input including touch, hand rays, speech, etc. and funnels these interactions into events and visual theme responses. 다양한 입력 유형에 맞게 구성하고 시각적 테마를 사용자 지정하는 방법에 대한 자세한 내용은 MRTK 설명서 포털Interactable 가이드를 참조할 수 있습니다.To learn how to configure it for different input types and customize it's visual theme, you can refer to the Interactable guide in the MRTK Documentation Portal.

[계층 구조] 창에서 Explode 단추 개체를 선택한 다음, [검사기] 창에서 Interactable.OnClick () 이벤트를 다음과 같이 구성합니다.In the Hierarchy window, select the Explode button object, then in the Inspector window, configure the Interactable.OnClick () event as follows:

  • RoverAssembly 개체를 없음(개체) 필드에 할당합니다.Assign the RoverAssembly object to the None (Object) field
  • 함수 없음 드롭다운에서 ExplodedViewController > ToggleExplodedView () 를 차례로 선택하여 이 함수를 이벤트가 트리거될 때 실행할 작업으로 설정합니다.From the No Function dropdown, select ExplodedViewController > ToggleExplodedView () to set this function as the action to be executed when the event is triggered

Explode 단추 개체 OnClick 이벤트가 구성된 Unity

[재생] 단추를 눌러 게임 모드를 시작한 다음, 스페이스 바 단추를 길게 눌러 손을 활성화하고, 마우스를 사용하여 Hints 단추를 눌러 배치 힌트 개체의 표시 유형을 설정/해제합니다.Press the Play button to enter Game mode, then press-and-hold the space bar button to activate the hand and use the mouse to press the Hints button to toggle the visibility of the placement hint objects:

Hints 단추가 눌러져 있는 Unity 재생 모드 분할 보기

그리고 Explode 단추를 눌러 분해된 보기를 설정/해제합니다.and the Explode button to toggle the exploded view on and off:

Explode 단추가 눌러져 있는 Unity 재생 모드 분할 보기

사용자를 따르는 동적 메뉴 만들기Creating a dynamic menu that follows the user

[프로젝트] 창에서 Assets > MRTK > SDK > Features > UX > UX > Menus 폴더로 차례로 이동하고, NearMenu4x1 프리팹을 클릭하여 [계층 구조] 창으로 끈 다음, 해당 변환 위치 를 X = 0, Y = -0.4, Z = 0으로 설정하고 다음과 같이 구성합니다.In the Project window, navigate to the Assets > MRTK > SDK > Features > UX > Prefabs > Menus folder, click-and-drag the NearMenu4x1 prefab into the Hierarchy window, set its Transform Position to X = 0, Y = -0.4, Z = 0 and configure it as follows:

  • SolverHandler 구성 요소의 추적 대상 형식Head 로 설정되어 있는지 확인합니다.Verify that the SolverHandler component's Tracked Target Type is set to Head
  • RadialView 해결기 구성 요소 옆에 있는 확인란을 선택하여 기본적으로 사용하도록 설정합니다.Check the checkbox next to the RadialView Solver component so it is enabled by default

새로 추가한 Near Menu 프리팹이 선택된 Unity

[계층 구조] 창에서 개체 이름을 Menu 로 바꾼 다음, 해당 ButtonCollection 자식 개체를 펼쳐서 4개의 단추를 표시합니다.In the Hierarchy window, rename the object to Menu, then expand its ButtonCollection child object to reveal the four buttons:

Menu 개체가 선택되고 ButtonCollection 개체가 펼쳐진 Unity

첫 번째 단추의 이름을 Indicator 로 바꾼 다음, [검사기] 창에서 단추 구성 도우미(스크립트) 구성 요소를 다음과 같이 구성합니다.Rename the first button to Indicator, then in the Inspector window, configure the Button Config Helper (Script) component as follows:

  • 기본 레이블 텍스트 를 단추 이름과 일치하도록 변경합니다.Change the Main Label Text to match the name of the button
  • Indicator 개체를 없음(개체) 필드에 할당합니다.Assign the Indicator object to the None (Object) field
  • 함수 없음 드롭다운에서 GameObject > SetActive(부울) 를 차례로 선택하여 이 함수를 이벤트가 트리거될 때 실행할 작업으로 설정합니다.From the No Function dropdown, select GameObject > SetActive (bool) to set this function as the action to be executed when the event is triggered
  • 인수 확인란이 선택되어 있는지 확인합니다.Verify that the argument checkbox is checked
  • 아이콘 을 '검색' 아이콘으로 변경합니다.Change the Icon to the 'search' icon

Indicator 단추 개체 Button Config Helper가 구성된 Unity

[계층 구조] 창에서 표시기 개체를 선택한 다음, [검사기] 창에서 다음을 수행합니다.In the Hierarchy window, select the Indicator object, then in the Inspector window:

  • 이름 옆에 있는 확인란을 선택 취소하여 기본적으로 비활성화합니다.Uncheck the checkbox next to its name to make it inactive by default
  • 구성 요소 추가 단추를 사용하여 Directional Indicator Controller(스크립트) 구성 요소를 추가합니다.Use the Add Component button to add the Directional Indicator Controller (Script) component

Indicator 개체가 선택되어 사용하지 않도록 설정되고 DirectionalIndicatorController 구성 요소가 추가된 Unity

참고

이제 앱이 시작되면 Indicator가 기본적으로 사용하지 않도록 설정되며, Indicator 단추를 눌러 사용하도록 설정할 수 있습니다.Now, when the app starts, the Indicator is disabled by default and can be enabled by pressing the Indicator button.

두 번째 단추의 이름을 TapToPlace 로 바꾼 다음, [검사기] 창에서 단추 구성 도우미(스크립트) 구성 요소를 다음과 같이 구성합니다.Rename the second button to TapToPlace, then in the Inspector window, configure the Button Config Helper (Script) component as follows:

  • 기본 레이블 텍스트 를 단추 이름과 일치하도록 변경합니다.Change the Main Label Text to match the name of the button
  • RoverExplorer > RoverAssembly 개체를 없음(개체) 필드에 할당합니다.Assign the RoverExplorer > RoverAssembly object to the None (Object) field
  • 함수 없음 드롭다운에서 TapToPlace > 부울 사용 을 차례로 선택하여 이벤트가 트리거될 때 이 속성 값을 업데이트합니다.From the No Function dropdown, select TapToPlace > bool Enabled to update this property value when the event is triggered
  • 인수 확인란이 선택되어 있는지 확인합니다.Verify that the argument checkbox is checked
  • 아이콘 을 '광선이 있는 손' 아이콘으로 변경합니다.Change the Icon to the 'hand with ray' icon

TapToPlace 단추 개체 Button Config Helper가 구성된 Unity

[계층 구조] 창에서 RoverAssembly 개체를 선택한 다음, [검사기] 창에서 다음과 같이 탭하여 위치 지정(스크립트) 구성 요소를 구성합니다.In the Hierarchy window, select the RoverAssembly object, then in the Inspector window, configure the Tap To Place (Script) component as follows:

  • 이름 옆에 있는 확인란을 선택 취소하여 기본적으로 비활성화합니다.Uncheck the checkbox next to its name to make it inactive by default
  • On Placing Stopped () 이벤트 섹션에서 + 아이콘을 클릭하여 새 이벤트를 추가합니다.In the On Placing Stopped () event section, click the + icon to add a new event:
  • RoverExplorer > RoverAssembly 개체를 없음(개체) 필드에 할당합니다.Assign the RoverExplorer > RoverAssembly object to the None (Object) field
  • 함수 없음 드롭다운에서 TapToPlace > 부울 사용 을 차례로 선택하여 이벤트가 트리거될 때 이 속성 값을 업데이트합니다.From the No Function dropdown, select TapToPlace > bool Enabled to update this property value when the event is triggered
  • 인수 확인란이 선택 취소되어 있는지 확인합니다.Verify that the argument checkbox is unchecked

TapToPlace 구성 요소가 다시 구성된 Unity

참고

이제 앱이 시작되면 Tap to Place(탭하여 위치 지정) 기능이 기본적으로 사용하지 않도록 설정되며, Tap to Place 단추를 눌러 사용하도록 설정할 수 있습니다.Now, when the app starts, the Tap to Place functionality is disabled by default and can be enabled by pressing the Tap to Place button. 또한 탭하여 위치 지정이 완료되면 자체적으로 사용하지 않도록 설정됩니다.Additionally, when the tap to place is completed, it will disable itself.

장면에 텍스트 추가Adding text to the scene

[계층 구조] 창에서 마우스 오른쪽 단추로 Table 개체를 클릭하고, 3D 개체 > 텍스트 - TextMeshPro 를 차례로 선택하여 텍스트 개체를 Table 개체의 자식으로 추가한 다음, [검사기] 창에서 사각형 변환 구성 요소를 다음과 같이 구성합니다.In the Hierarchy window, right-click on the Table object and select 3D Object > Text - TextMeshPro to add a text object as a child of the Table object, then in the Inspector window, configure the Rect Transform component as follows:

  • 세로 위치 를 1로 변경합니다.Change Pos Y to 1
  • 너비 를 1로 변경합니다.Change Width to 1
  • 높이 를 1로 변경합니다.Change Height to 1
  • 회전 X 를 90으로 변경합니다.Change Rotation X to 90

새로 만든 TextMeshPro 개체가 선택된 Unity

그런 다음, TextMeshPro - 텍스트 구성 요소를 다음과 같이 구성합니다.Then configure the TextMeshPro - Text component as follows::

  • 텍스트 를 Rover Explorer로 변경합니다.Change Text to Rover Explorer
  • 글꼴 스타일 을 [굵게]로 변경합니다.Change Font Style to Bold
  • 글꼴 크기 를 1로 변경합니다.Change Font Size to 1
  • 추가 설정 > 여백 을 0.03으로 변경합니다.Change Extra Settings > Margins to 0.03

TextMeshPro 구성 요소가 구성된 Unity

도구 설명 추가Adding tooltips

[프로젝트] 창에서 Assets > MRTK > SDK > Features > UX > Prefabs > ToolTip 폴더로 차례로 이동하여 도구 설명 프리팹을 찾습니다.In the Project window, navigate to the Assets > MRTK > SDK > Features > UX > Prefabs > ToolTip folder to locate the tooltip prefabs:

ToolTips 폴더가 선택된 Unity 프로젝트 창

[계층 구조] 창에서 RoverExplorer > RoverParts 개체를 차례로 펼치고, 해당 자식 로버 부품 개체를 모두 선택한 다음, [검사기] 창에서 구성 요소 추가 단추를 사용하여 ToolTipSpawner 구성 요소를 추가하고 다음과 같이 구성합니다.In the Hierarchy window, expand the RoverExplorer > RoverParts object and select all its child rover part objects, then in the Inspector window, use the Add Component button to add the ToolTipSpawner component and configure it as follows:

  • 사용자가 도구 설명이 표시되는 부품을 살펴볼 수 있도록 하려면 포커스 사용 확인란이 선택되어 있는지 확인합니다.Ensure the Focus Enabled checkbox is checked to require the user to look at the part for the tooltip to appear
  • [프로젝트] 창에서 한 줄 도구 설명 프리팹을 도구 설명 프리팹 필드에 할당합니다.Assign the Simple Line ToolTip prefab from the Project window to the Tool Tip Prefab field
  • 도구 설명 재정의 설정 > 설정 모드재정의 로 변경합니다.Change the ToolTip Override Settings > Settings Mode to Override
  • 도구 설명 재정의 설정 > 수동 피벗 로컬 위치 Y1.5 로 변경합니다.Change the ToolTip Override Settings > Manual Pivot Local Position Y to 1.5

모든 로버 부품 개체가 선택되고 ToolTipSpawner 구성 요소가 추가되고 구성된 Unity

[계층 구조] 창에서 첫 번째 로버 부품인 RoverParts > Camera_Part 를 차례로 선택하고, ToolTipSpawner 구성 요소를 다음과 같이 구성합니다.In the Hierarchy window, select the first rover part, RoverParts > Camera_Part, and configure the ToolTipSpawner component as follows:

  • 부품 이름(예: Camera)을 반영하도록 도구 설명 텍스트 를 변경합니다.Change Tool Tip Text to reflect the name of the part, i.e., Camera

Camera ToolTipText가 구성된 Unity

각 로버 부품 개체에 대해 이 단계를 반복 하여 ToolTipSpawner 구성 요소를 다음과 같이 구성합니다.Repeat this step for each of the rover part objects to configure the ToolTipSpawner component as follows:

  • Generator_Part 에 대한 도구 설명 텍스트발전기 로 변경합니다.For the Generator_Part, change the Tool Tip Text to Generator
  • Lights_Part 에 대한 도구 설명 텍스트조명 으로 변경합니다.For the Lights_Part, change the Tool Tip Text to Lights
  • UHFAntenna_Part 에 대한 도구 설명 텍스트UHF 안테나 필드로 변경합니다.For the UHFAntenna_Part, change the Tool Tip Text to UHF Antenna field
  • Spectrometer_Part 에 대한 도구 설명 텍스트분광계 로 변경합니다.For the Spectrometer_Part, change the Tool Tip Text to Spectrometer

[재생] 단추를 눌러 게임 모드를 시작한 다음, 시선이 부품 중 하나에 적중하여 해당 부품에 대한 도구 설명이 표시될 때까지 마우스 오른쪽 단추를 누른 채 마우스를 움직입니다.Press the Play button to enter Game mode, then press-and-hold the right mouse button while moving your mouse until the gaze hit's one of the parts and the tooltip for that part will be displayed:

응시로 트리거된 도구 설명이 있는 Unity 재생 모드 분할 보기

축하합니다.Congratulations

이 자습서에서는 Unity의 TextMeshPro 구성 요소와 함께 MRTK에서 제공하는 단추 및 메뉴 프리팹을 사용하여 간단한 사용자 인터페이스를 만드는 방법 및 눌렀을 때 이벤트를 트리거하도록 단추를 구성하는 방법을 알아보았습니다.In this tutorial, you learned how to create a simple user interface using MRTK's provided button and menu prefabs alongside Unity's TextMeshPro component and how to configure the buttons to trigger events when they are pressed. 또한 동적 도구 설명 UI 요소를 추가하여 사용자에게 추가 정보를 제공하는 방법도 알아보았습니다.You also learned how to add dynamic tooltip UI elements to provide the user with additional information.

다음 자습서: 7. 3D 개체와 상호 작용Next Tutorial: 7. Interacting with 3D objects