[React Native] Web App과 Web View의 차이 (feat. 무신사)

---

[React Native] Web App과 Web View의 차이

React Native의 웹앱(Web App)과 웹뷰(WebView)의 차이

---

웹앱(Web App) 웹뷰(WebView)

무신사 사랑해요

---

1. 웹앱 (Web App)

• 정의: 웹앱은 웹 브라우저를 통해 실행되는 애플리케이션입니다. React Native로 만든 모바일 앱이 아니라, 웹 기술(HTML, CSS, JavaScript)로 작성된 웹사이트 또는 웹 애플리케이션을 의미합니다.
• 특징:
  • 브라우저 기반: 웹앱은 웹 브라우저(Chrome, Safari 등)에서 실행되며, 사용자는 브라우저를 통해 웹사이트 주소를 입력하거나 북마크하여 접근합니다.
  • 플랫폼 독립적: 웹앱은 모바일, 태블릿, 데스크톱 등 다양한 기기에서 동일한 코드로 작동합니다.
  • 즉각적인 배포: 웹앱은 배포를 위해 앱 스토어를 거칠 필요가 없으며, 서버에 업데이트를 적용하면 즉시 모든 사용자가 변경된 내용을 확인할 수 있습니다.
  • 네이티브 기능 제한: 웹앱은 브라우저 환경에 의해 제한되며, 카메라, 위치 정보, 파일 시스템 등 네이티브 기능에 접근하기 어려울 수 있습니다.

2. 웹뷰 (WebView)

• 정의: 웹뷰는 React Native 앱 내부에서 웹 콘텐츠를 표시하는 네이티브 컴포넌트입니다. 모바일 애플리케이션 내에서 웹 페이지를 표시할 수 있으며, 이를 통해 네이티브 앱에서 웹 기반 콘텐츠를 사용할 수 있습니다.
• 특징:
  • 앱 내에서 웹 페이지 표시: 웹뷰는 기본적으로 모바일 애플리케이션 안에 웹 페이지를 삽입하는 방식입니다.
  • 네이티브 애플리케이션의 일부: 웹뷰는 네이티브 애플리케이션의 일부로 간주되며, 네이티브 애플리케이션처럼 사용자가 앱 스토어에서 다운로드하여 설치해야 합니다.
  • 네이티브 기능 통합: 네이티브 기능과 웹 콘텐츠가 혼합된 하이브리드 앱을 만들 수 있습니다.
  • 성능 문제: 웹뷰는 기본적으로 웹 브라우저를 내부에 포함하므로 성능 및 UI 응답성이 네이티브 앱보다 떨어질 수 있습니다.

주요 차이점

특징	웹앱(Web App)	웹뷰(WebView)
실행 환경	브라우저 (Chrome, Safari 등)	네이티브 앱 내부에서 실행
배포 방법	웹사이트에 배포	앱 스토어를 통한 앱 배포
네이티브 기능 접근	제한적 (HTML5 및 JavaScript API로 가능)	네이티브 기능과 연동 가능
성능	브라우저 성능에 의존	네이티브 성능보다 약간 낮음
업데이트	서버에서 즉시 반영 가능	웹 콘텐츠는 즉시 반영되지만, 앱 기능 변경 시 앱 업데이트 필요
사용성	플랫폼에 구애받지 않음	네이티브 앱처럼 동작

 

 

웹앱과 웹뷰 예시 (ft. 무신사 App)

간단히 특정 웹페이지를 만들어서 크롬등의 브라우져에서 표시해준다면 그건 웹앱이라 말하며

해당 웹페이지를 특정 앱을 통해 보여준다면 이걸 웹뷰라고합니다.

 

무신사 웹앱

아래와같이 무신사 웹페이지에 진입해보면 아래와같이 웹페이지가 구성되어있는데, 이건 웹앱 이라고 합니다.

https://www.musinsa.com/main/musinsa/recommend

 

 

무신사 웹뷰

아래 무신사 앱과 같이 만들어진 웹앱을 네이티브 앱등 어플리케이션을 만들어서

웹을 앱으로 띄워준다면 이건 웹뷰라고 볼수있습니다.