Lynx는 웹 기술(마크업, CSS, JavaScript)로 작성한 UI를 iOS·Android·HarmonyOS의 네이티브 화면과 웹에 렌더링하는 크로스플랫폼 UI 프레임워크다. ByteDance에서 만들어 TikTok 등에서 쓰다가 2025년 3월 5일 오픈소스로 공개했다. 웹뷰처럼 페이지를 띄우는 방식이 아니라, React Native·Flutter와 같은 부류의 네이티브 렌더링 프레임워크다.
구조
- 이중 스레드(dual-thread): 메인 스레드는 첫 화면 렌더링, 레이아웃, 메인 스레드 스크립트를 맡는다. 백그라운드 스레드는 컴포넌트 생명주기와 사용자 코드 대부분을 돌린다. 복잡한 로직이 UI 반응을 막지 않게 나눈 것이다
- PrimJS: QuickJS를 바탕으로 Lynx용으로 만든 경량 자바스크립트 엔진이다. 메인 스레드는 미리 컴파일한 PrimJS 바이트코드를 실행해 런타임 파싱을 건너뛴다. 백그라운드 스레드는 PrimJS나 JavaScriptCore에서 돈다
- ReactLynx: Lynx의 공식 React 프레임워크로, 내부는 Preact 기반이다.
react대신@lynx-js/react에서 거의 같은 API를 가져다 쓴다. Lynx 자체는 React 전용이 아니어서, 공개 당시 공식 블로그는 다른 프레임워크가 사용량의 절반가량을 차지한다고 밝혔다 - 브라우저가 아니다: 네이티브 플랫폼에서는 DOM API와
window·document가 없고lynx전역 객체와 자체 API를 쓴다. 웹 코드를 옮기려면 이 차이에 맞춰 다시 써야 한다
즉시 첫 프레임 렌더링(IFR)
데이터가 처음부터 준비되어 있으면 메인 스레드가 첫 화면을 동기적으로 다 그린 뒤 보여 줘서 흰 화면이나 중간 상태가 없다. 그동안 백그라운드 스레드는 자기 노드 트리를 따로 만들고, 두 트리의 차이를 맞춰 이후 업데이트에 대비한다. 웹에서 SSR(Server-Side Rendering)로 얻던 효과를 클라이언트 안에서 내는 셈이다.
다만 공식 문서도 "마법이 아니다"라고 밝힌다. 페이지 번들을 동기로 불러올 수 없거나 주요 콘텐츠를 네트워크 요청으로 받아야 하면 IFR이 되지 않는다. 그 경우 흰 화면의 원인은 렌더링이 아니라 비동기 I/O다.
언제 고려하나
앱 안의 웹뷰 화면(웹뷰 브리지(웹↔네이티브 통신))은 웹 기술로 만들지만, 브라우저 엔진 위에서 페이지를 불러와 그린다. Lynx 문서는 요소를 네이티브 뷰에 대응시켜 기존 웹뷰의 성능 병목을 피한다고 설명한다. Lynx는 웹에 가까운 개발 방식은 살리면서 렌더링을 네이티브로 바꾸는 선택지다. 엔진을 기존 네이티브 앱에 넣어 일부 화면에만 쓸 수도 있다. 공식 블로그는 웹에서 Lynx로 옮긴 화면들의 실행(launch) 시간이 전반적으로 2~4배 줄었다고 소개한다(ByteDance 내부 관찰).
출처: Lynx 블로그 — Lynx: Unlock Native for More · Lynx — Instant First-Frame Rendering · ReactLynx — Rendering Process and Lifecycle · What is ReactLynx? · Lynx — Integrate with Existing Apps · Lynx — Main Thread Runtime · PrimJS (GitHub) · Lynx 문서 색인(llms.txt)