MiniApp 표준화 백서 버전 2

MiniApp의 보급은 공유 자전거를 번거로운 애플리케이션이 아니라 매끄러운 서비스로 만드는 데 도움이 됩니다.

• 사용자는 모바일 기기에서 MiniApp 플랫폼 중 하나를 선택하며, 이는 보통 이미 로그인되어 있는 슈퍼 앱입니다.
• 사용자는 슈퍼 앱 안에서 공유 자전거에 부착된 QR 코드 라벨을 스캔합니다.
• 호스팅된 앱은 자동으로 공유 자전거 MiniApp으로 이동하고 즉시 자전거의 잠금을 해제합니다.
• 도착하면 사용자는 MiniApp에서 자전거를 잠급니다.
• 거래가 완료되고 결제 세부 정보 메시지가 사용자에게 전송됩니다.

사용자에게 MiniApp은 여러 관점에서 편의성을 가져올 수 있습니다.

MiniApp 개발자는 HTML/CSS/JavaScript를 프로그래밍 언어로 간단히 사용할 수 있으며, MiniApp은 더 유연하므로 일상 업무에서 복잡한 기능을 빠르게 개발하는 데 뛰어납니다.

이 MiniApp은 AI 기술로 동물을 인식하는 AR 동물원을 만들려고 합니다. 개발자는 네이티브 기능이나 고급 기능(예: 이미지 인식, AR 3D 동물 모델 렌더링, 음성 합성을 위한 음성 API, 지도 SDK가 제공하는 AR 내비게이션)에 접근할 수 있는 몇 가지 컴포넌트나 API를 추가하여 이를 쉽게 수행할 수 있습니다.

MiniApp은 검색 엔진, 검색 엔진, 호스팅된 앱의 MiniApp 스토어 또는 QR 코드로 발견될 수 있습니다.

개발자에게 MiniApp을 개발할 유인은 매우 분명합니다.

MiniApp의 목표 중 하나는 서로 다른 플랫폼 간에 정보와 서비스를 연결하는 것이므로, 스마트 자동차, 음성 제어 스피커, 스마트 TV 같은 IoT 애플리케이션에 이상적입니다.

현재 일부 MiniApp을 차량 화면과 시스템에 맞게 변환하는 것이 가능합니다. 또한 몇몇 MiniApp 벤더는 다양한 차량 모델에 애플리케이션을 배포하거나 업그레이드하는 데 도움이 되도록 차량 시스템을 위해 특별히 설계된 MiniApp 플랫폼을 구축했습니다. 이는 수백만 명의 Web 개발자를 자동차 애플리케이션 생태계로 끌어들입니다.

이러한 자동차 MiniApp은 주유, 세차, 전자 통행료 징수, 보험, 식당 예약 또는 엔터테인먼트 등 많은 사용자 시나리오를 제공할 수 있습니다. 예를 들어 시스템이 남은 연료가 20% 미만임을 감지하면 소유자에게 주유 MiniApp을 추천할 수 있습니다. 사용자는 가장 가까운 주유소 정보를 얻고 그곳으로 이동해 MiniApp 안에서의 결제를 포함하여 "차량에서 내리지 않고 주유"를 완료할 수 있습니다.

IoT 기기는 MiniApp을 실행하는 또 다른 매개체가 되고 있습니다. IoT용 MiniApp은 여러 IoT 기기 플랫폼과 운영 체제 전반의 상호운용성을 가능하게 하려는 것입니다. 여러 IoT 기기 플랫폼과 IoT 운영 체제 간의 차이를 다루는 대신, IoT용 MiniApp을 도입함으로써 개발자는 IoT 기기에서의 애플리케이션 개발에만 집중하면 됩니다.

한 가지 예는 화면과 여러 물리 버튼을 갖춘 HVAC(난방, 환기 및 공기 조절) 애플리케이션 스위치 패널입니다. 이 경우 IoT용 MiniApp을 도입함으로써 Web 기술을 사용해 스위치 패널의 화면 UI를 설계하고 개발하여 HVAC 정보를 표시할 수 있습니다. 예를 들어 물리 장치로 입력된 목표 온도 값과 측정된 실시간 온도 값을 표시할 수 있습니다.

또 다른 예는 터치스크린이 있는 스마트 스피커입니다. 이 경우 IoT용 MiniApp을 도입함으로써 스마트 스피커의 터치스크린 UI를 Web 기술로 설계하고 개발하여 음악과 비디오를 재생하고, 가정의 IoT 기기를 제어하며, 온라인 쇼핑을 할 수 있습니다.

사용자 상호작용이 터치스크린에 의존하는 모바일 폰에서 실행되는 MiniApp과 달리, TV에서 실행되는 MiniApp의 사용자 상호작용은 TV 리모컨 패널 키보드와 TV 화면 포커스로 전환됩니다.

TV용 MiniApp을 통해 사용자는 E-commerce MiniApp을 통해 TV에서 상품을 구매할 수 있습니다.

또한 사용자는 Gaming MiniApp을 통해 TV에서 게임을 할 수 있습니다.

MiniApp에서는 일반적으로 뷰 계층이 로직 계층과 분리됩니다.

뷰 계층은 Web 컴포넌트와 네이티브 컴포넌트 표시를 포함해 MiniApp 페이지를 렌더링하는 역할을 하며, 이는 하이브리드 렌더링으로 볼 수 있습니다. 예를 들어 일부 Web 컴포넌트는 WebView에서 지원되지 않거나 성능 제한이 있을 수 있으므로, MiniApp은 지도, 비디오 등과 같은 네이티브 컴포넌트에도 의존합니다.

로직 계층은 JavaScript Workers로 구현됩니다. 워커는 MiniApp의 이벤트 처리, API 호출 및 생명주기 관리를 담당합니다.

확장된 네이티브 기능은 일반적으로 호스팅 네이티브 앱 또는 OS에서 제공되며, 결제, 파일 처리, 이미지 스캔, 전화 통화 등을 포함합니다. 이러한 기능은 특정 API를 통해 호출됩니다. MiniApp이 네이티브 API를 호출하면 JavaScript Bridge를 통해 API 호출을 확장된 네이티브 기능으로 전달하여 추가 처리를 수행합니다. 결과도 JavaScript Bridge를 통해 확장된 네이티브 기능에서 얻습니다.

워커는 각 Render에 대한 연결을 설정하고, 렌더링해야 하는 데이터를 Render에 전달하여 추가 처리를 수행하게 합니다.

MiniApp 페이지의 컴포넌트에 의해 이벤트가 트리거되면, 이 페이지의 Render는 추가 처리를 위해 이벤트를 워커로 보냅니다. 동시에 Render는 MiniApp 페이지를 다시 렌더링하기 위해 워커에서 전송되는 데이터를 기다립니다.

렌더링은 상태가 없는 것으로 볼 수 있으며, 모든 상태는 워커에 저장됩니다.

뷰 계층과 로직 계층을 분리하는 이점은 다음과 같습니다.

• 여러 MiniApp 페이지 간의 데이터 공유와 상호작용에 매우 편리합니다.
• MiniApp의 생명주기 내에서 동일한 컨텍스트를 가지면 네이티브 앱 개발 배경을 가진 개발자에게 유사한 코딩 경험을 제공할 수 있습니다.
• 렌더와 JavaScript 워커를 분리하고 병렬로 구현하면 JavaScript 실행이 페이지 렌더링에 영향을 주거나 속도를 늦추는 상황을 방지할 수 있으며, 이는 렌더링 성능 향상에 도움이 됩니다.

MiniApp 플랫폼은 개발자가 멋진 UI를 구축할 수 있도록 많은 컴포넌트를 제공합니다. 여기에는 view, form, image 같은 기본 컴포넌트와 지도 같은 고수준 컴포넌트가 포함됩니다.

MiniApp 벤더는 개발자가 Web 및 네이티브 기능에 모두 접근할 수 있도록 많은 API도 제공합니다. 여기에는 UI 표시 API, 이미지 처리 API와 같은 기본 인터페이스뿐만 아니라 사용자 계정 API, 지도 API, 결제 API 같은 고급 인터페이스도 포함됩니다.

API는 보통 컴포넌트와 함께 작동합니다. 사용자가 MiniApp 페이지에서 특정 컴포넌트를 클릭하면, 관련 API를 호출하여 사용자의 상호작용을 완료하고 필요한 경우 현재 MiniApp 페이지를 새로 고칩니다.

네이티브 앱과 유사한 사용자 경험을 얻기 위해 MiniApp 리소스는 보통 함께 패키징됩니다. MiniApp 패키지를 다운로드하고 설치한 후에는 MiniApp에 필요한 모든 정적 리소스(즉, 페이지 템플릿, CSS, JavaScript 파일 및 기타 문서)가 사용자의 기기에 유지됩니다. 이러한 리소스는 다음 업데이트 전까지 중복 다운로드 없이 항상 사용할 수 있습니다.

MiniApp 패키지는 압축된 ZIP 아카이브이며, 다음을 포함합니다.

• 패키지의 루트 디렉터리에 위치한 구성 문서. 구성 파일에는 다음이 포함되어야 합니다.
  • 전체 MiniApp에 대한 일반 설명; 그리고
  • 페이지 설정 및 열기를 위한 각 페이지의 해당 경로와 구성 설명.
• 앱 수준 생명주기 콜백을 처리하는 스크립트를 포함한 하나의 앱 수준 로직 파일.
• 페이지 구조를 위한 템플릿 코드, 페이지 스타일링을 위한 CSS 스타일시트, 페이지 로직을 위한 JavaScript 코드를 포함하는 하나 또는 여러 개의 파일.
• 무결성 검증을 위한 디지털 서명 지원.

검색 및 실행 중 특정 MiniApp을 찾기 위해 MiniApp은 플랫폼에서 패키지 이름이나 식별자를 가져야 합니다. 사용자 인식을 위한 아이콘도 필요합니다.

MiniApp 페이지 외에도 MiniApp은 정보 조각 또는 MiniApp 위젯으로 표시될 수 있습니다. 이 형식에서 개발자는 자신의 서비스 및/또는 콘텐츠를 호스트 환경(예: 어시스턴트, 기기의 전역 검색 등)이라고 하는 다양한 호스트 시나리오에 배치할 수 있습니다. 이 기능은 MiniApp의 서비스와 콘텐츠를 구체적인 시나리오와 연결하여 사용자에게 더 많은 편의를 제공합니다.

예를 들어 사용자가 여행을 위해 기차표를 구매하면, 스마트 어시스턴트의 MiniApp 위젯은 기차의 최신 상태를 즉시 표시합니다. 사용자는 이 위젯을 클릭하여 더 자세한 정보를 볼 수 있는 전체 화면 MiniApp 페이지로 이동할 수 있습니다.

MiniApp 페이지와 마찬가지로 위젯도 URI scheme으로 설명됩니다. 호스트 환경은 URI 경로를 통해 로드할 MiniApp 패키지와 해당 위젯을 지정하고, URI 쿼리 매개변수를 통해 위젯에 데이터를 전달합니다. 위젯이 로드되면 호스트 환경에서 표시되고 렌더링됩니다. 보안과 독립성을 보장하기 위해 호스트와 위젯의 데이터뿐만 아니라 서로 다른 위젯의 데이터도 격리됩니다.

많은 시나리오에서 위젯은 더 복잡한 작업을 위해 MiniApp 페이지를 열 수 있습니다. 이러한 경우 위젯은 종종 해당 MiniApp과 데이터를 공유해야 합니다(예: 일관된 로그인 상태 유지). 따라서 위젯과 MiniApp의 데이터는 양쪽에서 접근할 수 있습니다. 다시 말해 MiniApp 위젯과 페이지는 동일한 데이터 접근 권한을 가집니다.

위젯의 목표 중 하나는 사용자가 전통적인 앱 개념을 잊고 서비스 형태로 사용자의 요구를 실제로 충족하도록 하는 것입니다. 따라서 모든 앱 호출 경로 외에도 위젯은 텍스트 키워드, 음성 분석, 이미지 인식, 코드 스캔, 이벤트 인텐트와 같이 서로 다른 시나리오에서 서로 다른 방법으로 트리거될 수도 있습니다.

참고: 위젯은 중국 시장에서 Quick App으로 구현됩니다.

MiniApp을 발견하고 열고 접근하기 위한 여러 진입점이 있습니다. 여러 WebView에 있는 Web 콘텐츠와 달리 동일한 MiniApp에 대해서는 하나의 인스턴스만 생성되므로, MiniApp은 전역적으로 상태와 데이터를 일관되게 유지합니다. 예를 들어 사용자가 처음으로 QR 코드 진입점을 통해 MiniApp을 열고 로그인한 후에는, 다음에 MiniApp 스토어와 같은 다른 진입점에서 돌아와도 로그인 상태가 유지됩니다.

MiniApp의 진입점에는 다음이 포함되지만 이에 국한되지는 않습니다.

• MiniApp 마켓플레이스
• 검색 엔진
• 스마트 어시스턴트
• QR 코드
• SMS/문자
• 물리적 객체(AI 포함)
• 브라우저
• 캘린더 항목
• 음성 메시지(AI 포함)

MiniApp은 실제 사용을 통해 효과가 입증된 몇 가지 메커니즘으로 성능과 사용자 경험을 개선하려고 합니다.

패키징

MiniApp 생성자를 사용하면 사용자는 MiniApp을 처음 열 때만 패키지를 다운로드하면 되며, 그 후에는 MiniApp의 정적 리소스(예: 페이지, 스크립트, CSS)를 다시 다운로드할 필요가 없으므로 이후 페이지의 로딩과 이동이 더 효율적입니다. 이 기능은 사용자 경험을 개선하고 네트워크 트래픽을 절약합니다.

동시에 MiniApp에는 사전 다운로드 메커니즘이 있어 MiniApp 패키지를 미리 다운로드하거나 첫 페이지에 대해 별도로 사전 다운로드할 수 있으며, 다운로드 중 병렬로 스트리밍 압축 해제를 수행하여 MiniApp 시작 단계의 시간 소모를 최소화하고 처음 열 때 첫 페이지 성능 손실의 균형을 맞춥니다.

다중 렌더링 뷰

MiniApp은 렌더 뷰 간에 네이티브 페이지 스택 관리를 사용하며, 페이지 전환은 네이티브 코드에 의해 구동됩니다. 따라서 페이지의 제스처 조작과 페이지 간 전환은 네이티브와 정확히 동일한 부드러운 경험을 제공할 수 있습니다.

뷰 계층과 로직 계층이 격리되어 있기 때문에 뷰 계층은 독립적으로 렌더링될 수 있습니다. JavaScript 로직 코드에 의해 차단되지 않으므로 페이지의 렌더링 속도를 크게 향상시킬 수 있습니다.

런타임 환경의 사전 구축 및 재사용

MiniApp의 런타임 환경은 보통 mini-app을 시작하기 전에 사전 구축되므로 MiniApp 시작 시간이 줄어듭니다. 사전 구축 콘텐츠에는 렌더링 뷰, 정적 리소스, 개발자 정의 프리페치 요청, MiniApps 런타임 컨테이너가 포함됩니다. MiniApp이 활성화되면 사전 구축된 렌더링 뷰를 인수한 다음, 다음 사용을 위해 새 렌더 뷰를 캐시 풀에 계속 사전 구축합니다. 렌더 뷰 수에는 제한이 있습니다. 렌더 뷰가 닫히거나 수량 제한을 초과하면 가장 오래 열려 있던 렌더 뷰가 파괴됩니다. MiniApp 애플리케이션이 종료되면 런타임이 파괴되고, 애플리케이션 환경과 리소스는 재사용될 수 있습니다.

사전 정의된 컴포넌트와 API

MiniApp 플랫폼은 매우 풍부한 컴포넌트와 API를 제공합니다. 이러한 컴포넌트와 API는 보통 개발자의 성능 요구사항을 충족하도록 잘 설계되어 있습니다.

JavaScript 프레임워크 프리셋과 핫 리로드

MiniApp의 런타임 환경은 네이티브 코드가 제공하는 기본 기능과 프레임워크라는 두 가지 주요 부분으로 구성되며, 여기에는 개발자 API와 JavaScript로 구현된 일부 컴포넌트가 포함됩니다. JavaScript 프레임워크는 네이티브 앱에 내장되어 있으며 MiniApp을 실행하기 전에 MiniApp 런타임 환경에 미리 로드됩니다. JavaScript 프레임워크는 핫 리로드(사용 중 다시 로드)될 수 있어 성능 개선을 위한 많은 가능성을 제공합니다.

MiniApp 플랫폼은 사용자가 MiniApp에 로그인할 수 있는 다양한 방법을 제공합니다. 사용자가 이미 신원 인증을 통해 플랫폼에 로그인해 있다면 플랫폼의 로그인 정보를 MiniApp과 공유할 수 있으며, MiniApp 자체 계정 시스템과 플랫폼 계정 시스템의 상호운용성을 빠르게 실현하여 MiniApp의 접근 과정을 더 원활하게 만듭니다.

예를 들어 SMS 인증을 사용하는 전통적인 로그인 과정은 더 많은 시간이 걸립니다. 사용자는 먼저 휴대전화 번호를 수동으로 입력한 다음 SMS를 받은 후 인증 코드를 입력해 로그인해야 합니다. MiniApp의 장점은 개발자가 플랫폼이 제공하는 컴포넌트 / API를 사용해 사용자의 휴대전화 번호를 안전하고 편리하게 얻고, 사용자가 자신의 휴대전화 번호로 원클릭 로그인 과정을 승인하도록 유도할 수 있다는 점입니다. 이는 사용자에게 전체 과정을 간단하게 만들고 개발자에게 사용자 정보를 얻는 비용을 줄여 줍니다.

MiniApp 하위 패키징은 MiniApp 패키지 개발 프로세스를 개선하기 위한 빌드 메커니즘입니다. 이는 개발자가 서로 다른 비즈니스 모듈을 서로 다른 하위 패키지로 나누는 데 도움이 됩니다.

개발자 관점에서 MiniApp은 기본적으로 메인 패키지를 가지며, 여기에는 시작 페이지 파일과 공용 리소스가 포함됩니다. 하위 패키지는 개발자의 비즈니스 모듈을 유연하게 나누는 빌드 유형입니다. 사용자는 필요에 따라 서로 다른 하위 패키지를 로드한 후 특정 페이지를 열 수 있습니다.

사용자 관점에서 사용자가 MiniApp을 시작하면 메인 패키지가 기본적으로 다운로드되고, 메인 패키지 안의 페이지가 시작됩니다. 사용자가 하위 패키지 안의 페이지를 열어야 하는 경우 MiniApp Runtime은 하위 패키지를 다운로드하고 로드한 뒤 하위 패키지 페이지를 시작합니다.

이러한 하위 패키지 빌드 메커니즘을 통해 여러 팀이 함께 개발할 때 더 잘 분리하고 협업할 수 있습니다. 사용자가 MiniApps를 사용할 때 하위 패키징 메커니즘은 MiniApp 홈페이지의 로딩 속도를 높이고, 필요에 따라 하위 패키지를 로드하며, 사용자 경험을 최적화할 수 있습니다.

MiniApp에서 애드온/확장은 기존 MiniApp에 특정 기능을 추가하는 캡슐화된 모듈이며, 컴포넌트, JavaScript 모듈 또는 페이지일 수 있습니다. 애드온/확장은 별도로 실행되는 대신 MiniApp 안에서만 실행될 수 있습니다. 개발자는 MiniApp처럼 애드온/확장을 개발하고, 다른 MiniApp이 재사용할 수 있도록 MiniApp 플랫폼에 업로드할 수 있습니다.

MiniApp은 다음을 위해 애드온/확장을 지원합니다.

• 코드 재사용으로 개발 비용을 줄이고 개발자가 새 기능을 쉽게 추가할 수 있게 함
• 개발자가 인지하지 않아도 기능을 자동으로 업데이트함
• 사용하지 않는 기능을 로드하지 않음으로써 MiniApp의 패키지 크기를 줄임

애드온/확장 메커니즘은 MiniApp 개발의 장벽을 낮추고 더 많은 개발자를 MiniApp 생태계로 데려옵니다.

MiniApp은 Web 렌더링과 네이티브 렌더링의 하이브리드 솔루션입니다. Web과 네이티브의 렌더링 결과를 결합할 수 있는 좋은 방법이 있다면 매우 유용할 것입니다.

제안: MiniApp은 네이티브 렌더링 결과를 Web 렌더링 결과에 통합하는 데 도움이 되는 표준화된 API가 필요합니다.

MiniApp은 페이지 전환 중 전환 애니메이션을 제공하여 사용자가 네이티브 앱을 사용할 때와 유사한 경험을 얻도록 하고자 하지만, 현재는 이를 수행하는 것이 거의 불가능합니다.

제안: MiniApp은 MiniApp 페이지 전환 중 전환 애니메이션을 추가하기 위한 API가 필요합니다.

MiniApp은 표준화된 배포 형식을 통해 여러 MiniApp 호스팅 플랫폼을 위한 패키지와 파싱 규약을 형성할 수 있습니다. 현재 각 MiniApp 호스팅 플랫폼은 서로 다른 개발 도구(서로 다른 패키징 방법)를 제공하며, MiniApp은 서로 다른 MiniApp 호스팅 환경에서 다르게 파싱됩니다.

제안: MiniApp은 배포 과정에서 실제로 파일들의 패키징된(압축된) 모음입니다. 우리는 통일된 파일 접미사로 MiniApp(.ma)을 설명하고, .ma 파일을 만드는 방법과 .ma 파일을 파싱하는 방법을 지정할 수 있습니다.

MiniApp의 인기 페이지는 다른 MiniApp에서 참조될 수 있으며, 사용자가 방문할 때 정확하게 호출되기를 기대합니다.

제안: MiniApp에 접근하기 위한 표준화된 프로토콜(URI scheme)을 정의합니다.

Android 위젯이나 Apple 대시보드처럼 사용자는 Web 또는 앱 페이지를 열지 않고도 MiniApp 위젯으로 직접 정보를 얻거나 작업을 완료할 수 있습니다. MiniApp 위젯은 데스크톱이나 대시보드처럼 Web 브라우저 밖의 환경에 표시될 수 있습니다.

제안:

• MiniApp 위젯은 WebView 또는 네이티브 앱 페이지 중 하나인 호스트 환경 안에 표시될 수 있습니다. 호스트 환경은 패키지와 위젯 페이지를 설명하는 해당 URI 경로로 위젯을 로드합니다.
• MiniApp 위젯은 로컬 데이터나 서버의 데이터에 접근할 수 있습니다. 동시에 MiniApp 위젯은 동일한 패키지의 MiniApp과 통신할 수 있습니다.
• MiniApp 위젯은 상호작용 가능해야 하며, 이는 모든 사용자 행동/상호작용에 반응해야 함을 의미합니다. MiniApp 위젯은 Web 또는 앱 페이지를 열 수 있는 능력을 가져야 합니다.

MiniApp은 MiniApp 페이지의 Time to Interactive (TTI)가 언제 완료되었는지 알아야 합니다.

제안: MiniApp 페이지의 Time to Interactive가 완료되었음을 알리는 표준화된 이벤트.

3D 모델은 풍부한 세부 정보 덕분에 점점 더 인기를 얻고 있습니다. AR과 결합하면 2D보다 더 나은 사용자 경험을 제공할 것입니다. 비즈니스 사례에는 온라인 쇼핑, 광고, 교육 등이 포함될 수 있습니다. 그러나 현재 Web에는 3D 모델을 다루기 위한 표준적이고 편리한 방법이 부족합니다. 이 문서에서는 오디오, 비디오, 이미지를 해당 HTML 태그로 처리하는 방식과 유사하게, 3D 모델을 직접 처리하기 위한 HTML 태그를 정의할 것을 제안합니다.

• 360도 보기

  사용자는 제스처를 통해 서로 다른 각도에서 3D 모델을 볼 수 있습니다. 또한 3D 모델은 확대/축소될 수도 있습니다. 전체 화면으로 보거나 웹페이지에 포함되어 다른 HTML 콘텐츠와 함께 표시될 수 있습니다.

• AR로 보기

  사용자는 카메라를 통해 3D 모델을 실제 세계에 배치할 수 있습니다. 사용자는 모델을 배치할 서로 다른 위치를 지정할 수 있습니다.

제안: Web에서 3D 모델을 지정하고 AR과 함께 상호작용형 3D 콘텐츠를 지원하기 위한 <xmodel> 요소.

얼굴 추적은 많은 3D 시나리오에서 사용될 수 있습니다.

라이브 비디오의 얼굴 효과

라이브 비디오에서 얼굴에 효과를 추가합니다. 이러한 효과에는 전체 화면 필터, 얼굴 보정과 메이크업, 2D 스티커, 3D 머리 장식 등이 포함됩니다. 이러한 효과 대부분은 비디오 소스의 실시간 얼굴 추적에 크게 의존합니다.

게임

게임 개발자는 추적된 얼굴을 기반으로 게임 전략을 설계할 수 있습니다. 예를 들어 눈을 깜빡일 때 특정 게임 로직을 트리거하거나, 떨어지는 과일이 열린 입 안에 있는지 확인할 수 있습니다.

가상 메이크업

사용자가 제품 페이지에서 립스틱, 아이섀도, 안경, 모자를 착용해 보게 하여 결정에 도움을 줍니다.

제안: 비디오 요소를 입력으로 사용하고 매 프레임 얼굴 추적 출력을 업데이트하는 Face Tracking API. 여기에는 다음이 포함됩니다.

• 각 얼굴의 경계 상자
• 각 얼굴의 4x4 포즈 행렬
• 정규화된 (x, y) 랜드마크 포인트
• 정점, 노멀, 텍스처 좌표를 포함한 얼굴 기하 데이터

손 제스처는 비디오 효과와 AR/VR 게임 시나리오에서 앱을 더 인상적이고 상호작용적으로 만드는 데 사용될 수 있습니다.

제안: 손 움직임을 추적하고 손의 윤곽을 얻기 위한 고수준 API.

MiniApps에는 Web으로 이전하고 싶은 몇 가지 AR API가 있으며, 이는 게임, 3D 모델 미리보기, 상호작용형 광고에서 더 나은 AR 경험을 제공하는 데 도움이 됩니다.

제안: ARCore와 ARKit을 기반으로 다음을 포함하는 저수준 AR API를 제공합니다.

월드 추적을 위한 카메라 뷰 행렬

휴대전화의 공간적 위치와 방향에 대한 4x4 뷰 행렬을 제공합니다. 개발자는 이를 사용해 자신의 3D 가상 세계에서 카메라 행렬을 실시간으로 업데이트할 수 있습니다. 이를 통해 실제 세계의 위치와 가상 세계 객체의 위치를 서로 연관시킬 수 있습니다.

평면 감지 및 추적

실제 세계의 평면을 감지하고 이러한 평면을 실시간으로 추적합니다. 각 평면의 중심 위치와 방향을 나타내는 4x4 변환 행렬을 제공합니다. 이는 바닥/데스크톱 위에 3D 가상 객체를 배치하는 데 사용될 수 있습니다.

앵커

앵커는 실제 세계의 고정된 위치와 방향을 정의합니다. 개발자는 히트 테스트로 얻을 수 있는 4x4 변환 행렬에서 앵커를 생성할 수 있습니다. 이 행렬은 매 프레임 업데이트되어 해당 행렬에 대응하는 가상 객체가 실제 장면에서 하나의 위치와 방향에 고정될 수 있도록 합니다.

히트 테스트

가상 객체를 클릭하고 배치하는 것과 같은 기능을 구현하기 위해 화면 위치에 대응하는 실제 세계 공간의 위치와 방향을 나타내는 4x4 변환 행렬을 얻습니다.