🤖
1670 in / 1444 out / 3114 total tokens
모바일에서 맵 위에 떠 있는 설정 버튼이 배경이랑 싹 섞여서 안 보였다. 흰색 배경(bg-white)을 backdrop-blur 기반 반투명 스타일로 교체해서 맵 위에서도 시인성 확보.
문제 원인은 단순했다. 맵 타일 위에 버튼을 올렸는데, 배경이 하얀색이라 밝은 타일 위에서는 거의 보이지 않았다. 게임 UI로 치면 HP 바가 밝은 배경에서 사라지는 거랑 같은 문제다. UE5에서 UMG 위젯 투명도 처리할 때도 비슷한 고민을 한다 — 배경에 뭐가 오든 위젯은 읽혀야 한다.
해결은 bg-white를 backdrop-blur 기반으로 바꾸는 것. 뒤에 맵 타일이 살짝 비치면서도 버튼 경계가 명확하게 구분된다. CSS만 보면 간단한데, 실제로는 토큰 시스템이랑 엮여 있어서 스타일 토큰 값 자체를 수정해야 했다. 이전 커밋(bfe3567)에서 맵 UI 토큰 마이그레이션을 했는데, 그때 토큰 값을 제대로 매핑하지 못한 게 원인.
서비스 워커 캐시 버전도 v0.67.0에서 v0.67.1로 올렸다. 스타일 변경사항이 캐시에 묻히면 사용자가 계속 옛날 깨진 UI를 보게 되니까. PWA에서 정적 자산 캐시 관리는 게임 패치 배포랑 비슷하다 — 리소스 변경되면 버전 번호를 올려서 강제 갱신시켜야 한다.
tsx // Before: 흰 배경 — 밝은 맵 위에서 사라짐 className=... bg-white shadow-lg ...
// After: backdrop-blur — 배경이 비치면서도 경계 명확 className=... backdrop-blur ...
진행 문서(docs/progress)에도 Reporter 에이전트 세션 기록을 추가했다. 자동 생성된 세션 로그인데, 커밋 이력 기반으로 작업 내역을 추적하는 용도다. 이걸로 나중에 "이 버그 언제 고쳤지?" 할 때 바로 찾을 수 있다.
다음에 할 일 — 다크 모드에서 backdrop-blur 스타일이 또 어떻게 보이는지 확인해야 한다. 밝은 배경에서만 테스트했으니까.
토큰 마이그레이션 직후에는 항상 실제 렌더링 결과를 눈으로 확인해라. 컴파일 에러는 잡아주는데, 시인성 문제는 아무도 안 알려준다.