ProtoPie는 게임 디자이너와 개발자에게 강력한 동반자로 떠오르며, 실제와 같은 시나리오를 손쉽게 프로토타입으로 구현할 수 있는 사용자 친화적 플랫폼을 제공합니다. Unreal Engine과 결합하면 몰입감 있고 상호작용적인 인터페이스를 만드는 가능성은 무궁무진합니다.
이 단계별 안내서에서는 ProtoPie Connect와 Unreal Engine의 결합을 살펴보고, UI 아이디어를 손쉽게 현실로 구현하는 방법을 알아봅니다.
개요
1단계. Unreal Engine에서 Web Browser 플러그인 설정하기
2단계. 새로운 사용자 인터페이스 위젯 만들기
3단계. 위젯에 Web Browser 추가하기
4단계. Web Browser 위젯 구성하기
5단계. 위젯을 표시할 Blueprint 만들기
6단계. Blueprint에 UI 위젯 추가하기
7단계. Unreal Engine에서 ProtoPie 프로토타입 테스트하기
1단계. Unreal Engine에서 Web Browser 플러그인 설정하기
먼저 Unreal Engine에서 웹 브라우저 플러그인을 설정합니다.
Unreal Engine 프로젝트를 엽니다.
Unreal Engine 프로젝트를 엽니다.
"Edit" 메뉴로 이동한 다음 "Plugins"를 선택합니다.
Edit 메뉴에서 Plugins를 선택합니다.
Plugins 창에서 "Web Browser" 플러그인을 검색합니다.
Web Browser 플러그인을 검색합니다.
Web Browser 플러그인이 아직 활성화되어 있지 않다면 활성화합니다.
변경 사항을 적용하려면 Unreal Engine을 다시 시작합니다.
Web Browser 플러그인을 활성화한 다음 Unreal Engine을 다시 시작하여 변경 사항을 적용합니다.
2단계. 새로운 사용자 인터페이스 위젯 만들기
웹 브라우저 플러그인을 설정한 후 새로운 사용자 인터페이스 위젯을 만듭니다.
Unreal Engine에서 "Content Browser"로 이동합니다.
콘텐츠 영역을 마우스 오른쪽 버튼으로 클릭하고 "User Interface"를 선택한 다음 "Widget Blueprint"를 선택하여 새 위젯을 만듭니다.
새 Widget Blueprint를 만듭니다.
“User Widget”을 선택하고 위젯 이름을 적절하게 지정합니다.
“User Widget”을 선택하고 위젯 이름을 지정합니다.
3단계. 위젯에 Web Browser 추가하기
다음 단계에서는 위젯에 웹 브라우저를 포함해야 합니다.
방금 만든 Widget Blueprint를 더블클릭하여 엽니다.
새 창이 열리면 이 창을 클릭한 채로 메인 탭으로 드래그할 수 있습니다.
Widget Blueprint를 메인 탭으로 드래그합니다.
Designer 탭에서 왼쪽 Palette 패널의 “Experimental” 아래에서 "Web Browser" 위젯을 검색합니다.
왼쪽 Palette에서 "Web Browser" 위젯을 검색합니다.
Web Browser 위젯을 위젯 레이아웃으로 드래그 앤 드롭합니다.
Web Browser 위젯을 위젯 레이아웃으로 드래그 앤 드롭합니다.
Web Browser 위젯의 크기를 조정하고(양방향 화살표를 드래그) 디자인에 맞게 배치합니다.
Web Browser 위젯의 크기와 위치를 디자인에 맞게 조정합니다.
4단계. Web Browser 위젯 구성하기
ProtoPie 프로토타입의 URL을 복사해 붙여넣어 웹 브라우저 위젯을 설정합니다.
Web Browser 위젯을 선택한 상태에서 Details 패널로 이동합니다.
"Initial URL" 속성을 찾습니다. 여기에는 ProtoPie 프로토타입이 호스팅된 URL을 입력합니다.
“Initial URL” 속성을 찾습니다.
ProtoPie Connect를 실행하고 Cloud(Enterprise 전용)에서 가져오거나 로컬 Pie 파일을 업로드하여 프로토타입을 가져옵니다. Cloud에서 프로토타입을 불러올 때 연결 문제를 방지하려면 네트워크 설정과 권한을 확인하세요.
ProtoPie Connect 인터페이스에 프로토타입(Pie)을 가져옵니다.
웹 브라우저 아이콘을 클릭하여 브라우저에서 Pie를 엽니다.
웹 브라우저 아이콘을 클릭하여 브라우저에서 Pie를 엽니다.
Pie의 배경이 투명하다면 URL 끝에 “&bg=transparent”를 추가합니다.
필요한 경우 투명 배경을 활성화합니다.
주소 표시줄에서 전체 URL을 복사한 뒤 Unreal로 돌아가 "Initial URL" 필드에 붙여넣습니다. "Supports Transparency" 옵션도 활성화해야 합니다.
ProtoPie Connect의 브라우저 보기에서 전체 URL을 Unreal의 "Initial URL" 속성에 입력합니다.
5단계. 위젯을 표시할 Blueprint 만들기
Content Browser의 "Blueprints" 폴더로 이동합니다.
"Blueprint Class"를 마우스 오른쪽 버튼으로 클릭한 다음, Actor 또는 PlayerController와 같이 UI 표시에 적합한 클래스를 선택합니다.
Blueprint 이름을 지정하고 엽니다.
Blueprint 이름을 지정하고 엽니다.
이 안내서는 “Third person” Unreal 템플릿을 사용하므로 “BP_ThirdPersonCharacter.”를 선택합니다.
“BP_ThirdPersonCharacter.”를 선택합니다.
6단계. Blueprint에 UI 위젯 추가하기
Blueprint 편집기에서 "Event Graph"로 이동합니다.
"Create Widget"에 대한 새 노드를 만들고 클래스에 Web Browser 위젯을 선택합니다.
"Create Widget" 노드를 적절한 이벤트(예: Actor의 경우 "Event BeginPlay" 또는 “키/게임패드 누르기”)에 연결합니다.
"Create Widget" 노드를 적절한 이벤트에 연결합니다.
"Add to Viewport" 노드를 추가하고 "Create Widget" 노드에 연결하여 이벤트가 트리거될 때 위젯이 표시되도록 합니다.
키보드의 “M” 키를 눌러 위젯을 생성합니다.
UI 위젯을 Blueprint에 추가합니다.
7단계. Unreal Engine에서 ProtoPie 프로토타입 테스트하기
마지막 테스트에서는 Unreal에서 ProtoPie 프로토타입을 테스트합니다.
Blueprint를 컴파일하고 저장합니다.
Blueprint 액터가 PlayerController와 같이 다른 Blueprint의 일부가 아니라면, 레벨에 드래그 앤 드롭할 수 있습니다.
"Play"를 눌러 에디터에서 게임을 실행하고 통합을 테스트합니다. ProtoPie 프로토타입은 Web Browser 위젯을 사용하여 게임 환경 안에 표시되어야 합니다.
"Play"를 눌러 에디터에서 게임을 실행하고 통합을 테스트합니다.
키보드의 “M” 키를 눌러 Pie를 확인합니다.
키보드의 “M” 키를 눌러 Pie를 확인합니다.
ProtoPie로 가능성의 세계를 열어보세요
ProtoPie Connect와 Unreal Engine의 조합은 디지털 상호작용의 경계를 넓히고 싶은 크리에이터에게 수많은 가능성을 제공합니다. 게임, 시뮬레이션 또는 기타 인터랙티브 미디어를 위해 설계하든, 이 튜토리얼은 창의적인 프로젝트를 위한 탄탄한 기반이 됩니다.
이제 ProtoPie와 Unreal Engine을 연결하는 방법을 배웠으니, 더 기다릴 이유가 있을까요?
오늘 무료로 ProtoPie로 여정을 시작하세요 그리고 창의적 비전의 잠재력을 온전히 열어보세요. 다음 획기적인 프로젝트는 지금 시작됩니다—즐거운 프로토타이핑 되세요!
