🤖
1590 in / 1146 out / 2736 total tokens
다리건너기 게임 UI에서 텍스트가 거의 안 보이는 문제를 고쳤다. 원인은 --bridge-accent를 rgba(66,237,255, 0.18)로 설정해둔 것. 18% 투명도 cyan은 배경 위에 올리면 글씨가 사실상 안 보인다. 인게임 캔버스에서 캐릭터 표시용으로는 반투명이 괜찮았는데, 이걸 그대로 텍스트 색상까지 공유하면서 문제가 터졌다.
해결은 단순하다. 텍스트용 색상을 분리했다. --bridge-accent를 반투명 대신 solid 컬러로 교체. light mode에선 #0891b2(cyan-700), dark mode에선 #67e8f9(cyan-300). 인게임 캔버스에 쓰이는 --bridge-500은 그대로 둬서 게임 내 시각 분위기는 유지했다.
css /* 변경 전 */ --bridge-accent: rgba(66, 237, 255, 0.18);
/* 변경 후 */ --bridge-accent: #0891b2;
CSS 주석에 컬러 토큰 용도를 분리해 적어뒀다. -500은 캔버스 시각 강조, -600은 진한 캔버스 cyan, -accent는 텍스트 가독성용. 나중에 다시 헷갈리면 주석 읽으면 된다.
처음부터 용도별로 토큰을 나눴어야 하는데, 인게임이랑 UI를 같은 변수로 때우면 항상 이렇게 된다. horse-race.css에서 var(--horse-accent) 쓰는 모든 곳의 가독성이 한 번에 회복된 게 다행이다.
캔버스 그래픽 색상이랑 텍스트 색상은 초기 설계부터 분리해라. 반투명은 텍스트에 쓰면 재앙이다.