ProtoPie Connect Unity 플러그인을 활용한 3D 차량 HMI 튜토리얼

개요

1. Unity 플러그인이란?

2. ProtoPie Connect에서 Unity 프로젝트를 사용하는 방법

3. 1단계. Unity 프로젝트 설정

4. 2단계. ProtoPie 프로토타입 구성

5. 3단계. 메시지 매핑 구성

6. 4단계. Unity 프로젝트 빌드

7. 5단계. ProtoPie Connect에서 상호작용 테스트

8. Unity와 ProtoPie 통합 워크플로

9. 효과적인 Unity-ProtoPie 통합을 위한 팁

이 단계별 튜토리얼에서는 ProtoPie Connect Unity 플러그인을 사용하여 3D 자동차 HMI 경험을 만드는 방법을 안내합니다. Unity 플러그인이 무엇인지, 어떻게 작동하는지, 그리고 ProtoPie Connect에서 Unity 프로젝트를 가져와 테스트하는 방법을 따라 배워보세요.

시작하려면 10:12부터 시작하는 영상을 시청하세요.

영상

Unity 플러그인이란?

먼저 기본 사항부터 살펴보겠습니다: Unity 플러그인과 ProtoPie Connect에서 이를 사용하는 방법입니다.

ProtoPie Connect Unity 플러그인은 ProtoPie가 Unity 레이어와 상호작용할 수 있게 해주는 노코드 솔루션입니다. 이 플러그인은 ProtoPie와 Unity의 깊은 통합을 가능하게 하여 복잡하고 인터랙티브한 프로토타입을 만드는 무한한 가능성을 제공합니다. 특히 자동차, 게임, VR, MedTech와 같은 산업에 유용하지만, 다른 많은 분야에도 적용할 수 있습니다.

Unity 플러그인은 ProtoPie가 Unity 레이어와 상호작용할 수 있게 해주는 노코드 솔루션입니다.

ProtoPie Connect에서 Unity 프로젝트를 사용하는 방법

튜토리얼을 시작하기 전에 맞춤 레이어가 무엇인지, 그리고 이를 사용해 Unity 프로젝트를 ProtoPie Connect로 가져오는 방법도 이해해 보겠습니다.

ProtoPie Connect의 Stage View를 사용하면 웹 콘텐츠, 임베디드 요소, 라이브 카메라, Unity 프로젝트를 포함한 다양한 맞춤 레이어와 ProtoPie 프로토타입을 통합할 수 있습니다. 이 통합은 사용자 테스트 경험을 향상시키고 디자인을 더욱 역동적으로 만듭니다.

Unity 레이어를 통해 ProtoPie에 Unity 프로젝트를 가져오기.

이제 튜토리얼을 시작해 보겠습니다.

1단계. Unity 프로젝트 설정

1.1 자동차 HMI 템플릿 다운로드

이번 튜토리얼에서는 Unity Asset Store의 수정된 자동차 HMI 템플릿을 사용합니다. 이 버전에는 데모에 필요한 특정 3D 자동차 요소만 포함되어 있습니다. 원본 파일은 이 링크에서 다운로드할 수 있습니다.

자동차 HMI 템플릿을 다운로드하고 Unity에서 엽니다.

1.2 Unity 씬 준비

1. Unity를 실행하고 다운로드한 자동차 HMI 템플릿을 불러옵니다.

2. 이 수정된 씬을 저장하세요. 이 씬이 프로젝트의 기반이 됩니다.

1.3 ProtoPie Unity 플러그인 다운로드 및 가져오기

1. ProtoPie Unity 플러그인 다운로드.

2. 다운로드한 패키지를 더블클릭하여 Unity 프로젝트로 가져옵니다.

💡 중요: Unity 씬에 "ProtoPie" 게임 오브젝트가 있는지 확인하세요. 이 오브젝트는 모든 메시지 매핑과 상호작용을 처리하는 데 매우 중요합니다.

다운로드한 패키지를 더블클릭하여 Unity 프로젝트로 가져옵니다.

2단계. ProtoPie 프로토타입 구성

이제 Unity 플러그인을 설치했으니 ProtoPie 프로토타입을 설정해 보겠습니다.

2.1 Pie 다운로드

이 튜토리얼에서는 다양한 버튼(Drivetrain, Interior, Doors, Battery, Trunk, Main View 버튼)이 있는 기본 ProtoPie 프로토타입을 사용합니다. Pie는 여기에서 다운로드할 수 있습니다: Stage - Unity Vehicle 3D Main.

2.2 Send & Receive 기능 설정

ProtoPie 프로토타입의 각 버튼에 Send 응답과 Receive 트리거를 할당하세요. 이 설정을 통해 버튼이 클릭되면 ProtoPie Connect로 특정 메시지를 전송하고, ProtoPie Connect는 이 메시지를 Unity의 해당 동작에 매핑합니다.

• 예를 들어 "Engine" 버튼을 클릭하면 GoToEngineView 메시지가 전송됩니다.

• 마찬가지로 "Interior" 버튼을 클릭하면 GoToInteriorView 메시지가 전송됩니다.

모든 버튼에 대해 이 설정을 반복하세요. 프로토타입 구성이 완료되면 다음 단계로 진행합니다.

Send & Receive 기능을 설정하여 Pie를 구성합니다.

3단계. 메시지 매핑 구성

3.1 새 게임 오브젝트 만들기

Unity에서 새 게임 오브젝트를 만들고 "ProtoPie"라고 이름을 지정하세요. 이 이름은 대소문자를 구분하며 설정에 매우 중요합니다. 이 게임 오브젝트는 모든 메시지 매핑을 관리하므로 각 Unity 게임 오브젝트를 개별적으로 구성할 필요가 없습니다.

Unity에서 새 게임 오브젝트를 만들고 "ProtoPie"라고 이름을 지정하세요.

3.2 메시지 상호작용 스크립트 추가

1. "ProtoPie" 게임 오브젝트를 선택합니다.

2. "Add Component"를 클릭하고 "Message Interaction"을 검색합니다.

3. "Message Interaction" 스크립트를 "ProtoPie" 게임 오브젝트에 추가합니다.

이제 플러그인이 활성화되었으니 매핑을 시작할 준비가 되었습니다.

"Message Interaction" 스크립트를 "ProtoPie" 게임 오브젝트에 추가합니다.

3.3 매핑 테이블 정의

1. Unity 플러그인에서 ProtoPie 메시지가 Unity 동작에 어떻게 매핑될지 정의하는 매핑 테이블을 만드세요. 예를 들어 GoToEngineView와 GoToInteriorView 같은 메시지가 이 테이블에 포함됩니다.

2. 매핑 테이블이 정의되면 Unity의 “Message Data” 필드로 가져오세요. 이 단계는 매핑을 추가하고 실행할 수 있도록 시스템을 준비합니다.

Main 뷰를 매핑하는 예를 살펴보겠습니다.

1. 매핑 테이블에서 이미 "Go to Main View" 메시지가 정의된 "Main" 레이블을 선택합니다.

2. 메시지 방향이 ProtoPie에서 오는 것으로 지정합니다. 즉, ProtoPie가 GoToMainView 메시지를 보내면 Unity가 해당 동작을 수행합니다.

3. Unity가 GoToMainView 메시지를 받았을 때 실행할 특정 동작을 추가합니다. 이것이 플러그인이 ProtoPie 메시지를 Unity 동작에 매핑하는 방식입니다.

GoToEngineView와 GoToInteriorView 같은 다른 버튼과 메시지에도 이 과정을 반복하여 각 메시지를 Unity의 해당 메서드에 매핑합니다. 모든 매핑이 완료되면 Unity 프로젝트를 빌드하고 ProtoPie Connect와 통합하여 테스트 및 개선을 진행할 수 있습니다.

Unity 내부에서 메시지 매핑하기.

매핑 과정 이해하기

이 튜토리얼에서는 Unity 씬의 상호작용 오브젝트에 미리 정의된 게임 로직과 CurrentDirectionController, IVInputController와 같은 여러 스크립트가 포함되어 있습니다. 이러한 스크립트는 일반적으로 게임 메커니즘을 처리하기 위해 Unity 전문가나 엔지니어가 만듭니다.

우리는 이러한 메서드를 사용하여 ProtoPie 메시지를 매핑할 것입니다. 예를 들어 CarInteractionController 스크립트에는 배터리 또는 인테리어 뷰로 전환하는 것과 같이 자동차 애니메이션을 제어하는 여러 메서드가 있습니다.

💡 팁: 현재 ProtoPie 매핑 테이블은 자식 오브젝트가 아니라 부모 오브젝트의 Invoke 코드만 찾을 수 있습니다.

4단계. Unity 프로젝트 빌드

모든 매핑이 완료되었으니 Unity 프로젝트를 빌드해 보겠습니다.

1. Unity에서 File > Build Settings로 이동합니다.

2. 빌드 플랫폼으로 WebGL을 선택하고 이미 선택되어 있지 않다면 Switch Platform을 클릭합니다.

3. WebGL에 필요한 모든 구성이 설정되어 있는지 확인하세요. 여기에는 Player 설정 조정과 프로젝트에 필요한 기타 특정 빌드 설정이 포함됩니다.

4. Add Open Scenes를 클릭하여 빌드에 포함할 씬을 추가합니다.

5. Build를 클릭하고 빌드 파일을 저장할 디렉터리를 선택합니다. Unity가 프로젝트를 컴파일하고 WebGL 빌드에 필요한 모든 파일이 포함된 폴더를 생성합니다.

6. 빌드가 완료되면 빌드 폴더를 찾아 압축(zip)하세요. 이 압축 파일은 Unity 프로젝트를 ProtoPie Connect로 가져오는 데 사용됩니다.

Unity 프로젝트 빌드하기.

이 단계를 따르면 Unity 프로젝트의 WebGL 빌드가 생성되며, 이후 ProtoPie Connect에 임베드하여 상호작용과 테스트를 진행할 수 있습니다.

💡 팁: 빌드하기 전에 Player Settings에서 Compression Format을 Disabled로 설정했는지 확인하세요.

Player Settings에서 Compression Format을 "Disabled"로 설정합니다.

5단계. ProtoPie Connect에서 상호작용 테스트

1. 아래의 3개 Pie를 다운로드하세요.

• Stage - Unity Vehicle 3D Main

• Stage - Bottom Bar

• Stage - Upper Bar

2. ProtoPie Connect를 실행하고 Stage View에서 3개의 Pie를 모두 엽니다.

3. Stage View에 새 Unity 레이어를 삽입합니다. 이 레이어에 Unity 빌드가 임베드됩니다.

4. 필요에 따라 레이어 순서를 조정하고 적절한 상호작용을 위해 Unity 레이어를 구성합니다.

5. Unity의 WebGL 빌드를 ProtoPie Connect에 새로 추가한 레이어로 가져옵니다.

ProtoPie Connect의 Stage View에 Unity 프로젝트를 가져오기.

6. 더 나은 테스트 경험을 위해 전체 화면 모드로 전환합니다.

7. ProtoPie에서 다양한 버튼을 클릭하고 상호작용을 관찰합니다. 각 버튼은 Unity로 해당 메시지를 전송해야 합니다.

• 예를 들어 "Drivetrain" 버튼을 클릭하면 Unity 뷰가 드라이브트레인 뷰로 전환되어야 합니다.

• "Main View" 버튼을 클릭하면 뷰가 다시 메인 인터페이스로 돌아가야 합니다.

• "Interior", "Doors", "Battery", "Trunk" 등의 다른 버튼도 테스트하여 Unity에서 뷰가 올바르게 전환되는지 확인하세요.

8. ProtoPie Connect에서 전송 및 수신되는 메시지를 모니터링하세요. 각 ProtoPie 메시지가 Unity의 적절한 메서드와 대응하는지 확인합니다.

Unity와 ProtoPie 사이에서 전송되고 수신되는 메시지를 모니터링합니다.

💡 팁: 애니메이션이 Unity에서는 잘 작동하지만 ProtoPie Connect에서는 작동하지 않는다면, Unity로 돌아가 Message interaction이라는 스크립트를 찾은 다음 코드 WebGLInput.captureAllKeyboardInput = false를 WebGLInput.captureAllKeyboardInput = true로 변경하세요.

코드 WebGLInput.captureAllKeyboardInput가 true로 설정되어 있는지 확인합니다.

Unity와 ProtoPie 통합 워크플로

아래는 Unity와 ProtoPie를 통합하기 위한 권장 워크플로입니다:

1. ProtoPie에서 전송할 메시지를 명확하게 정리하고 Unity의 해당 이벤트에 매핑합니다.

2. ProtoPie 내에서 정의된 메시지를 설정하고 Unity의 특정 동작에 매핑합니다.

3. ProtoPie Connect에 임베드하기에 적합한 WebGL 형식으로 Unity 프로젝트를 내보냅니다.

4. 통합을 지속적으로 테스트하고 원활한 상호작용을 위해 디자인을 개선합니다.

Unity와 ProtoPie 통합 워크플로.

효과적인 Unity-ProtoPie 통합을 위한 팁

1. ProtoPie 디자이너와 Unity 전문가(엔지니어 또는 개발자) 간에 명확하게 소통하고 기대치를 설정하세요. 각자 고유한 워크플로와 프로젝트를 가지고 있으므로, 상호작용 구현에 대한 초기 논의가 매우 중요합니다.

2. WebGL 설정에서 압축을 비활성화하고 Unity 오브젝트 이름이 "ProtoPie"인지(대소문자 구분) 확인하는 등 특정 구성에 유의하세요. 이러한 세부 사항은 원활한 통합에 필수적입니다.

효과적인 Unity-ProtoPie 통합을 위한 팁.

Unity와 ProtoPie로 인터랙티브 프로토타입을 빌드하고 테스트하기

이 단계를 따르면 ProtoPie Connect Unity 플러그인을 사용하여 정교한 3D 자동차 데모를 만들 수 있습니다. 이 통합은 자동차 인터페이스, 게임, VR, 의료 기술을 포함한 다양한 분야의 애플리케이션을 위한 동적이고 인터랙티브한 프로토타입 제작을 가능하게 하여 디자인 및 개발 프로세스를 향상시킵니다.