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픽셀 해상도를 지원하고 최대 120Hz의 새로고침 빈도로 실행되는 단일 고속 스위치 LCD 패널입니다.
Oculus 브라우저
현재 Oculus Quest 2에서 사용할 수 있는 브라우저는 Firefox Reality의 후속 제품인 Wolvic과 내장된 Oculus 브라우저의 두 가지입니다. 이 도움말에서는 후자에 중점을 둡니다. Oculus 웹사이트에서는 다음과 같이 Oculus 브라우저를 소개합니다.
'Oculus 브라우저는 최신 웹 표준 및 기타 기술을 지원하여 웹에서 VR 환경을 만들 수 있도록 지원합니다. 오늘날의 2D 웹사이트는 Chromium 렌더링 엔진으로 구동되는 Oculus 브라우저에서 잘 작동합니다. 또한 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
보시다시피 현재 버전 18.1.0.2.46.337441587의 Oculus 브라우저는 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×625px입니다.
PWA와 상호작용
PWA는 Oculus 왼쪽 및 오른쪽 컨트롤러, 블루투스 마우스 및 키보드, 핸드 트래킹을 통해 제어할 수 있습니다. 스크롤은 Oculus 컨트롤러의 엄지 스틱을 사용하거나 엄지와 검지를 집어 원하는 방향으로 이동하여 작동합니다. 사용자는 무언가를 선택하기 위해 가리키고 핀치할 수 있습니다.
PWA 권한
Oculus 브라우저의 권한은 Chrome과 거의 동일한 방식으로 작동합니다. 상태는 브라우저에서 실행되는 앱과 설치된 PWA 간에 공유되므로 사용자는 동일한 권한을 다시 부여하지 않고도 두 환경 간에 전환할 수 있습니다.
많은 권한이 구현되어 있지만 일부 기능은 지원되지 않습니다. 예를 들어 위치정보 액세스 권한 요청은 성공하지만 기기에서 실제로 위치를 가져오지는 않습니다. 마찬가지로 WebHID, Web 블루투스 등 다양한 하드웨어 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 브라우저를 통해 앱으로 쉽게 전환할 수 있습니다.
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 컨퍼런스에서 공개된 Jacob Rossi가 출연하는 동영상에서 예고한 대로 Slack, Dropbox, Canva와 같은 PWA가 더 많이 출시될 예정입니다.
Oculus용 PWA 만들기
Meta는 문서에 필수 단계를 설명했습니다. 일반적으로 Chrome에 설치할 수 있는 PWA는 Oculus에서 바로 작동하는 경우가 많습니다.
웹 앱 매니페스트 요구사항
Chrome의 설치 가능성 기준 및 웹 앱 매니페스트 사양과 비교하여 몇 가지 중요한 차이점이 있습니다. 예를 들어 Oculus는 현재 왼쪽에서 오른쪽으로 쓰는 언어만 지원하는 반면 웹 앱 매니페스트 사양은 이러한 제약을 적용하지 않습니다. 또 다른 예는 Chrome에서 앱을 설치하는 데 엄격하게 요구하지만 Oculus에서는 선택사항인 start_url입니다. Oculus는 개발자가 Oculus Quest 2용 PWA를 만들 수 있는 명령줄 도구를 제공합니다. 이를 통해 개발자는 웹 앱 매니페스트에서 누락된 매개변수를 전달하거나 기존 매개변수를 재정의할 수 있습니다.
Oculus에는 PWA 환경을 맞춤설정하는 데 사용할 수 있는 여러 선택적 독점 웹 앱 매니페스트 필드가 있습니다.
Bubblewrap CLI로 PWA 패키징
Bubblewrap은 Node.js용 오픈소스 라이브러리 및 명령줄 도구 (CLI) 세트입니다. Bubblewrap은 개발자가 PWA를 신뢰할 수 있는 웹 활동 (TWA)으로 실행하는 Android 프로젝트를 생성, 빌드, 서명할 수 있도록 Google Chrome팀에서 개발했습니다.
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 Development Kit(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 플랫폼 유틸리티로 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에서 개발한 오픈소스 프로젝트로, 개발자가 Microsoft Store, Google Play 스토어, App Store, Meta Quest 스토어 등 다양한 스토어에 게시할 PWA를 패키징하고 서명할 수 있습니다.
PWABuilder로 PWA를 패키징하는 것은 PWA의 URL을 입력하고, 앱의 메타데이터를 입력/수정하고, 생성 버튼을 클릭하는 것만큼 쉽습니다.
PWABuilder를 사용하면 개발자가 Meta Quest 기기용 PWA를 패키징하는 데 사용할 내부 도구를 선택할 수 있습니다.
Meta Quest 옵션을 선택하여 Oculus 플랫폼 유틸리티를 사용할 수 있습니다.
Android 옵션을 선택하여 Bubblewrap을 사용하고 Meta Quest 호환 체크박스를 선택합니다.
ADB로 PWA 설치
APK 파일을 만든 후 USB 또는 Wi-Fi를 통해 ADB를 사용하여 Meta Quest 기기에 사이드로드할 수 있습니다.
adb install app-release-signed.apk
Bubblewrap CLI를 사용하여 PWA를 패키징하는 경우 APK 파일을 사이드로드하는 편리한 별칭 명령어가 제공됩니다.
bubblewrap install
사이드로드된 앱은 앱 검색 창의 알 수 없는 출처 섹션에 표시됩니다.
앱 제출
Oculus 스토어에 PWA를 업로드하고 제출하는 방법은 Oculus 개발자 센터 문서에 자세히 설명되어 있습니다.
개발자는 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 버전을 만들었습니다. 결과 APK 파일
output.apk은 내 Google Drive에서 다운로드할 수 있습니다. 패키지를 더 자세히 조사하고 싶다면 디컴파일된 버전도 있습니다. package.json에서 빌드 안내를 확인하세요.
파일을 열고 저장하는 기능을 비롯해 Oculus에서 앱을 사용하는 것은 문제없이 작동합니다. Oculus 브라우저는 File System Access API를 지원하지 않지만 대체 접근 방식이 도움이 됩니다. 핀치로 확대/축소만 작동하지 않았습니다. 두 컨트롤러의 트리거 버튼을 누른 다음 컨트롤러를 반대 방향으로 움직이면 작동할 것으로 예상했습니다. 그 외에는 삽입된 스크린캐스트에서 볼 수 있듯이 모든 것이 성능이 우수하고 반응성이 좋았습니다.
몰입형 3D WebXR PWA
Oculus Quest의 PWA 지원은 평면 2D 앱에만 국한되지 않습니다. 개발자는 WebXR API를 사용하여 VR용 몰입형 3D 환경을 빌드할 수 있습니다.
VR 내에서 다양한 프롬프트 (PWA 설치, 권한 요청, 알림)가 어떻게 처리되는지 궁금하신가요?
다음은 몰입형 웹 작업 그룹의 WebXR 테스트에 있는 사용자 에이전트 프롬프트 테스트의 스크린캐스트입니다.
보시다시피 VR 모드를 입력하려면 사용자의 권한이 필요합니다. 권한은 출처당 한 번 요청됩니다. 권한을 요청하면 몰입형 모드가 종료됩니다. 현재 알림은 지원되지 않습니다.
손 추적
WebXR Hand Input API와 Meta의 AI 기반 손 추적 시스템 덕분에 몰입형 모드에서 손을 사용하여 PWA와 상호작용할 수 있습니다.
다음은 몰입형 웹 워킹 그룹의 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를 사용해 보세요. 미래는 밝습니다.
감사의 말씀
Flickr의 Maximilian Prandstätter가 촬영한 Oculus Quest 2 사진 Instagram, Facebook, Oculus 브라우저, Spike 앱의 Oculus 스토어 이미지와 앱 검색 가능성 삽화, 핸드 트래킹 애니메이션은 Meta의 제공입니다. 아르나우 마린 이 푸이그의 히어로 이미지 이 게시물은 조 메들리가 검토했습니다.