[tech] 프레임워크부터 플랫폼까지: 당근 웹뷰 플랫폼

✅ 2024 당근 테크 밋업

사이드 프로젝트를 진행하던 중, 어떻게 하면 웹뷰를 네이티브 환경에 편하게 넣을 수 있을까? 고민 하던 중, 알고리즘이 인도 해준 당근테크. 내가 필요한 내용이라 정리 해보려고 한다.

웹뷰란 모바일 앱내에 존재하는 작은 웹 브라우저로 부분적인 ui를 구현할 때 사용한다.

✅ 웹뷰의 의미

웹이 일종의 가상환경이 되어 각 웹뷰마다 독립적인 실행 환경을 가질 수 있게 한다. 각 웹뷰마다 별도의 레포지토리를 가질 수 있게 되어, 이로 인하여 원하는 시점에 독립적 배포가 가능해진다. 따라서, 하나의 앱을 작게작게 나누어 개발 할 수 있다는 뜻.

✅ 웹뷰의 3가지 큰 개념

✅ 1. Bridge

웹뷰와 네이티브 사이의 통신을 담당하는 모듈 웹뷰에서 필요한 os기능이 있거나 앱에 보관된 맥락 정보를 가저올 때 사용한다.

✅ 2. Framework

특정한 구조를 통해 개발자가 쉽게 개발 할 수 있도록 돕는 역할 개발자는 큰 관점에서 학습 가능

사용 이유는 크게 2가지 인듯하다.

1. UI Life-cycle

일반적인 웹과 모바일을 비교해봤을 때 같은 모양이더라도 히스토리 관리에 차이가 존재 모바일의 경우 히스토리 관리가 UX에 더 중요한 영향을 미치기 때문이다. 모바일에 꼭 맞는 라우팅 프레임워크가 필요

1. Routing

모바일스러운 라우팅이 필요함.

✅ 3. Platform

앱이 실행되는 기반 환경을 의미

당근의 경우,

1. AWS S3 + CloudFront
   • 스토리지에 정적 파일을 업로드하면 해당 파일을 알맞게 서빙하는 웹 서버로 기능
   • 배포, 버전관리, 롤백 등의 생산성 기능을 별로의 CI를 통해 직접 구축
2. Vercel
   • 생산성 기능을 더 빠르게 개발 가능
   • 단점은 트래픽 당 과금 정책. 많은 트래픽에는 좋지 않음
3. Cloudflare Pages
   • 생산성 기능 활용 가능
   • 트래픽 당 과금이 아님
   • 단 다른 국가로 라우팅 됨

결국 자체 구축함.

✅ 나에게 필요한 부분

1. Bridge 통신 설계

로그인 상태와 저장소 접근권한이 나에게 필요하다. 이걸 공부하기 위해서 시간을 소모할 수 없으니 expo환경 이용해야겠다.

1. 프레임워크의 선택

2. 웹뷰 독립 배포 이번에 핵심은 나도 웹뷰를 독립 배포하고 싶은 것이다. 그래서 개발 분리를 하려고 하는데, 이럴때 모노레포를 사용해야하지 않을까? 그리고 저번 프로젝트에서 aws로 터보레포 배포에 실패했기 때문에, 이번에 버셀을 고민중이다. 특히 버셀은 oraganization 배포할때 무료는 힘들다고 들었기때문에 더더욱 필요할듯

3. next.js 선택

웹뷰라서 ssg가 필수라고 생각한다. 그리고 라우팅과 배포를 생각했을 때, next.js가 적합하지 않을까 했다. 마침 찾아보니까 solito라는 라이브러리가 있길래 한번 찾아보려고 한다. 그리고 풀스텍 프레임워크이기 때문에 DB연결 같은 건 다 여기서 하려고 한다.

1. 플랫폼 선택

이번엔 버셀을 이용해보려고 한다. 개인 사이드 프로젝트라 무료 플랜 써도 될듯하고, 도메인도 따로 살 필요가 없다 이번엔 웹뷰라서 노출을 안시킬꺼기 때문이다. 또한, next.js와 터보레포의 캐싱과 궁합이 잘 맞다.

1. 모바일스러운 라우팅

이거에 대하여는 좀 더 공부해야할듯.