WebView를 넘어선 기반: Karrot이 Lynx를 선택한 이유

Karrot 앱의 여러 화면은 WebView로 구축돼 있어 웹 문서와 데이터를 네트워크에서 받아 실행하기 전까지 초기 로딩 비용이 발생했다. SSR, 네이티브 플레이스홀더, Service Worker 캐시로 개선할 수 있었지만 제품 복잡성이 커졌고, Karrot은 첫 프레임부터 실제 UI를 보여주는 실행 환경을 원했다.

새 런타임에는 다음 조건이 필요했다.

• 기존 네이티브 앱을 유지하면서 화면 단위로 도입할 수 있어야 함
• 앱 바이너리와 별도로 프론트엔드 번들을 배포할 수 있어야 함
• 프론트엔드·iOS·Android 엔지니어 각 1명으로 시작할 수 있어야 함
• 문제가 생기면 기존 WebView 구현으로 되돌릴 수 있어야 함

Lynx는 React와 CSS에 가까운 개발 모델로 iOS·Android UI를 만들고, 기존 네이티브 앱 안에 UI 블록으로 임베드할 수 있는 크로스플랫폼 기술이다. Karrot은 전체 앱을 교체하는 대신 WebView 화면 일부를 대체하는 렌더링 계층으로 Lynx를 검토했다.

Karrot이 특히 주목한 부분은 React API나 CSS 문법보다 런타임과 첫 화면 렌더링 방식이었다. Lynx의 메인 스레드 런타임은 임베드하기 쉽고 초기화 비용이 낮은 **PrimJS(QuickJS)**를 사용해, 모바일 UI에서 중요한 런타임 준비와 첫 화면 표시 시간을 줄이는 데 적합했다.

또한 ReactLynx는 역할을 메인 스레드와 백그라운드 스레드로 나눈다. 메인 스레드는 첫 화면과 이후 UI 업데이트를 담당하고, 백그라운드 스레드는 전체 React 런타임과 컴포넌트 생명주기·사이드 이펙트를 처리해 첫 화면이 백그라운드 작업을 기다리지 않도록 설계됐다.