XRCLOUD ROOM의 신기능, 빠른 입장과 로고 변경

Published in

BELIVVR

9 min readOct 2, 2024

1. Room URL은 어디서 받아 올 수 있나요?

두 기능 모두 Room URL의 뒤에 쿼리파라미터를 추가함으로서 손쉽게 이용 가능합니다. ROOM의 입장 URL은 ROOM API나 혹은 XRCLOUD의 대시보드에서 Rooms메뉴를 통해 확인하실 수 있습니다. API의 경우, 10분후에 만료되는 Private Room URL을 이용하여 좀 더 보안에 신경 쓴 개발을 하실 수 있습니다.

이번 변경은 입장 과정에 대한 기능으로 XRCLOUD를 이용하는 고객 분들이 주로 ROOM을 각자의 서비스에 연결해서 쓰다보니 다양한 요구사항을 반영하여 이번 추가 기능이 개발되었습니다. 기존 ROOM은 PC의 경우 아래와 같이 총 5단계에 걸쳐서 입장하게 됩니다. 먼저 해당 입장 프로세스를 설명드리고, 변경된 점을 알려드리겠습니다.

2. XRCLOUD(Hubs)의 ROOM입장 프로세스에 대한 이해

1) Loading page

Room에 배치된 각종 리소스들을 불러오고, Room에 접속하는 단계 입니다.

2) Lobby

입장하기, 다른 장치를 이용하기, 관전하기를 선택할 수 있습니다.
현재 XRCLOUD의 파트너들은 대부분 입장하기만 이용했기 때문에 다른 기능들에 대해서는 신경을 쓰지는 못했습니다. 다른 장치를 이용하기는 VR HMD로 입장할 수 있는 단축URL을 제공하는 기능이며, 관전하기는 Room에 직접 참여하지 않고 방의 상황을 둘러보는 기능으로 Room의 접속 인원에 해당되지 않아 Room의 최대 인원 수의 제한을 받지 않습니다. 현재 XRCLOUD는 무료 버전으로 10명을 지원하지만, 현재(2024–10–02) 직접 개발을 지원해드리고 있고, 제한을 풀어드린 파트너들에게는 100명을 지원해드리고 있습니다. 내부 테스트 결과 최대 140명까지 접속이 가능합니다.

3) Avatar Viewer

Room에 접속한 아바타를 보는 창입니다. XRCLOUD에서는 아바타 선택기능은 제공하지 않으며 다른 포스팅이나 가이드에서 안내드렸듯이 avatarUrl이라는 쿼리 파라미터를 통해 아바타를 변경할 수 있습니다. 빌리버에서 개발한 전신 아바타 오픈소스나 Hackweek avatar Maker 오픈소스를 활용하거나 아바타를 다운로드 받아서 URL로 넘기시면 이용이 가능합니다
유사한 방식으로 사용가능한 표시 이름을 변경하는 쿼리파라미터는 displayName입니다.

# avataURL use example 
https://room.xrcloud.app:4000/qkoCp3x/test2?public=04f740f3-b96f-43da-90da-5c99d64e2364
&avatarUrl=https://belivvr.github.io/files/Avatars/cnu_woman.glb
&displayName=GUEST

4) I/O(Input/output) Device Setting

마이크, 스피커등의 장치 설정 메뉴 입니다. 마이크나 스피커가 여러개가 장치에 있는 경우, 잘 작동하는지 확인 후에 입장 가능합니다.

5) Room

축하합니다. 드디어 Room에 입장하셨습니다.

3. FastEntry(빠른입장)

- 생각보다 너무 많은 단계를 요구하죠 ? 게임 중요 스토리도 생략하는 유저들도 많은데 요즘 이렇게 많은 단계를 두면 유저 다 도망갑니다. 그래서 만들었습니다. fastEntry 옵션

사용방법은 매우 간단합니다. avatarUrl처럼 funcs에 쿼리파라미터를 추가하면, 모든 과정이 생략됩니다. 위 예제 URL과 아래예제 URL을 브라우져 주소창에 복사해서 들어가보시면 그 차이를 확인해 보실 수 있습니다.
funcs옵션에는 fastEntry외에도 아바타의 뒷모습을 볼 수 있는 3rd-view 가 있으며 그외에 메뉴의 컴포넌트들의 노출을 컨트롤할 수 있는 추가 파라미터가 있으나 아직 권한 정리가 제대로 끝나면 다시 한번 funcs에 관해 정리를 해서 공개하겠습니다.

# fastEntry use example
https://room.xrcloud.app:4000/qkoCp3x/test2?public=04f740f3-b96f-43da-90da-5c99d64e2364
&avatarUrl=https://belivvr.github.io/files/Avatars/cnu_woman.glb
&displayName=GUEST
&funcs=fastEntry

4. logoImg(로고 이미지)

XRCLOUD는 프로젝트별로 파비콘과 로고 이미지를 변경하는 기능을 무료로 제공하고 있었습니다.

그런데 이번에 파트너의 새로운 요구사항은 파트너 서비스의 유저별로 생성되는 룸의 로고를 변경하고 싶다는 요구사항이 나왔습니다. XRCLOUD는 Spoke 에디터를 포함한 기능을 제공하다보니 당연히 Rooms이나 Scene의 Group 관리 기능이나 이에 따른 리소스 관리 기능이 나올거라는것을 미처 예상하지 못했습니다.
그래서 Room에 직접적으로 로딩 이미지의 로고를 교체할 수 있는 쿼리파라미터를 추가했습니다. 사용법은 역시 쿼리파라미터로 logoImg로 img의 URL을 넘겨주시면 ROOM접속시 로딩 이미지와 타이틀 이미지가 변경됩니다.
아래의 이미지의 URL은https://belivvr.github.io/files/images/posting-241003.jpg 입니다.

https://belivvr.github.io/files/images/posting-241003.jpg

- 위의 예제 URL에 추가로 logoImg 쿼리 파라미터를 추가해보겠습니다.

# fastEntry use example
https://room.xrcloud.app:4000/qkoCp3x/test2?public=04f740f3-b96f-43da-90da-5c99d64e2364
&avatarUrl=https://belivvr.github.io/files/Avatars/cnu_woman.glb
&displayName=GUEST
&funcs=fastEntry
&logoImg=https://belivvr.github.io/files/images/posting-241003.jpg

그러면 아래처럼 나옵니다. 참 쉽죠?

5. XRCLOUD를 위해 BELIVVR가 현재 하고 있는 것

* https://api.xrcloud.app/docs 문서의 업데이트도 진행 예정입니다.

* 가장 현재 급하게 진행하고 있는 업무는 두가지로, Spoke에디터의 MyAsset에 업로드된 미디어의 CDN적용과 1000명이 접속 가능한 Room의 기능 제공입니다.

* 본래 hubs는 소규모 인원들이 활동하는 커뮤니티 도구로 개발되었으나 XRCLOUD의 파트너들은 주로 대단위의 대중을 위한 서비스를 하다보니 이러한 요구사항이 큽니다.

* 특히 최근 중점적으로 보고 있는것은 spoke를 통해 업로드된 myAsset의 경우 reticulum을 통해 암호화되어 모두 XRCLOUD의 hubs서버를 통해 다운로드 하는 구조다보니 대단위의 접속 서비스를 처리함에 있어서 비용증가와 성능의 병목현상이 확인되었습니다. 이러한 서비스를 보다 스케일 있게 제공함에 있어서 안정된 서비스를 만드는게 지금 제 가장 큰 숙제 이며 어떻게 하면 적은 리소스로 더 많은 서비스를 제공할 수 있을지를 고민하고 있습니다.

물론 혼자 개발 및 기술 대응까지 하면서, 펀딩 문제가 가장 제게는 가장 큰 어려움입니다. 많은 응원 바랍니다. 아. 10월 중순에 간만에 한국에서 작은 전시회를 나갈 예정으로 그동안 파트너들의 서비스를 해당 전시회에서 보여드리기 위해 XRCLOUD 서비스 페이지의 프론트 페이지도 조금 손을 볼 예정입니다.그리고 xrcloud의 news페이지의 피드가 깨졌던 문제를 해결했고, 비용 문제로 인해 MS의 foundershub 를 통해 클라우드를 지원받아 서버 이전을 하여 성능을 향상시켰습니다. 자주 소식을 전하지는 못하지만 열심히 하고 있으니 많은 응원 부탁드립니다.

감사합니다.