Unity VR 튜토리얼 9편

🧾 VR에서 UI 버튼 만들기 – XR 환경에서 가상 패널 구현하기

XR Interaction Toolkit 기반
Meta Quest, PCVR 환경에서 실제 작동하는 인터랙션 UI
메뉴 버튼, 슬라이더, 패널 등 VR HUD 구성 실습

---

🎯 학습 목표

• XR 환경에서도 사용 가능한 UI Canvas 구성법 익히기
• VR 컨트롤러로 버튼 클릭 가능하게 만들기
• XR Interaction Toolkit의 UI Input Module 활용

---

✅ 개발 환경 준비

항목설명

Unity 버전	2021.3 LTS 이상 (URP 가능)
XR Interaction Toolkit	설치 완료 상태
XR Rig 설정	XR Origin + Left/Right Controller
UI 시스템	Unity 기본 UI + TMP + EventSystem 구성

 

---

🛠️ Step 1. XR UI를 위한 Canvas 설정

📌 World Space Canvas 만들기

1. Hierarchy > UI > Canvas 생성
2. Render Mode → World Space
3. 위치 조정: Position: (0, 1.5, 1.5) 정도 (눈 앞에 떠 있게)
4. 크기 조절: Width: 500, Height: 300
5. Canvas에 Graphic Raycaster 컴포넌트 자동 포함됨

---

📝 Step 2. UI 요소 만들기 (버튼)

1. Canvas 하위에 UI > Button 추가
2. 버튼 Text를 "시작하기" 또는 "다음 단계"로 설정
3. 폰트 → TextMeshPro (설치 필요 시 자동 유도됨)
4. 크기 및 위치 적절히 조정

✅ 버튼 클릭 시 반응하는 public void OnStartClicked() 함수는 뒤에서 연결

---

🧰 Step 3. XR UI Input Module 적용

📌 XR용 이벤트 처리 시스템 설정

1. Hierarchy > XR Interaction Manager 확인
2. Hierarchy > Event System 존재 확인
   • 없다면 UI > EventSystem 직접 추가
3. Input System UI Input Module → XR 전용 이벤트 처리기 적용

---

✅ XR Ray Interactor 연결

1. LeftHand Controller 선택
2. XR Ray Interactor 컴포넌트 추가 (버튼 클릭용 광선)
3. 레이 길이 설정: Max Raycast Distance = 10
4. Line Visual 추가하면 레이저처럼 보이는 라인 생성 가능

---

💻 Step 4. UI 반응 스크립트 연결

📄 VRUIButtonHandler.cs 생성:

• 해당 스크립트를 Canvas에 붙이거나, 빈 오브젝트 생성 후 연결

---

🔗 Step 5. 버튼 클릭 이벤트 설정

1. 버튼 오브젝트 선택
2. Button > On Click() 항목에 이벤트 추가
3. VRUIButtonHandler 스크립트가 붙은 오브젝트 드래그
4. OnStartClicked() 함수 선택

---

🧪 Step 6. 테스트

✅ VR 기기 착용 후
→ 컨트롤러에서 레이저 포인터로 버튼 가리기
→ 트리거 누르면 버튼 클릭 이벤트 실행됨

---

💡 팁: 가상 UI 확장 예시

기능설명

슬라이더 추가	볼륨 조절, 밝기 등 직접 구현 가능
탭 전환	UI 패널 여러 개 만들어 SetActive() 전환
모션으로 버튼 누르기	Direct Interactor를 버튼에 부딪히게 해서 클릭
UI 팝업창	Instantiate()로 동적 UI 생성 가능

 

---

📚 구조 예시

---

✅ 마무리 요약

구현 기능상태

XR 환경에서 UI Canvas 생성	✅ 성공
VR 컨트롤러로 버튼 클릭	✅ 구현 완료
OnClick 이벤트 연동	✅ 정상 작동
확장 가능한 UI 구조	✅ 확장성 확보

 

---

📘 다음 튜토리얼 예고 – 10편

👉 “VR에서 미니 게임 시작하기 – 목표 맞추기 & 점수판 구현”

• 오브젝트 발사
• 목표 충돌 감지
• 점수 카운팅 & UI HUD 업데이트