Sparkling — TikTok의 크로스 플랫폼 인프라

Lynx는 TikTok이 만든 크로스 플랫폼 UI 렌더링 엔진이다. React와 비슷하게 코드를 쓰면 네이티브 렌더링으로 Android/iOS 화면을 그려준다. 근데 Lynx 자체는 "렌더링 엔진"일 뿐이다.

실제 앱을 운용하려면 빌드 파이프라인, JS↔네이티브 통신, 페이지 내비게이션, 스토리지/미디어 접근 같은 인프라가 추가로 필요하다. Sparkling이 이 인프라 레이어를 담당한다.

CLI 한 줄로 앱 생성

npm create sparkling-app@latest my-app 한 줄이면 Android/iOS 네이티브 셸이 포함된 완전한 프로젝트가 생성된다.

npx sparkling build로 Lynx 번들을 빌드하고, npx sparkling run:android 또는 run:ios로 빌드→설치→실행을 한 번에 수행한다. npx sparkling dev로 핫 리로드 개발 서버를 띄울 수 있다. 기본 포트가 5969인데, 전화기 키패드로 LYNX를 누른 숫자라고 한다.

npx sparkling doctor로 Node.js, JDK, Android SDK, Xcode, CocoaPods 등 개발 환경을 자동 진단해준다.

Sparkling Method — 타입 안전한 JS↔네이티브 브릿지

가장 흥미로운 부분이다. TypeScript .d.ts 파일에 함수 선언만 작성하면, CLI가 Kotlin/Swift 네이티브 코드와 TS 구현을 자동 생성한다.

생성된 추상 클래스를 상속받아 네이티브 비즈니스 로직만 구현하면 JS에서 바로 호출 가능. 타입이 양쪽에서 보장되니까 런타임 오류가 줄어든다.

빌트인으로 Navigation(라우터), Storage(키-값 저장소), Media(카메라/앨범/파일)가 제공된다.

스킴 기반 통합 내비게이션

hybrid://lynxview_page?bundle=main.lynx.bundle&title=Home 형식의 통합 URL 스킴으로 Lynx 페이지와 네이티브 화면을 동일하게 라우팅한다.

각 페이지가 독립된 번들 엔트리포인트를 갖는 멀티페이지 구조라서, 대규모 앱에 적합하다.

기존 앱에 점진적 도입 (Brownfield)

새 앱뿐 아니라 기존 Android/iOS 앱에 Sparkling 컨테이너를 임베드해서 점진적으로 도입할 수 있다.

Android는 Maven 아티팩트 추가 후 HybridKit.init() → Sparkling.build(context).navigate()로 컨테이너를 연다. iOS는 CocoaPods로 추가 후 SPKRouter.create(withURL:)로 컨트롤러를 푸시하거나 SPKContainerView로 뷰를 임베드한다.

현재 상태

퍼블릭 베타 단계다. Apache 2.0 라이선스. Node.js ^22 || ^24, pnpm v10 환경에서 동작한다. Android는 JDK 11 이상 + android-34 SDK, iOS는 Xcode 16+가 필요하다.