웹뷰(WebView) 개발 적용기

들어가며

안녕하세요. 노머스 프론트엔드 개발자 지수민입니다.

이 글에서는 저희가 개발한 프롬채널 서비스에서 웹뷰 기술을 적용한 경험을 공유하고자 합니다.

웹뷰란 무엇인지, 왜 웹뷰를 사용하여 서비스를 개발하게 되었는지, 그리고 어떻게 적용했는지에 대해 설명하겠습니다.

웹뷰란?

웹뷰(WebView)는 모바일 애플리케이션 내에서 웹 콘텐츠를 표시할 수 있는 컴포넌트입니다.

웹페이지를 네이티브 애플리케이션 내부에 포함시킬 수 있으며, JavaScript와 같은 웹 기술을 사용할 수 있습니다. 이를 통해 웹 애플리케이션을 네이티브 앱처럼 사용자에게 제공할 수 있습니다.

👍 장점

크로스 플랫폼 개발

한 번의 개발로 iOS와 Android 모두에서 동작하는 애플리케이션을 만들 수 있습니다. 개발 비용과 시간을 절약하게 해줍니다.

빠른 업데이트

웹 서버에 변경 사항을 적용하면 모든 사용자가 즉시 업데이트된 내용을 확인할 수 있습니다. 앱 스토어 심사를 거치지 않고도 즉각적인 업데이트가 가능합니다.

라이브러리 사용

다양한 웹 라이브러리와 프레임워크를 활용할 수 있어 개발에 유연성을 제공합니다.

👎 단점

성능 이슈

네이티브 컴포넌트보다 웹뷰가 더 무거울 수 있으며, 로딩 시간이 비교적 느릴 수 있습니다. HTML, CSS, JS 리소스를 다운받아 파싱하고 렌더링하는데 시간이 소요되기 때문입니다.

제한된 네이티브 기능 접근

웹뷰는 네이티브 기능에 접근하는 데 제한이 있을 수 있습니다. 이를 보완하기 위해서는 추가적인 플러그인이나 브릿지 코드가 필요할 수 있습니다.

일관성 문제

서로 다른 플랫폼(iOS, Android)에서 일관된 사용자 경험을 제공하는 것이 어려울 수 있습니다. 각 플랫폼에서의 동작 차이를 고려해야 합니다.

적용하기

개발 환경 세팅

웹뷰를 사용하여 개발하기 위해서는 적절한 개발 환경을 먼저 세팅해야 합니다.

• iOS: Xcode를 설치하고, iOS 시뮬레이터를 설정합니다. 이를 통해 다양한 iPhone, iPad 기기에서의 동작을 확인할 수 있습니다.
• Android: Android Studio를 설치하고, Android 시뮬레이터를 설정합니다. 다양한 Android 기기와 해상도에서의 테스트가 가능합니다. localhost 대신 10.0.2.2 를 사용하여 로컬 서버에 접근하도록 설정합니다.

웹과 앱간의 인터페이스 설계

웹뷰를 통해 웹앱과 네이티브 기능을 연결하기 위해서는 각 플랫폼(iOS, Android)에서 해당 기능을 호출할 수 있는 방법이 필요합니다.

커맨드 등록 및 실행 예시

const { runCommand } = createCommandHandler()
    .registerCommand<'openBrowser', {url: string}>({
        ios({ url }) {
            window.webkit.messageHandlers.Fromm.postMessage({
                command: 'openBrowser',
                url
            });
        },
        android({ url }) {
            window.Fromm.openBrowser(url);
        },
    })
    .registerCommand<'openInAppBrowser', {url: string}>(
        {
            ios({url}) {
                window.webkit.messageHandlers.Fromm.postMessage({
                    command: 'openInAppBrowser',
                    url
                });
            },
            android({url}) {
                window.Fromm.openInAppBrowser(url);
            }
        }
    )
    .registerCommand<'closeInAppBrowser'>(
        {
            ios() {
                window.webkit.messageHandlers.Fromm.postMessage({
                    command: 'closeInAppBrowser'
                });
            },
            android() {
                window.Fromm.closeInAppBrowser();
            }
        }
    )

예시 코드는 openBrowser, openInAppBrowser, closeInAppBrowser라는 커맨드를 등록하고, 각 플랫폼별로 다른 방식으로 해당 기능을 처리하는 코드입니다.

iOS에서는 window.webkit.messageHandlers를 통해 네이티브 메시지를 전송하고, Android에서는 window.Fromm을 통해 네이티브 메서드를 호출합니다.

import React from 'react';

...

return (
    <ChannelButton onClick={() => 
        runCommand({
            key: 'openBrowser', 
            url: 'https://store.frommyarti.com/campaign/channel'
        })} 
    />
)

React 컴포넌트를 사용하여 버튼 클릭시 openBrowser 커맨드를 실행하는 방법입니다. 클릭 이벤트 핸들러 내에서 runCommand 함수를 호출하여 특정 URL을 앱에서 열도록 설정합니다.

앱 버전에 따른 로직 분리

앱에 버전에 따라 새로운 기능이 추가되거나 기존 기능이 수정될 수 있습니다. 구버전의 사용자도 앱을 계속 사용할 수 있도록 하면서, 최신 버전의 사용자에게는 새로운 기능 제공할 수 있도록 처리를 해야합니다.

if(checkAppVersion(1.17.0)){
    runCommand({
        key: 'openPostFanFeed'
    });
    return;
}

showAlertDialog({
    title: '업데이트 안내',
    message:'보다 나은 서비스 이용을 위해 최신 버전으로 업데이트가 필요합니다.'
})

checkAppVersion 함수는 현재 앱의 버전이 1.17.0 이상이면 해당 함수를 호출합니다. 그리고 구버전 사용자에게는 업데이트 안내 팝업을 통해 새로운 기능을 사용할 수 있도록 합니다.

앱 버전에 따른 코드 분리를 통해 다양한 버전의 앱에서 일관된 사용자 경험을 제공하고 안정적인 기능을 유지할 수 있습니다.

사용자 경험 일관성

사용자 경험의 일관성을 유지하며 웹뷰를 통해 구현된 부분이 애플리케이션 내의 네이티브 부분과 어우러지도록 구현해야합니다. 토스트 메시지와 같은 UI 요소도 네이티브 앱과 유사하게 구현하여 사용자가 일관된 인터페이스를 경험할 수 있도록 해야합니다.

테스트

웹뷰를 사용한 애플리케이션의 품질을 보장하기 위해 테스트가 필요합니다. 모든 기능이 제대로 동작하는지, 다양한 기기와 각 운영체제 버전에서의 호환성을 확인해야합니다.

저희는 주로 시뮬레이터와 실제 디바이스에서 웹과 앱의 통합적인 테스트를 진행했습니다. 수동으로 테스트할 시에는 다양한 기기와 버전에 따라 기능을 확인해야 하기 때문에 많은 시간이 소요될 수 있으며, 또한 놓치는 케이스도 발생할 수 있습니다.

앞으로는 자동화 테스트 도구를 도입하여 웹뷰 테스트를 효율화하고 정확성을 높이고자 합니다. 자동화 테스트를 통해 안정성과 사용자 경험을 지속적으로 개선하며 더 신속하고 일관된 품질 관리가 가능해질 것입니다.

마치며

웹뷰를 사용한 개발은 장점과 단점을 가지고 있으며, 이를 잘 이해하고 적절히 활용하는 것이 중요합니다.

이 글에서는 웹뷰란 무엇인지, 웹뷰를 사용하는 이유와 그 장단점, 그리고 적용 과정에서 고려해야 할 사항들을 살펴보았습니다. 웹뷰 개발에 대해 도움이 되었길 바랍니다.

지금 바로 프롬채널에 가입하여 서비스를 경험해보세요!

감사합니다.