Read Original
#Frontend

Laying the Rails Beyond WebView: Why Karrot Chose Lynx

Laying the Rails Beyond WebView: Why Karrot Chose Lynx
01

Summary

웹뷰의 한계를 깨다: 당근마켓 프론트엔드 팀이 신생 엔진 'Lynx'를 실서비스에 도입한 비결

성능 최적화의 끝판왕, 첫 프레임을 단 300ms 만에 그려내는 혁신적인 듀얼 스레드 렌더링 솔루션

당근 프론트엔드 코어 팀이 웹뷰의 고질적인 초기 로딩 지연을 해결하기 위해 새로운 크로스 플랫폼 렌더링 엔진인 Lynx를 선제적으로 도입한 과정을 다룹니다. 레퍼런스가 전무한 상황에서 소스 코드를 분석하고 점진적인 브라운필드 전략과 A/B 테스트를 통해 프로덕션 검증을 마쳤습니다. 프론트엔드의 생산성과 모바일의 고성능 요구사항을 동시에 충족한 실천적 아키처 가이드를 제시합니다.

  • 01PrimJS(QuickJS) 기반의 경량화된 자바스크립트 엔진으로 런타임 초기화 비용을 최소화
  • 02메인 스레드와 백그라운드 스레드를 분리하는 듀얼 스레드 구조로 첫 프레임 렌더링(IFR) 실현
  • 03기존 네이티브 앱을 유지하면서 필요한 화면에만 점진적으로 적용하는 브라운필드(Brownfield) 통합
  • 04앱 바이너리 업데이트 없이 웹처럼 독자적으로 배포 가능한 CDN 기반 독립적 번들 배포 시스템 구축
  • 05레퍼런스가 부족한 신규 기술을 검증하기 위해 코드베이스 분석 및 AI 에이전트를 적극 활용한 노하우

RECOMMENDATION

웹뷰의 성능 한계로 고민하는 프론트엔드 엔지니어와, 대규모 아키텍처 전환의 리스크 없이 부분적으로 네이티브 급 성능을 확보하고 싶은 모바일 개발 팀에게 적극 추천합니다.

The Problem

당근 앱의 많은 화면이 웹뷰로 구성되어 있어 초기 로딩 속도와 성능 저하 문제가 지속적인 과제였습니다. SSR이나 네이티브 모킹, 서비스 워커 캐싱 등의 최적화는 제품 복잡성을 크게 증가시켜, 첫 프레임부터 의도한 UI를 즉시 렌더링할 수 있는 실행 환경이 필요했습니다.

The Solution

가볍고 초기화 비용이 낮은 PrimJS 엔진과 듀얼 스레드 아키텍처 기반의 크로스 플랫폼 프레임워크인 Lynx를 도입했습니다. 기존 네이티브 앱 구조를 유지하면서 웹뷰 화면 일부만 점진적으로 교체하는 브라운필드(Brownfield) 방식을 채택하고 독립적인 번들 배포 환경을 구축했습니다.

The Result

190만 명의 사용자를 대상으로 진행한 A/B 테스트에서 기존 최적화된 웹뷰 대비 안드로이드 18%, iOS 37%의 첫 화면 렌더링 속도 향상을 기록했으며, 운영 중 단 한 건의 관련 크래시도 발생하지 않았습니다.

Trade-off

아직 번들 최적화, 청크 분할, 프리로딩 정책이 마련되지 않아 프레임워크의 잠재 성능을 완전히 끌어올리지 못했습니다. 또한, 장애 발생 시 웹뷰로 돌아가기 위한 복구 경로를 유지해야 하므로 웹뷰와 Lynx 구현체를 동시에 유지보수하는 리스크가 존재합니다.

03

Key Concepts

Concept · 01

Lynx

iOS와 Android에서 React 및 CSS와 유사한 개발 모델로 UI를 작성할 수 있게 해주는 현대적인 크로스 플랫폼 프레임워크입니다. 전체 앱을 대체하지 않고 기존 네이티브 앱 내의 특정 영역이나 화면 단위로 유연하게 내장할 수 있는 것이 특징입니다.

  • 당근 프론트엔드 팀이 기존 웹뷰 화면을 대체하는 성능 우위의 렌더링 레이어로 도입하였습니다.
  • Rspeedy 번들러를 이용해 CDN 배포 기반의 빠른 독립적 업데이트 환경을 구축하였습니다.
Concept · 02

Instant First-Frame Rendering (IFR)

화면이 열리는 즉시 첫 프레임에 최종 UI를 바로 렌더링하는 Lynx의 고유 기술입니다. 백그라운드 스레드에서 전체 React 런타임과 비즈니스 로직이 실행되는 동안, 메인 스레드가 첫 UI 생성을 바로 시작하여 지연 없는 사용자 경험을 제공합니다.

  • 로딩 화면이나 임시 UI 없이 유저가 인지하는 대기 시간을 제로로 만들기 위한 핵심 아키텍처로 쓰였습니다.
  • 번들 프리로드와 네이티브 데이터 주입을 동기적으로 처리하여 렌더링 지연을 제거했습니다.
Concept · 03

Brownfield Adoption

기존 네이티브 앱 전체를 새로운 기술로 다시 작성하는 그린필드(Greenfield) 방식과 달리, 기존의 안정적인 네이티브 구조를 완벽히 보존하면서 필요한 부분만 점진적으로 통합하는 방식입니다.

  • 당근 앱의 핵심 영역인 홈 피드와 채팅은 기존 네이티브 스택을 유지하고, 일부 웹뷰 화면만 Lynx로 교체하는 데 적용되었습니다.
  • 1명의 프론트엔드, 1명의 iOS, 1명의 안드로이드 엔지니어라는 최소한의 규모로 리스크 없이 이전을 시작할 수 있게 도왔습니다.