Oculus Quest 2는 Meta의 사업부인 Oculus에서 만든 가상 현실 (VR) 헤드셋입니다. 이제 개발자는 Oculus Quest 2의 멀티태스킹 기능을 활용하는 2D 및 3D 프로그레시브 웹 앱 (PWA)을 빌드하고 배포할 수 있습니다.
오컬러스 퀘스트 2
Oculus Quest 2는 Meta의 계열사인 Oculus에서 만든 가상 현실 (VR) 헤드셋입니다. 회사의 이전 헤드셋인 Oculus Quest의 뒤를 잇는 제품입니다. 이 기기는 내부 Android 기반 운영체제가 포함된 독립형 헤드셋으로 실행할 수 있으며 USB 또는 Wi-Fi를 통해 연결된 경우 데스크톱 컴퓨터에서 실행되는 Oculus 호환 VR 소프트웨어에서 모두 실행될 수 있습니다. 6GB RAM 칩에 Qualcomm Snapdragon XR2 시스템을 사용합니다. 퀘스트 2의 디스플레이는 눈 해상도당 1,832 × 1,920픽셀을 사용하는 단일 빠른 스위치 LCD 패널로, 최대 120Hz의 화면 재생 빈도로 실행됩니다.
Oculus 브라우저
현재 Oculus Quest 2에서 Firefox Reality의 뒤를 잇는 Wolvic과 기본 제공되는 Oculus Browser의 세 가지 브라우저를 사용할 수 있습니다. 이 문서에서는 후자에 초점을 맞춥니다. Oculus 웹사이트에서는 다음과 같이 Oculus 브라우저를 소개합니다.
"Oculus Browser는 웹에서 VR 환경을 만들 수 있도록 최신 웹 표준 및 기타 기술을 지원합니다. 오늘날의 2D 웹사이트는 Chromium 렌더링 엔진으로 구동되므로 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 Browser는 2D 웹페이지 콘텐츠와 WebXR을 모두 90Hz 새로고침 빈도로 렌더링합니다. 전체 화면 미디어를 시청할 때 Oculus Browser는 동영상의 프레임 속도(예: 24fps)에 따라 기기 새로고침 속도를 최적화합니다. Oculus Quest 2는 선명한 텍스트를 위해 기기 픽셀 비율이 1.5입니다.
Oculus Browser 및 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의 브라우저 창과 창은 사용자가 자유롭게 조절할 수 있습니다. 높이는 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 브라우저 탭에서 inspect를 클릭합니다.
앱 검색 가능성
사용자는 브라우저 자체 또는 Oculus Store를 사용하여 PWA를 검색할 수 있습니다. 설치된 PWA는 다른 브라우저와 마찬가지로 Oculus 브라우저에서 탭에서 실행되는 웹사이트처럼 작동합니다. 사용자가 사이트를 방문하면 Oculus 브라우저를 통해 Oculus 스토어에서 이용 가능한 경우에만 앱을 찾을 수 있습니다. 이미 앱을 설치한 사용자는 Oculus 브라우저를 통해 해당 앱으로 쉽게 전환할 수 있습니다.
Oculus Quest의 PWA 예시 2
메타별 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 만들기
메타는 해당 문서에 필수 단계를 설명했습니다. 일반적으로 Chrome에 설치할 수 있는 PWA는 Oculus에서 즉시 작동해야 하는 경우가 많습니다.
웹 앱 매니페스트 요구사항
Chrome의 설치 가능 여부 기준 및 웹 앱 매니페스트 사양과 비교하면 몇 가지 중요한 차이점이 있습니다. 예를 들어 Oculus는 현재 왼쪽에서 오른쪽으로 쓰는 언어만 지원하지만 웹 앱 매니페스트 사양에서는 이러한 제약 조건을 적용하지 않습니다. 또 다른 예로 start_url을 들 수 있습니다. Chrome에서는 앱을 설치할 수 있도록 반드시 필요하지만 Oculus에서는 선택사항입니다. Oculus는 개발자가 Oculus Quest 2용 PWA를 만들 수 있는 명령줄 도구를 제공합니다. 이를 통해 웹 앱 매니페스트에서 누락된 (또는 기존) 매개변수를 전달할 수 있습니다.
Oculus에는 PWA 환경을 맞춤설정하는 데 사용할 수 있는 여러 가지 선택적 독점 웹 앱 매니페스트 필드가 있습니다.
버블랩 CLI로 PWA 패키징
Bubblewrap은 오픈소스로 구성된 라이브러리이자 Node.js용 명령줄 도구 (CLI)입니다. Bubblewrap은 Chrome팀에서 PWA를 신뢰할 수 있는 웹 활동 (TWA)으로 실행하는 Android 프로젝트를 생성, 빌드, 서명하는 데 도움을 주기 위해 개발되었습니다.
Meta Quest 브라우저는 현재 TWA를 완전히 지원하지 않지만 1.18.0 버전부터 메타 퀘스트 기기용 버블랩 패키징 PWA를 지원합니다.
일반 Android 기기에서 TWA를 열고 메타 퀘스트 기기에서 메타 퀘스트 브라우저를 여는 범용 APK 파일을 생성할 수 있습니다.
Node.js가 설치되어 있다고 가정하면 다음 명령어를 사용하여 Bubblewrap CLI를 설치할 수 있습니다.
npm i -g @bubblewrap/cli
버블랩을 처음 실행하면 필요한 외부 종속 항목인 자바 개발 키트 (JDK) 및 Android SDK 빌드 도구를 자동으로 다운로드하고 설치할 수 있습니다.
PWA를 래핑하는 메타 퀘스트 호환 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 플랫폼 유틸리티로 PWA 패키징
Oculus Platform Utility는 Oculus Rift 및 MetaQuest 기기용 앱을 게시하기 위해 Meta에서 개발한 공식 명령줄 도구입니다.
또한 create-pwa 명령어로 메타 퀘스트 기기용 PWA를 패키징하고 Meta Quest 스토어 및 App Lab에 게시할 수 있습니다.
-o 매개변수를 통해 출력 파일 이름을 설정하고 --android-sdk 매개변수를 통해 Android SDK 경로를
설정합니다.
--web-manifest-url 매개변수를 통해 웹 앱 매니페스트의 라이브 URL을 도구로 가리킵니다.
라이브 PWA에 매니페스트가 없거나 라이브 매니페스트를 재정의하려는 경우에도 로컬 매니페스트 파일 및 --manifest-content-file 매개변수를 사용하여 PWA용 APK를 생성할 수 있습니다.
매니페스트를 가능한 한 순수하게 유지하려면 독점 ovr_package_name 필드를 매니페스트에 추가하는 대신 --package-name 매개변수를 역 도메인 이름 표기법 (예: com.company.app.pwa)으로 된 값과 함께 사용합니다.
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를 사용하는 것이 가장 쉬우므로 현재로서는 메타 퀘스트를 위해 PWA를 패키징하는 데 권장되는 방법입니다.
PWABuilder는 Microsoft에서 개발한 오픈소스 프로젝트로, 개발자가 Microsoft Store, Google Play 스토어, App Store, Meta Quest Store를 포함한 다양한 스토어에 게시하기 위해 PWA를 패키징하고 서명할 수 있도록 합니다.
PWABuilder를 사용하여 PWA를 패키징하려면 PWA의 URL을 입력하고, 앱의 메타데이터를 입력/수정하고, 생성 버튼을 클릭하기만 하면 됩니다.
PWABuilder를 통해 개발자는 메타 퀘스트 기기용 PWA 패키징에 사용할 내부에서 어떤 도구를 선택할 수 있습니다.
Meta Quest 옵션을 선택하여 Oculus 플랫폼 유틸리티를 사용할 수 있습니다.
Android 옵션을 선택하여 버블랩을 사용하고 메타 퀘스트 호환 체크박스를 선택할 수 있습니다.
ADB로 PWA 설치
APK 파일을 만든 후 USB 또는 Wi-Fi를 통해 ADB를 사용하여 메타 퀘스트 기기에 사이드로드할 수 있습니다.
adb install app-release-signed.apk
버블랩 CLI를 사용하여 PWA를 패키징하는 경우 APK 파일을 사이드로드할 수 있는 편리한 별칭 명령어를 제공합니다.
bubblewrap install
사이드로드된 앱은 앱 검색 창의 알 수 없는 소스 섹션에 표시됩니다.
앱 제출
Oculus 스토어에 PWA를 업로드하고 제출하는 방법은 Oculus Developer Center 문서에서 자세히 설명합니다.
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의 Oculus 버전인 SVGcode를 만들었습니다. 결과로 생성된 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 환경을 빌드하기 위한 오픈소스 웹 프레임워크입니다.
다음은 메타 퀘스트 2에 관한 데모의 스크린캐스트입니다.
Meta Quest 2에는 흑백 카메라가 있으므로 패스 스루는 그레이 스케일이지만 Meta Quest Pro에는 컬러 카메라가 있습니다.
결론
Oculus Quest 2의 PWA는 매우 재미있고 유망합니다. 사용자가 현재 작업에 가장 적합하게 화면을 조정할 수 있는 끝없는 가상 캔버스는 미래의 업무 방식을 바꿀 수 있는 많은 잠재력이 있습니다. 손 추적으로 VR로 입력하는 기능은 아직 초기 단계이며, 개인적으로는 안정적으로 작동하지 않지만, URL을 입력하거나 짧은 텍스트를 입력하는 데는 충분히 잘 작동합니다.
Oculus Quest 2의 PWA에서 가장 마음에 드는 점은 PWA가 브라우저 탭에서 또는 플랫폼별 API 없이 씬 APK 래퍼를 통해 변경 없이 사용할 수 있는 일반 PWA라는 점입니다. 동일한 코드로 여러 플랫폼을 타겟팅하는 것이 그 어느 때보다 쉬워졌습니다. 다음은 VR 및 AR 웹 버전의 PWA입니다 미래가 밝습니다!
감사의 말
Flickr에 게시된 막시밀리안 프란드스타터의 Oculus Quest 2 사진. Instagram, Facebook, Oculus Browser, Spike 앱의 이미지를 Oculus Store에서 저장하고, 앱 검색 기능 삽화와 손 추적 애니메이션은 Meta에서 제공합니다. Arnau Marín i Puig의 히어로 이미지 이 게시물을 Joe Medley가 검토했습니다.