웹뷰와 PWA

안녕하세요! AT SOPT YB 임지성입니다.

저는 웹 개발자로 한 번, iOS 개발자로 한 번 프로젝트를 진행한 경험이 있는데, 그래서 네이티브 앱과 웹앱의 차이점, 특히 웹앱이 네이티브 앱의 성능을 어디까지 따라갈 수 있을까? 현재 웹에서 네이티브 앱의 기능을 사용하려면 어떤 방식을 선택해야 할까? 이런 것들이 궁금해지더라고요..

그래서 이번에는 웹뷰와 PWA의 특징과, 그 구현 방법에 대해 간단히 조사해봤습니다!

 

제가 과제를 좀 잘못 이해한 것 같습니다ㅠㅠ

해당 주차의 내용과 약간은 관련이 있어야 하는 것 같은데 그냥 '웹에 관한 주제는 무엇이든 가능합니다'에 꽂혀서 평소 궁금하던 내용을 찾아봤어요...

 

 

웹뷰, PWA(Progressive Web App)란?

웹앱

웹 브라우저에서 동작하는 앱 형태의 웹사이트

설치 없이 URL만으로 접근 가능

+) 우리가 일반적으로 협업 프로젝트로 만들어내는게 웹앱!

 

웹뷰

네이티브 앱 안에서 웹 콘텐츠를 로딩해서 보여주는 방식, 즉 앱 안에 브라우저를 삽입해 웹 페이지를 표시하는 방식

일반적인 웹 브라우저와 달리, 웹뷰에는 주소창, 새로고침 등의 기능은 없고 단순히 웹페이지만 보여준다

웹페이지, Android, iOS 등 여러 플랫폼에서 사용할 수 있으며, 웹사이트 내용을 보여주는 것이므로 배포 없이 업데이트가 가능하다는 장점이 있지만,

네이티브 앱에 비해 속도가 느리며(리소스를 로드하는데 시간이 걸리므로), 네이티브 앱의 UI를 사용할 수 없어 UI가 제한적이라는 단점이 있다

 

+) Google과 Apple에서의 WebView 정의

Google의 Android WebView 클래스 정의

WebView 클래스는 Android의 View 클래스의 확장으로, 웹페이지를 활동 레이아웃의 일부로 표시할 수 있게 해 줍니다. 탐색 컨트롤이나 주소 표시줄 등 완전히 개발된 웹브라우저의 기능은 전혀 포함되어 있지 않습니다. WebView의 모든 작업은 기본적으로 웹페이지를 표시하는 것입니다.

Apple의 iOS WKWebView 클래스 정의

WKWebView 객체는 앱 UI에 매끄럽게 통합되는 네이티브 뷰입니다. 웹뷰는 HTML, CSS 및 JavaScript 콘텐츠를 지원하는 웹 브라우징 경험을 제공하며 네이티브 뷰와 함께 사용할 수 있습니다.

 

PWA

웹 앱에 네이티브 앱과 유사한 기능을 추가하여, 앱처럼 동작하도록 만든 웹 애플리케이션

웹 서비스와 마찬가지로 브라우저를 통해 접근하며, 앱 스토어 설치 없이 사용 가능

홈 화면에 아이콘을 추가해 앱처럼 실행 가능

오프라인 지원, 푸시 알림 등 네이티브 앱의 기능을 일부 제공함

	웹뷰 방식	PWA 방식
배포 방식	앱 스토어를 통한 설치	브라우저를 통해 접근, 설치 없이 사용 가능
설치 여부	설치 필요	설치 없이 사용 가능, 홈 화면에 추가 가능
기능 지원	네이티브 기능 일부 지원	오프라인 지원, 네이티브 기능 일부 지원
UX	네이티브와 웹이 혼합된 UX	네이티브 앱과 유사한 UX

 

즉, 일반 웹앱에서 PWA로의 전환 후에는 아래와 같은 변화가 생김

- 서비스 '설치'가 가능해짐

- 서비스 워커를 통해 오프라인 상태에서 앱의 일부 기능 이용 가능

- 캐싱을 통해 로딩 속도 향상

- 푸시알림 및 백그라운드 동기화

 

 

 

그래서 각각 어떻게 구현할 수 있는데?

- 웹뷰

웹뷰는 기본적으로 네이티브 앱 안에서 웹 페이지가 동작하는 방식이므로, 이를 구현하려면 네이티브 앱 개발에 대한 기본적인 지식이 필요함.

예를 들어, iOS에서는 WKWebView로 웹뷰를 구현하며, WebKit이라는 프레임워크를 import해서 어떤 웹 화면을 띄울 지 설정해야 함.

import UIKit
import WebKit

class ViewController: UIViewController, WKNavigationDelegate {

    var webView: WKWebView!

    override func loadView() {
        // WKWebView 구성 설정
        let webConfiguration = WKWebViewConfiguration()
        webView = WKWebView(frame: .zero, configuration: webConfiguration)
        webView.navigationDelegate = self
        view = webView
    }

    override func viewDidLoad() {
        super.viewDidLoad()
        // 로드할 URL 설정
        if let url = URL(string: "https://www.apple.com") {
            let request = URLRequest(url: url)
            webView.load(request)
        }
    }
}

 

또한, 단순히 웹 화면을 띄우는 것만이 아니라, 웹 콘텐츠와의 상호작용이 발생했을 경우 JavaScript와의 통신을 설정할 수도 있음.

예를 들어, 웹에서 특정 이벤트가 발생했을 때 iOS 앱에서 이를 처리하거나, 반대로 앱에서 웹 콘텐츠를 제어할 수 있음.

// 1. JavaScript에서 iOS로 메시지 보내기
window.webkit.messageHandlers.handlerName.postMessage("Hello from JavaScript"); // iOS에서는 WKScriptMessageHandler 프로토콜로 메시지를 수신할 수 있음
    
// 2. iOS에서 JavaScript 함수 호출하기
webView.evaluateJavaScript("javascriptFunctionName();") { (result, error) in
    if let error = error {
        print("JavaScript 실행 오류: \(error)")
    } else {
        print("JavaScript 실행 결과: \(String(describing: result))")
    }
}

 

 

 

- PWA

vite 기반의 React와 Typescript로 만든 일반적인 웹앱을 PWA로 전환하는 방법에 대해 알아보자

준비해야 할 것들

- 올바른 값으로 채워진 manifest.json 파일

- HTTPS가 제공되는 웹 사이트 주소

- 기기에서 앱을 나타낼 아이콘

- 앱을 오프라인에서 동작하게 하기 위한 service worker

 

manifest.json 파일

웹 앱의 루트 폴더에 위치하며, 앱의 title, 모바일 OS에서 앱을 나타내는데 사용할 아이콘 정보 등 브라우저가 웹앱을 설치할 때 그리고 홈화면에서 웹앱을 적절히 표현하는데 필요한 정보를 작성함

manifest 파일에 넣을 JSON데이터의 key에는 name, description, icons, start_url, color 등이 있음

pwa builder라는 웹사이트를 통해 manifest.json 파일을 쉽게 생성할 수 있음

https://www.pwabuilder.com/

PWABuilder

 

Service Worker

오프라인 지원, 캐싱, 푸시 알림 등을 지원하는 백그라운드 스크립트

네트워크 연결이 없을 때도 캐시된 리소스를 제공해 앱이 동작하도록 하며, 네트워크가 복구되었을 때 백그라운드에서 데이터를 동기화할 수 있음

FCM과 연동한 푸시 알림 기능도 구현 가능함

+) Service Worker는 보안 상의 이유로 HTTPS 환경에서만 작동하며, DOM에 직접 접근할 수는 없다

 

이렇게 manifest.json 파일과 service worker를 준비한 뒤, vite 프로젝트에서 vite-plugin-pwa 플러그인을 설치하고 config 파일에 manifest와 service worker 내용을 적용하면 된다!

+) index.html에 아래의 메타 태그를 추가하면 기본 조건들이 만족되었을 시 사이트에 접속했을 때 브라우저가 사이트를 PWA로 인식하고, 디바이스에 해당 서비스를 설치할 수 있는 설치 프롬프트를 사용자에게 표시함(ex: '홈 화면에 추가', '앱 설치' 등) -> 사용자가 이를 선택하면 앱이 설치되어 네이티브 앱처럼 실행됨!

+) PWABuilder를 통해 PWA를 앱 스토어에 등록할 수 있는 형식으로 패키징한다면, Google Play Store와 Apple App Store 등에 앱을 등록할 수도 있다!

 

---

 

이렇게 평소 궁금했던 웹뷰와 PWA에 대해 간단히 알아봤습니다!

웹뷰를 구현하기 위해서는 Swift, Kotlin 등 네이티브 앱 개발을 위한 언어의 이해도가 생각보다 많이 요구되는 것 같아 좀 부담스럽다고 느꼈고,

평소에 자주 접하는 웹앱을 생각보다 간단히(?) PWA로 전환할 수 있다는게 신기하네요

특히 웹으로 구현하더라도 푸시알림 기능이 필요한 경우가 꽤 많은데, PWA로 전환하고 FCM과 연동만 하면 네이티브 앱과 똑같이 푸시알림 기능을 구현할 수 있다는게 개인적으로 가장 매력적인 기능인 것 같습니다.

 

---

KMP와 SKIP?

추가적으로, 웹 애플리케이션은 점점 네이티브 앱의 성능을 따라잡고 있고 크로스 플랫폼도 지원되는데 그럼 네이티브 앱쪽에서는 웹앱의 기능 발전과 호환성을 이겨낼 수 있는 기능이 없을까? 하는 궁금증이 들었고, 조사 과정에서 네이티브 앱도 타 플랫폼에서 상대적으로 자유롭게 이용할 수 있도록 만들어주는 개발 프레임워크를 알게 됐습니다.

예를 들어,

Android/Kotlin의 경우 Kotlin Multiplatform(KMP)라는 크로스 플랫폼 개발 프레임워크로, 하나의 Kotlin 코드베이스를 Android, iOS, 데스크톱, 웹 등 다양한 플랫폼에서 재사용할 수 있도록 지원할 수 있으며,

https://www.jetbrains.com/ko-kr/compose-multiplatform/

Compose Multiplatform UI 프레임워크 | JetBrains

iOS/Swift의 경우 Skip이라는 프레임워크로 Swift 및 SwiftUI 코드를 Android용 Kotlin 및 Jetpack Compose로 변환하여 iOS와 Android에서 동일한 코드를 기반으로 네이티브 앱을 개발할 수 있도록 지원한다고 합니다.

https://skip.tools/

Skip

이렇게 웹에서도 점점 네이티브앱 성능을 따라잡는 신기술들이 등장하고 있고, 네이티브 앱쪽도 점점 플랫폼 차이라는 장벽이 허물어지고 있는 것 같습니다