VR 코딩 교육
Unity VR 튜토리얼 9편
goodworld-info
2025. 5. 17. 09:30
🧾 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 만들기
- Hierarchy > UI > Canvas 생성
- Render Mode → World Space
- 위치 조정: Position: (0, 1.5, 1.5) 정도 (눈 앞에 떠 있게)
- 크기 조절: Width: 500, Height: 300
- Canvas에 Graphic Raycaster 컴포넌트 자동 포함됨
📝 Step 2. UI 요소 만들기 (버튼)
- Canvas 하위에 UI > Button 추가
- 버튼 Text를 "시작하기" 또는 "다음 단계"로 설정
- 폰트 → TextMeshPro (설치 필요 시 자동 유도됨)
- 크기 및 위치 적절히 조정
✅ 버튼 클릭 시 반응하는 public void OnStartClicked() 함수는 뒤에서 연결
🧰 Step 3. XR UI Input Module 적용
📌 XR용 이벤트 처리 시스템 설정
- Hierarchy > XR Interaction Manager 확인
- Hierarchy > Event System 존재 확인
- 없다면 UI > EventSystem 직접 추가
- Input System UI Input Module → XR 전용 이벤트 처리기 적용
✅ XR Ray Interactor 연결
- LeftHand Controller 선택
- XR Ray Interactor 컴포넌트 추가 (버튼 클릭용 광선)
- 레이 길이 설정: Max Raycast Distance = 10
- Line Visual 추가하면 레이저처럼 보이는 라인 생성 가능
💻 Step 4. UI 반응 스크립트 연결
📄 VRUIButtonHandler.cs 생성:
- 해당 스크립트를 Canvas에 붙이거나, 빈 오브젝트 생성 후 연결
🔗 Step 5. 버튼 클릭 이벤트 설정
- 버튼 오브젝트 선택
- Button > On Click() 항목에 이벤트 추가
- VRUIButtonHandler 스크립트가 붙은 오브젝트 드래그
- OnStartClicked() 함수 선택
🧪 Step 6. 테스트
✅ VR 기기 착용 후
→ 컨트롤러에서 레이저 포인터로 버튼 가리기
→ 트리거 누르면 버튼 클릭 이벤트 실행됨
💡 팁: 가상 UI 확장 예시
기능설명
| 슬라이더 추가 | 볼륨 조절, 밝기 등 직접 구현 가능 |
| 탭 전환 | UI 패널 여러 개 만들어 SetActive() 전환 |
| 모션으로 버튼 누르기 | Direct Interactor를 버튼에 부딪히게 해서 클릭 |
| UI 팝업창 | Instantiate()로 동적 UI 생성 가능 |
📚 구조 예시
✅ 마무리 요약
구현 기능상태
| XR 환경에서 UI Canvas 생성 | ✅ 성공 |
| VR 컨트롤러로 버튼 클릭 | ✅ 구현 완료 |
| OnClick 이벤트 연동 | ✅ 정상 작동 |
| 확장 가능한 UI 구조 | ✅ 확장성 확보 |
📘 다음 튜토리얼 예고 – 10편
👉 “VR에서 미니 게임 시작하기 – 목표 맞추기 & 점수판 구현”
- 오브젝트 발사
- 목표 충돌 감지
- 점수 카운팅 & UI HUD 업데이트