리액트 네이티브와 웹뷰의 만남: webview-bridge

최근 프론트엔드 진영 에서는 웹뷰, React 개발이 주류로 자리잡고 있습니다. 이런 흐름 에서 React Native의 웹뷰 개발을 개선한 webview-bridge 라이브러리를 FECONF 세미나 영상을 통해 접하게 되었는데요. 영상을 매우 흥미롭게 시청하여서 내용을 정리해보았습니다.

1. Event To Promise 방식의 양방향 통신

   기존 단방향 통신 방식에서는 처리 결과를 확인하기가 어려웠습니다. 이런 한계를 프론트엔드와 백엔드 간 통신 패턴에서 영감을 받아 Promise 기반의 응답 처리 시스템을 구현했습니다. 이를 통해 안정적이고 예측 가능한 통신이 가능해졌습니다.

   
   

2. 강력한 타입 안정성과 추론

   네이티브 에서 정의한 브릿지 함수들의 반환값(Input)을 기반으로 웹 측의 타입이 자동으로 추론됩니다. 이는 개발자가 수동으로 타입을 정의할 때 발생할 수 있는 실수를 원천적으로 방지하면서도, 함수가 반환하는 데이터 구조를 기반으로 전체 타입 시스템이 자동으로 신뢰성 있게 구성됩니다.
   

3. 실시간 상태 동기화

   useSyncExternalStore API 를 활용하여 네이티브 앱과 웹뷰 간의 상태를 실시간으로 동기화합니다. 이를 통해 특히 인증 토큰이나 사용자 정보와 같은 중요 데이터의 일관성을 유지합니다.
   

4. 개발편의성과 하위 호환성

   사용자 중심의 설계로 개발 편의성을 향상시켰습니다. Proxy를 활용한 메소드 호출 처리로 존재하지 않은 메소드 호출시 타입에러를 반환하고, 사용 가능한 메소드를 체크해서 하위호환성을 체크합니다. 이를 통해 네이티브에 해당 메서드가 없다면 대체코드(fallback)이 실행되어 런타임 에러 방지와 앱 버전별 기능 차이에 대응이 가능합니다.

webview-bridge는 하이브리드 앱 개발의 복잡성을 우아하게 해결하였다는 생각이 들었습니다. 세심한 API 설계, 자동화된 타입 시스템, 그리고 견고한 예외처리는 라이브러리의 완성도를 잘 보여주는데요. 국내 개발자가 실제 현장에서 마주한 문제를 깊이있게 분석하고, 자신만의 철학으로 해결책을 제시했다는 점이 특히 인상깊었습니다. 또 한국 개발자들의 기술력이 성장하고 있고, 글로벌 오픈소스 생태계에 대한 의미있는 기여를 보여주는 사례라고 생각되는데요. 이런 흐름이 계속되어 한국 개발자들이 세계에 더 많은 영향력을 발휘할 수 있기를 기대해봅니다.

https://www.youtube.com/watch?v=GyU9-pE0dAg