# Lynx - 웹 기술 기반 네이티브 앱 개발 도구

> Clean Markdown view of GeekNews topic #19688. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=19688](https://news.hada.io/topic?id=19688)
- GeekNews Markdown: [https://news.hada.io/topic/19688.md](https://news.hada.io/topic/19688.md)
- Type: news
- Author: [xguru](https://news.hada.io/@xguru)
- Published: 2025-03-11T13:46:49+09:00
- Updated: 2025-03-11T13:46:49+09:00
- Original source: [lynxjs.org](https://lynxjs.org/)
- Points: 21
- Comments: 3

## Summary

Lynx는 TikTok이 개발한 React Native 대체제로, Rust 기반 툴링을 통해 성능 중심의 UI 프로그래밍을 지원하며, 단일 코드베이스로 웹과 모바일 등 다양한 플랫폼에서 빠르고 부드러운 사용자 경험을 제공합니다. Lynx는 즉시 렌더링(Instant First-Frame Rendering)과 고우선 순위 이벤트 처리(Main-Thread Scripting) 기능을 통해 평균 2~4배 빠른 성능을 제공합니다. Lynx는 특정 프레임워크에 종속되지 않으며, ReactLynx 및 Rspeedy와 같은 도구를 통해 빠르고 유연한 크로스 플랫폼 개발을 가능하게 합니다.

## Topic Body

- 틱톡(ByteDance)이 만든 더 빠르고 부드러운 **React Native 대체제**  
- Lynx는 **웹 기술**을 사용해 **네이티브 UI**를 생성할 수 있도록 돕는 기술 패밀리  
  - 하나의 코드베이스에서 모바일과 웹등 다양한 플랫폼에 대응 가능  
- TikTok과 같은 대규모 앱에서 성능 중심의 UI 프로그래밍 및 Rust 기반 툴링을 제공  
  - 기존 크로스 플랫폼 개발의 한계를 넘어서기 위해 **오픈소스화 결정**  
  
### 대규모, 고속의 네이티브 앱 제공  
- 모바일 앱 사용자에게 비네이티브 경험은 부정적인 인식으로 이어짐  
  - 빈 화면, 0.1초의 애니메이션 지연, 비일관된 UI 등은 신뢰도 하락 요인  
- 다양한 플랫폼에 대응하면서 동일한 경험을 구축하는 것은 여전히 어려운 문제임  
- Lynx는 단일 코드베이스에서 다양한 플랫폼을 지원하여 개발 시간과 비용 절감 가능  
- TikTok은 Lynx를 점진적으로 도입해 성공적인 결과 도출  
  - TikTok Studio, Shop, LIVE 등 다양한 플랫폼에서 Lynx 사용  
  - 대형 이벤트(Disney100, Met Gala 등)에서도 Lynx 활용  
  
### 웹 커뮤니티에 영감 제공 및 성장 촉진  
- 웹 플랫폼은 본래 문서 기반으로 설계되었지만 점차 앱 개발 플랫폼으로 진화함  
- PhoneGap(Cordova)와 React Native는 웹 기술과 네이티브 UI를 연결한 선구적 사례임  
- Lynx는 웹 기술의 강점을 유지하면서 명확한 제약과 확장을 통해 앱 개발에 최적화된 모델 제공  
  - **웹 기술 준수:** 마크업 및 CSS 지원  
  - **확장 및 차별화:** 웹과는 다른 명확한 설계 의도 적용  
  
### 마크업 및 CSS 기반 디자인 가능  
- Lynx는 웹 개발 방식의 친숙함 유지  
  - CSS 애니메이션 및 전환 효과 지원  
  - CSS 선택자 및 변수 지원으로 테마 설정 가능  
  - 클리핑, 마스킹 등 최신 CSS 비주얼 효과 지원  
  
### 메인 스레드의 효율적 사용  
- 사용자 스크립트를 두 개의 런타임으로 나누어 처리  
  - **메인 스레드 런타임:** PrimJS(JavaScript 엔진) 기반으로 UI 초기 렌더링 및 우선 이벤트 처리  
  - **백그라운드 런타임:** 기본 사용자 코드 실행  
- 두 가지 핵심 기능 제공  
  1. **Instant First-Frame Rendering (IFR):** 첫 프레임 즉시 렌더링 → 블랭크 화면 제거  
  2. **Main-Thread Scripting (MTS):** 고우선 순위 이벤트를 부드럽게 처리  
- Lynx 기반 UI는 평균 2~4배 빠른 실행 성능 제공  
  
### Lynx 오픈 소스화  
- [Lynx](https://github.com/lynx-family/lynx)는 ByteDance가 개발하고 TikTok에서 광범위하게 사용 중  
- TikTok은 Lynx 오픈 소스를 지원하고 기술 강화, 커뮤니티 활성화, 생태계 성장에 기여 예정  
  
### 크로스 플랫폼 기술의 대중화   
- 기존 크로스 플랫폼 개발은 일부 주요 업체가 주도  
- Lynx는 단일 솔루션이 아닌 메타 인프라 제공 → 다양한 접근 방식 허용  
- **[ReactLynx](https://lynxjs.org/react.html):** Lynx 기반의 React 스타일 컴포넌트화 및 선언적 UI 지원  
- [Rspeedy](https://lynxjs.org/rspeedy.html)(Rust 기반 번들러) 제공 → 빠른 빌드 및 모듈 페더레이션 지원  
- Lynx는 특정 프레임워크나 렌더링 백엔드에 종속되지 않음  
  - Chromium, Flutter, React Native 등의 프로젝트에서 영감 받음  
  - 브라우저에서 Lynx 구동 가능 → 데스크탑, TV, IoT 등으로 확장 가능  
  
### 새로운 시작  
- Lynx는 이미 프로덕션에서 사용되고 있으며 버전 3.x로 공개됨  
- 오픈 소스를 통해 투명한 개발 과정 공개 예정  
- 추가 컴포넌트, 그래픽 렌더러, 프레임워크 등은 추후 공개 예정  
- 오픈 소스 커뮤니티와 협력해 크로스 플랫폼 개발의 한계를 뛰어넘고자 함  
- 커뮤니티 피드백 및 기여를 환영함  
  
* [Lynx Family GitHub Repo](https://github.com/lynx-family)

## Comments



### Comment 35745

- Author: halfenif
- Created: 2025-03-12T09:37:24+09:00
- Points: 1

미리 빌드된 Lynx Explorer를 사용하는 것을 개발 단계만 그럴것 같고. 현실적으로는 Lynx Explorer를 build하는 과정에 effort가 들어가는 것으로 이해됩니다.

### Comment 35719

- Author: caniel
- Created: 2025-03-11T14:04:14+09:00
- Points: 1

React-Native에 관심이 많은데, 이 친구도 궁금하네요.

### Comment 35718

- Author: xguru
- Created: 2025-03-11T13:48:57+09:00
- Points: 1

위 내용은 공식 소개글인 [Lynx: Unlock Native for More](https://lynxjs.org/blog/lynx-unlock-native-for-more.html) 에서 가져왔습니다.