회사 프로젝트· 벤치링크· 2024
Benchlink React 웹앱 (RN WebView 브릿지)
React Native WebView 내부에서 동작하는 모바일 UX 웹앱
역할: 프론트엔드
React 18TypeScriptRedux ToolkitViteFramer MotionLottie
회사 코드 (NDA)
Headline
RN WebView 안에 탑재되는 웹앱 — 모바일 네이티브 UX를 웹으로 완전 구현
React Native 앱 내부 WebView에서 동작하는 웹앱. postMessage 25개 지점, Drawer 19개 타입 동기화, Pull-to-Refresh, Framer Motion 전환 애니메이션 등 네이티브급 모바일 UX를 웹으로 구현.
Problem
- · 모바일 앱과 웹앱이 동일 도메인을 다루는데 두 코드베이스를 따로 유지하기 어려움
- · WebView 내부에서도 네이티브 앱 같은 인터랙션(Pull-to-Refresh, Drawer 스택, 디바이스 감지)이 필요
Action
- · postMessage ↔ ReactNativeWebView 양방향 브릿지 25개 지점 구현
- · Drawer 스택 동기화(RN ↔ Web) 및 19개 Drawer 타입 표준화
- · NativeInterface.ts로 디바이스 감지·래퍼 통합
- · Pull-to-Refresh + Framer Motion + Lottie로 네이티브급 인터랙션
Result
- · Calls · Explore · Network · Profile · Rewards · Onboarding 등 주요 페이지 웹 구현
- · RN ↔ Web 통신 표준 정립