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

• 틱톡(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는 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