[FE] 웹뷰(WebView) 란?

🤓 시작하며 

웹과 앱을 동시에 개발하는 회사에서 처음으로 웹뷰를 써보았다. 분명 앱 개발자가 따로 있는데 왜 웹뷰를 쓰지? 라는 의문이 들었다. 게다가 처음 개발하는 웹뷰다 보니, 테스트 환경이라던지 디버그 과정이 모호해서 굉장히 애를 먹었던 기억이 있다. 특히 앱 토큰을 연결하는 과정, 새 페이지를 띄우는 과정에서 에러 확인을 직관적으로 하지 못했기 때문에 개발 시간이 더뎌졌고 10시까지 야근을 했던.. ^^ 슬픈 추억이 있다. 그래서 오늘은 그토록 애먹었던 웹뷰에 대해서 정리를 해보려고 한다.

---

우선, 웹뷰(WebView)란 무엇인가?

웹뷰는 네이티브 앱 내에서 웹 콘텐츠를 표시하기 위한 컴포넌트이다. 그 컴포넌트의 기능은 앱 내에서, 앱을 벗어나지 않고도 웹 브라우저를 띄울 수 있다. 즉, 웹뷰란 네이티브 앱 내의 웹 브라우저를 띄울 수 있는 컴포넌트이다.

앱을 벗어나지 않고 웹 브라우저를 띄울수 있다는 포인트가 중요하게 생각되는데, 앱을 벗어나서 다른 컨텐츠가 뜨게 되면 유저들은 방금까지 사용하던 앱으로 돌아갈 확률이 감소하기 때문에 사용자 경험이 떨어지게 되기 때문이다. 그리고 이렇게 네이티브 앱과 웹 앱을 합친 앱을 하이브리드 앱 이라고 한다.

 

그렇다면 웹뷰는 왜 사용하는가?

웹뷰로 작업을 하면서 가장 궁금했던 부분이다. 

웹뷰로 작업를 하는 이유에 대해서는 다음과 같이 크게 3가지가 있다.

1. 앱으로 구현하는 것보다 웹뷰로 구현하는 것이 더 간편한 경우
2. 앱의 배포 없이 업데이트를 빠르게 하기 위해서
3. 여러 플랫폼에서 자유롭게 사용하기 위해(Andriod, Ios 등)

 

나의 경우, 1번과 3번의 이유에서 웹뷰로 작업을 하였는데 개인적으로는 네이티브 앱에 대한 지식이 부족한 상태에서 개발이 들어갔기 때문에 더 복잡하게 느껴졌었다. ㅎ

웹뷰의 장점은?

👍 여러 플랫폼에서 사용할 수 있다.

웹페이지, Andriod 앱, Ios 앱을 모두 구현하려면 각 플랫폼에서 다른 언어로 개발해야 한다. 하지만 웹페이지 하나를 만들어놓고 Android, ios에서 웹뷰를 사용하게 되면 한번만 개발하고 각각의 플랫폼에서 사용할 수 있기 때문에 초기 개발 비용을 최소화하고 유지보수고 편라하다는 장점이 있다.

 

👍 배포 없이 업데이트가 가능하다.

앱을 배포하려면 스토어 심사가 필요하다. 하지만 웹뷰를 사용하게 되면 앱 심사를 하지 않아도 웹사이트 내용을 수정할 수 있다. 따라서 자주 바뀌거나 빠르게 업데이트가 필요한 화면은 웹뷰로 구현하는 것이 유리하다.

 

👍 인터넷 연결이 필요한 데이터를 간단하게 불러올 수 있다.

이메일과 같은 데이터는 항상 인터넷 연결이 필요하다. 이러한 데이터는 네이티브 앱으로 네트워크를 설정하고, 데이터를 불러와서 앱 위에서 보여주는 것보다 항상 인터넷에 연결되어 있는 웹뷰로 보여주는 것이 더 간단하다.

 

웹뷰의 단점은?

👎 비교적 느리다.

네이티브 앱에 비해서 로딩 시간이 느리다. 네이티브 앱은 이미 스토어에서 빌드가 완료되지만, 웹뷰는 해당 사이트에서 사용하는 리소스를 다운로드하고 보여주는데 시간이 필요하기 때문이다. 로딩 시간이 길어지면 사용자 경험에 안좋은 영향을 끼친다.

 

👎 UI가 제한적이다.

웹뷰는 html, css, JavaScript 를 사용하기 때문에 네이티브 앱의 UI를 구성하는 것보다 제약이 있다. 각 플랫폼에서 제공하는 모든 UI 또는 UX를 웹뷰에서 사용하기 어렵다.

 

👎 스토어 심사가 어려울 수 있다.

웹뷰만으로 구성된 앱은 스토어 심사가 어려울 수 있다. 허가 없는 웹사이트를 무단으로 사용하거나, 웹사이트만 보여주는 단순한 앱이 스토어에 등록되는 것을 방지하기 때문이다. Google의 WebView 및 제휴사 스팸 정책, Apple의 Minimum Functionality 정책을 잘 확인해야 한다.

 

---

✏️ 마치며

아찔했던 기억을 바탕으로 웹뷰에 대해서 자세히 알아보았다. 사실 개발자체는 어렵지 않았는데 작업을 하면서 가장 힘들었던 것은

1. 테스트가 바로바로 되지 않았음 -> 매번 빌드 후 모바일 앱에서 테스트

2. 에러 확인이 안됨 -> 콘솔도 찍히지 않아 오로지 육안+감으로 확인..너무나도 무모했던 방법

3. 기존 메뉴 틀을 벗어나서 새 페이지를 띄우는 법

4. 앱토큰 사용 방법

 

3,4 번은 비슷한 맥락인데, 새 페이지를 띄우는 과정에서 기존에 가지고 있던 앱토큰이 사라져 버렸고(인식하지 못했고), 결국 api 헤더에 정상적인 토큰이 등록되지 않았다. 그러나 에러 확인도 분명하게 되지 않는 상황에서 이러한 에러가 왜 생겼는지 파악하지 못했고 ...  결국 웹뷰 개발은 내게 어마무시한 트라우마를 남겨주었다..ㅋㅋ 네이티브 앱 개발자에게 물어보니 어떻게어떻게 빌드하여 브라우저 url로 접속할수있는 방법이 있다고 해주었지만(앱 개발자가 세팅해주어야 함) 일주일밖에 기한이 없는 상황에서 일을 크게 벌이는 느낌이라 그냥 무모하게 계속 빌드하면서 확인을 했었다 .. 다음번에 한번더 웹뷰로 작업할수있는 기회가 온다면 좀 더 여유로운 환경에서 다시 해보고 싶다. 힘들었지만 좋은 경험이었당 ㅋㅋ

그러니까 기한 넉넉하게 줘.