{ 일등하이 :Unity3D }

Move

컨트롤러 기본형을 만들어 줍니다.

스탭 2. 컨트롤러 추가 

환경을 만들어 주고 

XR Origin을 선택후 Character Controller, Character Controller Driver컴포넌트를 추가 합니다.

손과 컨트롤러가 추적되는지 여부에 따라 런타임시 손과 컨트롤러 간의 교체가 필요 하다면 XR Input Modality Manager컴포넌트도 추가 합니다.

스텝 3. 로코모션 시스템 만들기 

XR Origin자식으로 빈오브젝트 (Locomotion System)을 생성 하고 Locomotion System컴포넌트를 부착 합니다.

로코모션 시스템 자식으로 빈오브젝트 (Move)를 생성한뒤 

Dynamic Move Provider를 부착 합니다.

각 손에 대한 사용자 선호도에 따라 이동의 전진 방향을 결정하는 기준 프레임을 자동으로 제어하는 동작 기반 연속 이동 버전입니다. 예를 들어 왼손에는 머리 상대 이동을 사용하고 오른손에는 컨트롤러 상대 이동을 사용하도록 구성할 수 있습니다.

참고

https://fistfullofshrimp.com/unity-vr-basics-2023-continuous-movement/

https://docs.unity3d.com/Packages/com.unity.xr.interaction.toolkit@2.4/manual/continuous-move-provider-action-based.html

XR Origin을 선택 하고 Character Controller Driver의 Locomotion Provider에 Move를 넣어 줍니다.

실행후 결과를 확인 합니다.

Turn

Locomotion System을 선택후 빈 오브젝트 (Turn)을 생성 합니다.

Snap Turn Provider를 부착 합니다.

(또는 Continuous Turn Provider)

인터렉터가 여러개 있다면 Right Controller를 선택하고 XR Interaction Group을 추가후 Action Based Controller Manager도 부착 합니다

왼손 컨트롤러는 이동, 오른손 컨트롤러는 회전을 하고 싶다면 

Locomotion System을 선택후 Dynamic Move Provider의 Right Hand Move Action속성의 Use Reference를 언체크 합니다.

Turn을 선택후 Snap Turn Provider의 Left Hand Snap turn Action의 Use Reference를 언체크 합니다.

실행후 결과를 확인 합니다.

텔레포트 

Locomotion System을 선택후 빈 오브젝트 (Teleportation)을 추가 합니다.

이어서 Teleportation Provider를 추가 합니다.

프로젝트 창에서 Teleport Interactor를 찾아 Right Controller에 넣어 줍니다.

Teleport Interactor 오브젝트를 선택후 XR Controller를 추가 합니다.

Right Controller를 선택후 

XR interaction Group컴포넌트를 부착 하고 

Action Based Controller Manager컴포넌트를 부착 합니다.

실행후 결과를 확인 합니다.

프로젝트 창에서 Teleport Anchor를 가져옵니다.

Locomotion System을 선택후 빈오브젝트 Climb를 생성하고 Climb Provider컴포넌트를 부착 합니다.

프로젝트 창에서 Direct Interactor를 검색해 Left / Right Controller에 넣어 줍니다.

Right Controller를 선택하고 XR Interaction Group의 Memebers를 다음과 같이 수정 합니다.

Move를 선택하고 

Dynamic Move Provider의 Gravity Application Mode를 Immediately를 선택 합니다.

실행후 결과를 확인 합니다.

이제 Climb 인터렉션을 하다가 그랩을 놓으면 중력의 영향을 바로 받아 떨어지게 됩니다.

윈도우즈 11

유니티 2022.3.5f1

메타쿼스트 2 

https://youtu.be/_YC4nTnCY2Y?list=PLTFRwWXfOIYBIPKhWi-ZO_ITXqtNuqj6j

URP 프로젝트를 생성 합니다.

XR Plugin Management를 설치 합니다.

Provider는 Open XR을 선택 합니다.

패키지 매니저를 열어 XR 을 검색후 XR Interaction Toolkit, XR Hands를 설치 합니다.

XR Interaction Toolkit의 Starter Assets 샘플과 Hands Interaction Demo 샘플을 설치 합니다.

XR Hands의 HandVisualizer 샘플도 설치 합니다.

Player Settings 를 열어 Project Validation에서 Fix All을 선택 합니다.

Features Menu 선택하라는 경고가 남으면 Edit를 눌러줍니다.

Interaction Profiles를 선택한뒤 다시 Project Validation으로 돌아갑니다.

다음과 같이 경고메시지가 없으면 모든 셋팅이 끝났습니다.

프리셋을 선택하고 Add 버튼을 눌러줍니다.

Project Settings를 열어 Preset Manager를 선택한뒤 

다음과 같이 Left, Right를 작성 합니다.

이제 Demo Scene을 열어 줍니다.

기기를 오큘러스 링크에 연결하고 실행 합니다.

HandVisualizer씬을 열어 줍니다.

다음과 같이 손이 핑크색으로 보이면 

메터리얼들을 선택 하고 

Edit > Rendering > Materials > Convert Selected Bulit-In Materials to URP를 선택 합니다.

Proceed를 눌러줍니다.

실행후 손이 안나오면 

프로젝트 셋팅즈를 열어 Hand Tracking Subsystem을 체크 합니다.

다음은 HandsDemoScene을 열어주고 

다음과 같이 핑크색이 보이면 

메터리얼들을 선택하고 컨버트 해줍니다.

오브젝트가 안잡히면 다음과 같이 설정 합니다.

https://docs.unity3d.com/Packages/com.unity.xr.openxr@1.8/manual/features/metaquest.html

고려해야 할 사항 :-

가상 현실 상호 작용 디자인과 관련하여 가장 어려운 작업 중 하나는 사용자 인터페이스를 디자인하고 구현하는 것입니다. VR 인터페이스를 디자인하려면 3D 환경에 적응해야 하고, 사용성 원칙(VR에서는 그다지 명확하지 않음)을 존중해야 하며, 물론 심미적이고 시각적으로 매력적이어야 한다는 점을 고려해야 합니다.

가상 환경 설계 원칙 -

• 개인 공간: 사람들은 실제 환경과 가상 환경 모두에서 개인 공간을 중요하게 생각합니다. 개인 공간을 침해하는 것은 불편하며 사용자의 신뢰를 손상시킬 수 있습니다. 모든 UI 요소를 사용자로부터 약 0.75m~3.5m 정도의 편안한 거리에 유지하여 개인 공간을 확보해야 합니다 .

• 사용자 이동: 콘텐츠와 사용자 사이에 허용되는 최소 거리를 설계하는 것을 고려하세요. 이는 사용자가 개체나 다른 사용자에게 너무 가까이 이동하는 것을 방지하는 데 도움이 될 수 있습니다. 이는 클리핑 평면을 사용하여 플레이어 근처에 개체가 보이지 않게 만드는 방법으로 수행할 수 있습니다. 또는 디자이너는 사용자가 탐색할 수 있도록 장면에서 특정 순간 이동 목적지를 지시할 수도 있습니다.

• 작업 영역: 인체공학적 환경을 조성합니다. "작업 영역"은 사용자가 대부분의 시간이 소요되는 정보를 소비하고 콘텐츠와 상호 작용하는 영역입니다. 머리 움직임을 최소화하고 쉬운 동작을 사용하여 피로를 피하십시오.

• 시야각: 사용자가 머리를 너무 많이 움직이게 하면 근육 피로를 유발하고 멀미 가능성이 높아집니다. 평균 편안한 시야각은 사용자가 현재 보고 있는 곳에서 약 15~20° 떨어져 있습니다. 사용자가 편안하게 사용할 수 있는 영역 밖에 중요한 콘텐츠를 배치하지 마세요.

가상 환경과의 상호작용 -

가상 환경에서 다양한 종류의 작업을 처리하려면 사용자에게 다양한 종류의 상호 작용이 필요합니다. 하드웨어 VR 장치와 컨트롤러가 다르기 때문에 웨어러블마다 상호 작용도 다릅니다. 상호 작용 방법에 따라 두 가지 주요 내장 메뉴 범주가 있습니다. 즉, 한 손을 사용하는 범주와 양손을 사용하는 범주입니다. 

• 한 손 상호 작용: 한 손 상호 작용이란 Vive 명령 중 하나만을 사용하여 메뉴를 조작한다는 의미입니다. 한 손 상호 작용의 두 가지 방법, 즉 동적 메뉴와 정적 메뉴를 구분할 수 있습니다. 정적 메뉴는 선택 항목 수가 적고 동시에 표시될 수 있는 경우 가장 좋은 옵션입니다. 그 좋은 예가 Vive용 Space Pirate Trainer입니다. 

• 양손 상호 작용: 양손 상호 작용이란 손 컨트롤 중 하나에 내장된 메뉴가 표시되고 다른 손 컨트롤은 입력 장치로 사용되는 경우를 의미합니다. 이러한 종류의 상호 작용은 더욱 현실적이고 자연스럽습니다. 특히 폴더 또는 태블릿 효과를 달성하는 경우, 즉 상호 작용이 태블릿 또는 유사한 터치 가능 장치와의 일반적인 상호 작용을 재현하는 경우 더욱 그렇습니다. 

학습 :-

사용자에게 시각적 단서와 피드백 제공: 시각적 단서와 촉각 단서를 결합하여 주의를 유도하고 개체가 실제처럼 느껴지도록 하여 존재감을 강화합니다. 시각적 또는 청각적 설명 없이 햅틱 피드백을 사용하면 컨트롤러가 진동하면서 사용자가 컨트롤러를 내려다보게 됩니다. 진동이 시각 또는 청각 신호와 결합되면 사용자는 일반적으로 관계를 직관적으로 이해할 것입니다.

친숙한 UI 구성 요소: VR 애플리케이션은 익숙하지 않은 가상 환경에서 사용자의 소외감을 최소화하기 위해 친숙한 2D 인터페이스를 준수해야 합니다. 인터페이스와 인터랙션을 만들 때 2D 기반의 모바일과 웹 UI의 요소를 활용하면 익숙한 액션과 인터페이스에 익숙해져 3D 인터랙션을 더 잘 이해하고 해석할 수 있습니다.

참고 

https://www.linkedin.com/pulse/designing-interfaces-virtual-reality-environments-suyash-ekre

https://youtu.be/CDrSGeiA1a8?list=PLTFRwWXfOIYBIPKhWi-ZO_ITXqtNuqj6j

새 씬을 만들고 메인 카메라를 지운후 XR Origin을 생성합니다.

이어서 Left, Right Controller를 선택하고 XR Controller를 제외한 나머지 컴포넌트들을 제거 합니다.

Left, Right Controller를 선택후 Model Prefab을 None으로 설정 합니다.

Left, Right Controller에 컨트롤러 모델을 넣어주고 

XR Controller의 Model프로퍼티에 넣어줍니다.

실행후 컨트롤러가 잘 나오는지 확인 합니다,

XR Origin을 선택후 Tracking Origin Mode를 Floor로 설정하고 

XR Origin, Camera Offset의 위치를 0으로 초기화 합니다.

빈오브젝트 (Flat UI)를 생성후 자식으로 XR > UI Canvas를 생성 해줍니다.

Flat UI의 위치와 크기를 조절 합니다.

함께 생성된 EventSystem의 XR UI Input Module컴포넌트가 부착 되고 Input System UI Actions에 내용이 채워져 있는지 확인 합니다.

채워져 있지 않다면 물음표 옆에 버튼을 눌러 XRI Default XR UI Input Module프리셋을 선택 합니다.

Canvas를 선택하고 가로 세로 길이와 Image컴포넌트를 부착 합니다.

캔버스 자식으로 버튼을 만들고 

트랜지션을 Color Tint로 변경(Default) 후 색을 설정 하고 Navigation을 None으로 설정해주세요 

Ray Interactor 프리팹에서 찾아 Left, Right Controller에 넣어 줍니다.

실행후 결과를 확인합니다.

이때 거리가 너무 가까우면 Flat UI를 선택해 Z 값을 수정 합니다.

버튼을 선택하고 

Image 컴포넌트의 Source Image를 None을 설정 한뒤 Color의 알파를 0으로 만들어 줍니다.

Canvas Renderer컴포넌트의 Cull Transparent Mesh를 언체크 합니다.

Button을 선택해 Image를 추가 하고 

앵커 프리셋을 사용해 스트레치 합니다.

Image컴포넌트의 Raycast Target을 언체크 합니다.

적당한 이미지를 Source Image에 넣고 메터리얼도 넣어주세요 

텍스트를 Image자식으로 넣고 

Extra Settings의 Raycast Target을 언체크 합니다.

이제 버튼을 선택해 

Target Graphic에 Image를 넣어 줍니다.

Image를 선택하고 Pos Z의 값을 -10정도 설정 합니다.

Button을 선택하고 

XR poke Follow Affordance컴포넌트를 부착후 Clamp To Max Distance를 체크 한후 Max Distance의 값을 10으로 설정 합니다.

Poke Follow Transform에 Image를 넣어 줍니다.

Flat UI를 선택후 Z 값을 수정 합니다.(너무 가깝지도 너무 멀지도 않게)

프로젝트 창에서 Poke Interactor프리팹을 찾아 Left, Right Controller에 넣어 줍니다.

Left Controller를 선택하고 XR Interaction Group컴포넌트를 부착 합니다.

Starting Group Memebers에 + 버튼을 눌러 필드를 두개 만든후 Poke Interactor -> Ray Interactor순으로 넣어 줍니다.

오른쪽도 동일하게 해줍니다.

Poke Interactor의 Point Point 자식으로 있는 실린더는 제거 합니다.

Poke Point를 선택해 메터리얼을 빨강으로 변경해주고 

위치를 컨트롤러 모델 앞쪽으로 이동 시켜 줍니다.

너무 멀다면 위치를 수정해주세요 

실행후 결과를 확인 합니다.

Flat UI를 선택하고 

XR Grab Interactable컴포넌트를 부착 합니다.

Throw On Detach는 언체크 합니다.

함께 부착되 Rigidbody의 Use Gravity는 언체크 하고 Is Kinematic은 체크 합니다.

Flat UI자식으로 빈오브젝트 Collider를 생성하고 

Box Collider를 부착 한후 size를 조절 합니다.

다시 Flat UI를 선택하고 XR Grab Interactable컴포넌트의 Colliders에 넣어 줍니다.

Flat UI를 선택후 자식으로 빈오브젝트 (Attach)를 생성한후 위치를 조절 합니다.

XR Grab Interactable의 Attach Transform에 넣어 줍니다.

Ray Interactor를 선택하고 Achor Controller프로퍼티의 Rotation Speed를 0으로 설정 합니다.

실행후 결과를 확인 합니다.

슬라이더 만들기 

버튼을 살짝 위로 올려주고 

크기를 정해 줍니다.

자식으로 Image(Fill Area Background)를 생성하고 앵커 프리셋으로 스트레치 합니다.

그 자식으로 Image( Fill)을 생성 합니다.

앵커 프리셋으로 알트만 눌러 왼쪽 으로 붙이고 위아래 스트레치 합니다.

Slider게임 오브젝트를 선택하고 Slider컴포넌트를 부착후 Fill Rect에 Fill오브젝트를 넣어 줍니다.

Value를 수정해 슬라이더가 정상동작 하는지 확인 합니다.

데코 하기 

슬라이더의 Transition의 컬러들을 변경후 Target Graphic 에 Fill을 넣어 주고 Navigation을 None으로 설정 합니다.

실행후 결과를 확인 합니다.

이전시간에 만들었던 부분부터 추가 하면서 만들겠습니다.

이번시간에 만들것은 Slider입니다.

보통의 슬라이더와 다른게 없기 때문에 편하게 만들어 주시면 됩니다.

빈 오브젝트를 만들고 

대략 정면에 오도록 위치 시키고 크기도 줄여 줍니다.

Flat UI를 선택후 우클릭하고 XR > UI Canvas를 생성 합니다.

이미지를 부착 합니다.

Canvas를 선택하고 빈오브젝트 (Slider)를 생성 합니다.

슬라이더 크기를 정해주고 

자식으로 빈 오브젝트 Fill Area Background를 생성 합니다.

Image컴포넌트를 부착하고 앵커 프리셋을 사용해 스트레치합니다.

Fill Area Background를 선택하고 자식으로 Image를 만들고 이름을 Fill로 변경 합니다.

앵커프리셋과 Pos X, Top, Pos Z, Width, Bottom을 0으로 설정 합니다.

이제 슬라이더를 선택하고 

Target Graphic과 Fill Rect에 Fill오브젝트를 넣어 줍니다.

슬라이더의 Value를 움직여 슬라이더가 잘 동작 하는지 확인 합니다.

테스트 해보기 

Slider를 선택해 Transition을 Color Tint로 설정후 

변경 합니다.

실행후 결과를 확인 합니다.

핸들 만들기 

Slider를 선택후 빈오브젝트 (Handle Slide Area)를 생성 합니다.

앵커 프리셋을 사용해 스트레치 합니다.

이미지를 하나 만들어 주고 

Handle이라는 이름으로 변경합니다.

Source Image를 넣어주고 

Set Native Size를 눌러줍니다.

앵커 프리셋을 오른쪽으로 옮겨주고 

핸들을 앵커에 반쯤 걸리게 합니다.

Slider를 선택하고 

Handle Rect에 넣어 줍니다.

Value를 조절해가며 핸들이 잘 위치 하는지 확인 합니다.

테스트 

테스트 

실행후 결과를 확인 합니다.

사실 그냥 UI를 만드는거랑 별반 다를바 없습니다.

저는 메이플 폰트를 사용해 봤습니다.

Character Sequence (Decimal)는 일련의 숫자로 표현된 문자열을 나타내는 방법 중 하나입니다. 이것은 주로 문자열을 숫자로 나타내는 데 사용되며, 각 문자에 대해 해당 문자의 유니코드 코드 포인트 값을 10진수로 표현합니다.

예를 들어, "Hello"라는 문자열을 Character Sequence (Decimal)로 나타내면 다음과 같이 될 수 있습니다:

• H: 72 (유니코드 코드 포인트)
• e: 101 (유니코드 코드 포인트)
• l: 108 (유니코드 코드 포인트)
• l: 108 (유니코드 코드 포인트)
• o: 111 (유니코드 코드 포인트)

따라서 "Hello"는 Character Sequence (Decimal)로 표현하면 72 101 108 108 111과 같습니다.

이러한 형식은 컴퓨터 프로그래밍에서 문자열 처리나 텍스트 인코딩과 관련된 작업에서 유용하게 사용될 수 있습니다. 코드 포인트를 10진수로 표현함으로써 문자열을 숫자로 다루거나 변환하는 데 도움을 줄 수 있습니다.

32-126,44032-55203,12593-12643,8200-9900

주어진 숫자 범위들은 각각 다른 유니코드 코드 포인트 범위를 나타냅니다. 각 범위의 시작과 끝에 대한 설명은 다음과 같습니다:

1. 32-126: 이 범위는 ASCII 문자의 범위입니다. 이 범위에는 영문 대소문자, 숫자, 구두점 및 일부 특수 문자가 포함되어 있습니다.
2. 44032-55203: 이 범위는 한글 문자의 범위입니다. 한글 문자들은 대부분 이 범위 내에서 유니코드 코드 포인트로 나타납니다.
3. 12593-12643: 이 범위는 한글 자모음의 범위입니다. 한글 문자는 자음과 모음의 결합으로 구성되며, 이 범위에 해당하는 코드 포인트들은 자모음을 표현합니다.
4. 8200-9900: 이 범위는 다양한 유니코드 문자와 기호를 포함하는 범위입니다. 이 범위에는 다양한 문자와 기호가 있을 수 있으며, 어떤 구체적인 문자나 기호를 나타내는지는 코드 포인트에 따라 다릅니다.

각 코드 포인트 범위는 해당 범위에 속하는 문자나 기호를 나타내는 데 사용됩니다. 이러한 코드 포인트를 이용하여 특정 문자나 기호를 참조하거나 처리할 수 있습니다.

1. 버튼 만들기 

빈 오브젝트 Flat UI를 만들고 우클릭후 XR > UI Canvas를 생성 합니다.

Canvas를 선택후 버튼을 만들어줍니다.

Button을 선택하고 다음과 같이 

Transition을 Color Tint로 설정후 

로 설정 합니다.

Navigation을 None으로 설정 합니다.

Unity의 Button 컴포넌트의 Navigation 프로퍼티는 UI 요소 간의 탐색 순서와 포커스 동작을 정의하는 데 사용됩니다. Navigation은 주로 UI 요소 사이의 상호 작용 및 키보드 또는 컨트롤러로 포커스를 이동하는 데 유용합니다.

Navigation 프로퍼티는 아래와 같이 구성되어 있습니다:

1. Mode (모드): 이 속성은 Navigation의 동작 모드를 정의합니다. 다음과 같은 모드가 있습니다.
   • None (없음): 탐색이 비활성화되며 요소 사이의 포커스 이동이 불가능합니다.
   • Horizontal (수평): 요소 간의 좌우 방향 탐색을 허용합니다.
   • Vertical (수직): 요소 간의 상하 방향 탐색을 허용합니다.
   • Automatic (자동): Unity는 요소 간의 상대적 위치에 따라 가장 적절한 방향으로 자동으로 탐색합니다.
2. Select On Up/Down/Left/Right (위/아래/왼쪽/오른쪽에서 선택): 이 속성들은 요소의 상, 하, 좌, 우 방향에서 포커스 이동을 정의합니다. 예를 들어, "Select On Up"을 설정하면 요소가 위쪽 방향으로 포커스를 이동할 때 어떤 요소가 선택되어야 하는지를 지정할 수 있습니다.
3. Default Select (기본 선택): 이 속성은 요소가 활성화될 때 포커스를 어느 요소에 설정할지를 결정합니다. 보통 첫 번째 요소로 설정하여 초기에 포커스가 어디로 이동할지를 정할 수 있습니다.

Navigation 프로퍼티는 주로 UI 요소 간의 상호 작용 및 접근성을 향상시키기 위해 사용됩니다. 예를 들어, 게임 메뉴에서 버튼 간의 탐색을 제어하거나, 키보드 또는 컨트롤러를 사용하여 UI 요소를 탐색하고 선택하는 데 활용할 수 있습니다. 이를 통해 사용자 경험을 개선하고 UI를 보다 사용자 친화적으로 만들 수 있습니다.

포커스가 UI 요소에서 벗어나고 다시 해당 UI 요소로 포커스가 돌아올 때 Navigation과 연관이 있습니다.

이러한 상황에서 Navigation은 UI 요소 간의 포커스 이동을 제어하고 정의하는 데 사용됩니다.

다음은 포커스가 UI에서 벗어났다가 다시 포커싱될 때 Navigation이 어떻게 작용하는지의 예시입니다:

1. 포커스가 벗어남: 예를 들어, 현재 포커스가 버튼 A에 있고 사용자가 특정 동작을 수행하여 버튼 A에서 포커스가 벗어날 때, Navigation 설정에 따라 포커스 이동이 발생할 수 있습니다.
2. 포커스가 돌아옴: 이후 사용자가 다시 해당 UI 요소로 포커스를 가져오면, Navigation 설정에 따라 어떤 요소로 포커스가 이동해야 하는지가 결정됩니다. 예를 들어, 버튼 A에서 다른 버튼 B로 포커스가 이동하도록 Navigation이 설정되어 있다면, 포커스가 돌아올 때 버튼 B로 이동할 것입니다.

Navigation은 UI 요소 간의 탐색 및 포커스 이동을 정의하는 데 중요한 역할을 합니다. 사용자가 UI를 상호 작용하거나 키보드 또는 컨트롤러로 포커스를 이동할 때, Navigation 설정에 따라 UI 요소 간의 탐색 경로가 결정되며 사용자 경험을 향상시키는 데 도움이 됩니다.

Navigation 기능은 다음과 같은 상황에서 필요하며 사용됩니다:

1. 접근성 향상: Navigation은 웹 사이트나 애플리케이션에서 포커스 이동을 통해 접근성을 향상시킵니다. 특히 시각 장애인이나 키보드 또는 스크린 리더를 사용하는 사용자에게 중요합니다. Navigation을 효과적으로 구성하면 사용자가 키보드 또는 스크린 리더를 통해 웹 페이지 또는 앱을 쉽게 탐색하고 상호 작용할 수 있습니다.
2. 유저 인터페이스 (UI) 요소 간의 포커스 이동: 사용자는 키보드 또는 컨트롤러를 사용하여 UI 요소 간에 포커스를 이동할 수 있어야 합니다. 예를 들어, 버튼, 입력 필드, 메뉴 항목, 링크 등의 UI 요소를 포커스할 때 Navigation 설정에 따라 어떤 요소로 이동할지가 결정됩니다.
3. 게임 메뉴 및 인터페이스: 게임에서 Navigation은 주로 게임 메뉴, 대화 상자, 인게임 인터페이스 요소 (예: 아이템 목록, 버튼) 등을 다룰 때 사용됩니다. 특히 콘솔 게임 또는 휴대폰 게임과 같은 플랫폼에서는 Navigation이 키보드나 컨트롤러를 사용하여 UI 요소 간의 탐색을 관리하는 데 중요합니다.
4. 포커스 제어: 사용자 경험을 향상시키기 위해 포커스를 정확하게 제어하고 사용자가 예상한 대로 UI 요소 간을 이동하도록 돕습니다. 예를 들어, 사용자가 엔터 키를 누를 때 버튼에 대한 클릭 동작을 수행하기 위해 Navigation을 설정할 수 있습니다.

Navigation 설정은 사용자의 편의성과 접근성을 고려하여 설계되며, UI 요소 간의 포커스 이동이나 상호 작용을 원활하게 만드는 데 도움이 됩니다. 게임 및 애플리케이션 개발에서 이 기능을 적절하게 활용하면 사용자 경험을 향상시키고 사용자가 UI를 더 쉽게 다룰 수 있게 됩니다.

실무적인 측면에서 Navigation의 필요성과 사용 예시를 살펴보겠습니다. Unity를 사용한 게임 개발을 예로 들겠습니다.

게임 메뉴 탐색:

• 시작 화면: 게임이 시작될 때 사용자는 주로 "시작", "설정", "크레딧" 등의 메뉴 옵션 중 하나를 선택할 수 있어야 합니다. Navigation 설정을 사용하여 각 메뉴 옵션으로 포커스 이동을 관리할 수 있습니다. 예를 들어, "아래" 키를 누르면 "설정" 메뉴로 포커스가 이동하고, "위" 키를 누르면 "시작" 메뉴로 포커스가 이동하도록 설정할 수 있습니다.
• 설정 메뉴: 사용자가 "설정" 메뉴에 들어가면, Navigation을 사용하여 화면 내의 설정 옵션 간에 포커스를 이동할 수 있습니다. 예를 들어, "음량 조절"과 "해상도 설정" 사이를 탐색하거나 "뒤로 가기" 버튼을 사용하여 메뉴를 빠져나올 수 있도록 구성할 수 있습니다.

대화 상자와 인터페이스 요소:

• 게임 내 대화 상자: 게임에서 캐릭터 간 대화 또는 스토리 진행을 위해 대화 상자를 사용할 때, Navigation을 이용하여 대화 상자 내의 "다음" 버튼 또는 "선택지"를 포커스할 수 있습니다. 이렇게 하면 플레이어가 키보드 또는 컨트롤러를 사용하여 대화를 진행할 때 편리하게 탐색할 수 있습니다.
• 아이템 목록: 게임에서 아이템을 관리하는 인터페이스에서 Navigation을 사용하여 아이템 목록 간의 포커스 이동을 정의할 수 있습니다. 플레이어가 아이템을 선택하거나 사용할 때, Navigation 설정을 활용하여 사용자 경험을 향상시킬 수 있습니다.

접근성 향상:

• 웹사이트 또는 애플리케이션: 웹 개발에서도 Navigation은 접근성을 향상시키는 데 중요한 역할을 합니다. 특히 키보드로 웹 사이트를 탐색하는 사용자에게 중요합니다. Navigation을 사용하여 메뉴, 링크, 양식 입력 필드 등의 웹 요소 간의 포커스 이동을 관리하면 사용자가 쉽게 웹 사이트를 탐색하고 상호 작용할 수 있습니다.

이러한 예시에서 Navigation은 사용자 경험을 개선하고 인터페이스를 보다 직관적으로 만드는 데 사용됩니다. UI 요소 간의 탐색을 관리하여 사용자가 원하는 작업을 수행하기 쉽도록 도와줍니다.

버튼은 찌르기 상호 작용을 할수도 있습니다.

이때는XR > UI Canvas를 선택합니다.

이름을 변경하고 

Graphic Raycaster컴포넌트를 제거 합니다.

Image와 Button컴포넌트를 추가 합니다.

이미지의 알파를 0으로 설정 하고 

Canvas Renderer 의 Cull Transparent Mesh는 체크 해제 합니다.

버튼의 Transition 색을 변경하고 Navigation을 None으로 설정 합니다.

자식으로 Image를 생성하고 

앵커 프리셋을 스트레치 해주고 Pose Z 를 -10으로 설정 합니다.

이미지는 다음과 같이 설정하고 

버튼을 선택해 Target Graphic에 넣어줍니다.

이어서 XR Poke Follow Affordance를 부착 하고 

Poke Follow Transform에 Image를 넣어주고 Clamp To Max Distance를 체크 후 Max Distance를 10으로 설정 합니다.

프로젝트 창에서 Poke Interactor를 찾아 Left Controller에 부착 하고 

Unpack후 실린더를 제거 합니다.

메터리얼을 빨강으로 변경하고 약간 컨트롤러 앞으로 이동합니다.

Image를 선택하고 Raycast Target을 체크 해제 합니다.

이미지를 선택하고 Text를 추가 한후 

Raycast Target을 체크 해제 합니다.

이제 실행후 결과를 확인 합니다.