Docs

Appearance

초저지연 실시간 화면 미러링 및 비동기 듀얼-트랙 캡처 ​

1. 개요 및 지연시간 병목 해결 ​

원격 또는 로컬 USB로 연결된 모바일 단말기를 PC 화면에서 보며 마우스로 조작하는 레코딩 환경에서는 화면 전송 지연(Latency)과 터치 반응 속도가 사용자 경험의 핵심입니다.

기존의 단순 프레임 캡처 방식(ADB screencap 반복 호출 및 Electron IPC 버퍼 복사)은 다음과 같은 병목이 있었습니다:

  1. 높은 화면 전송 지연: 프레임당 100~200ms 이상의 지연이 누적되어 빠른 스크롤이나 타이핑 시 화면이 심하게 밀리는 현상.
  2. 동기식 XML 덤프에 따른 UI 프리징: 사용자가 화면을 터치할 때마다 단말기의 접근성 XML 트리를 동기식으로 추출(getPageSource)하느라 수백 밀리초 동안 화면 입력이 멈추는 현상.
  3. 합성 이벤트 중복 기록: 모바일 브라우저/웹뷰 환경에서 단일 터치 시 발생하는 touchstart, touchend와 브라우저가 자동 생성하는 가상 click 이벤트가 2중, 3중으로 중복 기록되는 결함.

SyncETA는 Direct MJPEG 스트리밍 파이프라인과 비동기 듀얼-트랙 캡처 아키텍처를 통해 이 세 가지 병목을 해결하였습니다.

2. Direct MJPEG 초저지연 스트리밍 아키텍처 ​

Electron 메인 프로세스를 거쳐 렌더러 프로세스로 대용량 이미지 버퍼를 복사(IPC Transfer)하는 기존의 중간 다리 방식을 전면 개편하였습니다.

  • 포트 포워딩 직접 바인딩:
    • Android의 경우 UiAutomator2의 내장 스트리밍 포트(기본 7810)를 로컬 포트로 포워딩합니다.
    • iOS의 경우 WebDriverAgent의 MJPEG 서버 포트(기본 9100)를 로컬 포트로 포워딩합니다.
  • 클라이언트 직접 소비:
    • 프론트엔드 뷰어(MobileLiveMirrorViewer.vue)는 로컬 포워딩된 http://127.0.0.1:7810 엔드포인트를 표준 <img> 태그의 src로 직접 소비합니다.
    • 별도의 바이너리 파싱이나 IPC 메모리 복사 오버헤드가 발생하지 않으므로, 초당 60 프레임(60 FPS) 및 실측 지연시간 15밀리초(ms) 미만의 렌더링 성능을 유지합니다.

3. 비동기 듀얼-트랙 이벤트 캡처 메커니즘 ​

터치 입력과 무거운 메타데이터 추출 작업을 두 개의 독립된 비동기 트랙으로 분리하여 조작 감도를 유지합니다.

트랙 1: 고속 주입 트랙 (Fast Track) ​

  • 사용자가 마우스를 클릭하는 즉시, 화면 뷰포트 대비 상대 좌표(0.0~1.0)를 산출하여 단말기로 전송합니다.
  • 단말기 화면에 터치 피드백이 지연 없이 즉각 반영되므로 사용자는 실제 기기를 직접 터치하는 것과 동일한 반응 속도를 체감합니다.

트랙 2: 비동기 메타데이터 추출 트랙 (Metadata Track) ​

  • 터치가 주입된 직후 백그라운드 비동기 워커가 현재 화면의 접근성 트리(Accessibility Hierarchy) 및 DOM 노드 정보를 수집합니다.
  • 수집된 속성(resourceId, className, 텍스트 값, 시각 앵커 바운딩 박스)은 트랙 1에서 기록된 좌표 정보와 사후 병합되어 완전한 시나리오 카드로 저장됩니다.

4. 합성 이벤트 디바운스 및 중복 방지 필터 ​

모바일 웹뷰 및 브라우저 환경에서 단일 탭 동작 시 브라우저 렌더러 엔진은 터치 호환성을 위해 touchstart, touchend 이벤트에 이어 약 300ms 이후 인위적인 합성 click 이벤트를 발생시킵니다.

SyncETA는 이러한 중복 기록을 방지하기 위해 300ms 슬라이딩 윈도우 디바운스 필터를 적용합니다:

  • 직전 터치 이벤트와 동일한 좌표 반경(±5px 이내)에서 300ms 이내에 발생하는 후속 클릭 이벤트는 기록 목록에서 자동 소거됩니다.
  • 이를 통해 시나리오 재실행 시 동일 버튼이 2회 연속 클릭되어 의도치 않은 중복 결제나 화면 닫힘이 발생하는 문제를 사전에 방지합니다.