iOS 웹앱 브릿지 통신

GPT에게 질문했다.

질문: 프론트엔드랑 iOS 네이티브 사이에서 브릿지 호출하는 개념과 원리를 설명해줘. 프론트 단에서는 무얼 하는지, iOS 에서는 무얼하는지

 

 

GPT답변 

프론트엔드와 iOS 네이티브 사이에서 브릿지 호출을 통해 상호작용하는 것은 웹 애플리케이션과 네이티브 애플리케이션 간의 소통을 가능하게 하는 중요한 기술입니다. 주로 하이브리드 앱이나 웹뷰(WebView) 구조에서 사용되며, 이를 통해 웹 애플리케이션이 네이티브 기능에 접근할 수 있게 해줍니다.

1. 개념

브릿지 호출은 프론트엔드(웹)와 iOS 네이티브 앱이 서로 데이터를 주고받거나, 기능을 호출할 수 있게 해주는 통신 경로입니다. 웹 앱이 네이티브 기능에 접근하거나, 네이티브 앱이 웹에서 특정 데이터를 필요로 할 때 이 브릿지를 통해 상호 작용이 가능합니다.

2. 웹뷰(WebView)

일반적으로 브릿지 호출은 웹뷰(WebView)를 사용하여 이루어집니다. 웹뷰는 네이티브 앱 내부에서 HTML, CSS, JavaScript를 실행할 수 있는 뷰(View) 컴포넌트로, 웹 애플리케이션을 네이티브 환경에서 구동할 수 있게 해줍니다.

3. 브릿지 호출의 흐름

브릿지 호출의 핵심 흐름은 다음과 같습니다:

1. 프론트엔드(웹)에서 네이티브 API 호출 요청
   • JavaScript 코드를 통해 네이티브 앱의 특정 기능(예: 카메라, 위치 정보 등)을 호출하는 요청을 보냅니다.
   • 웹뷰 내부에서 JavaScript가 네이티브 호출을 트리거하기 위한 인터페이스를 사용합니다.
2. 네이티브(iOS)에서 프론트엔드 요청 처리
   • iOS에서 웹뷰에 연결된 브릿지 인터페이스를 통해 JavaScript 호출을 감지합니다.
   • 이를 통해 네이티브 API를 호출하거나, 특정 기능을 수행합니다.
   • 결과나 데이터를 처리한 후, 다시 프론트엔드로 전달할 수 있습니다.
3. 프론트엔드(웹)에서 네이티브 호출 결과 처리
   • 네이티브에서 처리한 결과가 JavaScript로 전달되면, 프론트엔드에서는 그 데이터를 받아 UI에 반영하거나, 추가적인 작업을 진행합니다.

4. 프론트엔드(웹)에서 하는 일

프론트엔드에서는 주로 JavaScript를 통해 네이티브 기능을 호출하고 응답을 처리하는 역할을 합니다. 이를 위해 브라우저 환경에서는 접근할 수 없는 네이티브 기능을 호출하기 위해 웹뷰의 브릿지 메커니즘을 사용합니다. 주로 다음과 같은 작업을 합니다:

• JavaScript Interface 호출: 예를 들어, iOS 네이티브 기능을 호출하기 위해 window.webkit.messageHandlers와 같은 객체를 사용해 네이티브 호출을 트리거합니다.
• 콜백 처리: 네이티브에서 데이터를 반환하면, 이를 JavaScript에서 처리하여 적절한 UI를 업데이트하거나 추가 동작을 수행합니다.

예시 (JavaScript -> iOS 네이티브 호출)

window.webkit.messageHandlers.nativeHandler.postMessage({
    command: "openCamera",
    params: { quality: "high" }
});

5. iOS 네이티브에서 하는 일

iOS에서는 WebView와 JavaScript 브릿지를 통해 웹 애플리케이션과 소통할 수 있는 구조가 필요합니다. iOS에서는 보통 다음과 같은 역할을 수행합니다:

• JavaScript 호출 감지: WKWebView나 UIWebView에서 JavaScript가 네이티브 호출을 요청하는 이벤트를 감지합니다.
• 네이티브 기능 수행: 예를 들어, JavaScript에서 카메라를 열라는 요청이 오면, iOS의 네이티브 카메라 API를 호출하여 사진을 찍을 수 있게 합니다.
• 결과 전달: 네이티브에서 수행한 작업의 결과(예: 사진 데이터)를 다시 웹뷰에 전달하고, JavaScript로 그 데이터를 넘겨 UI에 반영할 수 있게 합니다.

예시 (iOS 네이티브에서 JavaScript 호출 처리)

import WebKit

class WebViewController: UIViewController, WKScriptMessageHandler {

    var webView: WKWebView!

    override func viewDidLoad() {
        super.viewDidLoad()

        let config = WKWebViewConfiguration()
        config.userContentController.add(self, name: "nativeHandler")
        webView = WKWebView(frame: self.view.frame, configuration: config)
        self.view.addSubview(webView)

        // 웹페이지 로드
        if let url = URL(string: "https://your-web-app.com") {
            webView.load(URLRequest(url: url))
        }
    }

    // JavaScript에서 호출된 메시지 처리
    func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
        if message.name == "nativeHandler" {
            if let body = message.body as? [String: Any], let command = body["command"] as? String {
                if command == "openCamera" {
                    openCamera()
                }
            }
        }
    }

    func openCamera() {
        // 카메라 열기 로직
    }
}

6. 요약

• 프론트엔드: JavaScript로 네이티브 기능을 호출하고, 네이티브에서 반환된 데이터를 처리.
• iOS 네이티브: JavaScript에서 요청한 명령을 처리하고, 네이티브 API를 사용하여 요청을 수행한 후 결과를 다시 프론트엔드로 전달.

이 브릿지 메커니즘을 사용하면 웹과 네이티브 간의 원활한 상호작용을 가능하게 하여, 웹 애플리케이션에서도 네이티브 기능을 사용할 수 있습니다.