UI Interaction (Button) Ray Interaction, Poke Interaction

 

사실 그냥 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로 설정후 

Normal Color	2096F3
Highlighted Color	1870B6
Pressed Color	58B0F6
Selected Color	2096F3

 

로 설정 합니다.

 

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을 체크 해제 합니다.

 

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