Hotwire Native는 Rails 개발자들이 모바일 앱을 구축할 때 겪는 어려움을 해결하기 위한 강력한 솔루션입니다. 주요 내용은 다음과 같습니다.
Hotwire Native의 핵심 이점
- 기존 웹 화면 재사용 및 개발 노력 최소화: 웹 애플리케이션의 화면을 iOS 및 Android 앱에서 그대로 활용하여 개발 노력을 최소화하고, iOS 및 Android 개발자를 각각 고용할 필요 없이 ‘프레임워크 하나’로 모든 플랫폼을 관리할 수 있습니다.
- App Store 검토 없는 빠른 업데이트: Hotwire Native 앱은 기본적으로 Rails 서버를 호출하는 웹뷰(Web View)이므로, Rails 서버의 변경 사항은 다음 페이지 로드 시 즉시 앱에 반영됩니다. 이를 통해 App Store나 Google Play의 검토 과정 없이 새로운 기능을 추가하고 버그를 수정할 수 있습니다.
- Ruby 기반 비즈니스 로직 재활용: 이미 Rails에서 구축된 모든 비즈니스 로직을 모바일 앱에서 재사용하여 개발 시간과 비용을 절감하고, Ruby로 코드를 작성하는 이점을 유지합니다.
- 점진적 개선(Progressive Enhancement)을 통한 네이티브 기능 활용: 필요에 따라 전체 화면을 네이티브 맵이나 연락처 목록으로 전환하거나, 부분적으로 네이티브 버튼이나 대화 상자를 추가하는 등 네이티브 기능을 점진적으로 통합할 수 있습니다.
iOS 앱 구축 실습
- Xcode 환경 설정: Swift Package Manager를 통해
hotwire-native-ios라이브러리를 추가하고,SceneDelegate에서Navigator를 초기화하여localhost:3000(Rails 서버)을 시작 URL로 설정합니다. - UI 개선: Rails 애플리케이션의 CSS 파일을 수정하여 Hotwire Native 앱에서만 특정 웹 요소를 숨기거나 표시함으로써 앱의 네이티브 느낌을 강화합니다. 페이지의
<title>태그를 활용하여 네이티브 내비게이션 바의 제목을 동적으로 설정합니다. - 네이티브 탭 바 구현:
HotwireTabBarController를 사용하여 ‘Posts’와 ‘Comments’ 탭을 추가하고,SF Symbols를 활용해 아이콘을 적용합니다. 각 탭은 독립적인 내비게이션 스택을 가지며, iOS 버전 업데이트 시 자동으로 새로운 UI 스타일(예: 프로스티드 글라스)이 적용됩니다.
Android 앱 구축 실습
- Android Studio 환경 설정: Gradle을 통해
dev.hotwire.core및dev.hotwire.navigation-fragments라이브러리를 추가하고,AndroidManifest.xml에 인터넷 접근 권한과cleartext traffic허용 설정을 추가합니다. - 레이아웃 및 액티비티 구성:
activity_main.xml에FragmentContainerView를 추가하고,MainActivity.kt에서HotwireActivity를 상속받아Navigator.Config를 설정합니다. Android 에뮬레이터에서 로컬 Rails 서버에 접근하기 위해10.0.2.2를 사용합니다.
브릿지 컴포넌트(Bridge Components) 활용
- 개념: 웹과 네이티브 간의 통신을 가능하게 하는
Stimulus기반 컴포넌트입니다. 웹에서 특정 액션이 발생하면 네이티브 코드를 트리거할 수 있습니다. - 구현:
hotwire-native-bridgeGem을 Rails 앱에 추가하고,Stimulus브릿지 컨트롤러를 생성합니다. iOS 앱에서는Hotwire.registerBridgeComponents를 통해 네이티브ConfirmComponent를 등록합니다. - 동적 데이터 전달 및 네이티브 알림: 웹의
Stimulus컨트롤러에서send메서드를 통해 네이티브 브릿지 컴포넌트로 메시지와 데이터를 전달하고, 네이티브 코드에서 이를 받아UI Alert Controller를 통해 ‘정말 확실합니까?’와 같은 네이티브 알림을 표시합니다. 알림의 제목 등은 웹에서 동적으로 전달된 데이터를 활용합니다. - 웹-네이티브 상호작용: 네이티브 알림에서 ‘확인’ 버튼을 클릭하면
replyToMessage를 통해 웹의 JavaScript 콜백 함수를 실행하여, 웹에서 정의된 추가 액션(예: 게시물 삭제)을 트리거합니다.