ReactVision Studio

ReactVision Studio란?

ReactVision Studio는 ReactVision 스택의 일부로, 증강현실과 가상현실 씬을 만들기 위한 브라우저 기반 시각 편집기입니다. 사용자는 컴포넌트를 캔버스에 드래그해 씬을 구성하고, StudioGo로 휴대폰이나 헤드셋에서 변경 사항을 미리 본 뒤, ViroReact를 통해 같은 씬을 React Native 앱 안에 배포할 수 있습니다.

이 제품은 브라우저에서 제작 워크플로를 유지하면서 iOS, Android, Meta Quest에서 네이티브 렌더링을 보존하도록 설계되었습니다. 페이지에 따르면 Studio가 씬 그래프를 대신 작성해 주고, 클라우드 및 지리공간 앵커를 지원하며, 프로젝트 라이브러리에 추가되는 AI 기반 3D 에셋도 생성할 수 있습니다.

주요 기능

• AR 및 VR용 브라우저 기반 씬 편집기: 데스크톱 엔진 대신 브라우저에서 시각적으로 씬을 구성합니다.
• ViroReact를 통한 React Native 배포: 단일 씬 형식을 한 개의 컴포넌트로 앱에 불러올 수 있어 런타임이 React Native 코드베이스 안에 유지됩니다.
• 네이티브 플랫폼 렌더링: iOS에서는 ARKit, Android에서는 ARCore, Meta Quest에서는 HorizonOS를 통해 렌더링합니다.
• StudioGo를 통한 실시간 기기 미리보기: 작업 중 로컬 네트워크에 연결된 실제 기기에서 편집 내용이 바로 반영되는 것을 볼 수 있습니다.
• 에셋 및 씬 관리 도구: 편집기에는 컴포넌트 인스펙터, 모델·텍스처·오디오용 에셋 라이브러리, 앵커 기반 탐색이 가능한 멀티 씬 프로젝트가 포함됩니다.
• AI 지원 3D 에셋 생성: 텍스트로 에셋을 설명하면 3D 모델을 생성해 프로젝트 라이브러리에 바로 넣을 수 있습니다.
• Expo 호환성: 페이지에 따르면 Studio는 개발 빌드로 Expo 프로젝트에 바로 넣을 수 있습니다.

ReactVision Studio 사용 방법

일반적인 워크플로는 브라우저에서 시작됩니다. 개발자나 XR 크리에이터가 Studio를 열고, 컴포넌트를 캔버스에 배치해 씬을 만듭니다. 각 노드를 검토하고, 에셋을 추가하고, 애니메이션이나 앵커를 설정한 뒤, StudioGo를 사용해 휴대폰이나 헤드셋에서 씬을 미리 볼 수 있습니다.

씬이 준비되면 React Native 앱에 StudioSceneNavigator 컴포넌트를 추가합니다. ViroReact가 런타임에 씬을 불러오므로, 팀은 변경이 있을 때마다 앱을 다시 빌드하지 않고도 시각적 씬을 계속 개선할 수 있습니다.

활용 사례

• 레이아웃과 배치 중 실제 기기 미리보기가 필요한 AR 제품 데모 제작
• 별도의 헤드셋 전용 프로젝트를 시작하지 않고 Meta Quest용 VR 또는 혼합현실 경험 제작
• 공간 씬을 포함하고 JSX에 익숙한 모바일 팀이 유지보수할 수 있는 React Native 앱 배포
• 씬 배치와 탐색을 자주 조정해야 하는 지리공간 또는 앵커 기반 경험 프로토타입 제작
• 텍스트 프롬프트로 플레이스홀더나 시작용 3D 에셋을 생성해 씬 라이브러리에 넣고 더 빠르게 구성

FAQ

ReactVision Studio는 브라우저에서 실행되나요?
네. 편집기는 브라우저 기반이며, 렌더링된 경험은 React Native와 ViroReact를 통해 네이티브로 배포됩니다.

런타임 출력은 어떤 플랫폼을 지원하나요?
페이지에는 iOS, Android, Meta Quest가 나열되어 있으며, ARKit, ARCore, HorizonOS를 통한 네이티브 렌더링을 지원합니다.

씬을 바꿀 때마다 앱을 다시 빌드해야 하나요?
페이지에 따르면 StudioSceneNavigator가 Studio에서 런타임에 씬을 불러오며, 이를 통해 팀이 앱을 다시 빌드하지 않고도 씬을 반복 개선할 수 있도록 되어 있습니다.

Expo를 사용할 수 있나요?
네. 페이지에 따르면 Studio는 Expo 호환이며, 개발 빌드로 Expo 프로젝트에 바로 넣을 수 있습니다.

AR 미리보기에 시뮬레이터를 지원하나요?
아니요. 페이지에 따르면 AR 미리보기에는 실제 물리 기기가 필요하며, 이 워크플로에서는 시뮬레이터와 에뮬레이터를 지원하지 않습니다.

대안

• Unity 기반 XR 개발: AR 및 VR 프로젝트에서 흔한 대안으로, 브라우저 편집기와 React Native 씬 런타임보다는 전체 엔진 워크플로를 사용하는 경우가 많습니다.
• Unreal 기반 XR 개발: 또 다른 엔진 중심 옵션으로, JSX 기반 React Native 통합보다 더 넓은 게임 엔진 워크플로를 원할 때 일반적으로 사용됩니다.
• WebXR 애플리케이션: 네이티브 앱 배포 없이 브라우저로 제공되는 XR 경험이지만, 페이지는 ReactVision을 브라우저 전용이 아닌 네이티브 우선 옵션으로 제시합니다.
• 수동 React Native + 플랫폼 SDK 통합: 팀은 ARKit, ARCore 또는 Quest 툴링을 직접 사용해 개발할 수 있지만, 일반적으로 Studio의 시각적 제작 흐름보다 플랫폼별 구현이 더 많이 필요합니다.