웹뷰(WebView)란?

웹뷰(WebView)는 네이티브(또는 크로스 플랫폼) 앱에 내재되어 있는 웹 브라우저
(앱이 웹 컨텐츠를 표시하는 데 사용할 수 있는 내장형 브라우저)

이렇게 네이티브 앱 위에 올라가게 되어서 웹뷰가 컨텐츠를 표시해 줌

웹뷰는 크로스 플랫폼에만 있는 것이 아니고 native에도 있음.

즉, 네이티브 언어자체가 지원하고 있는
중 하나

❓ 일반 브라우저랑 뭐가 다른데

• 웹뷰를 사용하면 웹 콘텐츠를 네이티브 앱 뷰와 같이 사용자에게 보여줌
• 일반 웹 브라우저와 달리 웹뷰에는 주소창, 새로고침, 즐겨찾기와 같은 기능은 없고 단순히 웹페이지만 보여줌
• 웹뷰와 네이티브 앱의 소통은 브릿지로(아래 자세히 설명)

장점

• 앱의 기능 사용 가능
  • 웹뷰 내에서 실행되는 자바스크립트는 기본 시스템 API 호출 가능하기 때문 (브릿지 통신방법 덕분 )
• 여러 플랫폼에서 사용 가능
  • 웹페이지, 안드로이드 앱, iOS 앱 모두 한 번의 개발로 구현 가능
• 배포 없이 업데이트
  • 앱을 업데이트 후 배포하려면 심사가 필요하지만, 웹뷰를 사용하기에 웹사이트의 수정된 내용이 바로 반영

단점

• 비교적 느림
  • 네이티브 앱에 비해 로딩 시간이 느리다.
  • 네이티브 앱은 이미 스토어에서 빌드가 완료되지만, 웹뷰는 해당 사이트에서 사용하는 리소스를 다운하고 보여주기 때문
• UI가 제한적
  • 웹뷰는 HTML, CSS, JavaScript를 사용하기 때문
  • 플랫폼에서 제공하는 모든 UI/UX를 웹뷰에서 사용하긴 어려움
• 스토어 심사 까다로움
  • 단순히 웹사이트를 웹뷰를 통해 보여주기 하면 반려될 가능성 높음
  • 앱의 기능(푸시알림, 카메라 사용 등)을 이용해야 앱 스토에 등록됨

어떻게 시작하지?

인프콘2023 강의에서 설명한 자료를 참고해 리액트 네이티브를 사용했습니다.

1. React Native 설치 툴

1-1. React Native CLI

1-2. Expo CLI (추천)

ReactNative를 조금 더 프레임워크화 한 편한 툴

2. 프로젝트 시작

Expo CLI를 사용했습니다!

2-1. 프로젝트 설정

2-2. 웹뷰 추가

2-3.결과

2-2 webview라이브러리만 설치하면 자동으로 웹뷰로 감싼 프로젝트가 생성되는 줄 알았는데, 직적 import해서 쳐야 함! 아래 코드 복사!

import { WebView } from 'react-native-webview';


export default class App extends Component {
    return (
        <WebView
          source={{ uri: 'https://yourWebProject.com/' }}
        />
 
    );
  }
}

앱은 완성.. 그렇지만 여러 문제 발생!

• 화면이 노치에 가려짐
• 뒤로/앞으로 가기 동작 안됨
• 스와이프 불가
• 인터넷이 안되면 하얀 화면만 나옴
• 키보드가 화면을 가려 스크롤 불가
• 등등..

그래서 결국 네이티브 개발을 해야함!!!

• 네비게이션 등등

앱과 웹뷰 둘은 어떻게 통신하지?

네이티브 개발을 하기 위해선 웹뷰로 감싼 웹 프로젝트와 네이티브가 통신해야 합니다!

웹뷰 속 URL로 연결되어있는 웹 프로젝트에서 앱의 기능을 어떻게 사용할까?

브릿지 소통

웹뷰 내에서 실행되는 자바스크립트는 기본 시스템 api를 호출할 수 있음

웹뷰는 자바스크립트 언어를 통해 네이티브 기능과 통합할 수 있는게 큰 장점!!

어떻게? 브릿지를 이용한 소통방법 덕분!!

브릿지란?

• 네이티브와 웹뷰의 통신을 위해 제공되는 자바스크립트 인터페이스
• 웹뷰가 직접 네이티브 API를 호출할 수 없으므로 반드시 브릿지를 통해 호출
• 즉, 브릿지는 웹뷰 인터페이스의 구현체
• 네이티브 플랫폼이나 os 혹은 웹 컨텐츠와 소통할 수 있게 만들어줌

예시1) 리액트 네이티브 → 웹

프로퍼티 : 사전에 정의 되어있는 것
메서드 : 동적으로 자유롭게 구현 가능

• injectedJavaScript 프로퍼티
• injectJavaScript 메서드
  

  (삽질금지) injectJavaScript만 사용하더라도, onMessage도 스크린샷과 같이 넣어줘야 받을 수 있다.

예시2) 웹 → 리액트 네이티브

• onMessage 프로퍼티
• postMessage 메서드
  
  

추가 설명

• postMessge가 무슨 행동을 직접 하는것이 아님!
• postMessge를 통해 window객체에 이벤트를 바인딩
• postMessge가 전달한 특정 메시지를 window 객체에서 받을 수 있음(onMessage로 받음!)

결론

웹뷰로 앱에서 웹 프로젝트를 단순히 보여주기만 하는 것이 아니라,

이렇게 브릿지 통신방법을 이용해서 네이티브 앱이 제공하는 기능에 접근해 다양한 기능(카메라 접근, 스와이프, 푸쉬알림 등)을 사용할 수 있다.

또한, 앱스토어에 등록하기 위해서는 최소 1개 이상의 네이티브 앱의 기능을 사용해야지 심사가 통과될 수 있다.
(단순히 웹뷰를 통해 웹사이트를 보여주기만 하면 앱으로 이용할 이유가 없기 때문)

참고

https://velog.io/@49crehbgr/IT-네이티브-앱-웹-앱-하이브리드-앱

https://startapp.kr/앱-종류-별-비교-분석-네이티브-앱-하이브리드-앱-웹/

https://velog.io/@1nthek/앱의-종류-네이티브-앱-vs-크로스-플랫폼-앱-vs-하이브리드-앱

https://uknowblog.tistory.com/9#article-1--'플랫폼-시각에서-바라본-어플리케이션-개발-방법'-입니다-

https://blog.hectodata.co.kr/app_kinds/

https://mike-tyson.tistory.com/91