# Sparkling - TikTok의 크로스 플랫폼 인프라 > Clean Markdown view of GeekNews topic #27548. Use the original source for factual precision when an external source URL is present. ## Metadata - GeekNews HTML: [https://news.hada.io/topic?id=27548](https://news.hada.io/topic?id=27548) - GeekNews Markdown: [https://news.hada.io/topic/27548.md](https://news.hada.io/topic/27548.md) - Type: GN+ - Author: [neo](https://news.hada.io/@neo) - Published: 2026-03-16T10:31:02+09:00 - Updated: 2026-03-16T10:31:02+09:00 - Original source: [github.com/tiktok](https://github.com/tiktok/Sparkling) - Points: 4 - Comments: 1 ## Topic Body - TikTok이 자사 앱에서 **Lynx 엔진을 프로덕션 규모로 운용**하기 위해 구축한 인프라 계층을 오픈소스로 공개. 앱 스캐폴딩부터 빌드, 네이티브 브릿지, 내비게이션까지 통합 제공 - React Native에 **Expo**가 필요하듯, Lynx 엔진 위에서 실제 앱을 운용하기 위한 프로덕션 인프라 프레임워크 - 단일 CLI 명령으로 Android/iOS **네이티브 셸이 포함된 완전한 Lynx 앱 프로젝트**를 즉시 생성하고, 빌드→설치→실행을 한 번에 수행 - TypeScript 선언만 작성하면 Kotlin/Swift 코드를 자동 생성하는 **Sparkling Method**로 타입 안전한 JS↔네이티브 브릿지 구현 - `hybrid://` 형식의 **통합 URL 스킴 내비게이션**으로 Lynx 페이지와 네이티브 화면 간 라우팅을 단일 체계로 처리 --- ### Sparkling의 위치: Lynx와의 관계 - **Lynx**는 TikTok이 공개한 크로스 플랫폼 UI 렌더링 엔진으로, React와 유사한 방식으로 코드를 작성하면 **네이티브 렌더링**으로 Android/iOS 화면을 그려주는 프레임워크 - Lynx 자체는 "렌더링 엔진"이므로, 실제 앱 운용에는 **빌드 파이프라인, 네이티브↔JS 통신, 페이지 내비게이션, 스토리지/미디어 접근** 등 인프라가 추가로 필요 - Sparkling이 이 **인프라 레이어** 역할을 담당하며, Lynx 엔진 위에 올라가는 앱 프레임워크 - React Native만으로는 앱을 만들기 어렵고 **Expo**가 필요하듯, Lynx만으로는 대규모 앱 운용이 어렵고 **Sparkling이 그 갭을 메워주는 관계** - 현재 **퍼블릭 베타** 단계이며, API 확대와 문서 개선이 진행 중 ### 앱 스캐폴딩 및 빌드 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 등 **개발 환경 자동 진단** - `npx sparkling autolink`으로 Sparkling Method 모듈의 Gradle/Podfile **의존성 자동 등록** 및 네이티브 레지스트리 코드 생성 - `npx sparkling copy-assets`로 컴파일된 번들을 Android/iOS **리소스 디렉터리에 복사** ### Sparkling Method — 타입 안전한 JS↔네이티브 브릿지 - TypeScript `.d.ts` 파일에 **함수 선언만 작성**하면, CLI(`sparkling-method-cli codegen`)가 Kotlin/Swift 네이티브 코드와 TS 구현을 **자동 생성** - 생성된 추상 클래스를 상속받아 **네이티브 비즈니스 로직만 구현**하면 JS에서 바로 호출 가능 - 빌트인 Method로 **Navigation(라우터), Storage(키-값 저장소), Media(카메라/앨범/파일)** 제공 - 패키지 이름은 `sparkling-<module>` 형식, 메서드 이름은 `<module>.<action>` (예: `router.open`) 컨벤션 - npm으로 배포 후 `npm install` + `npx sparkling autolink`만으로 소비자 측 통합 완료 ### 스킴 기반 통합 내비게이션 - `hybrid://lynxview_page?bundle=main.lynx.bundle&title=Home` 형식의 **통합 URL 스킴**으로 Lynx 페이지와 네이티브 화면을 동일하게 라우팅 - 각 페이지가 독립된 번들 엔트리포인트를 가지는 **멀티페이지 구조**로, 대규모 앱에 적합한 설계 - `navigate()` 함수에서 사전 정의 키 외에 **커스텀 파라미터**도 스킴 URL에 전달 가능 ### 기존 앱에 점진적 통합 (Brownfield) - 새 앱뿐 아니라 **기존 Android/iOS 앱에 Sparkling 컨테이너를 임베드**하여 점진적 도입 가능 - Android: Maven 아티팩트(`com.tiktok.sparkling:sparkling:2.0.0`) 추가 후, `HybridKit.init()` 초기화 → `Sparkling.build(context).navigate()`로 **컨테이너 열기** - iOS: CocoaPods(`pod 'Sparkling', '2.0.0'`) 추가 후, `SPKRouter.create(withURL:)`로 **컨트롤러 푸시** 또는 `SPKContainerView`로 **뷰 임베드** - 빌드한 `.lynx.bundle` 파일을 네이티브 앱 에셋에 복사하고, `bundle=` 파라미터로 해당 번들 지정 ### 프로젝트 구조 - `packages/sparkling-sdk`: 코어 **Sparkling SDK** - `packages/sparkling-method`: **Sparkling Method SDK** (JS↔네이티브 브릿지) - `packages/methods`: 빌트인 Sparkling methods 패키지 (Navigation, Storage, Media) - `packages/sparkling-app-cli`: Sparkling 앱 **빌드 및 실행 CLI** - `packages/create-sparkling-app`: 앱 스캐폴딩 CLI - `packages/sparkling-method-cli`: Sparkling Method **코드젠 툴링** - `packages/sparkling-types`: **GlobalProps 타입** 정의를 단일 패키지로 통합 - `packages/playground`: 로컬 개발용 Playground 앱 ### 기술 스택 및 환경 - Node.js **^22 || ^24**, pnpm v10.26.0 환경 - Android: JDK 11 이상, **android-34** SDK 필요 - iOS: **Xcode 16+**, Ruby ≥2.7 <3.4, CocoaPods 필요 - TypeScript, Swift, Kotlin, JavaScript 등 다중 언어 구성 - **Apache 2.0 라이선스** ## Comments ### Comment 53107 - Author: freedomzero - Created: 2026-03-16T12:12:04+09:00 - Points: 1 Lynx - 웹 기술 기반 네이티브 앱 개발 도구 - GeekNews https://news.hada.io/topic?id=19688 함께 보면 좋은 글에 안 나오네요.