Laying the Rails Beyond WebView: Why Karrot Chose Lynx
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 구현체를 동시에 유지보수하는 리스크가 존재합니다.
Key Concepts
More from 당근
View all posts from 당근당근의 인증은 어떻게 달라져 왔을까요?
OAuth 2.0OIDCSSO1주 전웹뷰 다음의 레일을 깔다: 당근이 Lynx를 선택한 이유
LynxReactQuickJS2주 전실험을 더 편하게 설계할 수 있게: 당근 실험플랫폼 이야기
AB TestingData PlatformLLM Agent3주 전프론트엔드와 백엔드를 한 팀으로 합치면 어떤 일이 일어날까?
Team TopologyCross FunctionalAI Coding1개월 전천만 MAU를 지탱하는 커뮤니티 시스템을 소개해요
Modular MonolithStreaming SSROpenAPI1개월 전