Web View

웹뷰(Web View)란?

프레임워크에 내장된 웹 브라우저 컴포넌트로 앱 내에서 웹 브라우저를 띄우는 것이다.

앱을 벗어나지 않고 웹 브라우저를 띄운다는게 핵심이다.

=> 앱에 내장되어 있는 브라우저

 

카카오톡으로 받은 링크에 접속하면 카카오톡 자체 브라우저를 통해 접근하는데, 이게 웹뷰를 사용한 것이다!

---

앱 개발 방법

- 웹앱

HTML, CSS, JS로 개발

앱과 유사한 경험을 제공하면서 웹 브라우저를 통해 접속하는 웹 페이지

설치하는 방식 X

 

- 네이티브 앱

특정 플랫폼에 맞게 개발된 앱

운영체제와 하드웨어의 기능을 모두 활용할 수 있음

앱 스토어에서 설치해야 됨

 

- 하이브리드 앱

웹앱과 네이티브 앱의 장점만 합친 기술

앱의 화면이나 기능은 웹 기반으로 제작하고 겉모습은 네이티브 앱으로 패키징

앱 스토어에서 설치해야 됨

 

웹뷰 = 웹앱🤔?

No.

웹뷰는 네이티브 앱 안에 포함된 웹 브라우저 컴포넌트이다.

---

웹뷰를 왜 쓸까?

👍🏻 앱을 배포하지 않고 업데이트를 할 수 있다.

앱을 업데이트 하기 위해서는 배포를 다시 해야하는데 이때 스토어의 심사를 받아야한다.

또한 사용자가 앱의 버전을 업데이트 해야지만 배포된 기능을 사용할 수 있다.

웹뷰를 이용한다면 스토어의 심사를 거치지 않고 내용을 수정할 수 있다.

자주 변경되거나 빠른 업데이트가 필요하다면 웹뷰로 구현하는게 좋을 수 있다.

 

👍🏻 여러 플랫폼에서 사용이 가능하다.

웹, 안드로이드, IOS 모두 다른 언어로 개발을 한다.

웹 페이지를 하나 만들고, 안드로이드와 IOS에서 웹뷰를 사용한다면 한 번의 개발만 해도 된다.

초기 개발 비용이 줄고 유지 보수도 쉽다는 장점이 존재한다.

 

물론 단점도 존재한다.

 

👎🏻 앱에서 사용하는 Native API를 직접 사용하기 어렵다.

카메라 접근이나 디바이스와 직접적인 연동이 어렵다.

 

👎🏻 비교적 느리다.

웹뷰에서 사용하는 리소스를 다운로드하고 보여주는데까지 시간이 걸린다.

---

웹뷰를 사용하는 결제 시스템 💵 

결제 시스템을 처음부터 끝까지 구현하는 것은 어려운 작업이다.

카드사마다 코드를 짜고 연동하고,, 

이런 어려움을 해결해주고자 중간에서 도움을 주는 회사들을 PG(Payment Gateway)라고 한다.

요즘 많이 보이는 토스페이먼츠가 예시이다.

결제 흐름은 사진으로 쉽게 이해할 수 있다.

결제 시스템을 웹뷰로 구현하는 이유는 아래와 같다.

 

1. 보안

결제 시스템은 돈과 관련된 중요한 문제이기 때문에 보안이 매우 중요하다.

웹뷰를 사용해서 결제 서비스의 보안 모듈을 그대로 사용하고, 

결제 과정에서 사용자 정보 등 민감한 정보들을 앱에서 처리하지 않는다.

 

2. 호환성

다양한 플랫폼에서 동일한 사용자 경험을 제공한다.

또한 웹 페이지를 그대로 보여줄 수 있기 때문에 별도의 SDK나 API를 통합하지 않아도 된다.

---

Web + Mobile 통신(Bridge)

웹과 모바일은 서로 분리된 환경이기 때문에 서로 통신을 하기 위해서는 연결 다리가 필요하다.

이 연결 다리를 "Bridge(브릿지)"라고 부른다.

브릿지는 웹뷰 통신을 위해 만들어진 JS용 인터페이스라고 할 수 있다.