핫와이어 네이티브(Hotwire Native)의 브릿지 컴포넌트를 이용한 모바일 앱 네이티브 UI 개선

Hotwire Native: Building Bridges | The Gnar Company

작성자
Hotwire Weekly
발행일
2025년 08월 13일
원문 보기
www.thegnar.com

핵심 요약

  • 1 Hotwire Native의 BridgeComponent를 활용하여 Ruby on Rails 웹 앱의 기능을 iOS 및 Android 모바일 앱에서 네이티브 UI/UX로 구현하는 방법을 설명합니다.
  • 2 HTML 데이터 속성과 JavaScript로 BridgeComponent를 정의하고, 이를 통해 웹뷰와 네이티브 앱 간의 양방향 통신 및 UI 동기화를 구현합니다.
  • 3 예시로 '즐겨찾기' 하트 버튼을 네이티브 내비게이션 바 아이콘으로 전환하는 과정을 Android (Kotlin) 및 iOS (Swift) 코드와 함께 상세히 다룹니다.

도입

이 문서는 "Zero to Mobile Hero" 시리즈의 2부로, Hotwire의 BridgeComponent를 사용하여 Ruby on Rails 기반 웹 애플리케이션에 연결된 iOS 및 Android 모바일 앱의 사용자 경험을 향상시키는 방법을 다룹니다. BridgeComponent는 HTML 요소의 데이터 속성과 JavaScript 스니펫을 활용하여 웹 콘텐츠 위에 네이티브 컴포넌트를 효과적으로 통합함으로써, 웹 기술의 유연성과 네이티브 앱의 성능 및 미려함을 동시에 제공합니다. 본 글에서는 구체적인 예시를 통해 BridgeComponent의 구현 과정을 단계별로 설명합니다.

Hotwire Native의 핵심인 BridgeComponent는 JavaScript를 통해 네이티브 앱과 데이터를 주고받으며, Stimulus와 유사한 API로 개발 편의성을 제공합니다. 본 글에서는 웹 애플리케이션의 ‘즐겨찾기(하트)’ 버튼을 모바일 내비게이션 바의 네이티브 버튼으로 전환하는 과정을 상세히 다룹니다.

1. 웹 애플리케이션 설정

  • hotwire-native-bridge 패키지를 추가하고 app/javascript/bridge/heart_controller.js에서 BridgeComponent를 정의합니다.
  • 이 JavaScript 컴포넌트는 HTML data-bridge-checked 속성에서 상태를 읽어 네이티브 앱에 메시지를 전송하고, 네이티브 응답 시 웹 버튼의 클릭 이벤트를 트리거합니다.
  • Rails 뷰에서는 data-controller="bridge--heart"를 조건부로 적용하여 BridgeComponent를 활성화합니다.

2. Android Bridge 구현

  • Android Studio에서 HeartComponent.kt를 생성하고 BridgeComponent를 상속받습니다.
  • 수신된 메시지를 기반으로 툴바에 네이티브 MaterialButton을 추가하며, 클릭 시 replyTo("connect")로 웹뷰에 응답합니다.
  • SpotrApp 클래스에서 Hotwire.registerBridgeComponents를 통해 HeartComponent를 등록하고, CSS로 웹 기반의 중복 버튼을 숨깁니다.

3. iOS Bridge 구현

  • iOS 앱에서는 HeartComponent.swift를 생성하고 BridgeComponent를 상속받습니다.
  • 수신된 메시지를 바탕으로 SF Symbols를 사용한 UIBarButtonItem을 내비게이션 바 우측에 추가하며, 클릭 시 reply(to: "connect")로 웹뷰에 응답합니다.
  • AppDelegate 파일에서 HotwireNative.registerBridgeComponents를 통해 HeartComponent를 등록하고 앱 설정을 구성합니다.

이러한 통합 과정을 통해 웹 기능을 모바일 앱에서 네이티브 컴포넌트처럼 구현하여 사용자 경험을 효과적으로 향상시킬 수 있습니다.

결론

본 글에서는 Hotwire Native의 BridgeComponent를 활용하여 기존 Ruby on Rails 웹 애플리케이션의 기능을 iOS 및 Android 네이티브 모바일 앱에 매끄럽게 통합하는 방법을 성공적으로 시연했습니다. '즐겨찾기' 버튼을 네이티브 내비게이션 바 아이콘으로 전환하는 구체적인 예시를 통해, BridgeComponent가 웹뷰와 네이티브 코드 간의 양방향 통신을 어떻게 촉진하는지 명확히 보여주었습니다. 이 접근 방식은 푸시 알림, 공유 기능, 인증 등 다양한 모바일 특화 기능에 확장될 수 있으며, 개발자가 웹 개발의 효율성을 유지하면서도 네이티브 앱의 풍부한 사용자 경험을 제공할 수 있도록 돕습니다. 다음 포스트에서는 Hotwire Native를 사용한 네이티브 인증 흐름 구현에 대해 다룰 예정입니다.

관련 글들

Hotwire Native Bridge Components: 웹과 네이티브 UI의 강력한 연동

Hotwire Native Bridge Components는 웹 기반 애플리케이션에서 iOS 및 Android의 네이티브 UI 및 코드와 상호작용할 수 있도록 지원하는 핵심 기능입니다.

06/06 읽어보기 →

Hotwire Native 앱에 네이티브 버튼을 추가하는 방법

Hotwire Native 앱에 Swift 및 Stimulus를 활용하여 네이티브 버튼을 손쉽게 통합하는 방법을 설명합니다.

07/23 읽어보기 →

Hotwire Native Rails Gem을 활용한 웹 애플리케이션 모바일 전환 전략

Hotwire Native Rails Gem은 기존 Rails 웹 애플리케이션을 iOS 및 Android 네이티브 모바일 래퍼로 쉽게 전환하고 통합하는 데 필요한 헬퍼, 라우트, 컨트롤러를 제공합니다.

08/30 읽어보기 →

Hotwire Native를 활용한 모바일 앱 개발 워크숍: Rails 개발자를 위한 비밀 도구

Hotwire Native는 기존 Rails 웹 화면과 비즈니스 로직을 재활용하여 iOS 및 Android 앱을 구축, 개발 시간과 비용을 획기적으로 절감합니다.

07/24 읽어보기 →

댓글 0

댓글 작성

0/1000
정중하고 건설적인 댓글을 작성해 주세요.

아직 댓글이 없습니다

첫 번째 댓글을 작성해보세요!