Rails 8 + Hotwire Native 앱의 역할 기반 UI 분리와 모바일 최적화 삽질기
Rails 8 + Hotwire Native 조합으로 iOS 앱을 운영하는 중에, 하루 동안 발생한 여러 문제를 연쇄적으로 해결한 기록이다. 작은 UI 깨짐에서 시작해서 권한 체계 재설계까지 이어진 과정을 정리한다. 1. 모바일 WebView에서 카드 이미지가 뭉개지는 문제 증상 iOS 앱에서 대회 탐색 화면을 열면 카드의 배지/아이콘이 찌그러져 보였다. 웹 브라우저에서는 정상이었다. 원인 배포된 코드가 데스크톱 레이아웃(max-w-[1400px], 반응형 그리드)으로 되어 있었는데, Hotwire Native의 WKWebView는 375px 폭이라 배너 영역의 뱃지들이 겹쳤다. <!-- 문제: 데스크톱 기준 컨테이너 --> <div class="mx-auto min-h-screen max-w-[1400px] px-4 py-6"> <div class="grid gap-4 sm:grid-cols-2 xl:grid-cols-3"> 해결 모바일 뷰포트 기준으로 재작성했다. ...