웹뷰는 왜 쓰는걸까?? 🤔

웹뷰를 알아보자! 📱

배경

회사의 메인 서비스는 크로스플랫폼 앱 프레임워크중 하나인 Flutter를 선택해서 사용하고 있다. 회사에 입사하자 만든 프로젝트인 “커뮤니티” 서비스도 Flutter로 만든 앱의 웹뷰로 실행되고 있다. 처음에 만들때는 인지하지 못했지만 지금와서 생각해보니 왜 Flutter로 커뮤니티를 만들지 않고 웹으로 만들게 되었을까? 라는 의문이 들었다. 아무래도 Flutter는 앱을 만드는 프레임워크이기 때문에 오직 기술적인 관점에서 웹보다 훨씬 더 낫다. 부드러운 화면전환, 빠른 렌더링, 기타 네이티브에서 쓸 수 있는 기능들, 모바일에 특화된 경험들을 유저들에게 선사해 줄수 있다. 그럼에도 웹뷰 개발이 가지는 장점들이 네이티브 앱 개발의 장점들을 상쇄할 만큼 크다는 것을 알게 되었다.
그럼 웹뷰에 대해서 조금 더 자세하게 알아보자!

웹뷰란 무엇일까? 📱

웹뷰는 앱 내의 컴포넌트일 뿐이다. 그리고 그 컴포넌트의 기능은 앱 내에서, 앱을 벗어나지 않고도 웹 브라우저를 띄울 수 있다. 그리고 웹 프론트엔드 개발자가 작성한 코드가 이 앱내의 웹뷰 컴포넌트로 임베딩된다.
👉🏻 정리하자면 웹뷰는 네이티브 앱내의 웹 브라우저를 띄울 수 있는 컴포넌트이다.
생각보다 앱을 벗어나지 않는 다는 포인트가 중요하다. 유저들은 앱을 벗어나서 다른 컨텐츠가 뜨게되면 방금까지 사용하던 앱으로 돌아갈 확률이 감소하게 된다고 한다. 나도 종종 이랬던 경험이 있고 공감이 되었다.

각 플랫폼별 웹뷰 컴포넌트의 종류

1. IOS

• UIWebView : IOS 진영의 가장 오래된 웹뷰 컴포넌트, 성능상의 문제 및 렌더링 속도가 느리다고 한다. 앱 개발자가 이 웹뷰 컴포넌트를 사용한다? -> 바로 말려야함 🙅🏼
• WKWebView : 요즘 가장 많이 사용되고 있는 Webview라고 한다. 성능도 크게 문제가 없다고 한다.
• SFSafariView : 사파리와 호환이 좋다 최신 컴포넌트, 웹뷰 내에서 사파리에 있는 모바일 웹과 뭔가 데이터를 호환한다

2. Android

• 안드로이드는 Chrome 30.0.0.0 기반의 웹뷰를 사용한다고한다.

3. Flutter

• InAppWebview : 플러터에서 가장 범용적으로 많이 쓰이는 웹뷰 컴포넌트이다. 현재 우리회사도 Flutter기반 InAppWebview를 사용해 웹뷰를 띄우고 있다.
• url_launcher : 위의 웹뷰 컴포넌트보다 가볍지만, 사용할 수 있는 기능이 제약되어있다.
• Webview : 가벼운 InAppWebview라고 생각하면 된다. 하지만 ‘새창열기’가 안된다는 치명적인 단점이 있다고한다.

네이티브 앱 개발의 단점

사실 네이티브에서 기술적인 제약이 없다고 하면 웹뷰는 쓸 일이 거의 없을 것이다. 하지만 여러가지 기술적 제약들이 서비스와 맞물려 존재한다.

1. 앱 스토어 리스크 : 앱은 스토어를 통한 배포 프로세스이기 때문에 기능개발이 완료되고 빌드 후 배포를 하더라도 바로 사용자들에게 전달되지 않는다. 추가로 IOS, Android 스토어 마다 앱의 가이드라인 다르고, 추후 정책도 바뀔수도 있다!
   

2. 버전 이슈 : 앱은 최신 버전이 업데이트되면, 사용자들은 자신들이 사용하고 있는 앱의 버전을 업데이트 해주어야 최근에 배포된 기능들을 사용할 수 있다. 만약 사용하던 앱이 있는데 자주 업데이트하라고 한다면? 사용자는 짜증낼 수도 있다! (그렇다고 사용자들에게 무조건 최신 버전의 앱을 사용하도록 강요할 수 없는 노릇..)
   최악의 경우는 한 앱 서비스에 다양한 버전들이 사용될 수도 있다! 🥲

3. 개발자 풀 : 앱개발자들은 실제로 많이 없다 즉 희소성이 있을 수도 있다. 그러나 아이러니한 점은 회사에서 앱 개발자는 그렇게 많이 뽑지 않는다는 점이다.

결론 : 이러한 이유들로 네이티브 앱 만으로 만들어진 거대한 서비스는 없다고한다.

웹뷰를 사용하는 이유

사실 웹뷰는 위의 단점들을 커버칠 수 있기 때문에 많은 회사에서 채택하여 사용하고 있다. 메이저 회사인 ‘토스’, ‘배달의 민족’, ‘당근 마켓’들도 웹뷰 화면들이 많다. 추가로 굉장히 잘 만들어진 웹뷰들은 일반 사용자들이 봤을때 이게 웹인지 앱인지 분간이 안될 정도이다. 나 역시도 “토스” 앱 서비스를 사용하면서 어떤 뷰가 웹인지 네이티브 앱인지 구분을 할 수 없었다. 그만큼 웹뷰는 잘 만들어지고, 잘 사용된다면 서비스적 측면에서 네이티브 앱보다 훨씬 더 나은 선택지가 될 수 있다고 생각한다.

1. 더 많은 기능을 빠르게 제공(핵심!) : 사용자들에게 기능들을 빠르게 제공하고, 수정할 수 있다. 이를통해 유저들의 피드백을 수용해 즉각적으로 반영하여 빠르게 서비스를 개선해 나갈 수 있다.

2. 개발자 풀 : 아무래도 앱 개발자보다는 웹 개발자들의 공급, 수요가 더 높다.

   
   

웹뷰가 일반 웹과 달라야 하는 점

웹 개발자가 일반적으로 개발하는 일반 웹과 네이티브 앱에 들어가는 웹뷰는 개발 성격이 살짝 다르다. 일반 웹과 다르게 앱은 화면과 화면간의 전환이 정말 빠르게, 자연스럽게 이루어진다. 그만큼 프레임이나 렌더링 성능이 좋다는 소리겠다. 만약 웹뷰로 만들어진 페이지에서 화면을 전환했는데 3초후 다음화면 컨텐츠가 보여진다면?? 최악이다..
모바일이 아닌 웹브라우저에서 일반 사용자들은 1~2초정도 웨이팅은 큰 이슈라고 생각을 안하거나, 어쩌면 익숙해져있을지도 모른다. 하지만 모바일 앱을 사용하는 사용자들은 즉각적으로 컨텐츠가 표현되는 화면에 익숙해져있고, 생각보다 훨씬 좋은 사용자경험을 바란다.

👉🏻 즉 웹뷰는 빨라야한다. 그러므로 웹뷰는 일반적인 웹과 다른 성능 지표를 생각하며 개발해야한다.

1. LCP(Largest Contentful Paint) : FCP(First Contentful Paint)와는 살짝 다르게 페이지의 가장 큰 컨텐츠 = 페이지의 주요 내용이 얼마나 빠르게 렌더링 되는지에 대한 지표

2. CLS(Cumulative Layout Shift) : 레이아웃이 얼마나 덜 끊키는지에 대한 지표. 콘텐츠를 보다가 갑자기 이미지가 나중에 렌더링되서 뚝 끊키는 현상을 줄여야한다.

3. FID(First Input Delay) : 사용자의 인터렉션 (터치, 드래그 등등)에 따라서 얼마나 빠르게 반응하는지를 요구하는 지표이다.

웹프론트앤드 개발자와 네이티브 앱 개발자간의 소통

웹 프론트엔드 개발자들도 웹뷰로 페이지 및 기능개발을 한다고 하면 서버 개발자들과 API에 대하여 소통하는 것처럼 앱 개발자들과 소통을 해야한다. 어느것들이 있을까 살펴보자!!

1. 어떤 웹뷰 컴포넌트를 쓸 것인지 : 각 웹뷰 컴포넌트마다 지원하는 기능이 다르기 때문에 개발 하려는 기능에 따라 다른 웹뷰 컴포넌트를 써야할 수도 있다.

2. 어떤 컨텐츠를 웹? 앱?에서 띄울지 : 웹뷰는 앱 내에서 실행되는 컴포넌트이기 때문에 웹뷰내에서 앱 컴포넌트들을 띄울 수 있다. 즉 앱개발자와 이야기해서 어떤 컴포넌트는 웹으로 구현할지, 앱에서 구현할지, 아니면 풀 스크린 웹뷰로 구현할지 이야기 한다음 개발을 진행한다.

3. 로딩 관련 : 컨텐츠가 보여지기 전 로딩 스피너등 다양한 로딩 컴포넌트들을 띄울 텐데, 이 부분도 웹일지 앱일지가 굉장히 중요하다! 각 Case의 특성을 파악하고 무슨 로딩 전략을 가져갈지 앱 개발자와 소통하는 것도 중요하다. 참고로 웹에서 로딩을 구현한다고 한다면 일반 적인 로딩스피너보다 Skeleton UI가 더 나은 사용자 경험을 제공한다고 한다.

4. 웹뷰 기능 설정 : 앱 개발자가 웹뷰 컴포넌트를 선택했다면, 그 컴포넌트에서 제공하는 기능들이 무엇이있는지, 어떤 설정은 켜야하고 어떤 설정은 꺼야하는지 앱 개발자와 미리 논의하자! 예를들어 웹 콘텐츠 스케일 조정 기능 : 앱에서는 일반적으로 화면 축소, 확대가 되지 않기때문에 끄는걸로 한다. 앱 개발자 역시도 웹뷰 컴포넌트에 대한 기능들을 다 알지 못하기 때문에 웹 개발에서 필요한 기능들을 웹 프론트엔드 개발자가 미리 말해주면 고마워 하지 않을까??ㅎㅎ

   
   

느낀점

회사를 입사하고, 랜딩 페이지 말고는 모두 Flutter내의 웹뷰로 개발을 진행하고 있었다. 이렇게 웹뷰 개발을 하고 있으면서, 왜 웹뷰를 쓰는지 모르고 하고 있는 것 같아 정리를 해보면서 이유를 알게 되었다. 이번에 개발중인 프로젝트도 껍데기만 Flutter이고 모든 페이지가 웹으로 개발되고 있다. 개발하면서 여러가지 이슈들을 겪을것같지만, 이번에 플러터 코드도 직접 작성하면서 웹과 웹뷰가 어떻게 소통하는지 배우고 있다. 다음에는 기술적으로 앱과 웹이 어떻게 소통하고 있는지 동작원리 부터 사용하고 있는 코드까지 정리해보면 웹뷰쪽은 확실하게 익힐 수 있을 것같다.

Reference

웹뷰 패키지

구글 Core Web Vitals