Android에서 WebView를 통해 Web과 소통하기

들어가며

안녕하세요 노머스에서 안드로이드 개발을 하고 있는 양수진입니다. 이번에는 WebView와 관련된 이슈를 해결하면서 학습했던 내용을 공유하고자 합니다.

Android에서 WebView 동영상 전체화면이 안돼요!

WebView로 구성된 화면에서 동영상 전체화면 버튼이 비활성화되어 동영상을 전체화면으로 볼 수 없는 이슈가 발견되었습니다. 아뿔싸.. ios는 OS에서 기본적으로 전체화면 기능을 제공을 해주어서 정상 작동되고 있었지만 Android는 별도의 구현을 해주어야 활성화되는 것이었습니다.

Android Webview에서 동영상 전체보기 활성화

WebChromeClient의 onShowCustomView()와 onHideCustomView() 를 override하여 전체화면 진입/해제 시의 동작을 구현해 주면 활성화됩니다.

    override fun onShowCustomView(view: View?, callback: CustomViewCallback?) {
        super.onShowCustomView(view, callback)
        // 전체화면 view를 화면에 보여주는 로직
    }
    
    
    override fun onHideCustomView() {
        super.onHideCustomView()
        // 전체화면 view를 제거하는 로직
    }

• onShowCustomView()의 파라미터로 넘어오는 view가 전체화면으로 표시할 View 입니다.

하지만..

실행해보았더니 전체화면 기능 자체는 동작했지만, 동영상 비율에 관계없이 세로로만 표시되었습니다. 안드로이드 네이티브에서 할 수 있는 이런저런 방법을 시도해 보았지만 결국 업로드 시 서버에 영상 크기를 저장하여 활용하는 방향으로 해결하도록 이야기가 되었습니다. 그리고 모바일팀 팀장님은 한마디를 남기고 서둘러 회의실로 떠나셨습니다.

“프론트 팀에게 영상 크기 전달하는거 만들어 달라고 요청해주세요~”

.

.

.

그.. 그게 뭐죠?

WebView 개발 경험이 없는 입사 3개월 차 신입이었던 저는 그만 혼란에 빠지고 말았습니다…

• 서버에 저장되어 있을 영상 크기를 왜 프론트팀에게 전달해달라고 요청해야 하는 거지????
• 폰에서 무슨 영상을 보는지 어떻게 알고 영상 크기 전달이 되는 거지???
• 애초에 뭘 어떤 형식으로 만들어달라고 요청해야 하지???

브릿지 인터페이스

마침 프론트팀 수민님의 웹뷰(WebView) 개발 적용기 기술블로그 포스트에서 관련 내용을 다루고 있어서 읽어 보았고, 웹과 앱간의 브릿지 인터페이스의 존재를 알게 되었습니다.

JavaScript로 Android 코드 실행시키기

JavaScript 사용 활성화

webView.settings.javaScriptEnabled = true

• WebView의 WebSettings를 통해 JavaScript 사용을 허용합니다.
• JavaScript가 Android 앱을 제어하는 것은 유용할 수 있지만 보안 문제가 될 수 있기 때문에 기본적으로 비활성화되어 있습니다.
  • ex) WebView에 표시되는 페이지에 악의적인 JavaScript 코드가 포함되어 있는 경우
• 안드로이드 공식 문서에서도 직접 작성한 JavaScript 인터페이스를 실행시키는 것이 아니라면 브라우저 애플리케이션으로 링크를 열도록 권장하고 있습니다.
  • 노머스 프론트팀 팀원분들은 당연히 신뢰할 수 있기 때문에 옵션을 허용해 줍니다.

인터페이스 설계

• 수민님의 기술블로그 포스트의 ‘웹과 앱 간의 인터페이스 설계’ 단락에서 공개된 3가지 메서드를 예시 코드로 들겠습니다.

internal class FrommAppJsInterface(private val viewModel: InAppBrowserViewModel) {

    @JavascriptInterface
    fun openBrowser(url: String) {
        viewModel.action(InAppBrowserAction.OpenBrowser(url))
    }

    @JavascriptInterface
    fun openInAppBrowser(url: String) {
        viewModel.action(InAppBrowserAction.OpenInAppBrowser(url))
    }

    @JavascriptInterface
    fun closeInAppBrowser() {
        viewModel.action(InAppBrowserAction.CloseInAppBrowser)
    }
}

• @JavascriptInterface 어노테이션을 추가함으로써 WebView의 JavaScript 코드가 FrommAppJsInterface 객체의 메서드에 접근할 수 있도록 합니다.

WebView에 브릿지 인터페이스를 작성한 클래스 객체 주입

webView.addJavascriptInterface(FrommAppJsInterface(inAppBrowserViewModel), "Fromm")

• addJavascriptInterface를 통해 객체를 WebView에 주입하여 JavaScript에서 접근할 수 있도록 합니다.
• 주입된 객체는 웹페이지의 모든 프레임에서 접근 가능합니다.

    android({ url }) {
        window.Fromm.openBrowser(url);
    },

• 위 코드는 Web 코드의 일부입니다. WebView에서 위 커맨드가 실행되면 이에 상응하는 아래의 네이티브 코드가 실행됩니다.
• openBrowser()의 경우에는 인자로 들어오는 url을 브라우저로 여는 네이티브 코드가 실행되겠습니다.

    @JavascriptInterface
    fun openBrowser(url: String) {
        viewModel.action(InAppBrowserAction.OpenBrowser(url))
    }

Android에서 JavaScript 코드 실행시키기

반대로 안드로이드에서 webview.evaluateJavascript() 메서드를 통해 Web의 JavaScript 코드를 실행시킬 수도 있습니다.

webView.evaluateJavascript("javascript:nativeBack()", null)

• 현재 로드된 웹 페이지에서 JavaScript 코드를 비동기적으로 실행합니다.
  • resultCallback을 등록하면 실행 결과가 콜백으로 반환됩니다.
• 예시 코드는 Android에서 시스템 네비게이션의 백버튼을 눌렀을 때 JavaScript의 nativeBack() 메서드를 호출하는 코드입니다.
• 안드로이드에서 호출할 때에는 WebView와의 호환성을 위해 메인 스레드에서 실행해야 합니다.

이슈 해결

• 동영상 전체보기 버튼을 눌러 전체화면에 진입할 때 evaluateJavascript으로 웹의 getVideoDimension() 함수를 호출하여 콜백으로 영상 크기를 받아오도록 구현했습니다.

Web의 getVideoDimension() 코드 일부

    window.getVideoDimension = function () {
        return `${video.width}x${video.height}`;
    }

Android

 fun isVideoLandscape(onResult: (Boolean) -> Unit) {
        webView.evaluateJavascript("javascript:getVideoDimension()") { dimension ->
            try {
                val (width, height) = dimension.replace("\"", "").split("x").map { it.toIntOrNull() ?: 0 }
                onResult(width > height)
            } catch (e: Throwable) {
                onResult(false)
            }
        }
    }

• getVideoDimension()의 콜백으로 얻은 영상 사이즈 “widthxheight”를 가공하여 영상의 방향을 판단합니다.
• 서버에 영상 크기가 저장되어 있지 않는 등 유효하지 않은 값이 온다면 기본적으로 세로로 보여주도록 처리했습니다.

    is InAppBrowserEffect.Web.EnterFullScreen -> {
        webViewContainer.isVideoLandscape { isLandscape ->
            if (isLandscape) {
                (context as Activity).requestedOrientation = ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE
            }
        }
    }

• 전체화면 버튼을 눌렀을 때, 앞서 구현한 isVideoLandscape()를 호출하고, 가로 방향의 영상일 경우 강제로 Activity의 방향을 바꾸어 주어 영상이 화면에 꽉~ 찰 수 있도록 해주었습니다.

마치며

비교적 간단한 이슈였지만 WebView 개발 경험이 없는 신입 Android 개발자인 저에게 귀중한 학습의 기회였습니다. 전혀 몰랐던 WebView에 조금 익숙해질 수 있었고, 프론트 팀과 백엔드 팀과의 협업도 경험해 볼 수 있었습니다. 또 Web과 Android 간 통신이 필요하게 되면 용도에 맞게 인터페이스를 설계할 수 있도록 해보겠습니다~