React Native에서 웹뷰(react-native-webview)를 사용할 때, 고려해야할 것들(#삽질, #Next.js)

들어가며

이 글은 리액트 네이티브에서 웹뷰만으로 서비스 개발을 하다가 큰 문제에 부딪혀 프레임워크 자체를 변경하게된 일을 작성한 회고록입니다. Web-View만으로 리액트 네이티브 개발을 생각중인 분들에게 도움이 될 것이라 생각합니다. 아래부턴 간결한 문장을 위해 평어로 진행하겠습니다.

 

 

Web-View 개발을 선택한 이유

내가 만들고자 하는 서비스는 소셜로그인으로 회원가입이 되고, 카카오톡처럼 핸드폰의 연락처를 가져와 친구를 만들고, 쇼핑에 결제까지 되는 서비스이다. 그래서 SSR, CSR 등 각 페이지에 맞는 렌더링 기법을 선택할 수 있는 Next.js를 활용하면, 빠른 속도 경험을 유저에게 제공할 수 있을 거라 생각했고, Next.js를 웹 프레임워크로 선택했다. 이렇게 web을 만들고, 해당 web을 ReactNative를 통해 web-view로 보여주는 웹앱을 만들려 했었다.

 

이렇게 결정하게된 첫 번째 이유는 [1] 적은 노력으로 웹, iOS, Android라는 3가지 플랫폼에서 배포를 할 수 있기 때문이다. 프론트엔드 개발자는 나혼자이기에 유지보수 측면을 고려한다면, 웹뷰는 웹이라는 하나의 플랫폼만 개발하기에, 훨씬 효율적인 선택이라 생각했다. 그리고 이 땐, Next만 제대로 개발하면 앱에서는 web-view로 띄우는게 다일 줄 알았다...

그리고 두 번째로는 [2] Next로 실사용자가 많이 있는 서비스를 개발해보고 싶었다. 지난 번 Next로 개발한 서비스는 컨텐츠와 유저 수가 굉장히 적었기때문인지, 속도와 성능면에서 Next 프레임워크 사용 장점을 크게 느끼지 못했기 때문이다. 또, 개인적인 욕심으로는 새로 나온 14버전을 학습해보고 싶기도 했다.

마지막 세 번째로는 내가 React Native를 제대로 알지 못한다는 것이었다. React와 거의 유사하게 작동하지만, 리액트 네이티브를 세부적으로 사용하기 위해선 [3] 네이티브 코드에 대한 지식이 많이 필요할 것이라 생각했다. 하지만, 그 땐 몰랐다. web-view를 쓰는 것이 더 많은 네이티브 코드에 대한 지식이 필요할지...

 

React Native에서는 웹뷰를 쓰는 방법이 두 가지가 있다. 네이티브 코드를 만져서 Native WebView를 띄우는 방법이 있고, npm 라이브러리인 react-native-webview를 사용하는 방법이 있다. 나는 네이티브 코드에 대한 지식은 없으니, 라이브러리를 이용하기로 했다. 하지만 이 결정은 로그인에서부터 난관에 부딪히게 된다.

 

 

내가 겪은 문제

[1]

OAuth 소셜 로그인시에 앱의 웹뷰에서 진행할 경우, OAuth 인증 서버가 로그인 요청을 Web이 아닌 App이 보냈다고 인식하는 문제가 생겼다. 이 문제 때문에 UserAgent 정보를 바꿔보기도 하고, javascript SDK를 써보기도 하는 등 개발 과정에서 많은 난관을 겪었다. 구글 같은 경우, webView를 통한 로그인을 구글에서 경고하고 있고, 배포전임에도 제출해야할 것도 굉장히 많았다. 그리고 Kakao의 경우, SDK를 사용해서 해결하긴 했는데, Next에서 해당 sdk로 인해 SSR로 계획했던 페이지에서 어쩔 수 없이 CSR로 변경되는게 성능면에서 아쉽기도 했다. 그리고 Naver는 App으로는 잘되지만, web-view로는 여전히 웹으로 인식을 못하고 정신차리지 못했다. (이제와 말하는거지만, 네이버 로그인은 정말 문서가 불친절하다. 카카오와 굉장히 비교됐다. 문서 관리의 중요성을 느끼는 계기가 되었다.) 그리고 아주 중요한 부분인데, 각 Open API 사이트에서 알려주는 WebView 사용방법은 react-native-webview와 무관하다! 나는 웹뷰면 다 같은 웹뷰일 줄 알았다. 하지만 react-native-webview는 라이브러리일 뿐이다. Open API 사이트에서 안내하는 웹뷰 사용방법은 다 네이티브 코드의 웹뷰 사용법이다. 그래서 리액트 네이티브에서 웹뷰를 이용하려면 더 많은 네이티브 코드 지식이 필요했다.

 

[2]

그럼에도 여차저차 이것만 해결하면 괜찮을거야라고 다독이며, 웹뷰로 계속 개발을 해나갔다. 그러고 바로 두 번째 문제에 부딪혔다. 웹에서는 모바일 디바이스를 조작할 수 없다는 사실을 간과했다. 그래서 핸드폰의 연락처를 가져오지 못하는 문제가 생겼다. 핸드폰을 연락처를 가져오기 위해선 디바이스에 권한을 묻는 등의 조작이 필요한데, 웹뷰에선 그게 불가능했기 때문이다. (네이티브 웹뷰에선 가능할지는 모르겠지만, 두 플랫폼의 네이티브 지식이 나에겐 전무하다.) 그럼에도! 이 또한, 힘들지만 해결하는 방법이 있긴했다. 첫 번째, 간단하게 웹뷰에 데이터를 전송할 수 있는 방법이 있었지만, 이 방법은 더이상 먹히지 않는다. 두 번째, 리액트 네이티브에서 생성한 버튼에 javascript injection으로 통신할 수 있는 방법이 있긴하다. 하지만, 이 또한 특정 페이지에서 컨트롤하기 어려운 매우 지저분한 방법이다.

 

[3]

이 때쯤 느꼈다. 나는 앞으로 웹에서 라이브러리를 쓸 때마다, 이 웹뷰 라이브러리와의 호환성을 확인해야하겠구나. 그러고 바로 우리 서비스에서 가장 중요한 외부 라이브러리가 될, 결제 Open API 사이트에 방문했다. 이 라이브러리를 지원하는 결제 Open API가 없었다. 그나마 다행히 ReactNative까지는 문서가 잘 되어있었는데, 이 웹뷰를 지원하는 문서는 존재하지 않았고, 또 검색해본 결과 그렇게 개발을 진행해본 사람들도 없는 듯했다. 그래서 매번 호환성 문제로 개발 진척도를 떨어트리느니, 앞으로의 빠른 개발 진행을 위해 Next에 대한 개인적인 욕심과 멀티 플랫폼에 대한 아쉬움은 잠시 내려놓고 서비스에 필요한 ReactNative로 개발을 하기로 결정했다. 

 

 

프레임워크에 대한 고민은 충분히❌ 치열하게⭕️ 해야한다.

라는 사실을 몸소 느끼게 되었다. 내가 했다고 생각한 고민은 아주 기본적인, 순진한 생각들이었고, 정말 핵심 기능 하나하나를 곱씹으며 치열하게 고민하고 프레임워크를 비교해보는 과정을 겪었어야했다. 그러지 않으면 나처럼 중간에 발목이 잡히고, 개발 진행 속도가 더뎌지게 된다. 그런데 그나마 그건 다행일 수 있다. 더욱 최악인 것은, 지금까지 했던 것들을 다 버리고 처음부터 개발을 해야하는 일일 것이다. 허허. 시간을 두고 치열하게 고민하는 것이 오히려 시간을 아끼는 것임을 몸소 체험하고 잊지 않고자 글로 남기게 되었다. 또 생각했다. "이래서 개발은 혼자할 수 없는건가. 혼자서 생각할 수 있는 것엔 한계가 있기에, 함께 가야하는구나" 라고. 물론, 이정도는 충분히 혼자서도 생각할 수 있었지만, 동료가 있었다면 어땠을까 라는 생각이 들었다!

 

 

 

살짝공개...해보는 앱!

열심히 달리고 있다!