Hotwire Native는 웹 애플리케이션을 모바일 래퍼로 감싸는 기술로, iOS와 Android 각각 별도의 레포지토리로 운영됩니다. 본 세션에서는 Hotwire Native iOS를 중심으로 Xcode를 통한 설정 및 데모 애플리케이션 활용법을 시연합니다. 특히, 발표자가 직접 포크한 Hotwire Native iOS 데모 앱은 기본 앱보다 더 많은 추가 동작과 개선된 UX를 제공합니다. hotwire_native_rails Gem은 Rails 앱에 다음과 같은 핵심 기능을 추가하여 모바일 전환을 가속화합니다.
hotwire_native_rails Gem의 주요 기능
- 네이티브 탭 내비게이션: iOS 앱 하단에 네이티브 탭 바를 추가하여, Rails 앱의 특정 경로(예: 루트, 조직 목록, 프로필 편집)와 연동할 수 있습니다. 이는 웹 앱을 재배포하지 않고도 탭 경로를 동적으로 업데이트할 수 있는 유연성을 제공합니다.
- 경로 설정 (
path_configuration): 특정 페이지(예:/new,/edit경로)를 자동으로 모달 뷰로 열거나, 풀-투-리프레시(pull-to-refresh) 기능을 활성화/비활성화하는 규칙을 정의하여 모바일 환경에 맞는 사용자 경험을 제공합니다. - 동적 페이지 제목:
page_title헬퍼를 통해 웹과 모바일 환경에서 각기 다른 페이지 제목을 설정할 수 있습니다. 이는 좁은 모바일 화면에 최적화된 짧은 제목을 표시하는 데 유용합니다. - 모바일 전용 UI 숨기기/표시:
unless turbo_native_app?헬퍼나hot_native_hiddenTailwind CSS 플러그인을 사용하여 웹에서는 표시되지만 모바일에서는 숨겨야 할 HTML 요소(예: 헤더, 푸터 내비게이션)를 제어하여 UI를 간소화합니다. - 내비게이션 패턴 (
turbo_action replace): 로그인 후 이전 페이지로 돌아갈 수 없도록data-turbo-action="replace"속성을 활용하여 내비게이션 기록을 관리합니다.replace_if_native헬퍼는 이를 모바일 환경에서만 적용할 수 있도록 돕습니다. - 폼 제출 (
bridge_form_with):form_with를bridge_form_with로 대체하여 HTML 제출 버튼을 자동으로 숨기고 네이티브 제출 버튼(예: 앱 바 우측 상단)을 활성화합니다. 이는 폼 유효성 검사 오류 처리 시에도 일관된 경험을 제공합니다. - 브릿지 컴포넌트:
button_component,overflow_menu,nav_component등을 통해 네이티브 버튼, 액션 시트, 드롭다운 메뉴와 같은 UI 요소를 웹 앱 내에서 구현하여 웹과 네이티브 간의 자연스러운 연동을 가능하게 합니다. - 템플릿 변형 (
device_format):index.html+mobile.erb또는index.html+native.erb와 같이 특정 환경에 맞는 템플릿 변형을 사용하여 웹과 모바일 앱에서 완전히 다른 UI를 렌더링할 수 있습니다.