웹 프로젝트 웹뷰로 네이티브까지 만들어보기

개요

처음에 시작했던 꼬꼬면 웹 프로젝트에서 백엔드의 기술적인 도전으로 푸시알림을 구현해보고 싶다는 제안이 들어왔다. 하지만 이전에 알림을 구현해봤던 내 입장에서는 웹으로 푸시알림을 하자니 PWA를 통해 모바일에서 설치를 한 후 알림이 올 수 있기 때문에 PWA를 도입해야 하고, PWA를 도입하자니 사람들이 이걸 바로가기 설치를 통해서 많이 쓸까? 하는 의문점이 들었다.

심지어 설치 유도를 할 수 있도록 해주는 beforeinstallprompt Web API는 사파리에서 지원해주지도 않는다.. 그렇기 때문에 PWA로 하더라도 사용자들이 이를 사용하기에는 아직 무리라고 판단했다. 따라서 차라리 웹뷰를 통해서 만드는게 사람들에게 보다 친숙한 환경이라고 판단하여 앱스토어에도 내기로 했다.

웹뷰 설계하기

처음에는 각각의 클라이언트 두 개를 돌려 따로 만든 후에, 각 서버를 돌리면서 앞쪽의 리버스 프록시(nginx)에서 웹뷰의 경우에는 m 서브도메인을 붙이면 웹뷰 전용 클라이언트 서버로 요청을 넘기려고 했었다.

웹뷰에 대한 기술스택 생각해보기

하지만 우리 서비스가 아직 두 개를 나눌 정도로 큰 부담이 오지 않았기 때문에 이를 둘로 나누기보다는 기존 프로젝트에서 웹뷰 여부를 검사한 후에 웹뷰에 따라 일부 UI(헤더같은) 부분을 빼면 되지 않을까 생각했다.

그럼에도 다시금 개별적인 프로젝트로 따로 만들려는 이유는

• 네이티브의 스택을 이용하기보다는 SPA로 따로 구성해서 사용한다면 SPA의 이점을 최대한 가질 수 있다.
• 스택과 같은 스크린 설정에 대한 부분은 애니메이션으로 모바일과 같은 환경을 제공해줄 수 있다.
• 웹뷰와 모바일, 데스크톱 전용 UI가 모두 섞이게 된다면 이후에 유지보수하기가 어려워 질 것 같다

…라고 생각하다가 페이지가 이동 할 때마다 네이티브의 스택을 이용하기보다는 SPA로 따로 구성해서 사용자 경험을 최대한 높임과 동시에 스택과 같은 부분은 스크린에 대한 애니메이션을 이용해서 커버할 수 있지 않을까? 해서 다시금 리액트만을 쓰는 프로젝트를 하나 더 만드는 방향으로 생각하게 되었다.

네비게이션 구조 설계하기

네비게이션 구조를 설계하다가 지