웹 뷰(Web View)란?

웹 뷰(Web View)는 네이티브 애플리케이션(모바일 앱, 데스크탑 앱 등) 내에서 웹 콘텐츠(HTML, CSS, JavaScript로 만들어진 웹페이지)를 표시할 수 있게 해주는 컴포넌트이다. 쉽게 말해, 앱 안에 미니 브라우저를 내장하여 웹사이트나 웹 서비스를 그대로 보여주는 역할을 한다.

썸네일

웹 뷰를 사용하는 이유

웹 뷰는 모바일이나 데스크탑 앱에서 웹페이지 화면을 표시하기 위해서 사용한다. 그렇다면 왜 사용하는 것일까?

크로스 플랫폼 대응

리액트 네이티브나 플러터 같은 크로스 플랫폼 프레임워크를 통해서 앱을 만들게 되면 필연적으로 iOS에서만 혹은 안드로이드에서만 지원하는 기능을 만날 수 있다.

화면을 그리는 방식도 플랫폼 별로 다르기 때문에 일관적인 화면을 만들기 위해서 사용한다.

메타몽

개발 효율성

네이티브 기능으로는 복잡하게 만들어야하는 어려운 화면도 쉽게 만들 수 있고 특히 CSS의 스타일링을 활용할 수 있기 때문에 같은 화면이라도 더 빠르게 만들 수 있다는 점이 장점이다.

유지보수

앱을 업데이트하지 않고 웹 컨텐츠만 바꾸면 바로 컨텐츠 변경이 가능하기 때문에 자주 변경되는 정보에서 웹 뷰를 자주 사용한다고 한다.

특히 이벤트 페이지나, 공지사항 등에서 자주 사용된다.

프로젝트

최근에 Inforsion이라는 프로젝트를 진행 중이다. 처음엔 PWA로 진행하려고 했으나 리액트 네이티브를 경험해보고 싶어서 RN을 활용한 개발을 진행 중이다.

프로젝트에서 차트를 사용해야하는 기능이 있는데, 이 기능을 어떻게 구현할지 고민을 하다가 웹 뷰에 대해서 학습하게 되었다.

RN 용 차트 라이브러리 사용 vs Rechart + 웹뷰

최종적으로 고민한 방안은 2가지였다. RN용 차트라이브러리를 사용하는 것과, Rechart라는 리액트 친화 차트 라이브러리와 웹뷰를 결합한 방법 두 가지이다.

RN 용 라이브러리

RN용 라이브러리를 사용하는 것의 장점은 빠른 개발과 복잡성이 늘어나지 않는다는 점이 었다. 하지만 이 경우 가장 인기있는 Rechart 같은 라이브러리를 사용할 수 없다는 점이 단점이었다.

웹 뷰를 사용하는 것

웹 뷰를 사용하면 복잡도가 늘어난다. 앱 개발만 하는 것이 아닌 웹 개발도 같이 해야하기 때문이었다. 하지만 Rechart라는 라이브러리를 사용해볼 수 있다는 점과 웹 뷰 자체에 대한 경험을 쌓을 수 있다는 점이 큰 장점이라고 생각했다.

결론

웹 뷰와 Rechart 라이브러리 조합을 사용하기로 결정

Inforsion프로젝트를 개발하면서 생기는 문제 해결 경험들도 블로그에 시리즈를 하나 파서 만들어야겠다.