Cross-Platform & Hybrid Physics

1. Overview

크로스 플랫폼 및 하이브리드 물리(Cross-Platform & Hybrid Physics, CPH)는 서로 다른 운영체제(iOS/Android)의 격차를 추상화하고, 공유 가능한 비즈니스 로직과 네이티브 하드웨어를 연결하는 '브릿지(Bridge)'와 '렌더링 엔진'의 실행 역학 및 상호작용 수순을 다룹니다.

크로스 플랫폼은 단순한 웹 뷰가 아닌 고도의 런타임 엔지니어링 결과물입니다. 학습자는 JavaScript 엔진과 네이티브가 통신하는 비동기 브릿지 물리(React Native), OS의 캔버스를 직접 점유하여 그림을 그리는 Skia 엔진 역학(Flutter), 그리고 웹 기술이 네이티브 기능을 호출하는 브라우저 컨테이너 물리(Hybrid)를 배웁니다. 이를 통해 '한 번의 작성으로 모든 곳에서 실행(Write Once, Run Anywhere)'하되, 네이티브와 시각적으로 구분이 불가능한 고주사율 물리 경험을 보장하는 고품질 앱 거버넌스 역량을 구축합니다.

2. Scope & Boundaries

In-Scope

• Abstraction Mechanics: JS-Native 브릿지, JSI(JavaScript Interface), Dart-C++ 바인딩 물리
• Rendering Engines Physics: Flutter의 Skia/Impeller 엔진 및 React Native의 Fabric 렌더러 역학
• Platform Capability Binding: 플랫폼 독립적 코드에서 네이티브 하드웨어 API 호출 시퀀스
• Hybrid Sandbox Dynamics: WebView 인터페이스의 JS-Bridge 통신 및 자원 격리 물리 수순
• Unified Logic Management: 공유 비즈니스 레이어와 플랫폼별 UI 레이어 간의 수리적 결합도 제어

Out-of-Scope

• 특정 플랫폼(iOS/Android) 전용의 저수준 최적화 (13-01/02 영역으로 위임)
• 순수 웹 프론트엔드 최적화 (14. WET 영역으로 위임)

Boundaries

• CPH vs. Native Development: 네이티브 개발이 '시스템에 밀착된 제어'에 집중한다면, CPH는 '추상화 레이어로 인한 성능 손실(Overhead)의 최소화'와 '메시지 전송의 물리적 효율'에 집중합니다.

3. Counterexample

• 단순히 "Flutter 위젯 사용법"을 익히는 것은 CPH 학습이 아닙니다. 왜 많은 수의 데이터가 브릿지를 통과할 때 직렬화(Serialization) 비용으로 인해 프레임 저하가 발생하는지 그 물리적 병목을 증명할 수 있어야 하며, 웹 뷰 기반 하이브리드 앱에서 스크롤 성능이 네이티브보다 수리적으로 떨어지는 원인을 브라우저 렌더링 루프 관점에서 논증해야 합니다.

4. Prerequisites

• Data Structures (Basic): JSON/바이너리 직렬화와 패킷 통신 수리 구조 이해가 필수입니다. (06. DIM)
• Web Protocols (Recommended): DOM 렌더링 및 비동기 이벤트 핸들링 이해가 권합됩니다. (08. NC)

5. Learning Map

1. The Bridge Principle: 추상화된 영역과 실행 영역 사이의 메시지 전달 물리력을 이해합니다.
2. Graphic Independence: 운영체제의 UI 구성 요소를 쓰지 않고 자체적으로 화면을 그리는 렌더링 역학을 배웁니다.
3. Hardware Binding: 공유 코드가 실제 하드웨어 센서와 대화하는 플랫폼 채널 시퀀스를 익힙니다.
4. Performance Optimization: 추상화 손실을 극복하고 60FPS를 달성하기 위한 하드웨어 가속 기법을 탐구합니다.

6. Learning Topics

Basic

Core Topic 01: 브릿지 아키텍처와 메시지 전송 (Bridge Mechanics)

• Why to Learn: 서로 다른 기술 스택 간의 통신이 앱 속도에 미치는 물리적 영향을 이해하기 위해서입니다.

• What to Learn:

  • Async Bridge vs JSI Dynamics: 메시지 큐 방식과 직접 메모리 참조 방식의 수리적 편차
  • Serialization Physics: 언어 간 데이터 교환 시 발생하는 물리적 연산 부하
  • Platform Channel Logic: Dart/JS와 네이티브 간의 호출 규약(Interface) 시퀀스

• How to Learn:

  • 브릿지를 통해 10,000개의 객체 정보를 전송할 때 발생하는 지연 시간을 측정하여 병목 분석
  • Native Module을 직접 구현하여 공유 코드 영역에서 비동기 결과값을 받는 전 과정 트래킹

• Implement: 브릿지 오버헤드를 수치적으로 최소화한 대량 정보 처리 전송 레이어

Recommended

Core Topic 02: 그래픽 엔진과 제로-브릿지 렌더링 (Graphic Engines)

• Why to Learn: OS 제약 없이 일관된 UI와 고성능 애니메이션을 하드웨어 수준에서 구현하기 위해서입니다.

• What to Learn:

  • Skia/Impeller Physics: CPU 병렬 연산을 통한 픽셀 래스터라이제이션 물리
  • Multi-Layer Compositing: 캔버스 위에서 시각 요소가 적층되고 그려지는 수리적 순서
  • Render Tree Synchronization: 상태(State) 변화가 실제 픽셀로 변환되는 물리적 파이프라인

• How to Learn:

  • Flutter rebuild 범위를 도구로 확인하며 하위 위젯으로의 상태 전파 물리 이해
  • Skia 드로잉 명령어를 직접 조합하여 복잡한 물리 엔진용 도형을 렌더링하는 실습

• Implement: 하드웨어 가속(GPU)을 극대화한 커스텀 셰이더 기반 고주사율 애니메이션 모듈

Practical

Core Topic 03: 하이브리드 시스템과 네이티브 결합 (Hybrid Integration)

• Why to Learn: 웹 자산을 앱에 이식하면서도 네이티브 기능을 완벽히 동기화하기 위함입니다.

• What to Learn:

  • WebView Sandbox Physics: 브라우저 런타임의 자원 격리 및 물리적 한계치
  • Native View Injection: 하이브리드 앱 내부 특정 영역에 네이티브 뷰를 물리적으로 결합하는 기법
  • Interaction Bridge Mechanics: postMessage 연동 시 발생하는 보안 및 지연 시간 수치

• How to Learn:

  • 웹 뷰 내부 동작이 네이티브 햅틱(Haptic)을 물리 트리거하는 브릿지 반응성 측정 프로젝트
  • 하이브리드 앱의 초기 로딩 수치를 개선하기 위한 Offline-First Resource 적재 실습

• Implement: 웹-네이티브 간 양방향 수치 데이터 통신이 보장된 하이브리드 런타임 커넥터

Advanced

Core Topic 04: 엔진 거버넌스와 플랫폼 성능 최적화 (Engine Governance)

• Why to Learn: 다중 플랫폼 코드베이스를 운영하며 발생하는 물리적 기술 부채를 제어하기 위해서입니다.

• What to Learn:

  • Hermes Engine Internals: 모바일 최적화 바이트코드 실행 및 GC 물리
  • Binary Tree Shaking: 플랫폼별 사용되지 않는 에셋과 코드의 물리적 배제 공학
  • Gesture Synchronization: 복수의 물리 포인터 입력을 네이티브와 균등하게 처리하는 역학

• How to Learn:

  • 동일 로직을 RN과 Flutter로 각각 구현한 뒤 CPU/VRAM 점유율을 수리적으로 비교 연구
  • 플랫폼 독립적 패키지의 버전 충돌 시 발생하는 '의존성 물리 연쇄' 장애 진단 및 해결

• Implement: 플랫폼별 성능 편차를 실시간 감지하여 최적 엔진 수치를 할당하는 적응형 아키텍처

7. Terminology

8. References

Primary References

• [P2] SWEBOK v4.0 - Software Construction - Tools and Methods — Structural design and hybrid patterns.
• [P5] SFIA v9 - Systems Development - Programming / Device Software — Industry native and cross-platform skills.

Secondary References

• [Flutter Internals] — Architectural physics of the engine and Skia/Impeller.
• [React Native Architecture Guide] — Official documentation for the Bridge and Fabric.

Industry References

• [Meta Engineering Blog - Moving to Fabric] — SOTA migration and performance insights.
• [Google I/O - Flutter Performance Optimization] — Real-world rendering standards.

9. Final Checklist

Primary Checklist

• 플랫폼 브리지(Bridge)의 비동기 직렬화 과정이 인터랙티브 성능에 미치는 물리적 한