Oculus Quest 2는 Meta의 사업부인 Oculus에서 만든 가상 현실 (VR) 헤드셋입니다. 이제 개발자는 Oculus Quest 2의 멀티태스킹 기능을 활용하는 2D 및 3D 프로그레시브 웹 앱 (PWA)을 빌드하고 배포할 수 있습니다.
Oculus Quest 2
Oculus Quest 2는 Meta의 사업부인 Oculus에서 만든 가상 현실 (VR) 헤드셋입니다. 이전 헤드셋인 Oculus Quest의 후속 제품입니다. 이 기기는 Android 기반 내부 운영체제가 있는 독립형 헤드셋으로 실행할 수 있으며, USB 또는 Wi-Fi를 통해 연결된 경우 데스크톱 컴퓨터에서 실행되는 Oculus 호환 VR 소프트웨어로도 실행할 수 있습니다. 6GB RAM이 장착된 Qualcomm Snapdragon XR2 단일 칩 시스템을 사용합니다. Quest 2의 디스플레이는 눈당 1,832 × 1,920픽셀의 해상도를 제공하는 단일 고속 전환 LCD 패널로, 최대 120Hz의 화면 재생 빈도로 실행됩니다.
Oculus 브라우저
현재 Oculus Quest 2에서 사용할 수 있는 브라우저는 Firefox Reality의 후속 버전인 Wolvic과 내장된 Oculus 브라우저의 세 가지입니다. 이 도움말에서는 후자에 중점을 둡니다. Oculus 웹사이트에서는 Oculus 브라우저를 다음과 같이 소개합니다.
"Oculus Browser는 웹에서 VR 경험을 만들 수 있도록 최신 웹 표준 및 기타 기술을 지원합니다. 오늘날의 2D 웹사이트는 Chromium 렌더링 엔진으로 구동되므로 Oculus Browser에서 잘 작동합니다. 또한 Oculus 헤드셋에 최적화되어 최고의 성능을 제공하고 웹 개발자가 WebXR과 같은 새로운 API를 통해 VR의 잠재력을 최대한 활용할 수 있도록 합니다. WebXR을 통해 웹의 차세대 영역을 개척하고 있습니다."
사용자 에이전트
작성 시점의 브라우저 사용자 에이전트 문자열은 다음과 같습니다.
Mozilla/5.0 (X11; Linux x86_64; Quest 2)
AppleWebKit/537.36 (KHTML, like Gecko)
OculusBrowser/18.1.0.2.46.337441587
SamsungBrowser/4.0
Chrome/95.0.4638.74
VR
Safari/537.36
보시다시피 Oculus 브라우저의 현재 버전 18.1.0.2.46.337441587은 Chrome 95.0.4638.74을 기반으로 합니다. 이는 Chrome의 현재 안정화 버전인 96.0.4664.110보다 한 버전만 뒤처진 것입니다. 사용자가 모바일 모드로 전환하면 VR가 Mobile VR로 변경됩니다.
사용자 인터페이스
브라우저의 사용자 인터페이스 (위 그림 참고)에는 다음과 같은 기능이 있습니다 (상단 행 왼쪽에서 오른쪽으로).
- 뒤로 버튼
- 새로고침 버튼
- 사이트 정보
- URL 표시줄
- 북마크 만들기 버튼
- 좁게, 중간, 넓게 옵션과 확대/축소 기능이 있는 크기 조절 버튼
- 모바일 웹사이트 요청 버튼
- 다음 옵션이 있는 메뉴 버튼:
- 비공개 모드 시작
- 탭 모두 닫기
- 설정
- 북마크
- 다운로드
- 기록
- 인터넷 사용 기록 삭제
하단 행에는 다음 기능이 포함됩니다.
- 닫기 버튼
- 최소화 버튼
- 뒤로, 앞으로, 새로고침 옵션이 있는 점 3개 버튼
화면 재생 빈도 및 기기 픽셀 비율
Oculus Quest 2의 경우 Oculus 브라우저는 2D 웹페이지 콘텐츠와 WebXR을 모두 90Hz 화면 재생 빈도로 렌더링합니다. 전체 화면 미디어를 시청할 때 Oculus 브라우저는 동영상의 프레임 속도(예: 24fps)를 기반으로 기기 화면 재생 빈도를 최적화합니다. Oculus Quest 2의 기기 픽셀 비율은 1.5로, 텍스트가 선명하게 표시됩니다.
Oculus 브라우저 및 Oculus 스토어의 PWA
2021년 10월 28일, Meta (Oculus)의 제품 관리 책임자인 Jacob Rossi는 Oculus Quest와 Oculus Quest 2에 PWA가 출시된다고 공유했습니다. 다음에서는 Oculus의 PWA 환경을 설명하고 Oculus Quest 2에서 PWA를 빌드, 사이드로드, 테스트하는 방법을 설명합니다.
상태 공유
로그인 상태는 Oculus 브라우저와 PWA 간에 공유되므로 사용자가 두 브라우저 간에 원활하게 전환할 수 있습니다. Facebook 로그인은 기본적으로 지원됩니다. Oculus 브라우저에는 사용자가 브라우저와 설치된 앱 환경 간에 비밀번호를 안전하게 저장하고 공유할 수 있는 비밀번호 관리자가 포함되어 있습니다.
PWA 창 크기
사용자는 브라우저 창과 설치된 PWA 창의 크기를 자유롭게 조절할 수 있습니다. 높이는 625px에서 1,200px 사이일 수 있습니다. 너비는 400px에서 2,000px 사이로 설정할 수 있습니다. 기본 크기는 1,000 × 625픽셀입니다.
PWA와 상호작용하기
PWA는 Oculus 왼쪽 및 오른쪽 컨트롤러, 블루투스 마우스 및 키보드, 핸드 트래킹을 통해 제어할 수 있습니다. Oculus 컨트롤러의 엄지 스틱을 사용하거나 엄지와 검지를 모아 원하는 방향으로 움직여 스크롤할 수 있습니다. 사용자는 가리키고 손가락을 모아 무언가를 선택할 수 있습니다
PWA 권한
Oculus 브라우저의 권한은 Chrome과 거의 동일한 방식으로 작동합니다. 상태는 브라우저에서 실행되는 앱과 설치된 PWA 간에 공유되므로 사용자는 동일한 권한을 다시 부여하지 않고도 두 환경 간에 전환할 수 있습니다.
많은 권한이 구현되어 있지만 일부 기능은 지원되지 않습니다. 예를 들어 위치정보 정보 액세스 권한 요청은 성공하지만 기기가 실제로 위치를 가져오지 못합니다. 마찬가지로 WebHID, Web Bluetooth 등 다양한 하드웨어 API는 모두 기능 감지를 통과하지만 사용자가 Oculus를 하드웨어 기기와 페어링할 수 있는 선택 도구를 실제로 표시하지는 않습니다. 브라우저가 성숙해지면 API의 기능 감지 가능성이 개선될 것으로 생각합니다.
Chrome DevTools를 통한 PWA 디버깅
개발자 모드를 사용 설정한 후 Oculus Quest 2에서 PWA를 디버깅하는 작업은 Android 기기 원격 디버그에 설명된 대로 정확하게 작동합니다.
- Oculus 기기의 Oculus 브라우저에서 원하는 사이트로 이동합니다.
- 컴퓨터에서 Chrome을 실행하고
chrome://inspect/#devices로 이동합니다. - 해당 Oculus 기기를 찾으면 기기에서 현재 열려 있는 Oculus 브라우저 탭이 표시됩니다.
- 원하는 Oculus 브라우저 탭에서 검사를 클릭합니다.
앱 검색
사용자는 브라우저 자체 또는 Oculus 스토어를 사용하여 PWA를 검색할 수 있습니다. 다른 브라우저와 마찬가지로 설치된 PWA는 Oculus 브라우저에서도 탭에서 실행되는 웹사이트로 작동합니다. 사용자가 사이트를 방문하면 Oculus 브라우저는 Oculus 스토어에서 앱을 사용할 수 있는 경우에만 앱을 검색할 수 있도록 도와줍니다. 이미 앱을 설치한 사용자의 경우 Oculus Browser를 사용하면 원하는 경우 앱으로 쉽게 전환할 수 있습니다.
Oculus Quest 2의 모범적인 PWA
Meta의 PWA
여러 Meta 부서에서 Oculus Quest 2용 PWA를 만들었습니다(예: Instagram 및 Facebook). 이러한 PWA는 URL 표시줄이 없고 크기를 자유롭게 조절할 수 있는 독립형 앱 창에서 실행됩니다.
다른 개발자의 PWA
이 글을 작성하는 시점에는 Oculus 스토어에 Oculus Quest 2용 PWA가 많지 않지만 점점 늘어나고 있습니다. Spike를 사용하면 사용자는 Spike 앱의 가상 환경 허브에서 이메일, 채팅, 통화, 메모, 작업, 할 일과 같은 모든 필수 업무 도구를 받은편지함에서 경험할 수 있습니다.
또 다른 예는 프로젝트 관리, 자동화된 워크플로, 새로운 솔루션의 빠른 빌드를 제공하는 동적 작업공간인 Smartsheet입니다.
2021년 Facebook의 Connect 컨퍼런스에서 공개된 제이콥 로시가 출연한 동영상에서 예고한 바와 같이 Slack, Dropbox, Canva와 같은 더 많은 PWA가 출시될 예정입니다.
Oculus용 PWA 만들기
Meta는 문서에 필요한 단계를 설명했습니다. 일반적으로 Chrome에 설치할 수 있는 PWA는 Oculus에서 바로 작동하는 경우가 많습니다.
웹 앱 매니페스트 요구사항
Chrome의 설치 가능성 기준 및 웹 앱 매니페스트 사양과 비교하여 몇 가지 중요한 차이점이 있습니다. 예를 들어 Oculus는 현재 왼쪽에서 오른쪽으로 쓰는 언어만 지원하지만 웹 앱 매니페스트 사양에는 이러한 제약 조건이 없습니다. 또 다른 예는 start_url입니다. Chrome에서는 앱을 설치할 수 있도록 이 속성을 엄격하게 요구하지만 Oculus에서는 선택사항입니다. Oculus는 개발자가 Oculus Quest 2용 PWA를 만들 수 있는 명령줄 도구를 제공합니다. 이를 통해 개발자는 웹 앱 매니페스트에서 누락된 매개변수를 전달하거나 기존 매개변수를 재정의할 수 있습니다.
Oculus에는 PWA 환경을 맞춤설정하는 데 사용할 수 있는 여러 가지 선택적 독점 웹 앱 매니페스트 필드가 있습니다.
Bubblewrap CLI를 사용한 PWA 패키징
Bubblewrap은 Node.js용 오픈소스 라이브러리 및 명령줄 도구 (CLI)입니다. Bubblewrap은 Google Chrome팀에서 개발한 도구로, 개발자가 PWA를 신뢰할 수 있는 웹 활동 (TWA)으로 실행하는 Android 프로젝트를 생성, 빌드, 서명하는 데 도움이 됩니다.
Meta Quest 브라우저는 현재 TWA를 완전히 지원하지 않지만 버전 1.18.0부터 Bubblewrap은 Meta Quest 기기용 PWA 패키징을 지원합니다.
일반 Android 기기에서는 TWA를 열고 Meta Quest 기기에서는 Meta Quest 브라우저를 여는 범용 APK 파일을 생성할 수 있습니다.
Node.js가 설치되어 있다고 가정하면 다음 명령어를 사용하여 Bubblewrap CLI를 설치할 수 있습니다.
npm i -g @bubblewrap/cli
Bubblewrap을 처음 실행하면 필요한 외부 종속 항목인 Java 개발 키트 (JDK)와 Android SDK 빌드 도구를 자동으로 다운로드하고 설치하라는 메시지가 표시됩니다.
PWA를 래핑하는 Meta Quest 호환 Android 프로젝트를 생성하려면 --metaquest 플래그와 함께 init 명령어를 실행하고 마법사를 따릅니다.
bubblewrap init --manifest="https://your.web.app/manifest.json" --metaquest
프로젝트가 생성되면 다음을 실행하여 빌드하고 서명합니다.
bubblewrap build
그러면 app-release-signed.apk이라는 파일이 출력됩니다. 이 파일은 기기에 설치하거나 Meta Quest 스토어, Google Play 스토어 또는 기타 Android 앱 배포 플랫폼에 게시할 수 있습니다.
Oculus Platform Utility를 사용하여 PWA 패키징
Oculus Platform Utility는 Oculus Rift 및 Meta Quest 기기용 앱을 게시하기 위해 Meta에서 개발한 공식 명령줄 도구입니다.
또한 create-pwa 명령어를 사용하여 Meta Quest 기기용 PWA를 패키징하고 Meta Quest 스토어 및 App Lab에 게시할 수 있습니다.
-o 매개변수를 통해 출력 파일 이름을 설정하고 --android-sdk 매개변수를 통해 Android SDK 경로를 설정합니다.
--web-manifest-url 매개변수를 통해 웹 앱 매니페스트의 라이브 URL을 가리킵니다.
라이브 PWA에 매니페스트가 없거나 라이브 매니페스트를 재정의하려는 경우에도 로컬 매니페스트 파일과 --manifest-content-file 매개변수를 사용하여 PWA의 APK를 생성할 수 있습니다.
매니페스트를 최대한 순수하게 유지하려면 독점 ovr_package_name 필드를 매니페스트에 추가하는 대신 역방향 도메인 이름 표기법 (예: com.company.app.pwa)의 값과 함께 --package-name 매개변수를 사용합니다.
ovr-platform-util create-pwa -o output.apk --android-sdk ~/bin/android-10 --manifest-content-file manifest.json --package-name com.company.app.pwa
PWABuilder로 PWA 패키징
PWABuilder를 사용하는 것은 작성자의 관점에서 가장 쉽고 현재 Meta Quest용 PWA를 패키징하는 데 권장되는 방법입니다.
PWABuilder는 Microsoft에서 개발한 오픈소스 프로젝트로, 개발자가 PWA를 패키징하고 서명하여 Microsoft Store, Google Play 스토어, App Store, Meta Quest 스토어 등 다양한 앱 스토어에 게시할 수 있습니다.
PWABuilder를 사용하여 PWA를 패키징하는 방법은 PWA의 URL을 입력하고 앱의 메타데이터를 입력/수정하고 생성 버튼을 클릭하는 것만큼 간단합니다.
PWABuilder를 사용하면 개발자가 Meta Quest 기기용 PWA를 패키징하는 데 사용할 내부 도구를 선택할 수 있습니다.
Meta Quest 옵션을 선택하여 Oculus Platform Utility를 사용할 수 있습니다.
Android 옵션을 선택하여 Bubblewrap을 사용하고 Meta Quest 호환 체크박스를 선택할 수 있습니다.
ADB로 PWA 설치하기
APK 파일을 만든 후 USB 또는 Wi-Fi를 통해 ADB를 사용하여 Meta Quest 기기에 사이드로드할 수 있습니다.
adb install app-release-signed.apk
PWA 패키징에 Bubblewrap CLI를 사용하는 경우 APK 파일을 사이드로드하는 편리한 별칭 명령어가 제공됩니다.
bubblewrap install
사이드로드된 앱은 앱 검색 창의 알 수 없는 소스 섹션에 표시됩니다.
앱 제출
Oculus 스토어에 PWA를 업로드하고 제출하는 방법은 Oculus Developer Center 문서에 자세히 설명되어 있습니다.
개발자는 Oculus 스토어에 앱을 제출하는 것 외에도 SideQuest와 같은 플랫폼을 통해 스토어 승인 없이 소비자에게 직접 안전하게 앱을 배포할 수 있습니다. 이를 통해 개발자는 개발 초기 단계에 있거나 실험적이거나 고유한 잠재고객을 대상으로 하는 앱이라도 최종 사용자에게 직접 제공할 수 있습니다.
멀티 탭 앱 테스트
멀티 탭 앱을 테스트하기 위해 다양한 링크 기능을 보여주는 작은 테스트 PWA를 만들었습니다. 즉, 새 PWA 내 탭을 열고, 현재 탭에 머무르고, 새 브라우저 창을 열고, 현재 탭에 머무르는 WebView에서 여는 것입니다. 머신에서 아래 명령어를 실행하여 이 앱의 로컬 설치 가능 사본을 만듭니다.
ovr-platform-util create-pwa -o test.apk --android-skd ~/bin/android-10 --web-manifest-url https://tomayac.github.io/oculus-pwa-test/manifest.json --package-name com.example.pwa
adb install test.apk
다음은 테스트 앱의 스크린캐스트입니다.
SVGcode의 Oculus 버전
안내를 직접 사용해 보기 위해 최근 PWA인 SVGcode의 Oculus 버전을 만들었습니다. 내 Google Drive에서 결과 APK 파일 output.apk을 다운로드할 수 있습니다. 패키지를 더 자세히 조사하려면 디컴파일된 버전도 있습니다. package.json에서 빌드 안내를 확인하세요.
Oculus에서 앱을 사용하면 파일을 열고 저장하는 기능을 포함하여 정상적으로 작동합니다. Oculus 브라우저는 파일 시스템 Access API를 지원하지 않지만 대체 접근 방식이 도움이 됩니다. 작동하지 않는 유일한 기능은 핀치 확대/축소입니다. 양쪽 컨트롤러의 트리거 버튼을 누른 다음 컨트롤러를 반대 방향으로 움직이면 작동할 것으로 예상했습니다. 그 외에는 삽입된 스크린캐스트에서 볼 수 있듯이 모든 것이 성능이 우수하고 반응성이 뛰어났습니다.
몰입형 3D WebXR PWA
Oculus Quest의 PWA 지원은 평면 2D 앱에만 국한되지 않습니다. 개발자는 WebXR API를 사용하여 VR을 위한 몰입형 3D 환경을 빌드할 수 있습니다.
VR 내에서 다양한 프롬프트 (PWA 설치, 권한 요청, 알림)가 어떻게 처리되는지 궁금합니다.
다음은 Immersive Web Working Group의 WebXR 테스트에서 사용자 에이전트 프롬프트 테스트를 보여주는 스크린캐스트입니다.
보시다시피 가상 현실 모드로 전환하려면 사용자의 권한이 필요합니다. 권한은 출처당 한 번 요청됩니다. 권한을 요청하면 몰입형 모드가 종료됩니다. 현재 알림은 지원되지 않습니다.
핸드 트래킹
WebXR Hand Input API와 Meta의 AI 기반 핸드 트래킹 시스템 덕분에 손을 사용하여 몰입형 모드에서 PWA와 상호작용할 수 있습니다.
다음은 Immersive Web Working Group의 WebXR 샘플에 있는 핸드 트래킹 샘플의 스크린캐스트입니다.
증강/혼합 현실 (패스스루)
Meta Connect 2022에서 발표한 바와 같이 Meta Quest 브라우저는 Meta Quest 2 및 Meta Quest Pro 기기에서 혼합 현실 (MR)이라고도 하는 WebXR 증강 현실 (AR)에 대한 지원을 추가했습니다.
증강 현실을 위해 축소된 모델과 숨겨진 하늘 및 평면이 있는 약간 수정된 A-Frame 시작 예시를 확인해 보겠습니다.
A-Frame은 읽고 이해하고 복사하여 붙여넣기 쉬운 선언적이고 재사용 가능한 맞춤 HTML 요소를 사용하여 3D/VR/AR 환경을 구축하기 위한 오픈소스 웹 프레임워크입니다.
다음은 Meta Quest 2에서 이 데모를 보여주는 스크린캐스트입니다.
Meta Quest 2에는 흑백 카메라가 있으므로 패스 스루가 그레이 스케일로 표시되는 반면 Meta Quest Pro에는 컬러 카메라가 있습니다.
결론
Oculus Quest 2의 PWA는 매우 재미있고 유망합니다. 사용자가 현재 작업에 가장 적합한 크기로 화면을 조정할 수 있는 무한한 가상 캔버스는 향후 업무 방식을 바꿀 수 있는 많은 잠재력을 가지고 있습니다. 핸드 트래킹을 사용한 VR 입력은 아직 초기 단계이며, 적어도 저에게는 아직 안정적으로 작동하지 않지만 URL을 입력하거나 짧은 텍스트를 입력하는 데는 충분히 잘 작동합니다.
Oculus Quest 2의 PWA에서 가장 마음에 드는 점은 플랫폼별 API 없이 브라우저 탭에서 또는 얇은 APK 래퍼를 통해 변경되지 않은 상태로 사용할 수 있는 일반 PWA라는 점입니다. 동일한 코드로 여러 플랫폼을 타겟팅하는 것이 그 어느 때보다 쉬워졌습니다. 웹에서 VR 및 AR의 PWA를 살펴보세요. 미래는 밝습니다.
감사의 말씀
Oculus Quest 2 사진: Maximilian Prandstätter(Flickr) Instagram, Facebook, Oculus Browser, Spike 앱의 Oculus Store 이미지, 앱 검색 가능성 그림, 핸드 트래킹 애니메이션은 Meta에서 제공했습니다. 이 게시물은 조 메들리가 검토했습니다.