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 브라우저는 웹에서 VR 환경을 만드는 데 도움이 되는 최신 웹 표준 및 기타 기술을 지원합니다. Oculus 브라우저는 Chromium 렌더링 엔진을 기반으로 하므로 오늘날의 2D 웹사이트가 Oculus 브라우저에서 잘 작동합니다. 또한 최고의 성능을 제공하고 웹 개발자가 WebXR과 같은 새로운 API로 VR의 모든 잠재력을 활용할 수 있도록 Oculus 헤드셋에 최적화되어 있습니다. 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을 모두 90 Hz 새로고침 빈도로 렌더링합니다. 전체 화면 미디어를 볼 때 Oculus 브라우저는 동영상의 프레임 속도(예: 24fps)에 따라 기기 새로고침 빈도를 최적화합니다. Oculus Quest 2는 선명한 텍스트를 위해 기기 픽셀 비율이 1.5입니다.
Oculus 브라우저의 PWA 및 Oculus Store
2021년 10월 28일, Meta(Oculus)의 제품 관리 책임자인 제이컵 로시는 Oculus Quest 및 Oculus Quest 2에 PWA가 출시될 예정이라고 공유했습니다. 다음에서는 Oculus의 PWA 환경을 설명하고 Oculus Quest 2에서 PWA를 빌드, 사이드로드, 테스트하는 방법을 설명합니다.
상태 공유
로그인 상태는 Oculus 브라우저와 PWA 간에 공유되므로 사용자가 두 가지 간에 원활하게 전환할 수 있습니다. Facebook 로그인은 기본적으로 지원됩니다. Oculus Browser에는 사용자가 브라우저와 설치된 앱 환경 간에 비밀번호를 안전하게 저장하고 공유할 수 있게 해주는 비밀번호 관리자가 포함되어 있습니다.
PWA 창 크기
브라우저 창과 설치된 PWA의 창은 사용자가 자유롭게 크기를 조절할 수 있습니다. 높이는 625~1,200픽셀 사이일 수 있습니다. 너비는 400~2,000픽셀로 설정할 수 있습니다. 기본 크기는 1,000×625픽셀입니다.
PWA와 상호작용
PWA는 Oculus 왼쪽 및 오른쪽 컨트롤러, 블루투스 마우스 및 키보드, 손 추적을 통해 제어할 수 있습니다. 스크롤은 Oculus 컨트롤러의 엄지손가락을 이용하거나 엄지손가락과 검지손가락을 모은 후 원하는 방향으로 이동하여 작동합니다. 사용자는 가리키고 모으기를 사용하여 항목을 선택할 수 있습니다.
PWA 권한
Oculus 브라우저의 권한은 Chrome과 거의 동일한 방식으로 작동합니다. 상태는 브라우저에서 실행되는 앱과 설치된 PWA 간에 공유되므로 사용자는 동일한 권한을 다시 부여하지 않고도 두 환경 간에 전환할 수 있습니다.
많은 권한이 구현되어 있지만 모든 기능이 지원되지는 않습니다. 예를 들어 위치정보 액세스 권한 요청이 성공했지만 기기가 실제로 위치를 가져오지 못하는 경우가 있습니다. 마찬가지로 WebHID, 웹 블루투스 등의 다양한 하드웨어 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
Instagram, Facebook 등 여러 Meta 부서에서 Oculus Quest 2용 PWA를 만들었습니다. 이러한 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는 현재 왼쪽에서 오른쪽으로 쓰는 언어만 지원하지만 웹 앱 매니페스트 사양은 이러한 제약 조건을 적용하지 않습니다. 또 다른 예는 start_url입니다. Chrome에서는 앱을 설치할 수 있으려면 start_url가 반드시 필요하지만 Oculus에서는 선택사항입니다. Oculus는 개발자가 Oculus Quest 2용 PWA를 만들 수 있는 명령줄 도구를 제공합니다. 이 도구를 사용하면 웹 앱 매니페스트에서 누락된 매개변수를 전달하거나 기존 매개변수를 재정의할 수 있습니다.
Oculus에는 PWA 환경을 맞춤설정하는 데 사용할 수 있는 여러 가지 선택적 독점 웹 앱 매니페스트 필드가 있습니다.
Bubblewrap CLI로 PWA 패키징
Bubblewrap은 Node.js용 오픈소스 라이브러리 모음 및 명령줄 도구(CLI)입니다. Bubblewrap은 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 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 Store, 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에서 개발한 오픈소스 프로젝트로, 개발자가 Microsoft Store, Google Play 스토어, App Store, Meta Quest Store를 비롯한 다양한 스토어에 게시하기 위해 PWA를 패키징하고 서명할 수 있습니다.
PWABuilder로 PWA를 패키징하는 것은 PWA의 URL을 입력하고, 앱의 메타데이터를 입력/수정하고, Generate 버튼을 클릭하는 것만큼 간단합니다.
PWABuilder를 사용하면 개발자가 Meta Quest 기기용 PWA 패키징에 사용할 내부 도구를 선택할 수 있습니다.
Meta Quest 옵션을 선택하여 Oculus 플랫폼 유틸리티를 사용할 수 있습니다.
Bubblewrap을 사용하려면 Android 옵션을 선택하고 Meta Quest 호환 체크박스를 선택합니다.
ADB로 PWA 설치
APK 파일을 만든 후 USB 또는 Wi-Fi를 통해 ADB를 사용하여 Meta Quest 기기에 사이드로드할 수 있습니다.
adb install app-release-signed.apk
PWA 패키징을 위해 Bubblewrap CLI를 사용하는 경우 다음과 같이 APK 파일을 사이드로드할 수 있는 편리한 별칭 명령어가 제공됩니다.
bubblewrap install
사이드로드된 앱은 앱 드로어의 알 수 없는 출처 섹션에 표시됩니다.
앱 제출
PWA를 Oculus 스토어에 업로드하고 제출하는 방법은 Oculus 개발자 센터 문서에서 자세히 다룹니다.
개발자는 Oculus 스토어에 앱을 제출하는 것 외에도 SideQuest와 같은 플랫폼을 통해 스토어 승인 없이 소비자에게 직접 안전하게 앱을 배포할 수 있습니다. 이렇게 하면 개발 초기이거나 실험 단계에 있거나 고유 잠재고객을 대상으로 하는 경우에도 최종 사용자에게 앱을 직접 제공할 수 있습니다.
탭이 여러 개인 앱 테스트
멀티탭 앱을 테스트하기 위해 다양한 링크 기능(예: 새 PWA 내 탭 열기, 현재 탭 유지, 새 브라우저 창 열기, 현재 탭에서 유지되는 WebView에서 열기)을 보여주는 작은 테스트 PWA를 만들었습니다. 머신에서 아래 명령어를 실행하여 이 앱의 로컬 설치 가능 사본을 만듭니다.
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 파일은 내 Google Driveoutput.apk에서 다운로드할 수 있습니다. 패키지를 더 자세히 조사하려면 디컴파일된 버전도 있습니다. 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와 상호작용할 수 있습니다.
다음은 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를 살펴보세요. 미래는 밝습니다.
감사의 말씀
Flickr의 Maximilian Prandstätter님이 촬영한 Oculus Quest 2 사진 Instagram, Facebook, Oculus 브라우저, Spike 앱의 Oculus 스토어 이미지와 앱 검색 가능성 그림 및 손 추적 애니메이션은 Meta에서 제공했습니다. 히어로 이미지: 아르나우 마린 이 푸익 이 게시물은 조 미들리님이 검토했습니다.