Update 2025-01-03-VR-UI.md

_posts/2025-01-03-VR-UI.md

@@ -10,32 +10,42 @@ author_profile: false    # 작성자 프로필 표시 여부
 sidebar:                 # 사이드바 설정
     nav: "docs"         # docs 네비게이션 사용
 ---
-# VR UI
+# VR UI 구현
 
-1. Unity UI Interaction
+## 1. Unity UI Interaction 개요
 
-- 이번 강의에서는 콘트롤러로 UI의 버튼을 클릭했는지의 여부를 알 수 있는 UI Interaction 에 대한 내용이다.
+VR 환경에서 콘트롤러를 사용하여 UI 버튼과 상호작용하는 방법에 대해 알아보겠습니다.
 
-1. 우선 Right Controller 에서 XR Ray Ineractor -> Ray Configuration -> Line Type을 [Straight Line] 타입으로 바꾸도록 한다.
+## 2. UI Interaction 구현
 
-![https://lh7-us.googleusercontent.com/3vbuypfNJyhXV0B0IqQwdRBWE5IJKsE_jfnDLr3QEf8O7rYUu5IAUUHgItVUTjNQ6cNipGzszbG0AIIft2m8b6DrQomLe1TmCzwRyianK_2bLUPK1mywUnYjfF3MFL-8wkqFudZ_h4z9EvZpxHvjT2s](https://lh7-us.googleusercontent.com/3vbuypfNJyhXV0B0IqQwdRBWE5IJKsE_jfnDLr3QEf8O7rYUu5IAUUHgItVUTjNQ6cNipGzszbG0AIIft2m8b6DrQomLe1TmCzwRyianK_2bLUPK1mywUnYjfF3MFL-8wkqFudZ_h4z9EvZpxHvjT2s)
+### 2.1 Ray Interactor 설정
+1. Right Controller의 XR Ray Interactor 컴포넌트에서 Ray Configuration의 Line Type을 [Straight Line]으로 변경합니다.
 
-1. 하이어라키에 오른쪽 마우스 버튼 클릭 → XR → UI Canvas 캔버스를 하나 만듬
+![Ray 설정](https://lh7-us.googleusercontent.com/3vbuypfNJyhXV0B0IqQwdRBWE5IJKsE_jfnDLr3QEf8O7rYUu5IAUUHgItVUTjNQ6cNipGzszbG0AIIft2m8b6DrQomLe1TmCzwRyianK_2bLUPK1mywUnYjfF3MFL-8wkqFudZ_h4z9EvZpxHvjT2s)
 
-![https://lh7-us.googleusercontent.com/8GRCY8mQKH-n86x-XoVydoTaXEjLnP5n5CbG06fyaOjwUxEUSikjZtjdAXyAew1eQCV8l6LmKZBquih0R8TwRgOJoAO4I4cMcslcH2d0zYV6lyORvixZwkvuPR6vKzvYA5BtLosPNROxQcDAhh6voFc](https://lh7-us.googleusercontent.com/8GRCY8mQKH-n86x-XoVydoTaXEjLnP5n5CbG06fyaOjwUxEUSikjZtjdAXyAew1eQCV8l6LmKZBquih0R8TwRgOJoAO4I4cMcslcH2d0zYV6lyORvixZwkvuPR6vKzvYA5BtLosPNROxQcDAhh6voFc)
+### 2.2 UI Canvas 생성
+1. 하이어라키 → XR → UI Canvas를 생성합니다.
 
-1. 캔바스의 Rect Transform(0, 1, 5), Scale(0.01, 0.01, 0.01) 으로 설정
+![Canvas 생성](https://lh7-us.googleusercontent.com/8GRCY8mQKH-n86x-XoVydoTaXEjLnP5n5CbG06fyaOjwUxEUSikjZtjdAXyAew1eQCV8l6LmKZBquih0R8TwRgOJoAO4I4cMcslcH2d0zYV6lyORvixZwkvuPR6vKzvYA5BtLosPNROxQcDAhh6voFc)
 
-![https://lh7-us.googleusercontent.com/yVE3-wDJPDn7iVBc1eEQBLE2zzhSLFJXhwYBV1L8lPjOA4_fVloJSC8oRjeJkv27i8c5QQssQmT1hAp0BWBbTw5a9_2LrYGUYUpW8KIFs9gLuEPPamS-zUk5jmIYdTvDQrfsOr-hPi3_dQEQYuUplCg](https://lh7-us.googleusercontent.com/yVE3-wDJPDn7iVBc1eEQBLE2zzhSLFJXhwYBV1L8lPjOA4_fVloJSC8oRjeJkv27i8c5QQssQmT1hAp0BWBbTw5a9_2LrYGUYUpW8KIFs9gLuEPPamS-zUk5jmIYdTvDQrfsOr-hPi3_dQEQYuUplCg)
+2. Canvas의 Transform 설정:
+   - Position: (0, 1, 5)
+   - Scale: (0.01, 0.01, 0.01)
 
-1. 캔바스의 자식으로 UI→ Button - TextMeshPro 를 선택하여 Button객체를 하나 만든다. Import TMP Essentials 버튼을 눌러서 임포트 하도록 한다.
+![Canvas 설정](https://lh7-us.googleusercontent.com/yVE3-wDJPDn7iVBc1eEQBLE2zzhSLFJXhwYBV1L8lPjOA4_fVloJSC8oRjeJkv27i8c5QQssQmT1hAp0BWBbTw5a9_2LrYGUYUpW8KIFs9gLuEPPamS-zUk5jmIYdTvDQrfsOr-hPi3_dQEQYuUplCg)
 
-![https://lh7-us.googleusercontent.com/QFRZ1M8fGadK8Sw05DpoSvMaGvhki4N1ghf6XmdJhRM-73L9YmV5-Y0khChSUSIoiPGdv715jcDfL3d_mEmXX-gny6KIAX4l2eVbyAolb-7VqHf0ANCRtt3IPLQlpULNU91Nzcii7BfmVJXJ-k7L_Z8](https://lh7-us.googleusercontent.com/QFRZ1M8fGadK8Sw05DpoSvMaGvhki4N1ghf6XmdJhRM-73L9YmV5-Y0khChSUSIoiPGdv715jcDfL3d_mEmXX-gny6KIAX4l2eVbyAolb-7VqHf0ANCRtt3IPLQlpULNU91Nzcii7BfmVJXJ-k7L_Z8)
+### 2.3 UI 버튼 추가
+1. Canvas의 자식으로 UI → Button - TextMeshPro를 추가합니다.
+2. TMP Essentials를 임포트합니다.
 
-1. 버튼의 속성을 아래와 같이 설정한다.
+![버튼 생성](https://lh7-us.googleusercontent.com/QFRZ1M8fGadK8Sw05DpoSvMaGvhki4N1ghf6XmdJhRM-73L9YmV5-Y0khChSUSIoiPGdv715jcDfL3d_mEmXX-gny6KIAX4l2eVbyAolb-7VqHf0ANCRtt3IPLQlpULNU91Nzcii7BfmVJXJ-k7L_Z8)
 
-![https://lh7-us.googleusercontent.com/o6Wr862RsGtyewO3AYVwwzBPSN55ybv1bvctGaH13XUKPpAEYWejYZ1yzyEpwPevHxnIFSlgvNPmWBxrFu656zDLRUefdWu5Aww0pB_yuO9_d5Nng1p7iXsrz3BoGM_sgwjXYsLXegH0d2HMAKKW3J0](https://lh7-us.googleusercontent.com/o6Wr862RsGtyewO3AYVwwzBPSN55ybv1bvctGaH13XUKPpAEYWejYZ1yzyEpwPevHxnIFSlgvNPmWBxrFu656zDLRUefdWu5Aww0pB_yuO9_d5Nng1p7iXsrz3BoGM_sgwjXYsLXegH0d2HMAKKW3J0)
+3. 버튼의 속성을 설정합니다.
 
-1. 저장 한 다음 실행 시켜 보면 버튼에 닿았을 때 인터랙션이 일어나는 것을 확인할 수 있다. 스페이스바하고 왼쪽 마우스 버튼을 클릭하면 버튼이 토글 (클릭되서 깜박임) 되는 것을 확인할 수 있다.
+![버튼 설정](https://lh7-us.googleusercontent.com/o6Wr862RsGtyewO3AYVwwzBPSN55ybv1bvctGaH13XUKPpAEYWejYZ1yzyEpwPevHxnIFSlgvNPmWBxrFu656zDLRUefdWu5Aww0pB_yuO9_d5Nng1p7iXsrz3BoGM_sgwjXYsLXegH0d2HMAKKW3J0)
 
-![https://lh7-us.googleusercontent.com/B49qEy7Wzoy5hWxVUjO7IkCx60q_-PHDxGKxtOYMTM6ZuYl_dje_aSEMyxy8K6bAhMtqcYW0lsiL-8tWt6tsX9psWPS0D7EUVn3lGlzCr_3_BCnSBE-Q1xqs4w78_bWZbzCg1Z7E7WG__88lJvb0Gns](https://lh7-us.googleusercontent.com/B49qEy7Wzoy5hWxVUjO7IkCx60q_-PHDxGKxtOYMTM6ZuYl_dje_aSEMyxy8K6bAhMtqcYW0lsiL-8tWt6tsX9psWPS0D7EUVn3lGlzCr_3_BCnSBE-Q1xqs4w78_bWZbzCg1Z7E7WG__88lJvb0Gns)
+### 2.4 동작 확인
+- 실행 시 버튼과 레이가 상호작용하는 것을 확인할 수 있습니다.
+- 스페이스바와 마우스 왼쪽 버튼으로 버튼 클릭을 테스트할 수 있습니다.
+
+![동작 확인](https://lh7-us.googleusercontent.com/B49qEy7Wzoy5hWxVUjO7IkCx60q_-PHDxGKxtOYMTM6ZuYl_dje_aSEMyxy8K6bAhMtqcYW0lsiL-8tWt6tsX9psWPS0D7EUVn3lGlzCr_3_BCnSBE-Q1xqs4w78_bWZbzCg1Z7E7WG__88lJvb0Gns)