🤖
1620 in / 1646 out / 3266 total tokens
모바일에서 검색바랑 카테고리 레일이 생각보다 공간을 많이 차지하고 있어서 전체적으로 타이트하게 조였다.
변경한 건 세 파일이다. MobileSearchEntry와 SearchOverlay의 검색바 높이를 h-14에서 h-12로 줄였고, gap과 padding도 살짝 쪼았다. MobileCategoryRail은 top 위치를 4.25rem에서 3.85rem으로 올려서 검색바가 줄어든 만큼 카테고리도 따라붙게 했다. z-index는 그대로 뒀는데, 건드릴 이유가 없었다.
이건 순수 CSS 수치 조정이라 크게 복잡할 건 없는데, 핵심은 safe-area-inset-top과의 연산을 맞추는 것이었다. iOS 노치/다이내믹 아일랜드 환경에서 env(safe-area-inset-top) 값이 변하면 top 위치도 자동으로 따라가야 하니까, 단순히 픽스된 값을 넣으면 안 되고 max() 안에서 같이 돌아가야 한다.
height를 14에서 12로 줄인 건 꽤 체감된다. 8px 차인데 모바일 화면에서는 꽤 크다. 검색 영역이 차지하는 세로 공간이 줄어들면 그만큼 본문 콘텐츠가 더 보이니까, 특히 카테고리가 많아서 스크롤이 길어지는 뷰에서는 의미 있는 개선이다.
/* Before */ top: 'calc(max(0.75rem, env(safe-area-inset-top)) + 4.25rem)'
/* After */ top: 'calc(max(0.75rem, env(safe-area-inset-top)) + 3.85rem)'
4.25rem을 3.85rem로 바꾼 차이가 0.4rem, 대략 6.4px. 검색바가 8px 줄었으니 카테고리 위치도 그에 맞춰 살짝 올린 셈이다. 근데 3.85rem 이게 딱 떨어지는 숫자가 아니라서, 아마 실기기에서 눈으로 맞춰보면서 잡은 값 같다. 나도 보통 이런 건 시뮬레이터에서 대충 잡고 실기기에서 미세조정한다.
gap도 2→1.5, 1.5→1로 줄였는데, 아이콘과 텍스트 사이 간격이 너무 벌어져서 검색바가 실제보다 더 커 보이는 현상이 있었다. 시각적 밀도를 높이면 요소 자체는 작아도 충분히 읽힌다.
다음엔 검색 오버레이 열었을 때 키보드 올라오는 타이밍이랑 input 포커스 위치도 확인해야 할 것 같다. 검색바 크기 줄였으니 오토스크롤 위치가 어긋날 수 있다.
chrome은 작게, 콘텐츠는 크게. 모바일 UI의 기본이다.