1. Hotwire Native 통합 및 초기 iOS 프로젝트 설정
개발자는 먼저 기존 Rails 프로젝트와 별도로 iOS 프로젝트를 생성하고, Xcode 프로젝트 구조를 정리합니다. 불필요한 파일을 제거하고, gitignore를 설정하여 개인 사용자 데이터를 커밋하지 않도록 관리합니다. 이후 Hotwire Native 패키지를 프로젝트에 추가하고, SceneDelegate를 설정하여 앱이 로컬 Rails 서버(localhost:3000)를 로드하도록 구성합니다. 이로써 웹사이트가 iOS 앱 내에서 정상적으로 렌더링되는 초기 통합 단계를 완료합니다.
2. UI/UX 개선 및 플랫폼별 스타일 조정
기존 웹 UI가 iOS 환경에서 어색하게 보이는 문제를 해결하기 위해 UI 개선 작업을 수행합니다. 특히, 투명하게 보이던 iOS 네비게이션 바와 탭 바를 불투명하게 설정하여 네이티브 앱과 같은 느낌을 줍니다. 또한, .native.css 파일을 도입하고 Rails 레이아웃에서 Hotwire Native 앱일 경우에만 해당 CSS를 로드하도록 조건을 추가합니다. 이를 통해 웹 버전에서는 푸터와 상단 네비게이션 바가 유지되지만, iOS 앱에서는 이들을 숨겨 네이티브 앱에 최적화된 화면을 제공합니다.
3. 동적 탭 구현 및 사용자 인증 처리
앱의 핵심 기능인 ‘내 프로필’, ‘내 친구’, ‘알림’ 세 가지 탭을 Hotwire Tab Bar Controller를 사용하여 구현합니다. 특히, 사용자 인증 상태에 따라 탭 구성을 동적으로 변경하는 로직이 중요하게 다뤄집니다. 사용자가 로그인하지 않은 상태에서는 단일 ‘시작’ 탭만 표시하고, 로그인 시에는 세 가지 ‘인증된’ 탭을 모두 로드하도록 설정합니다. 이 과정에서 BridgeComponent를 활용하여 Rails 서버에서 사용자의 인증 상태(authenticated 여부)를 iOS 앱으로 전달하고, 앱은 이 정보를 바탕으로 탭 구성을 실시간으로 업데이트합니다. 이는 iOS 앱이 서버의 상태를 적극적으로 활용하여 자체적인 상태 관리를 최소화하는 Hotwire Native의 장점을 극대화하는 예시입니다.
4. 경로 설정 (Path Configuration) 및 모달 처리
특정 웹 페이지를 iOS 앱에서 네이티브 모달(Modal) 형태로 표시하기 위한 경로 설정을 구현합니다. /new나 /edit와 같이 폼이 포함된 페이지를 모달로 띄우도록 Hotwire::ConfigurationsController에서 규칙을 정의합니다. 이를 통해 사용자 경험을 향상시키지만, 폼 제출 후 리다이렉션 시 turbo_action: replace가 모달 내에서 정상적으로 작동하지 않아 스택에 화면이 중복되는 문제에 직면하며, 이에 대한 추가적인 해결 방안을 모색해야 함을 언급합니다.