Read Original
#Mobile

웹뷰 다음의 레일을 깔다: 당근이 Lynx를 선택한 이유

웹뷰 다음의 레일을 깔다: 당근이 Lynx를 선택한 이유
01

Summary

웹뷰의 한계를 깨부순 당근! 차세대 렌더링 엔진 Lynx로 로딩 없는 초고속 앱 화면 만들기

네이티브 성능과 웹의 기동성을 동시에 확보한 당근 프론트엔드코어팀의 Lynx 프로덕션 적용 가이드

당근은 웹뷰의 구조적인 로딩 지연을 해결하기 위해 새로운 크로스플랫폼 기술인 Lynx를 전격 도입했습니다. 가벼운 자바스크립트 엔진과 듀얼 스레드 기반의 즉각적인 첫 프레임 렌더링(IFR)을 통해, 웹뷰 고유의 사용성을 보존하면서도 네이티브 수준의 속도를 확보하는 데 성공했습니다. 웹과 앱 개발 조직이 공동의 목표를 갖고 함께 기술의 레일을 깔아나간 생생한 혁신 스토리를 전해드립니다.

  • 01경량 PrimJS(QuickJS) 채택으로 런타임 초기화 및 첫 프레임 생성 비용 극적 감소
  • 02Dual-Thread Architecture를 통한 즉각적 첫 프레임 렌더링(IFR) 기술 확보
  • 03앱 빌드와 무관하게 즉시 업데이트가 가능한 원격 번들(CDN) 배포 흐름(Warp) 연동
  • 04자체 DSL(Lydl)과 코드젠 도구로 프론트엔드-네이티브 인터페이스 관리 자동화
  • 05디자인 시스템(SEED Design)과의 밀접한 결합으로 완벽한 UI 일관성과 접근성 수용

RECOMMENDATION

기존 네이티브 앱의 아키텍처를 훼손하지 않으면서 성능 민감도가 높은 특정 화면만 점진적으로 고속화하고자 하는 개발 팀에게 가장 추천합니다. 웹과 모바일 엔지니어가 긴밀히 협력해 번들 배포 정책과 API 브릿지를 체계화할 수 있는 조직 구조가 갖춰져 있을 때 가장 강력한 시너지를 낼 수 있습니다.

The Problem

당근 앱의 다수 화면은 빠른 배포를 위해 웹뷰로 구성되어 있으나, 네트워크를 통한 웹 문서 로드 및 자바스크립트 실행 지연으로 인해 발생하는 초기 로딩 시간 병목 현상이 지속적인 과제였습니다. 이를 해결하기 위해 SSR이나 캐싱 등의 최적화를 시도했으나 이는 복잡도를 높였고, 궁극적으로 사용자가 대기 시간을 느끼지 않도록 첫 프레임부터 완벽한 UI를 즉시 보여줄 수 있는 새로운 실행 환경이 요구되었습니다.

The Solution

기존 앱 전체를 바꾸는 대신 React와 CSS를 활용해 모바일 UI를 그리는 경량 크로스플랫폼 기술인 Lynx를 부분 도입하였습니다. 런타임 초기화 비용이 낮은 PrimJS(QuickJS) 엔진과 메인-백그라운드 스레드를 분리하는 Dual-Thread 구조(IFR)를 활용하였고, 독자적인 DSL(Lydl) 기반의 Codegen 파이프라인과 CDN 번들 배포 환경(Warp)을 구축해 네이티브 앱 내 점진적 통합(Brownfield)을 이뤄냈습니다.

The Result

총 190만 명 대상의 A/B 테스트 PoC 결과, 기존의 최적화된 웹뷰 대비 첫 화면 렌더링 속도가 iOS에서 37%(479ms에서 302ms), Android에서 18%(735ms에서 610ms) 개선되었으며, 운영 중 단 한 건의 크래시도 발생하지 않는 높은 안정성을 입증했습니다.

Trade-off

Lynx 도입을 결정할 당시 레퍼런스가 극히 부족하여 직접 오픈소스 코드베이스를 클론하고 AI 에이전트를 통해 검증해야 하는 분석 리소스가 들었습니다. 또한, 비동기 네트워크나 번들 다운로드 조건에서는 IFR(즉각적 렌더링)을 온전히 보장받기 어렵기 때문에, 극단적인 첫 화면 최적화를 위해서는 번들 사전 로딩이나 데이터 사전 주입 등 추가적인 플랫폼 인프라 구축의 노력이 필요합니다.

03

Key Concepts

Concept · 01

Lynx

React와 CSS 스타일의 개발 모델을 사용하여 iOS 및 Android 네이티브 UI를 구축할 수 있게 해주는 경량 크로스플랫폼 렌더링 엔진입니다.

  • 기존 앱의 View 계층 내부에 부분적으로 임베딩하여 점진적으로 통합(Brownfield 방식)하는 데 특화되어 있습니다.
  • 웹 생태계에 익숙한 Rspeedy 번들러와 호환되어 기존 프론트엔드 개발 환경을 그대로 유지할 수 있습니다.
Concept · 02

Dual-Thread Architecture

렌더링 및 UI 반응을 담당하는 메인 스레드와, React 컴포넌트 생명주기 및 비즈니스 로직을 처리하는 백그라운드 스레드를 독립적으로 분리하여 실행하는 아키텍처입니다.

  • 백그라운드 스레드의 React 실행 완료 여부와 관계없이 메인 스레드에서 즉각적인 첫 프레임 렌더링(IFR)을 가능하게 만듭니다.
  • 메인 스레드의 렌더링 지연(흰 화면 현상)을 방지하여 사용자가 느끼는 실제 로딩 시간을 획기적으로 차단합니다.
Concept · 03

Brownfield Integration

애플리케이션 전체를 새로운 프레임워크로 완전히 다시 작성하는 그린필드(Greenfield) 방식과 달리, 기존 네이티브 앱의 인프라를 유지한 채 특정 화면이나 뷰 영역 단위로 새로운 기술을 점진적으로 이식하는 전략입니다.

  • 당근은 홈 피드나 채팅 등 핵심 네이티브 영역을 유지하고, 전체 서비스 보기 및 카테고리 피드 화면 등에 Lynx를 점진 이식했습니다.
  • 실패 시 언제든 기존 웹뷰로 롤백할 수 있는 대체 경로를 구축하여 신기술 도입 리스크를 최소화했습니다.