웹 콘텐츠 표시 및 상호 작용
WebSlate를 사용하여 3D Mesh 환경에서 대화형 웹 콘텐츠를 표시합니다. 직관적인 입력, 사용자 지정 가능성, 보안 및 성능 관리를 통해 PC 또는 Quest 2에서 전체 검색 환경을 가져옵니다.
다음을 위해 WebSlates를 사용할 수 있습니다.
지도, 다이어그램 및 데이터와 상호 작용
대시보드, 웹 페이지, 사진 및 비디오 보기
제품 및 서비스, 고객 스토리 및 브랜드 ID를 강조하는 콘텐츠 전시
WebSlate 기능
기본 URL을 지정합니다. 위치를 선택한 다음 프리팹을 끌어서 놓은 다음 URL을 추가합니다. 장면에서 여러 WebSlates를 원하는 경우 반복합니다.
입력 & 오디오 기본 제공: 최종 사용자 웹 탐색, 앱과의 상호 작용 및 비디오 보기는 Mesh에서 사용할 수 있습니다.
보안 탐색: 악의적인 리디렉션 및 의도하지 않은 하이퍼링크 탐색을 방지하기 위해 리디렉션 URL을 잠급니다.
시각적 사용자 지정: 품질을 수정하여 사용자의 디바이스에 최적화합니다. 보기 쉬운 콘텐츠로 멀리서 사용자를 끌어들입니다.
스크립트:시각적 스크립팅 및 클라우드 스크립팅을 사용하면 단추를 사용하여 페이지 간 토글을 사용하도록 설정할 수 있습니다.
콘텐츠 성능 분석기 도구 통합: URP가 프레임에서 WebSlates를 렌더링하고 콘텐츠 로드 문제를 찾는 데 걸리는 평균 시간을 측정합니다.
메시 에뮬레이션 모드에서 테스트: 사용자가 Unity 편집기에서 직접 콘텐츠와 상호 작용합니다.
경험에서 수동으로 인증: 계정에 로그인하고 런타임에 콘텐츠를 확인하여 환경 내에서 보안 콘텐츠에 액세스합니다.
WebSlate 작동 방식
Mesh Environment를 만들도록 Unity 프로젝트를 설정한 경우 환경에 WebSlate를 추가하는 것은 간단한 프로세스입니다.
Mesh에서 WebSlate는 제공된 URL을 통해 대화형 페이지를 로드합니다. 환경에 지정된 URL은 Mesh에 로드된 URL과 동일합니다. Mesh 도구 키트에서 WebSlate 프리팹에는 개발자가 메시 환경에 표시되는 콘텐츠를 제어하기 위해 지정할 수 있는 URL 매개 변수가 포함되어 있습니다.
PC 및 퀘스트용 메시 앱에 로드된 경우 WebSlate에 의해 로드된 웹 페이지는 마우스, 키보드 및 퀘스트 XR 컨트롤러 입력을 통해 상호 작용할 수 있습니다.
WebSlate의 크기와 모양은 배치된 쿼드 GameObject의 크기와 모양과 일치합니다. 일반적으로 WebSlate 프리팹 내부에 구운 쿼드입니다.
장면에 여러 WebSlates를 추가할 수 있습니다. 메시 환경의 사용자 수는 WebSlate 성능에 영향을 주지 않습니다. WebSlate 리소스는 사용자의 컴퓨터에서 로컬로 초기화됩니다.
사용자 간에 대화형 동작 및 동기화를 추가하도록 시각적 또는 클라우드 스크립팅으로 WebSlates를 구성할 수 있습니다.
WebSlate는 웹 페이지를 표시할 수 있으며 상호 작용을 지원하지만 브라우저로 작동하지 않으며 책갈피, 기록 또는 뒤로 이동을 지원하지 않습니다.
재생을 눌러 장면을 Mesh에 업로드하기 전에 Unity 프로젝트에서 WebSlate를 미리 볼 수 있습니다.
요구 사항/종속성
WebSlate는 Mesh 도구 키트에 있는 Unity.InputSystem 및 Unity.XR.Interaction.Toolkit Unity 패키지에 따라 달라집니다.
Unity 프로젝트에 WebSlate 프리팹 추가
메시 도구 키트에는 장면에 추가할 수 있는 WebSlate 프리팹의 두 가지 버전이 있습니다. 추가 구성 요소가 없는 클린 WebSlate를 선호하는 경우 WebSlate 프리팹을 추가합니다. 추가 기능이 있는 양식에 일치시키는 프레임에 포함된 WebSlate를 원하는 경우 WebSlateFramed 프리팹을 추가합니다.
메뉴에서 WebSlate 프리팹 추가
장면에 프리팹 중 하나를 추가하려면 다음을 수행합니다.
계층 구조 내부를 마우스 오른쪽 단추로 클릭한 다음 상황에 맞는 메뉴에서 다음 중 하나를 수행합니다.
추가 구성 요소 없이 클린 WebSlate를 추가하려면 다음을 수행합니다.
메시 도구 키트>WebSlate를 선택합니다.양식에 일치시키는 프레임 및 추가 기능을 사용하여 WebSlate를 추가하려면 다음을 수행합니다.
메시 도구 키트>WebSlateFramed를 선택합니다.WebSlate에 URL을 추가하여 콘텐츠를 표시합니다.
팁: 계층 구조 창의 왼쪽 위에 있는 "+" 단추를 클릭하여 동일한 메뉴를 볼 수도 있습니다.
WebSlate 프리팹 검색 및 추가
WebSlate 프리팹을 검색하고 추가할 수도 있습니다.
검색 필드에 "WebSlate"를 입력합니다. 모든 필터가 선택되어 있는지 확인합니다.
원하는 프리팹을 장면 보기 또는 계층으로 끕 니다.
검사기에서 WebSlate 구성 요소로 이동한 다음 WebSlate에 표시할 URL을 추가합니다.
WebSlate를 읽을 수 있는지 확인
Mesh 환경의 모든 참석자가 WebSlate의 모든 콘텐츠를 편안하게 읽을 수 있도록 하는 것이 중요합니다. 참석자가 더 가깝게 이동하고 더 나은 보기를 위해 위치를 조정할 수 있도록 WebSlate 앞에 빈 바닥 공간을 만드는 것이 좋습니다. 사용자 환경에 좌석이 포함된 경우 각 좌석에서 WebSlate를 확인하여 해당 좌석에 앉아 있는 참석자가 WebSlate의 텍스트를 읽을 수 있는지 확인합니다. WebSlate에 표시되는 콘텐츠를 제어할 수 있는 경우 텍스트에 대한 다양한 글꼴 크기를 실험하여 보기에 가장 적합한 크기를 결정합니다. 아래 예제 환경에서는 WebSlate 중간에 있는 "Microsoft Teams" 텍스트가 편안하게 볼 수 있을 만큼 충분히 크지만 모서리의 텍스트가 훨씬 작으면 읽기가 어렵습니다. 이러한 유형의 시나리오에서는 스트리밍 비디오의 텍스트를 제어할 수 없으므로 좌석을 더 가깝게 이동하는 것이 좋습니다. 또한 WebSlate를 더 가운데에 두고 똑바로 바라보는 좌석은 옆으로 떨어져 있는 좌석보다 더 나은 시야를 제공합니다.
메시 에뮬레이션 모드에서 WebSlate 미리 보기
WebSlate에 표시되는 URL을 더 빠르게 보려면 메시 에뮬레이션 모드를 사용할 수 있습니다. 이 모드에서 테스트하는 것 외에도 WebSlate를 볼 수 있는 유일한 방법은 Mesh 도구 키트 업로더를 사용하여 업로드하고 Mesh 환경에서 보는 것입니다.
프로젝트에 메시 에뮬레이션 모드를 추가하려면 메시 에뮬레이터 문서의 지침을 따릅니다.
WebSlate에서 웹 페이지를 보려면 다음을 수행합니다.
Unity 편집기 재생 단추를 누릅니다.
메시 에뮬레이션 모드에 WebSlate 상호 작용 사용
WebSlate에서 상호 작용을 사용하도록 설정하려면 몇 가지를 설정해야 합니다.
메시 에뮬레이션 모드를 사용하도록 설정하려면 장면에 메시 에뮬레이터를 추가합니다.
새 Plane GameObject를 만듭니다. 이것은 당신의 바닥이 될 것입니다. GameObject가 원본(0,0,0)에 배치되었는지 확인합니다.
MeshEmulatorSetup 문자 앞에 배치되도록 WebSlate를 배치합니다.
재생 단추를 클릭한 다음 두 번 클릭하여 WebSlate에 표시된 웹 페이지와 상호 작용합니다.
잘하셨습니다! Unity 장면에 사용자 지정 WebSlate를 추가하고 메시 에뮬레이션 모드에서 상호 작용을 테스트했습니다.
이제 환경을 Mesh에 업로드하고 창작물을 전 세계와 공유할 준비가 되었습니다.
Visual Scripting의 WebSlate
개발자는 Visual Scripting을 사용하여 코드를 입력할 필요 없이 WebSlate 기능 및 동작을 구현할 수 있습니다. 대신 노드 기반 시각적 인터페이스가 제공되므로 사용자가 장면에서 다양한 작업 및 이벤트를 정의하고 연결할 수 있습니다. 일부 개발자는 이를 통해 대화형 작업 및 동작을 추가하는 프로세스를 간소화할 수 있다고 합니다.
WebSlate를 사용하여 시각적 스크립팅을 사용하도록 설정하려면 몇 가지를 설정해야 합니다.
프로젝트 설정편집>으로 이동합니다.
왼쪽 목록에서 시각적 스크립팅을 선택합니다.
노드 라이브러리를 확장합니다. 어셈블리 목록이 표시됩니다.
오른쪽의 어셈블리 목록 아래쪽에서 추가(+) 단추를 클릭합니다. 그러면 "(어셈블리 없음)"이 표시되는 새 항목이 목록에 추가됩니다.
새 어셈블리 항목을 클릭한 다음 검색 필드에 "Webslate"를 입력합니다. 그러면 목록이 Microsoft.Mesh.WebSlate로 좁혀질 수 있습니다. 이 항목을 선택하여 어셈블리 목록에 추가합니다.
시각적 스크립팅은 Microsoft.Mesh.WebSlate 및 해당 노드를 노드 라이브러리에 추가합니다. 프로젝트에서 노드를 사용하려면 노드 다시 생성 단추를 선택합니다.
URL 로드
이제 개발자는 시각적 스크립팅을 통해 새 URL을 로드하여 웹 콘텐츠를 실시간으로 동적으로 변경할 수 있습니다. 이 기능은 사용자 기본 설정에 따라 웹 콘텐츠를 변경하거나 실시간 데이터에 대한 응답으로 업데이트하는 등 다양한 애플리케이션에 대한 scope 확장합니다.
HTML 콘텐츠 로드
WebSlate의 이 새로운 기능을 사용하면 개발자가 적은 노력으로 HTML 파일을 TextAssets로 Unity 장면에 삭제할 수 있습니다. 이 통합은 워크플로를 간소화할 뿐만 아니라 Unity 재생 모드에서 즉각적인 피드백을 가능하게 하여 실시간 편집 및 디버깅을 향상합니다. 또한 동적 콘텐츠 전환을 지원하여 유연성과 보다 대화형 사용자 환경을 제공합니다.
메시 환경에서 보기/상호 작용을 위해 기존 HTML을 새로 만들거나 다시 사용: HTML 콘텐츠를 호스트하지 않거나 오프라인 파일을 보호하려는 경우 해당 위치에 HTML을 추가하고 장면에 자산의 일부로 포함할 수 있습니다.
런타임에 동적 로드: 파일에서 HTML을 로드하면 개발자가 Visual Scripting을 사용하여 실시간으로 변경할 수 있습니다. 이 동적 기능은 사용자 환경을 향상시킵니다.
Unity 재생 모드의 빠른 피드백 루프: 파일에서 로드된 HTML 콘텐츠를 사용하면 개발자가 Unity 재생 모드에서 변경 내용을 즉시 볼 수 있습니다.
클라우드 스크립팅의 WebSlate
개발자는 Mesh 클라우드 스크립팅을 사용하여 환경에 WebSlate를 추가할 수도 있습니다. 즉, Mesh 클라우드 스크립트로 WebSlate를 탐색한 다음 사용자 간에 동기화할 수 있습니다. 예를 들어 WebSlate 노드와 하나 이상의 상호 작용 가능한 노드를 포함하는 Mesh 클라우드 스크립트를 만들 수 있습니다. 다음으로, InteractableNode의 클릭 이벤트 처리기를 설정하여 WebSlate를 다른 URL로 이동할 수 있습니다. WebSlate과 함께 Mesh 클라우드 스크립트를 추가하면 사용자가 WebSlate 콘텐츠를 대화형으로 업데이트할 수 있습니다.
Mesh Apps의 WebSlate 노드에 대한 자세한 지침은 시각적 스크립팅 개요를 참조하세요.
일반 팁
선택한 3D 개체에 직접 스크립트 구성 요소로 WebSlate.cs 추가하고 UnlitWebSlate.mat 를 MeshRenderer Material에 추가하여 Quad 이외의 GameObjects에 WebSlate를 배치할 수 있습니다. 이로 인해 시각적 텍스처 확장, 반전 및/또는 회전이 발생할 수 있습니다.
WebSlate는 기본 URL을 로드합니다. 이 URL을 사용 중인 각 WebSlate에 대해 선호하는 URL로 바꾸어야 합니다. 밝기 매개 변수는 1.0(브라우저 밝기의 100%)으로 설정됩니다.
WebSlates는 너무 오랫동안 화면이 꺼진 후 자동으로 일시 중단됩니다. 지정된 슬레이트가 항상 실행되도록 해야 하는 경우(예: 라이브 스트림 또는 연속 오디오 재생) 연결 WebSlate에서 "일시 중단 방지" 단추를 검사. 성능에 미치는 영향은 아래를 참조하세요.
이미지 URL의 크기를 WebSlate 크기로 조정하려면 URL을 HTML로 래핑합니다. 시각적 스크립팅을 통해 WebSlate LoadHTML API를 사용하여 이 HTML 콘텐츠를 WebSlate에 렌더링합니다. 생성된 HTML을 HTMLContent 속성에 추가합니다. 또는 LoadHTMAsset API를 사용하고 HTML을 자산으로 전달할 수 있습니다. 이미지 URL을 이미지 URL로 바꿉니다.
LoadHTML 및 LoadHTMLAsset API를 사용하는 이미지 URL 및 시각적 스크립팅 그래프가 있는 샘플 HTML:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width initial-scale=1.0"><title>Microsoft</title></head><body style="margin: 0; height: 100vh; overflow: hidden; background-color: black;"><img src="https://learn.microsoft.com/en-us/mesh/media/webview-developer-guide/ArcadeWebSlate.png" loading="lazy" style="width: 100%; height: 100%;"></body></html>
성능
WebSlate는 로드된 웹 페이지이므로 성능에 미치는 영향을 고려해야 합니다.
장면은 일반적으로 최대 10개의 활성 WebSlates를 사용하여 60fps에서 수행됩니다. 프레임 속도 및 일반 성능 저하는 콘텐츠에 관계없이 장면에 배치된 WebSlates 수에 비례하여 관찰될 수 있습니다.
콘텐츠는 장면의 업데이트 및 렌더링 스레드와는 별도로 스레드의 WebSlate에서 로드되고 실행되므로 프레임 속도에 직접적인 영향을 미치지 않을 수 있습니다. 그러나 런타임 복잡성과 메모리 사용 측면에서 웹 페이지에서 실행되는 JavaScript의 비용을 고려하는 것이 여전히 중요합니다.
성능을 절약하기 위해 30대 이상 화면의 WebSlates가 자동으로 일시 중단됩니다. 화면으로 다시 돌아오면 빠르게 다시 시작되지만 호스트된 페이지에서 적극적으로 실행되는 서비스에 영향을 줄 수 있습니다. 이 문제가 있는 경우 개발자는 프리팹의 "일시 중단 방지" 확인란을 사용하여 일시 중단을 사용하지 않도록 설정할 수 있습니다. 이렇게 하면 이러한 WebSlates가 항상 활성 상태로 유지되므로 장면에서 더 많은 리소스를 사용할 수 있습니다.
WebSlates에는 기본적으로 외부 탐색 UI가 없으므로 사이트 탐색이 순환적이고 페이지 내에서 수행할 수 있는 사용자 지정 URL만 로드하는 것이 가장 좋습니다. 예를 들어 탐색 사이드바 또는 허브 페이지에 대한 링크를 사용하여 이 작업을 수행할 수 있습니다.
CPA(Content 성능 분석기) 도구에는 프레임에서 WebSlates를 렌더링하는 데 Unity의 렌더링 파이프라인이 걸리는 평균 시간을 측정하는 WebSlate 분석기가 포함되어 있습니다.
측정값은 Unity의 프로파일러 레코더를 기반으로 하며 재생 모드가 필요합니다. 분석기는 충분한 프로파일러 샘플을 수집하기 위해 각 WebSlate 위로 카메라를 이동하고 평균 렌더링 시간을 계산합니다.
이를 통해 Unity의 렌더링 파이프라인 컨텍스트에서 WebSlate 렌더링 시간을 1단계로 개략적으로 분석할 수 있습니다. WebSlate 콘텐츠 자체의 프레임 속도를 제공하지 않습니다.
Unity의 렌더링 파이프라인이 WebSlates(현재 10ms)를 렌더링하는 임계값을 초과하면 CPA 도구에서 경고를 제공합니다.
성능 프로파일러에서도 동일한 측정을 사용할 수 있습니다. 성능 프로파일러의 그룹은 일반적으로 범주에 대한 예산 허용량을 초과할 때 색을 녹색에서 빨간색으로 변경합니다. 현재 WebSlate 그룹은 WebSlates에 대해 합리적인 렌더링 시간 예산이 합리화될 때까지만 녹색으로 표시됩니다.
보안 제한 사항
WebSlates는 탐색하는 URL에 잠겨 악의적인 리디렉션을 방지합니다. 허용된 도메인으로 명시적으로 나열되지 않는 한 외부 도메인에 대한 모든 의도하지 않은 하이퍼링크 탐색이 차단됩니다(아래 참조).
WebSlates는 초기 도메인 내의 탐색 또는 지정된 URL 및 서버의 리디렉션으로 제한됩니다.
WebSlate 내의 탐색은 HTTPS로만 제한됩니다.
웹캠, 마이크 및 지리적 위치로의 디바이스 액세스가 차단됩니다.
WebSlate 도메인 허용 목록
피싱과 같은 의도하지 않은 URL 기반 공격 벡터에 대한 보안을 보장하기 위해 WebSlates는 기본적으로 WebSlate에 로드된 첫 번째 페이지의 도메인 아래에 포함된 URL의 탐색을 제한합니다. 예를 들어 에서 https://www.microsoft.com/ 시작된 WebSlate는 URL이 "www.microsoft.com"로 시작하는 페이지로만 이동합니다. 이렇게 하면 사용자가 의도한 탐색 흐름에서 실수로 전환되지 않지만 하위 도메인 또는 타사 인증 공급자로 리디렉션될 수 있는 사용자 인증과 같은 일부 사용 사례에 대해 지나치게 제한적인 기본값이 될 수 있습니다.
이러한 사용 사례를 수용하는 방법은 WebSlate의 허용 목록에 도메인을 추가하는 것입니다.
도메인 자동 추가(권장)
Unity 편집기에서 WebSlates를 사용하는 경우 "허용된 도메인 수집"을 사용하도록 설정하는 옵션이 있습니다. 이렇게 하면 시나리오를 테스트하기 위해 재생 모드에서 실행할 때 자유롭게 탐색할 수 있도록 도메인 탐색 제한이 제거됩니다. 재생 모드로 이동하는 동안 WebSlate는 백그라운드에서 방문하는 도메인을 기록합니다.
이 경우 microsoft.com 탐색을 확장하여 learn.microsoft.com 포함합니다.
재생 모드를 종료하면 최상위 자산 폴더에 "WebViewAllowedDomains.asset" 이라는 자산이 있습니다.
이 자산을 클릭하면 초기 URL의 도메인을 넘어 방문한 추가 도메인 목록이 표시됩니다. WebSlate 구성 요소의 "허용된 도메인" 필드에 값을 마우스 오른쪽 단추로 클릭하고 복사한 다음 붙여넣을 수 있습니다.
참고
업로드된 장면에서는 이 옵션을 사용하도록 설정할 수 없습니다. "허용된 도메인 수집"을 사용하도록 설정하면 최종 장면에서 제한이 제거되지 않습니다. 그러나 허용된 도메인 목록은 유지되며 도메인이 WebSlate에 추가되는 한 탐색을 허용합니다.
수동으로 도메인 추가
필요한 도메인을 이미 알고 있는 경우 "허용된 도메인" 드롭다운을 확장하고 Unity GUI의 목록에 추가 도메인을 추가하여 WebSlate에 수동으로 추가할 수 있습니다.
WebSlate에서 제공하는 라이브 스트림
이렇게 하려면 사용자 환경에서 WebSlate Prefab을 통합하고 라이브 스트림 URL을 제공합니다. 라이브 스트림 URL을 미리 사용할 수 없는 경우 URL 리디렉션 서비스를 활용하여 URL을 생성하고 WebSlate에 제공할 수 있습니다. 이 방법은 라이브 스트림 URL을 사용하여 대규모 환경을 다시 게시할 필요 없이 마지막 순간에 리디렉션 URL을 업데이트할 수 있는 유연성을 제공합니다. WebSlate 설정 중에 '일시 중단 방지' 옵션을 선택하여 다른 사용자가 WebSlate를 적극적으로 보지 않는 경우 30초 후에 일시 중단되지 않도록 해야 합니다. WebSlates는 호스트 도구를 사용하는 구성이 필요하지 않으므로 호스트 없는 이벤트를 만들고 의미 있는 콘텐츠가 있는 드롭인 공간으로 사용할 수 있습니다.
제한 사항 및 알려진 문제
일반적인 제한 사항
WebSlates는 현재 PC 독립 실행형 및 퀘스트 디바이스의 Mesh 애플리케이션에서 지원됩니다. WebSlates는 Windows의 Unity 편집기 미리 보기로만 사용할 수 있습니다.
편집기 미리 보기의 WebSlates에 몇 가지 입력 기능(두 번 클릭, 끌기)이 누락되었습니다.
퀘스트에서 멀리서 볼 때 가독성이 낮습니다.
오디오는 공간적으로 지역화되지 않습니다.
웹 콘텐츠 동기화는 웹 API를 사용하여 콘텐츠를 동기화하는 애플리케이션으로 제한됩니다.
알려진 문제
Mesh 도구 키트 알려진 문제 문서의 WebSlate 섹션을 참조하세요.
Mesh의 웹 콘텐츠에 대한 피드백
피드백과 버그 보고서를 좋아합니다! 피드백을 제공하려면 메시 환경 내에서 피드백 단추를 사용합니다. 이렇게 하면 피드백 및 버그 보고를 신속하게 검토하고 통합할 수 있습니다. WebSlate 피드백의 경우 피드백에 "[웹 콘텐츠]" 또는 WebSlate 멘션 포함합니다.