Web - App 브릿지 활용을 통한 네이티브 내비게이션 구현

개요

본 문서는 웹과 앱 환경에서 일관된 사용자 경험을 제공하기 위해 구현된 커스터마이징된 라우터 시스템에 대해 설명한다. 이 시스템은 웹뷰(WebView)를 직접 제어하며, 네이티브 애플리케이션과 웹 애플리케이션 간의 원활한 통신을 가능하게 한다.

구현 상세

커스터마이징된 라우터

현재 시스템에서는 Next.js의 기본 라우터 대신 커스터마이징된 라우터를 사용한다. 이 라우터는 현재 환경이 웹인지 앱인지를 판단하고, 각 환경에 맞는 적절한 내비게이션 방식을 적용한다.

환경 감지 메커니즘

라우터는 다음과 같은 방식으로 현재 실행 환경을 감지한다:

1. globalThis.webkit?.messageHandlers.[bridgeName]의 존재 여부 확인

   • 존재할 경우: 안드로이드 앱 환경으로 판단

2. globalThis?.webkit?.messageHandlers?.[bridgeName]?.postMessage의 존재 여부 확인

   • 존재할 경우: iOS 앱 환경으로 판단

3. 위의 두 조건이 모두 만족하지 않을 경우: 웹 환경으로 판단

라우팅 동작

웹 환경

• 웹 환경으로 감지되면 Next.js의 기본 라우터를 사용한다.

앱 환경 (Android / iOS)

1. Router.push

   • 앱에서는 해당 페이지를 새로운 웹뷰로 연다.
   • 구현 예시:

     if (isApp) {
       globalThis.webkit.messageHandlers.[bridgeName].postMessage({
         type: 'pushPage',
         data: { url: '/target-page' }
       });
     } else {
       // Next.js router push
     }

2. Router.back

   • 앱에서는 현재 열린 웹뷰를 닫는다.
   • 구현 예시:

     if (isApp) {
       globalThis.webkit.messageHandlers.[bridgeName].postMessage({
         type: 'popPage'
       });
     } else {
       // Next.js router back
     }

장점

1. 일관된 사용자 경험: 웹과 앱 환경에서 동일한 내비게이션 경험을 제공한다.
2. 네이티브 기능 활용: 앱 환경에서 네이티브 내비게이션을 사용하여 성능을 최적화할 수 있다.
3. 유연성: 환경에 따라 다른 동작을 쉽게 구현할 수 있다.

주의사항

1. 브릿지 이름 및 메시지 형식은 앱 개발팀과 사전에 협의하여 정의해야 한다.
2. iOS와 안드로이드에서 브릿지 구현 방식이 다를 수 있으므로, 각 플랫폼별 테스트가 필요하다.
3. 웹뷰 내에서의 자바스크립트 실행 권한 설정에 주의해야 한다.

향후 개선 방향

1. 더욱 세분화된 내비게이션 컨트롤 (예: 모달, 드로워 등)
2. 딥링크 지원 강화
3. 성능 모니터링 및 최적화

이 커스터마이징된 라우터 시스템은 웹과 앱 환경에서의 일관된 사용자 경험을 제공하는 데 중요한 역할을 한다. 지속적인 개선과 최적화를 통해 더욱 향상된 사용자 경험을 제공할 수 있을 것이다.
iOS 웹뷰 환경에서 쿠키·세션 도메인 불일치로 결제 후 리다이렉트가 실패하는 사례는 [[KnowledgeBase/Blog/iOS 웹뷰에서 결제 후 리다이렉트 문제 해결하기 - 도메인 불일치 사례]]를 참고할 수 있다.