웹뷰(WebView) 기반 하이브리드 앱 개발 팁: 브릿지(Bridge) 설계

Web -&gt; Native: window.ReactNativeWebView.postMessage(JSON.stringify({ type: &#x27;OPEN_CAMERA&#x27; })) 웹이 정해진 규격으로 메시지를 쏘면, 앱(iOS/Android)이 이걸 가로채서 카메라를 켭니다.
Native -&gt; Web: 앱이 웹뷰의 evaluateJavaScript() 함수를 실행해서 웹 쪽의 JS 함수를 호출하거나 이벤트를 트리거합니다.

2025-11-14Mobile

네이티브 앱 안에 브라우저 창(WebView)을 띄워서 웹 페이지를 보여주는 방식입니다. 앱 업데이트 없이 웹만 배포하면 되니 유지 보수가 꿀입니다. 하지만 웹에서는 카메라나 진동 같은 하드웨어를 직접 제어할 수 없죠. 그래서 JavaScript Bridge가 필요합니다.

1. 통신 원리

Web -> Native: window.ReactNativeWebView.postMessage(JSON.stringify({ type: 'OPEN_CAMERA' })) 웹이 정해진 규격으로 메시지를 쏘면, 앱(iOS/Android)이 이걸 가로채서 카메라를 켭니다.
Native -> Web: 앱이 웹뷰의 evaluateJavaScript() 함수를 실행해서 웹 쪽의 JS 함수를 호출하거나 이벤트를 트리거합니다.

2. 개발 팁

버전 관리: 앱은 1.0 버전인데 웹은 2.0 기능을 쓰려고 하면 브릿지가 없어서 에러가 납니다. 앱 버전을 체크해서 분기 처리를 하거나, 하위 호환성을(Feature Detection) 고려해야 합니다.
로딩 속도: 웹뷰가 뜨는 딜레이를 줄이기 위해 스켈레톤 UI를 네이티브 단에서 먼저 보여주거나, 웹 리소스(CSS, JS)를 앱에 미리 내장(Pre-bundling) 하기도 합니다.
사용자 경험: 웹의 클릭 반응 속도(Tap highlight)나 스크롤 바운스 등을 네이티브처럼 보이게 CSS로 튜닝해야 이질감이 없습니다.

토스나 배달의민족 같은 슈퍼앱들도 많은 부분을 웹뷰로 하이브리드 하게 운영합니다.