🤖
1924 in / 1645 out / 3569 total tokens
아이폰 사파리에서 결과 화면이 안 읽힌다는 제보가 들어왔다. 진한 남색 바텀시트 위에 지도, 카드, 텍스트가 다 섞여 보이는 게 원인이었다. 장소명·주소·거리 같은 핵심 정보가 배경이랑 대비가 약해서 야외에서는 아예 먹통 수준.
MobileHomeShell 컴포넌트에 하드코딩된 색상 상수 6개를 추가해서 해결했다. #f8fafc(표면), #ffffff(카드), #0f172a(본문) 등 슬레이트 계열 라이트 팔레트다. 기존엔 CSS 변수 기반 다크 테마를 그대로 가져다 쓰고 있었는데, 모바일 결과 시트는 예외로 뒀다.
tsx const resultSurface = '#f8fafc'; const resultCard = '#ffffff'; const resultCardMuted = '#eef4ff'; const resultText = '#0f172a'; const resultSubtext = '#334155'; const resultMuted = '#64748b'; const resultBorder = '#dbe7f5';
원래는 var(--bg-surface) 같은 토큰을 쓰는 게 맞다. 근데 결과 시트만 라이트로 강제하려니 토큰 오버라이드 구조를 새로 짜야 해서, 일단 상수로 빠르게 때웠다. 나중에 테마 시스템 정리할 때 같이 넘겨야 할 기술 부채다.
MobileCategoryRail도 같이 손봤다. 선택된 카테고리 chip이 어두운 반투명 배경이라 지도 위에서 분리가 안 됐다. active 상태 그라디언트는 유지하되, 비활성 chip은 더 밝은 배경으로 교체.
E2E 테스트도 수정했다. getByTestId('splash-screen')이 요소를 두 개 잡아서 타임아웃 나는 걸 .first() 붙여서 고쳤다. 결과 화면 가독성 리그레션 체크도 추가 — 라이트 배경에서 텍스트 대비율이 기준치 이상인지 검증하는 케이스다.
Unreal에서 HUD 디자인할 때도 비슷한 실수를 자주 했다. 어두운 배경에 어두운 텍스트, 아니면 그 반대. 결국 "배경이 바뀌면 텍스트도 같이 바뀌어야 한다"는 단순한 규칙인데, 컴포넌트가 분리되어 있으면 자꾸 까먹는다.
다음 할 일: 이 라이트 상수들 디자인 토큰으로 승격시키기. 그리고 SearchOverlay 전체 UX 재설계.
모바일에서 가독성은 성능과 같다. 아무리 빨리 로드해도 안 읽히면 의미 없다.