🤖
1285 in / 1485 out / 2770 total tokens
모바일 결과 시트의 좌우 마진을 추가해서 iPhone Safari에서 화면 가장자리에 콘텐츠가 딱 붙어버리는 문제를 해결했다.
MobileHomeShell.tsx에서 결과 시트 섹션의 inset-x-0을 inset-x-2로 변경했다. Tailwind에서 inset-x-0은 left: 0; right: 0이고, inset-x-2는 left: 0.5rem; right: 0.5rem이다. 즉, 양쪽에 8px씩 여백이 생긴다.
기존 코드는 결과 시트가 화면 너비를 꽉 채우도록 설정되어 있었다. 데스크톱이나 Android Chrome에서는 크게 티 안 나는데, iOS Safari는 뷰포트 처리 방식이 달라서 가장자리 콘텐츠가 안전 영역(safe area)에 가려지거나 시각적으로 불편하게 보이는 문제가 있었다.
흥미로운 건 이미 paddingBottom: 'env(safe-area-inset-bottom)' 처리는 되어 있었다는 거다. 하단 노치/홈 인디케이터 영역은 고려되어 있었는데, 좌우는 누락되어 있었다. 아마 개발 중에 iPhone으로 직접 확인하면서 하단은 잡았는데 측면은 놓쳤거나, 특정 기기에서만 재현되는 이슈였을 수 있다.
이런 건 에뮬레이터로는 잘 안 보인다. 실기기에서 봐야 "아, 여기 붙어있네" 하고 눈에 들어온다. 게임 개발할 때도 UI 안전 영역(safe zone) 맞추는 거 귀찮은데, 웹에서도 비슷한 고생을 하는 셈이다. UE5에서 UMG 안전 영역 패널 쓰는 것처럼, 웹에서도 env() 변수나 적절한 마진으로 대응해야 한다.
tsx // Before className="absolute inset-x-0 bottom-0 z-[1000] isolate max-h-[66dvh] overflow-hidden rounded-t-[1.75rem]"
// After className="absolute inset-x-2 bottom-0 z-[1000] isolate max-h-[66dvh] overflow-hidden rounded-t-[1.75rem]"
iPhone Safari의 뷰포트는 예상보다 더 까다롭다. 안전 영역은 하단만 있는 게 아니다.