[XRCLOUD] 웹 메타버스에서 쇼핑과 Unity콘텐츠를, 인라인프레임 컴포넌트
예고드렸던 XRCLOUD의 야심찬 새 기능 하나를 소개 드립니다. 본 기능은 Mozilla Hubs에 정식 기능이 아닌, 빌리버의 커스텀 기능 인라인 프레임 컴포넌트는 “웹 메타버스에서 쇼핑을 하거나, Unity WebGL콘텐츠를 쓸 수 없을까?” 에서 개발된 기능입니다. 먼저 사용 영상을 보여드리겠습니다.
이 기능이 가진 가능성을 눈치 채셨나요? 보다 상세한 사용 방법도 설명 드리겠습니다.
1. 인라인 프레임 컴포넌트 Spoke에디터 사용 방법 설명
현재 Staging 서버에만 배포되어있고, 파트너들에게 우선 제공하려고 테스트 중인 기능입니다. 아래의 그림에 있는 기능으로 크게 3개의 옵션 값을 받습니다.
각 옵션 값에 대해 설명 드리겠습니다.
1. ImageURL : 해당 기능은 이미지 버튼 역할을 하게 되므로 이미지 파일의 링크를 올리는 곳입니다. 웹에디터에서 이미지 파일을 올리고 Copy URL로 박아넣으시면 됩니다.
2. URL : 해당 이미지 버튼을 눌렀을때 목적 URL입니다. 해당 URL에는 모바일 쇼핑 페이지나 유니티 WebGL콘텐츠가 올라가 있는 링크를 넣으시면 됩니다.
3. Frame Option: 해당 링크가 Hubs 메타버스 플레이 화면에서 어느쪽에서 보여지는 가를 결정 하는 타겟입니다. Main과 Side가 있는데, Main은 3D화면이 보이는 영역이고, Side는 왼쪽 채팅 영역을 대신하게 됩니다. Side는 주로 모바일 페이지 형식의 사이트를 뿌릴 때, Main은 전체 페이지를 뿌릴때를 하면 좋습니다. Main은 PC에서는 채팅 영역이 바로 활성화 되므로, 메타버스를 활용한 교육 등에 이용하면 좋아서 저희는 WebGL콘텐츠에 활용을 가이드하고 있습니다.
이를 기반으로 다양한 Unity 웹 실감콘텐츠도 저희 XRCLOUD내에서 친구들과 교실에서 같이 소비할 수 있도록 만들었습니다. 이름에서 눈치 채셨을지 모르겠지만, 인라인 프레임은 HTML태그 iframe의 풀네임입니다. 해당 영역은 iframe으로 구현되어있습니다. 아쉽게도 VR HMD의 몰입형모드에서는 제공되지 않는 태그 기능입니다. WebXR에서도 iframe구현에 대한 요구사항들이 계속 제시되고 있는 것으로 알고 있으니 조만간 표준이 구현되지 않을까도 살짝 기대합니다.
2. 제공 CMS 관리도구의 WebGL페이지 관리도구
또한 저희는 이 인라인 프레임을 200%활용할 수 있도록 파트너들과 구축 중인 CMS에서는 Unity의 WebGL콘텐츠를 배포하는 관리도구를 제공합니다. 강력한 CMS의 기능들에 대해서는 다시 포스팅을 따로 올리겠지만, 이 중 WebGL콘텐츠 관리도구는 Unity WebGL콘텐츠를 배포하는데 쓸 수 있도록 구현했습니다. WebGL 파일을 압축 파일로 올리면 시스템에서 자동으로 배포 되고 URL과 썸네일을 추출하여 메타버스 공간 관리도구에서 공간에디터에 배포를 할 수 있습니다.
3. 인라인 프레임간의 데이터 전달
그런데 이 기능을 조금 더 잘 쓰기 위해서는 인라인 프레임과 3D공간가의 데이터가 동적으로 전달 되어야 한다고 생각하셨을 겁니다. 그래야 삽입된 페이지에서 유저를 구분하여 처리를 한다던지의 액션이 필요하기 때문입니다. 통제권이 있는 웹페이지라면 세션이나 쿠키에 담아서 데이터를 공유하는 것이 가능하겠지만, 그게 아닌 경우는 API등을 통해 정식으로 데이터를 넘겨줘야 하기 때문입니다.
해당 부분은 getRoom API를 통해 Room을 접근하는 인스턴스 URL을 가져오게 되는데, 이 때 프레임에 넘길 값을 “LinkPayload”로 넘기면, 프레임에 Body나 Header에 심어 넘기기로 프로토콜을 협의 중에 있습니다. API 문서는 조만간 다시 공유드리겠습니다.
왜냐하면 룸을 띄우는 페이지는 저 목적 페이지에 대한 협의에 대한 권한을 가지고 있거나 혹은 플랫폼 내부 페이지 일 것이기 때문입니다. 위의 WebGL예제의 경우, 목적 URL이 XRCLOUD를 이용하여 만들고 있는 사이트입니다. 이를 통해 사용자의 id에 대한 인증 값을 넘겨 WebGL콘텐츠에 사용자에 식별하는 값을 던지거나 하게 개발하려 합니다.
메타버스에서 iframe으로 데이터를 전달하는 규약 뿐만 아니라, 메타버스(Room)에 데이터를 전달하게 하면 사실상 패널 처럼 이용도 가능합니다. iframe 도 결국 외부 웹서비스기 때문으로 해당 부분의 API도 고려 중에 있습니다.
4. XRCLOUD의 큰 가능성은 바로 웹의 연결성 입니다.
WebXR기반의 메타버스 XRCLOUD가 가진 장점은 이렇듯 연결과 무한한 확장성에 있습니다. 사이드뷰의 경우 모바일 페이지와 레이아웃이 같기 때문에 모바일 페이지를 그대로 사용이 가능합니다. 이러한 기능은 엣지 브라우져나 웨일브라우져에 있는 사이드 바 기능과 같습니다. 실제로 제가 만든 샘플도 엣지브라우저의 사이드 바의 페이지로 부터 가져온 겁니다.
빨리 서비스 서버에 적용하여 보다 많은 사람들이 써볼 수 있도록 하고 싶지만, 여력이 충분하지 않고 그래도 저희가 열심히 하고 있으며 멋진 기능이 있다는 것을 알려드리고 싶어 본 포스팅을 작성했습니다.
