ProtoPie Connect의 강력한 기능을 알아보세요. ProtoPie Connect는 디자이너와 개발자 모두에게 필수적인 프로토타이핑 도구입니다. 이 가이드는 Unity WebGL 빌드 파일을 ProtoPie Connect와 원활하게 통합하는 방법을 자세히 설명하며, 이를 통해 사용자 인터페이스를 다듬고 메뉴 흐름을 손쉽게 최적화할 수 있습니다.
이 명확한 단계별 지침을 따라 Web-Embed 레이어를 사용해 Unity WebGL 빌드를 ProtoPie Connect에 삽입해 보세요. 이 혁신적인 여정을 시작하고 디자인 워크플로를 한 단계 끌어올리세요.
**면책 조항: **이 튜토리얼은 ProtoPie Connect Enterprise 사용이 필요합니다. ProtoPie Connect에 대한 자세한 정보는 ProtoPie 세일즈에 문의하세요. 또한 이 ProtoPie Connect 관련 블로그.도 확인해 보세요.
개요
1단계. Unity에서 WebGL 파일 빌드하기
2단계. GitHub에 업로드하기
3단계. 웹 브라우저에서 게임 실행하기
[4단계. ProtoPie Connect와 통합
](/blog/unity-webgl-build-with-protopie-connect#step-4-integrate-with-proto-pie-connect)
1단계. Unity에서 WebGL 파일 빌드하기.
1. 프로젝트 열기: 기존 Unity 프로젝트를 여는 것부터 시작하세요.
2. 플랫폼을 WebGL로 전환
File > Build Settings로 이동합니다.플랫폼 목록에서
WebGL을 선택합니다.Switch Platform을 클릭하여 빌드 대상을 WebGL로 변경합니다.
3. 빌드 설정 구성
Edit > Player Settings로 이동합니다.필요에 맞게
Resolution and Presentation아래의 설정을 사용자 지정하세요. 이 튜토리얼에서는 전체 너비 해상도를 위해PWA설정을 사용합니다.
💡 **TIP: **아래와 같이 호스트 서버에서 브라우저로 WebGL 프로젝트를 실행할 때 압축 오류가 발생할 수 있습니다:
WebGL 파일을 실행하려 할 때 위 오류가 발생하면, 한 가지 해결 방법은 Unity에서 압축 형식을 변경하는 것입니다.
Edit > Player Settings > Player > Publishing Settings > Compression format로 이동합니다.프로젝트의 필요에 맞게 설정을 조정하세요. 이 튜토리얼에서는 GitHub에서 Unity WebGL 프로젝트를 호스팅하고 실행할 때 실행 오류가 발생하지 않도록 "Brotli" 압축 설정을 사용합니다.
4. 프로젝트 빌드하기.
Build Settings창에서Build를 클릭합니다.컴퓨터에서 빌드 파일을 저장할 위치를 선택하고 Unity가 프로젝트를 컴파일할 때까지 기다립니다.
2단계. GitHub에 업로드하기.
**1. 업로드할 빌드 준비:
**
게임 실행에 필요한
.js및.data파일과 함께 빌드 폴더에index.html파일이 있는지 확인하세요.
2. 새 저장소 만들기:
GitHub 계정에 로그인합니다.
Repositories 탭으로 이동하여
New를 클릭합니다.저장소 이름을 지정하고 공개로 설정합니다(누구나 접근하게 하려는 경우).
저장소를 생성합니다.
3. 파일 업로드:
저장소의 메인 페이지로 이동하여
uploading an existing file링크를 클릭합니다.
빌드 파일을 끌어다 놓거나 파일 탐색기를 사용하여 WebGL 빌드 폴더를 선택합니다.
변경 사항을 main 브랜치에 직접 커밋합니다.
3단계. 웹 브라우저에서 게임 실행하기.
1. GitHub Pages 활성화:
저장소 설정으로 이동합니다.
GitHub Pages섹션까지 아래로 스크롤합니다.소스로
main브랜치와/ (root)를 선택합니다. 설정을 저장합니다.
GitHub에서 프로젝트가 라이브로 호스팅되는 URL을 제공합니다. 페이지가 활성화되기까지 몇 분 정도 걸릴 수 있습니다. 몇 분 후 페이지를 새로고침하여 URL을 확인하세요.
2. 게임에 접속하기:
GitHub Pages가 활성화되어 정상 작동하면 제공된 URL을 방문합니다.
Unity WebGL 게임이 브라우저에서 직접 로드되어야 합니다.
💡 **TIP: **제공된 URL을 따라갔을 때 404 오류가 발생하더라도 당황하지 마세요. 파일이 루트 폴더가 아니라 하위 폴더에 있을 때 이런 일이 발생합니다.
아래에서 보듯이 파일은 하위 폴더** /.._GamePlay/PP_rpg/**에 있으며, 루트 폴더는 /.._GamePlay입니다
이 문제를 해결하려면 URL 링크에 하위 폴더 이름을 추가하면 Unity 프로젝트가 실행됩니다. 이 튜토리얼에서는 URL에 /PP_rpg/를 추가합니다.
4단계. ProtoPie Connect와 통합하기.
1. ProtoPie Connect에서 Pie 파일 열기
ProtoPie Connect를 실행하고 프로토타입을 가져옵니다. Cloud에서 선택(Enterprise only)하거나 로컬 Pie 파일을 업로드할 수 있습니다. Cloud에서 프로토타입을 로드할 때 연결 문제를 방지하려면 네트워크 설정과 권한을 확인하세요.
2. 그룹 만들기 및 Pie 파일 보기
Group을 만들고, 끌어다 놓아 Pie 파일을 그룹으로 이동합니다. 웹 브라우저 아이콘을 클릭하여 브라우저에서 Pie를 엽니다.
3. 그룹 편집
페이지를 마우스 오른쪽 버튼으로 클릭하여 ProtoPie Connect 상단 바 메뉴 UI를 확인하고
Edit를 선택합니다.
편집 보기에서
+Add메뉴를 클릭하고Web Embed를 선택합니다.레이어 창에서 끌어다 놓기로 레이어의 순서를 재배열하여 계층 구조를 설정할 수 있습니다.
기본 설정이나 프로젝트 요구 사항에 맞게 웹 뷰 창의 크기를 조정합니다.
3단계에서 GitHub 링크를 복사하여 Source 입력란에 붙여넣습니다. Unity 파일이 로드되어 실행됩니다.
4. 통합된 프로토타입 보기
상단 메뉴에서
View를 선택하여 다시 보기 모드로 돌아갑니다.마우스 오른쪽 버튼을 클릭하면 ProtoPie Connect 상단 메뉴 UI를 숨길 수 있습니다.
web-embed 레이어를 사용하여 Unity WebGL 빌드를 ProtoPie Connect에 성공적으로 통합했습니다. 이 통합을 통해 더욱 풍부한 인터랙티브 경험을 제공할 수 있으며, Unity 프로젝트를 ProtoPie 프로토타입 안에 자연스럽게 포함할 수 있습니다. 그 결과, Unity의 강력한 3D 및 게임 엔진 기능을 UX/UI 디자인에서 직접 활용하여 프로토타입의 사실성과 반응성을 높일 수 있습니다.
앞으로 더 많은 사용자 지정 및 최적화 가능성을 탐색하여 프로토타입이 사용자 기대를 충족하고 그 이상을 달성하도록 할 수 있습니다.
