3D 가상현실에서 HMI 프로토타입을 제작하는 방법

이 단계별 가이드에서는 3D 가상 현실(VR) 환경에서 HMI(Human-Machine Interface) 디자인을 테스트하는 방법을 보여드립니다. 우리는 ProtoPie를 사용해 인터랙티브 HMI 프로토타입을 만들었으며, 이를 ProtoPie Connect를 통해 3D VR Unity 프로젝트에 통합하여 진정으로 몰입감 있는 테스트 경험을 제공할 수 있습니다.

프로세스의 각 단계를 함께 살펴보고, 이러한 도구가 자동차 디자인의 품질을 어떻게 향상시킬 수 있는지 알아보세요. 자동차 산업에서 HMI 디자인과 프로토타이핑을 향한 이 흥미진진한 여정을 시작해 봅시다!

아래 데모를 살펴보면 최종 결과가 어떤 모습일지 확인할 수 있습니다.

3D 프로토타이핑 소식과 팁을 받아보려면 가입하세요!

비디오

핵심 요약

1. HMI 프로토타입 만들기

2. Unity에서 프로젝트 만들기

3. ProtoPie의 프로토타입을 임베드하도록 Unity 설정하기

4. Unity에서 프로토타입 표시하기

5. ProtoPie와 Unity 간 데이터 연결 설정하기

6. 전문가 팁: 이 사용자 지정 템플릿을 사용해 프로토타입을 가져오세요

1. HMI 프로토타입 만들기

이 작업을 시작하려면 ProtoPie에서 HMI 프로토타입을 만들어야 합니다. 이미 프로토타이핑에 ProtoPie를 사용하고 있다면 이 단계는 건너뛰셔도 됩니다. 그렇지 않다면 ProtoPie로 나만의 자동차 대시보드 디자인하기. 방법을 먼저 알아보세요.

2. Unity에서 프로젝트 만들기

1. 이제 HMI 프로토타입을 만들었으니, ProtoPie를 사용하는 노트북이나 PC에 Unity를 다운로드하고 설치하세요. 데모에서는 Unity 버전 2021.3.14f1을 사용했으며, 이 버전 또는 그 이후의 장기 지원(LTS) 버전을 설치하는 것을 권장합니다.

2. 다음으로 Unity Hub에서 새 프로젝트를 만드세요. Test Track 템플릿을 선택하고 프로젝트 이름과 위치를 설정합니다. 이 템플릿은 Volvo에서 제공되며 Unity Editor를 설치할 때 함께 제공되고, 이 데모에 사용된 3D 환경을 제공합니다.

우리만큼 3D 프로토타이핑이 기대되시나요? 그렇다면 3D 프로토타이핑에 대한 업데이트와 팁을 받아보세요.에 가입하세요.

3. ProtoPie의 Pies(프로토타입)를 임베드하도록 Unity 설정하기

💡 Unity 프로젝트에 Webview(Web Browser)를 임베드하고 ProtoPie Connect의 Web Player 기능을 사용해 Pies를 표시할 것입니다.

1. 이 단계별 가이드에서는 Unity용 Vuplex 3D Webview for Windows and macOS 플러그인을 사용할 것입니다. 다른 대안에 비해 3D 프로젝트에서 웹뷰를 설정하기 훨씬 쉬워집니다.

2. Unity에서 Assets > Import Package > Custom Package.로 이동하세요. 다운로드한 Vuplex 플러그인을 찾아 Open을 선택한 다음, 프로젝트에 Import하세요.

3. Unity 프로젝트에서 Hierarchy 패널의 검색 상자를 사용해 **Canvas **객체를 찾으세요. 마우스 오른쪽 버튼을 클릭하고 Prefab > Open Asset in Context.를 선택합니다.

4. Hierarchy 패널에서 **Speed and Gear **객체를 삭제하세요. ProtoPie의 Pies로 대체할 예정이기 때문입니다.

Project 패널에서 검색하거나 수동으로 Assets > Vuplex > WebView> Core > Prefabs > Resources에서 CanvasWebViewPrefab을 찾으세요.

Project 패널의 **CanvasWebViewPrefab **을 드래그 앤 드롭하여 **Hierarchy **패널의 Canvas 아래로 이동합니다.

5. 웹뷰가 두 개 필요하므로 하나를 더 만들고, 이름을 WebViewCluster와 **WebViewCenter. **로 바꿉니다.

WebViewCluster는 운전석 앞의 클러스터 디스플레이를 담당하고, WebViewCenter는 운전자와 조수석 사이의 센터 디스플레이를 담당합니다.

6. **Scene pane **에서 적절한 도구를 사용해 **WebViewCluster **와 WebViewCenter 객체의 크기와 위치를 조정하세요.

아래의 inspector 패널 두 이미지를 확인하면 제가 WebViewCluster와 WebViewCenter 객체를 어떻게 조정했는지 볼 수 있습니다.

4. Unity에서 Pies 표시하기

💡 ProtoPie Connect는 Pies용 웹 URL을 생성할 수 있으며, 우리는 이 URL을 사용해 Unity에서 표시할 것입니다.

1. ProtoPie Connect에서 Unity 안에 표시할 Pies를 추가하세요. 우리는 두 개의 Pies, Cluster Display와 Center Display를 사용합니다.

아래에서 클라우드에 있는 두 개의 Pies(프로토타입)를 확인할 수 있습니다.

Cluster Display Pie

Center Display Pie

2. 해당 pie는 웹 브라우저에서 열 수 있습니다. 두 pie의 URL을 확인해 두세요. (ProtoPie Connect가 같은 PC/노트북에 있지 않다면 'localhost:9981'을 ProtoPie Connect 왼쪽 아래에 표시된 IP 주소로 바꾸세요. 위 스크린샷에서는 192.168.68.56:9981입니다)

3. Unity의 Hierarchy 패널,에서 위에서 만든 WebViewCluster와 **WebViewCenter **객체를 찾으세요. 각 객체의 Inspector 패널(오른쪽)에서 Canvas Web View Prefab (Script)를 찾습니다.

우리는** Initial URL (optional)**을 ProtoPie Connect의 Web Player에서 얻은 pie의 URL로 변경할 것입니다.

4. 테스트하려면 Play를 눌러 Unity 안에 임베드된 Pies를 확인하세요! (Simulator pane을 사용하면 더 잘 보이며, 키보드에서 C를 눌러 차 내부 시점으로 바꿀 수 있습니다).

💡 이 시점부터 프로토타입에서 하는 모든 변경과 편집은 ProtoPie Connect를 통해 자동으로 전달됩니다! (ProtoPie Connect에 추가된 동일한 Pie이고 URL이 변경되지 않는 한)

5. ProtoPie와 Unity 간 데이터 연결을 설정해 상호작용하게 만들기

💡 ProtoPie Connect는 다른 애플리케이션과의 통합을 가능하게 하기 위해 socket.io 기술을 사용합니다.

1. 이 단계별 가이드에서는 Github에서 다운로드할 수 있는 itisnajim의 Unity용 SocketIO 라이브러리를 사용합니다.

2. Project 패널에서 Assets 폴더로 이동해 그 안에 SocketIO라는 폴더를 만드세요. 위에서 다운로드한 SocketIOUnity zip 파일의 압축을 풀고, 해당 폴더를 Project 패널의 SocketIO 폴더로 드래그 앤 드롭합니다.

3. Assets > SocketIO 폴더를 마우스 오른쪽 버튼으로 클릭하고 C# Script를 만드세요. 이름은 SocketIOManager로 지정합니다.

4. 다음 코드를 SocketIOManager.cs 파일에 삽입하고 저장하세요.

💡 이것은 ProtoPie Connect의 브리지 앱으로, ProtoPie Connect의 Socket.io 서버(Enterprise 요금제 기능)에 연결합니다. 이 앱은 Socket.io 메시지를 ProtoPie Connect와 주고받아, Pies가 Unity의 데이터와 상호작용할 수 있게 합니다.

5. Hierarchy 패널에서 WebViewCluster와 WebViewCenter 객체의 부모 객체인 Canvas 객체를 찾으세요. Inspector 패널 아래쪽에서 Add Component 버튼을 찾아 SocketIOManager 스크립트를 추가합니다.

6. 전문가 팁: 이 사용자 지정 템플릿을 사용해 프로토타입을 가져오세요

더 쉽게 사용하실 수 있도록, 저희 크리에이티브 테크놀로지스트 Freddie가 고충실도 ProtoPie 프로토타입을 Unity로 가져올 수 있는 Unity 템플릿을 만들었습니다. 여기에서 템플릿을 확인해 보세요.

7. 이제 운전할 준비가 되었습니다!

축하합니다! 이제 ProtoPie Connect와 Unity를 사용해 3D 가상 현실 환경에서 HMI 디자인을 테스트할 준비가 되었습니다.

이 강력한 도구들을 활용해 몰입감 있고 인터랙티브한 프로토타입을 제작하고, 자동차 프로토타이핑과 테스트 과정을 한 단계 더 끌어올리세요. 가상 현실 세계에서 디자인의 잠재력을 온전히 발휘할 준비를 하세요.

ProtoPie로 자동차 디자인을 혁신하세요!

ProtoPie로 무료로 시작하기 오늘부터 자동차 디자인과 HMI 프로토타이핑 프로젝트의 잠재력을 최대한 끌어내세요.

즐거운 프로토타이핑 되세요!

[무료로 시작하기] {3D 프로토타이핑 소식과 팁을 받아보세요}