Turbo Native: React Native 없이 모바일 앱을 만든 방법

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

앱 개발

대상자

• Rails 기반 웹 개발자 및 크로스플랫폼 앱 개발을 고려 중인 팀
• React Native의 복잡성과 유지보수 부담을 피하고자 하는 프로젝트
• 짧은 개발 주기와 빠른 출시가 필요한 내부 도구/CRUD 중심 앱 개발자

핵심 요약

• Turbo Native는 기존 Rails 백엔드를 그대로 재사용하며, WKWebView/WebView를 기반으로 네이티브 UI를 제공
• WKWebViewConfiguration, TurboNavigationController 등 네이티브 코드 활용
• 100% HTML 뷰 재사용 + 네이티브 탭바/스와이프 동작으로 90% 코드 재사용률 달성
• 앱 스토어 승인 시간 24시간 + API 변경 없이 출시
• 성능 희생: Animations 약한 점, 오프라인 지원 제한
• Hybrid 접근: 결제 흐름, 카메라 화면 등 핵심 흐름은 100% 네이티브 구현

섹션별 세부 요약

1. Turbo Native의 핵심 원리

• Rails 앱을 네이티브 쉘로 감싸기
• iOS: WKWebView + Swift/ObjC 네이티브 네비게이션
• Android: WebView + Kotlin/Java 네이티브 네비게이션
• HTML 뷰 100% 재사용 + 네이티브 UI 요소(탭바, 스와이프) 추가
• Stimulus 컨트롤러로 카메라/GPS 등 기기 기능 연동

```swift

func webView(_ webView: WKWebView, didReceive message: WKScriptMessage) {

if message.name == "requestCamera" {

presentCamera()

}

}

```

2. 성능/보안/유지보수성 비교

| 항목 | Turbo Native | React Native | Flutter | PWA |

|---|---|---|---|---|

| 코드 재사용률 | 90% | 50% | 100% | 100% |

| 네이티브 느낌 | 85% | 95% | 90% | 50% |

| 오프라인 지원 | 제한적 | 우수 | 우수 | 우수 |

| 최적화 권장 | 내부 도구, CRUD 앱 | 게임, 영상 앱 | 복잡한 애니메이션 | - |

3. 실무 적용 팁

• 네이티브 UI 요소 추가: Skeleton Loading, Native Navigation Stack 사용
• Hybrid 구조 적용: 결제/카메라 등 핵심 흐름은 100% 네이티브로 구현

```kotlin

if (path == "/checkout") {

presentNativeCheckout()

} else {

visit(path)

}

```

• 테스트 전략: Safari의 "Request Mobile Site" 사용, required device APIs 명시

결론

• Turbo Native는 Rails 기반 앱 출시의 효율성을 극대화하지만, 성능과 오프라인 지원에서 tradeoff 발생
• Hybrid 접근을 통해 크리티컬 UI/UX 요소는 네이티브 구현, 나머지는 웹 기반으로 개발
• 앱 스토어 승인 시간 단축 및 API 변경 없이 출시 가능, 내부 도구/CRUD 앱에 적합
• 성능 테스트 시 Cold Start 1.2s, Memory 30% 증가 등을 고려해야 함