커스텀 레이어 연동
ProtoPie Connect의 Stage 뷰를 사용하면 웹, 임베드, 라이브 카메라, Unity 프로젝트를 포함한 다양한 커스텀 레이어와 ProtoPie 프로토타입을 연동할 수 있습니다. 이러한 연동은 사용자 테스트 경험을 향상시키고 디자인을 더 동적으로 만들어 줍니다.
Stage 뷰 생성하기
Stage 뷰를 생성하려면 다음 단계를 따르세요:
ProtoPie Connect를 엽니다.
새 그룹을 생성하고 프로토타입(Pie)들을 해당 그룹으로 드래그 앤 드롭합니다.
그룹을 선택합니다.
View 아이콘을 클릭하여 Stage에서 프로토타입을 엽니다.
커스텀 레이어 임베드하기
Stage 뷰를 생성한 후, 마우스 우클릭을 하여 Stage 옵션 메뉴에 접속합니다. 편집을 시작하려면 Edit 버튼을 클릭합니다. 편집이 활성화되면 "Edit Mode" 메시지가 표시됩니다.
새 프로토타입 또는 커스텀 레이어를 추가하려면:
왼쪽 상단 모서리에서 Add를 클릭합니다.
Stage에 다음 레이어들을 추가할 수 있습니다:
ProtoPie 프로토타입
URL 또는 iframe 코드를 통한 웹 임베드 (구글 지도, Spline, Rive, Bezi 등 지원)
라이브 카메라 (사용 가능한 카메라 또는 라이브 스트리밍 옵션 중에서 선택)
Unity 프로젝트 (WebGL 빌드 가져오기 지원)
웹 임베드 레이어 설정하기
새 웹 임베드 레이어를 Stage에 추가한 후 속성 패널을 통해 URL을 설정할 수 있습니다.
전체 URL 또는 iframe 코드를 입력할 수 있습니다. 웹 임베드는 구글 지도, Spline, Rive, Bezi 등의 다양한 포맷을 지원합니다. URL이 유효한지, 그리고 해당 URL에 액세스할 수 있는 권한이 있는지 확인하는 것이 중요합니다.
라이브 카메라 레이어 설정하기
프로젝트에 카메라 피드를 추가하려면 라이브 카메라 레이어를 활용하세요. 이 기능은 다음을 지원합니다:
웹캠과 같이 USB로 연결된 카메라
노트북 내장 카메라
라이브 스트리밍 URL (HLS)
카메라 레이어를 사용하기 전에 웹 브라우저에 권한을 허용해야 합니다. 카메라 레이어를 추가한 후, Camera 속성 패널을 통해 설정을 구성하세요.
Unity 레이어 설정하기
프로젝트에 Unity 씬(scene)을 추가하려면 Unity 레이어를 활용하세요. 이 기능은 다음을 지원합니다:
Unity 씬의 WebGL 빌드 가져오기
Unity용 ProtoPie 플러그인
대상 플랫폼을 WebGL로 설정하여 Unity 프로젝트를 빌드하는 것이 중요합니다. 빌드 결과인 Build 폴더에는 .loader.js, .framework.js, .wasm, .data 파일이 포함되며, 이를 zip 파일로 압축해야 합니다. Unity 프로젝트를 레이어로 가져오기 위해 이 zip 파일을 Source File로 삽입합니다.
Unity 플러그인을 사용하면 Unity 씬과 메시지 주고받기(Send/Receive)가 가능해져 ProtoPie와 Unity 레이어 간의 상호작용성을 높일 수 있습니다. 이 플러그인은 Unity 프로젝트에 추가할 수 있는 패키지이며 Unity 에셋 스토어에서 다운로드할 수 있습니다. 자세한 정보는 Unity 플러그인 문서를 참조하세요.
Stage 뷰 미리보기
레이어를 추가하고 설정한 후, 드래그하여 Stage 내에서 정렬합니다. 배치 옵션에 액세스하려면 레이어를 마우스 우클릭하세요. 준비가 되면 View를 클릭하여 Stage를 미리 봅니다.
자주 묻는 질문 (FAQs)
unity-layer-keyboard-input-fail
왜 Unity 레이어에서 일부 키보드 입력이 실패하나요?
Unity 내의 WebGL 빌드에 따라, 특정 키보드 입력이 ProtoPie에서 작동하지 않을 수 있습니다. 이는 Unity WebGL의 기본 설정이 모든 키보드 입력을 캡처하도록 설정되어 있어 ProtoPie의 기능을 방해할 수 있기 때문입니다. 그러나 Unity 플러그인을 설치하면 Unity WebGL 속성을 비활성화하여 이 문제를 해결할 수 있습니다.
또 다른 방법으로, Unity WebGL이 모든 키보드 입력을 캡처하지 않도록 Unity 프로젝트의 코드를 수정할 수도 있습니다.
web-embed-supported-url-types
웹 임베드 소스로 지원되는 URL 유형은 무엇인가요?
임베드를 위해 전체 URL 또는 iframe 코드를 사용할 수 있습니다. 웹 임베드 기능은 지도, Spline, Rive, Bezi 등의 형식을 지원합니다. URL이 유효하고 해당 URL에 액세스하는 데 필요한 권한이 있는지 확인하세요.
고려해야 할 추가 사항은 다음과 같습니다.
전체 URL 임베딩: 전체 URL을 사용하여 임베딩하는 경우, URL을 제공하는 서버에 적절한 CORS(교차 출처 리소스 공유) 정책 설정이 되어 있는지 확인하세요. 이 세부 사항은 특히 로컬에서 실행되거나 온라인으로 호스팅되는 코드화된 프로토타입을 임베딩하는 경우에 매우 중요합니다.
Iframe 코드 임베딩: Spline, Rive, Mapbox 등의 서비스에서 iframe 코드를 임베딩할 때는 각 서비스에서 직접 생성된 iframe 코드를 사용해야 합니다. 전체 iframe 코드를 삽입하거나 src 섹션만 추출할 수도 있습니다. 예: