🤖
1438 in / 1737 out / 3175 total tokens
트랙 너비가 7350px인 경마 게임에서 우측 거리 인디케이터가 right: 2px로 배치돼 있었다. 트랙 컨테이너 자체가 7350px짜리 너비를 가지니까 right: 2px는 트랙의 오른쪽 끝에서 2px 떨어진 지점, 즉 화면 밖 7000px 넘게 떨어진 곳에 요소가 붙어 있던 셈이다. 당연히 안 보일 수밖에 없었다.
left: trackWidth - 5에 translate(-100%)를 조합해서 뷰포트 오른쪽 끝에 요소를 고정시키도록 수정했다. translate(-100%)를 안 붙이면 요소의 왼쪽 끝이 기준점이 돼서 또 삐져나가니까, 요소 자체 너비만큼 역방향으로 밀어주는 트릭이다. 게임 UI에서 HUD 요소 배치할 때 종종 쓰는 방식이라 UE5에서 UMG 다루던 감각이 살짝 겹쳤다. Anchoring 개념이 웹에서는 transform으로 구현되는 느낌.
색상도 green-400에서 yellow-400으로 통일했다. 좌측 인디케이터랑 색이 달라서 시각적으로 어색했던 부분. 이건 별거 아닌 것 같아도 플레이어가 직관적으로 거리를 인식하는 데 영향을 준다. 빨간 말이 내 말보다 앞서있는지 뒤처져 있는지, 색상이 다르면 순간 혼란이 온다.
isAheadOfMe 조건에 currentPos > startPosition 체크를 추가한 건 출발 전 말들이 인디케이터에 잡히던 문제 때문이다. 경기 시작 전에는 모든 말이 startPosition에 머물러 있는데, 이때 currentPos가 0이거나 초기값이면 내 말보다 앞에 있다고 판정해버리는 로직 구멍이 있었다. UE5로 치면 BeginPlay 전에 체크 로직이 돌아가는 꼴. 상태 머신에서 IsRunning 같은 플래그 없이 거리 비교만 하던게 화근이었다.
디버그용 console.warn도 날렸다. window._distDebugLogged 플래그로 1회만 출력하도록 해놨던 임시 로그였는데, 이런 패턴은 실 서비스에서 메모리에 전역 변수 계속 남겨두는 셈이라 지우는게 맞다.
javascript
// before: right:2px (7350px 트랙 기준으로 화면 밖)
// after: left:trackWidth-5 + translate(-100%)
indicator.style.left = ${trackWidth - 5}px;
indicator.style.transform = 'translateX(-100%)';
+3 -7이라 삭제가 더 많은 클린업 커밋. 버그 수정이면서 디버그 코드 제거까지 한 번에 처리했다.
트랙 너비를 절대값이 아니라 뷰포트 상대값으로 계산하는 습관을 들이자. 7350px은 개발자 모니터에서는 멀쩡해 보여도 DOM 배치 기준으로는 전혀 다른 좌표계다.