목록으로
웹뷰 · 모달

WebView 모달 dim이 네이티브 탭바를 못 덮는 문제

전부 동기화하는 방안은 비용 대비 효과가 낮아 접고, 꼭 필요한 모달만 네이티브로 전환.

Next.js WebView 웹React 화면 · CSSReact Native 셸네이티브 탭바 · 모달브릿지 (postMessage)Web → Native · { actionType, payload }Native → Web · { code, body }WebView 경계 밖(탭바)은 웹 CSS로 못 그림 → 필요한 모달만 네이티브로 전환
01

상황

웹 모달을 띄우면 WebView 영역만 어두워지고(dim), 그 밖의 네이티브 탭바는 밝게 남아 시각적으로 어색했습니다.

02

원인 분석

WebView는 OS가 관리하는 하나의 사각형 뷰라, 웹의 CSS가 그 경계 밖(네이티브 탭바)을 그릴 수 없습니다. 두 영역의 dim을 한 레이어로 처리하는 것이 구조적으로 불가능했습니다.

03

시도 · 트레이드오프

웹↔앱의 dim 상태를 브릿지로 실시간 동기화하는 방안을 검토했습니다. 동기화 자체는 가능했지만, 모든 모달이 브릿지 왕복을 기다려야 해서 비용 대비 효과가 낮다고 보고 접었습니다.

04

해결

동기화가 꼭 필요한 모달만 골라 브릿지 액션으로 네이티브 전환했습니다. 새 store/component/provider를 별도 파일로 분리해 기존 코드에 주는 영향을 최소화했습니다.

05

결과 · 배운 점

필요한 곳의 어색함은 없애면서 전체 모달에 불필요한 비용을 얹지 않았습니다. 완벽한 동기화를 고집하는 대신, 트레이드오프를 따져 필요한 범위만 처리한 판단이었습니다.