theinnovatorsLynx
: 틱톡(ByteDance)이 만든 React Native 대체제
Lynx의 주요 특징
- 웹 기술과의 호환성
- CSS 애니메이션 및 전환 효과 지원
- CSS 선택자 및 변수 지원으로 테마 설정 가능
- 클리핑, 마스킹 등 최신 CSS 비주얼 효과 지원
- 멀티 스레드 상호작용 모델 렌더링을 비즈니스 로직과 분리하여 부드럽고 반응성 높은 사용자 경험을 제공합니다.
- 사용자 스크립트를 두 개의 런타임으로 나누어 처리
- 메인 스레드 런타임: PrimJS(JavaScript 엔진) 기반으로 UI 초기 렌더링 및 우선 이벤트 처리
- 백그라운드 런타임: 기본 사용자 코드 실행
- 두 가지 핵심 기능 제공
- Instant First-Frame Rendering (IFR): 첫 프레임 즉시 렌더링 → 블랭크 화면 제거
- Main-Thread Scripting (MTS): 고우선 순위 이벤트를 부드럽게 처리
- Lynx 기반 UI는 평균 2~4배 빠른 실행 성능 제공
- 사용자 스크립트를 두 개의 런타임으로 나누어 처리
- Rust 기반의 도구 Lynx는 Rust 언어를 활용하여 성능과 메모리 안전성을 확보하고 있습니다.
- 프레임워크 독립성 React를 우선 지원하지만, Lynx는 다양한 JavaScript 프레임워크와 호환되도록 설계되었습니다.
Lynx의 개발 배경
ByteDance는 150개 이상의 앱을 관리하며 수십억 명의 사용자에게 서비스를 제공하고 있습니다. 이러한 대규모 운영에서 성능은 매우 중요하며, 이를 위해 Lynx를 개발하게 되었습니다. 이 프레임워크는 TikTok Shop과 같은 복잡한 전자상거래 플랫폼과 TikTok의 라이브, Disney100, Met Gala와 같은 인터랙티브 경험을 지원합니다.
크로스 플랫폼 개발의 진화
- 2008년: PhoneGap(후에 Cordova로 알려짐)이 WebView 기반의 크로스 플랫폼 개발을 도입하여 웹 기술과 네이티브 기능을 연결했습니다.
- 2015년: React Native는 React.js를 활용한 선언적 UI를 모바일 개발에 도입하여 네이티브 UI와의 브리징을 가능하게 했습니다.
- 2015년: Flutter는 커스텀 렌더링 엔진과 선언적 UI 모델을 통해 크로스 플랫폼 개발을 지원했습니다.
- 2025년: Lynx는 이러한 혁신의 연장선상에서, 앱 개발에 최적화된 ‘대안적 웹’으로서 웹 기술의 이점을 유지하면서도 목적 지향적인 향상을 제공합니다.
Lynx의 핵심 원칙
- 마크업과 CSS를 통한 디자인 구현 Lynx는 웹과 유사한 개발 방식을 채택하여, 개발자가 마크업과 CSS를 활용하여 디자인을 구현할 수 있도록 합니다.
- 메인 스레드의 책임 있는 사용을 통한 상호작용성 향상 Lynx는 두 가지 별도의 런타임(PrimJS로 구동되는 메인 스레드 런타임과 백그라운드 런타임)을 통해 메인 스레드의 작업 부하를 줄이고, 즉각적인 첫 프레임 렌더링을 가능하게 합니다.
이러한 특징을 통해 Lynx는 개발자들이 한 번의 개발로 여러 플랫폼에 원활하게 배포할 수 있도록 지원하며, 성능과 개발 효율성 모두를 향상시킵니다.
개발자 도구 및 설정
Lynx는 Rust 기반의 모듈 번들러인 Rspack을 사용하여 빠른 빌드 속도를 제공합니다. 프로젝트 구조는 React.js 앱과 유사하며, <view>, <text>, <image>와 같은 비표준 요소를 사용하여 다양한 플랫폼에서 네이티브 UI 요소로 매핑됩니다.
Lynx의 미래
- Lynx 오픈 소스화
- Lynx는 ByteDance가 개발하고 TikTok에서 광범위하게 사용 중
- TikTok은 Lynx 오픈 소스를 지원하고 기술 강화, 커뮤니티 활성화, 생태계 성장에 기여 예정
- 크로스 플랫폼 기술의 대중화
- 기존 크로스 플랫폼 개발은 일부 주요 업체가 주도
- Lynx는 단일 솔루션이 아닌 메타 인프라 제공 → 다양한 접근 방식 허용
- **ReactLynx:** Lynx 기반의 React 스타일 컴포넌트화 및 선언적 UI 지원
- Rspeedy(Rust 기반 번들러) 제공 → 빠른 빌드 및 모듈 페더레이션 지원
- Lynx는 특정 프레임워크나 렌더링 백엔드에 종속되지 않음
- Chromium, Flutter, React Native 등의 프로젝트에서 영감 받음
- 브라우저에서 Lynx 구동 가능 → 데스크탑, TV, IoT 등으로 확장 가능
- 새로운 시작
- Lynx는 이미 프로덕션에서 사용되고 있으며 버전 3.x로 공개됨
- 오픈 소스를 통해 투명한 개발 과정 공개 예정
- 추가 컴포넌트, 그래픽 렌더러, 프레임워크 등은 추후 공개 예정
- 오픈 소스 커뮤니티와 협력해 크로스 플랫폼 개발의 한계를 뛰어넘고자 함
- 커뮤니티 피드백 및 기여를 환영함Lynx Family GitHub Repo
TI Tech Lab 신유림 연구원
Source
- dev.to – Introducing Lynx: A New Era of Cross-Platform Development
- Medium – Introducing Lynx: ByteDance’s New Rust-Based JavaScript Framework
- GeekNews – Lynx – 웹 기술 기반 네이티브 앱 개발 도구
Add comment