Hybrid App을 위한 Web-Native용 Javascript Bridge

💡 Hybrid App을 위한 Web-Native JavaScript Bridge 구축

• Next.js 기반 웹뷰(WebView) 환경에서 네이티브 앱(iOS/Android)의 기능을 사용하기 위한 JavaScript Bridge를 설계 및 구현하여, 웹과 네이티브 간의 기술적 제약을 극복하고 확장성과 안정성을 갖춘 통신 아키텍처를 구축

---

🚀 주요 역할 및 성과

• 웹-네이티브 양방향 통신 브릿지 설계 및 개발
• iOS(webkit.messageHandlers)와 Android(JavascriptInterface)의 서로 다른 구현 방식을 클래스 기반으로 통합하고 추상화하여, 플랫폼에 독립적인 단일 API를 제공
• 웹 개발자가 네이티브 지식 없이도 결제, 알림, ADID 조회 등 핵심 기능을 사용할 수 있도록 개발 경험(DX)을 개선
• createMessage 팩토리 함수를 통해 새로운 브릿지 기능 추가 시 발생하는 반복적인 코드를 최소화
• 비즈니스 핵심 기능 연동 및 서비스 확장
• 개발한 브릿지를 통해 결제, 로컬 푸시 알림, 외부 브라우저 연동 등 핵심 기능을 성공적으로 구현
• 하이브리드 앱의 기능적 한계를 극복하고, 사용자 경험 및 서비스 확장성에 직접적으로 기여

---

🛠️ 아키텍처

정적 클래스 (Static Class) 기반 AppBridge 생성

• AppBridge는 모든 속성과 메서드가 static으로 선언. 이는 new AppBridge()처럼 인스턴스를 생성할 필요 없이 AppBridge.closeWindow()와 같이 클래스 이름을 통해 직접 기능을 호출하는 싱글톤(Singleton)과 유사한 유틸리티 모듈로 동작

내부 로직 캡슐화 (private 멤버)

• 내부 상태와 복잡한 로직을 캡슐화, 외부에서의 직접접근 방지하고 실제 공개되는 메서드는 네이티브에 전달해야하는 협약된 postMessage 와 매칭된 객체를 전달.