Lynx: ByteDance의 혁신적인 크로스 플랫폼 프레임워크 소개

웹 개발과 모바일 앱 개발 세계가 빠르게 진화하면서, 개발자들은 네이티브급 성능을 달성하면서도 코드 효율성을 유지하는 것이 지속적인 과제로 남아 있습니다. 이에 최근 TikTok의 모회사인 ByteDance에서 오픈소스로 공개한 Lynx 가 주목을 받고 있습니다.

Lynx 공식 홈페이지 (새 창으로 열기) : https://lynxjs.org/

2025년 3월 5일, ByteDance는 자사가 개발한 크로스 플랫폼 UI 프레임워크인 Lynx를 오픈소스로 공개했습니다. Lynx는 웹 기술을 사용하여 네이티브 UI를 생성할 수 있는 기술 패밀리로, 하나의 코드베이스에서 모바일과 웹 등 다양한 플랫폼에 대응할 수 있는 강력한 프레임워크입니다.

이 포스트에서는 Lynx의 핵심 기능, 기술적 특징, 그리고 이 프레임워크가 크로스 플랫폼 개발 트렌드에 미칠 영향이 어떨지, 간단히 살펴보려고 합니다.

ByteDance와 TikTok: Lynx의 탄생 배경

ByteDance는 150개 이상의 앱을 관리하고 수십억 명의 사용자에게 서비스를 제공하는 글로벌 기술 기업입니다. 여러 대규모 서비스를 운영하고 있기 때문에, 개발 프로세스의 혁신이 필요성이 내부에서 더 두드러졌습니다.

이에 필연적으로 높은 성능과 신뢰성을 갖춘 프레임워크가 필요했고, ByteDance의 엔지니어링 팀은 Lynx를 개발하게 되었습니다. Lynx를 개발하면서 ByteDance는 모바일 앱 개발에서 흔히 발생하는 “불가능한 삼각형” 문제를 해결하려고 도전했습니다. 불가능한 삼각형이란 아래와 같습니다.

빠른 개발 속도(Short Time to Market)
낮은 개발 비용(Low Cost)
높은 품질(High Quality, 또는 성능/네이티브 경험)

불가능한 삼각형은 서로 밀접한 관계를 가지고 있으며 모두를 동시에 극대화 하는 것은 거의 불가능에 가깝습니다. 해당 개념에 대해서 추후 별도의 포스트로 작성할 기회가 있을 것 같아 자세한 설명은 생략하겠습니다.

흥미로운 점은 ByteDance가 초기 Flutter 채택자 중 하나였으며, 여전히 Flutter 쇼케이스에 등장한다는 것입니다. 그러나 ByteDance는 더 나은 성능과 웹 개발자 친화적인 환경을 제공하기 위해 Lynx를 개발하기로 결정했습니다.

위와 같은 목표를 가지고 만들어진 Lynx는 메인 앱 서비스는 아니지만 TikTok의 여러 앱 부분에서 이미 성공적으로 사용되고 있습니다. TikTok Studio, Shop, LIVE 등 다양한 플랫폼과 검색 패널에서 Lynx를 적용해 사용하고 있습니다.

Lynx의 핵심 특징과 장점

한 번 작성, 어디서나 렌더링

Lynx의 가장 큰 강점 중 하나는 진정한 크로스 플랫폼 개발을 가능하게 한다는 점입니다. 개발자는 코드를 한 번 작성하면 Android, iOS, 웹에서 원활하게 렌더링할 수 있습니다. 맞춤형 렌더러는 다양한 플랫폼에서 픽셀 완벽 일관성을 보장하여 UI 개발을 효율적으로 만듭니다.

웹 기술 기반의 친숙한 개발 환경

Lynx는 웹 개발 방식의 친숙함을 유지하면서 네이티브 앱 개발의 이점을 제공합니다. CSS와 React에 익숙한 개발자들은 Lynx를 쉽게 사용할 수 있으며, 웹 기술의 강점을 유지하면서 명확한 제약과 확장을 통해 앱 개발에 최적화된 모델을 제공합니다.

구체적으로, Lynx는 다음과 같은 웹 기술을 지원합니다:

CSS 애니메이션 및 전환 효과
CSS 선택자 및 변수 지원으로 테마 설정 가능
클리핑, 마스킹 등 최신 CSS 비주얼 효과 지원

뛰어난 성능과 확장성

Lynx의 멀티스레드 엔진은 애플리케이션이 최적의 속도와 효율성으로 실행되도록 보장합니다. 네이티브 렌더링 기능을 활용하여 즉각적인 로드와 부드러운 UI 상호작용을 실현합니다.

내부적으로, 웹에서 Lynx로 마이그레이션하면 특히 Android 기기에서 시작 시간이 2-4배 단축되었다고 합니다.

Lynx의 기술적 아키텍처

이중 런타임 시스템

Lynx의 가장 독특한 기술적 특징 중 하나는 사용자 스크립트를 두 개의 독립적인 런타임으로 분리하는 아키텍처입니다

메인 스레드 런타임: PrimJS(JavaScript 엔진) 기반으로 UI 초기 렌더링 및 우선 이벤트를 처리합니다. 이는 특권적이고 동기적인 UI 작업(예: 첫 번째 실행, 높은 우선순위 이벤트)을 담당합니다.
백그라운드 런타임: 기본 사용자 코드를 실행하며, 메인 스레드의 작업량을 낮추고 차단하지 않도록 합니다.

이러한 아키텍처의 핵심 이점은 다음과 같습니다:

즉각적인 첫 프레임 렌더링 (IFR)

Instant First-Frame Rendering

Lynx는 첫 프레임이 완전히 렌더링될 때까지 메인 스레드를 잠시 차단함으로써 공백 화면을 제거하고 즉각적인 응답 사용자 경험을 제공합니다. 이는 사용자가 앱을 열자마자 콘텐츠를 볼 수 있게 해주며, 모바일 앱에서 흔히 볼 수 있는 빈 화면 문제를 해결합니다.

메인 스레드 스크립팅 (MTS)

정적으로 스케줄링된 코드 세그먼트가 높은 우선순위 이벤트와 제스처를 처리하여 네이티브같은 상호작용 느낌을 가능하게 합니다. 이로 인해 사용자는 앱을 사용할 때 더 매끄러운 경험을 할 수 있습니다.

다른 프레임워크와의 비교

Lynx vs React Native

Lynx와 React Native는 모두 크로스 플랫폼 모바일 애플리케이션 개발을 용이하게 하기 위해 설계된 프레임워크지만, 몇 가지 중요한 차이점이 있습니다

아키텍처 및 성능: Lynx는 UI 렌더링과 비즈니스 로직을 분리하는 멀티스레드 상호작용 모델을 활용하여 성능과 응답성을 향상시킵니다. 반면 React Native는 JavaScript 코드와 네이티브 모듈 간의 통신을 위해 JavaScript 브릿지를 사용하며, 이는 복잡한 애플리케이션에서 성능 병목 현상을 일으킬 수 있습니다.
개발 접근 방식: Lynx는 프레임워크에 구애받지 않도록 설계되었지만 현재 React에 대한 강력한 지원을 제공합니다. 개발자는 웹 개발과 유사하게 마크업과 CSS를 작성할 수 있습니다. React Native는 JavaScript와 React를 사용하여 전체 애플리케이션을 구축할 수 있게 해주며, 컴포넌트는 네이티브 위젯으로 렌더링됩니다.
커뮤니티 및 생태계: 최근에 오픈소스화된 Lynx의 공개 생태계는 아직 발전 중입니다. 반면, React Native는 광범위한 커뮤니티 지원, 수많은 플러그인 및 서드파티 라이브러리를 갖춘 성숙한 생태계를 자랑합니다.

기능	Lynx	React Native	Flutter
렌더링 타입	네이티브 & 커스텀	네이티브	Skia 렌더러
성능	높음	중간	높음
학습 곡선	쉬움 (웹 기반)	중간	가파름
UI 일관성	픽셀 완벽	좋음	탁월함
멀티스레딩	예	제한적	예

Lynx vs Flutter

Flutter는 Google이 개발한 또 다른 인기 있는 크로스 플랫폼 프레임워크입니다. Lynx와 Flutter는 모두 높은 성능을 제공하지만, 중요한 차이점이 있습니다

Flutter는 Dart 언어를 사용하고 자체 렌더링 엔진(Skia)을 사용하는 반면, Lynx는 JavaScript와 웹 기술을 활용합니다.
Lynx는 특히 웹 개발 경험이 있는 개발자에게 더 낮은 학습 곡선을 제공합니다.
두 프레임워크 모두 멀티스레딩을 지원하고 뛰어난 성능을 제공하지만, 접근 방식은 다릅니다.

Lynx의 사용 사례와 구현

TikTok에서의 활용

Lynx는 이미 TikTok의 여러 애플리케이션에서 성공적으로 사용되고 있습니다. TikTok의 검색 패널, TikTok Studio, TikTok Shop 등 다양한 플랫폼에서 Lynx가 활용되고 있으며, Disney100, Met Gala 등 대형 이벤트에서도 Lynx가 사용되었습니다.

최적의 사용 시나리오

Lynx는 특히 다음과 같은 시나리오에 적합합니다:

복잡한 UI 컴포넌트와 부드러운 애니메이션이 필요한 앱: Lynx의 멀티스레드 엔진과 메인 스레드 스크립팅은 복잡한 UI와 애니메이션을 부드럽게 처리할 수 있습니다.
기존 네이티브 앱에 고성능 뷰를 통합하려는 경우: Lynx는 현재 처음부터 애플리케이션을 구축하기보다는 기존 네이티브 모바일 앱이나 웹 애플리케이션에 통합될 수 있는 엔진으로 설계되었습니다.
이미지 갤러리, 제품 상세 페이지 등 복잡한 레이아웃: 두 열 워터폴 갤러리, 캐러셀이 있는 제품 상세 페이지 등 복잡한 레이아웃을 구현하는 데 Lynx가 효과적입니다.

Lynx 시작하기

설치 및 설정

Lynx를 시작하려면 개발자는 먼저 애플리케이션에 Lynx 엔진을 임베드한 다음 Lynx 뷰를 통해 Lynx 앱을 로드해야 합니다. 현재 Lynx는 프로덕션에서 사용되고 있으며 버전 3.x로 공개되었습니다.

Lynx는 다음과 같은 주요 구성 요소를 제공합니다:

ReactLynx: Lynx의 초기 React 기반 프론트엔드 프레임워크입니다.
Rspeedy: 빠른 빌드를 가능하게 하는 Rust 기반 번들러(Rspack)입니다.

예제 프로젝트

Lynx는 새로운 사용자에게 원활한 온보딩 경험을 제공하며, 개발자가 빠르게 애플리케이션을 구축할 수 있도록 합니다. 공식 문서에는 필수 개념을 다루는 단계별 튜토리얼이 포함되어 있습니다.

Lynx에서 제공하는 예제 프로젝트에는 다음이 포함됩니다:

두 열 워터폴 갤러리: 이 예제는 개발자에게 반응형 레이아웃으로 이미지 갤러리를 만드는 방법을 안내합니다. 레이아웃 사용자 정의, 성능 최적화, 미디어 렌더링과 같은 핵심 기능을 다룹니다.
캐러셀이 있는 제품 상세 페이지: 이 튜토리얼은 캐러셀 기능이 있는 대화형 제품 상세 페이지를 구축하는 데 중점을 둡니다. 높은 응답성 상호작용을 달성하기 위한 메인 스레드 스크립팅 기술을 보여줍니다.

Lynx의 미래와 커뮤니티 개발

오픈소스 커뮤니티의 성장

Lynx는 ByteDance가 개발하고 TikTok에서 광범위하게 사용되고 있으며, TikTok은 Lynx 오픈소스를 지원하고 기술 강화, 커뮤니티 활성화, 생태계 성장에 기여할 예정입니다.

오픈소스를 통해 투명한 개발 과정이 공개될 예정이며, 추가 컴포넌트, 그래픽 렌더러, 프레임워크 등은 추후 공개될 예정입니다. ByteDance는 오픈소스 커뮤니티와 협력해 크로스 플랫폼 개발의 한계를 뛰어넘고자 하며, 활발한 커뮤니티 피드백 및 기여를 환영하고 있습니다.

향후 발전 방향

Lynx는 지속적으로 발전하고 있으며, 향후 업데이트에서는 다음과 같은 더욱 강력한 기능이 추가될 것으로 예상됩니다:

향상된 상태 관리: 애플리케이션 상태를 관리하는 더 효율적인 방법.
확장된 컴포넌트 라이브러리: 빠른 개발을 위한 더 많은 UI 컴포넌트.
개선된 디버깅 도구: 개발자를 위한 간소화된 디버깅 경험.

또한, Lynx는 프레임워크에 구애받지 않고 멀티 플랫폼을 지원하도록 설계되어 있어, 데스크톱, TV, IoT 등으로 확장될 수 있는 잠재력을 가지고 있습니다.

결론

Lynx는 빠르고 직관적이며 고성능 프레임워크를 제공함으로써 네이티브 애플리케이션 구축을 위한 크로스 플랫폼 개발을 재정의하고 있습니다. 웹에서 영감을 받은 디자인, 네이티브 렌더링 기능, 원활한 크로스 플랫폼 통합으로 Lynx는 효율적이고 확장 가능한 애플리케이션을 구축하려는 개발자에게 탁월한 선택 중 하나가 될 수 있습니다.

ByteDance와 TikTok의 지원으로, Lynx는 이미 실제 프로덕션 환경에서 검증된 프레임워크이며, 오픈소스화를 통해 더 많은 개발자가 이 혁신적인 기술을 활용할 수 있게 되었습니다.

크로스 플랫폼 개발의 미래가 어떻게 펼쳐질지는 아직 알 수 없지만, Lynx는 분명히 이 영역에서 중요한 역할을 할 것으로 보입니다. 개발자와 기업들이 Lynx를 탐색하고 채택함에 따라, 우리는 더 많은 혁신과 더 나은 사용자 경험을 기대할 수 있습니다.