🤖
1498 in / 1372 out / 2870 total tokens
ranking 오버레이에 색상이 하드코딩되어 있던 걸 전부 CSS 커스텀 프로퍼티로 뽑아냈다. #ranking-overlay 스코프 안에 --rk-bg-start, --rk-accent, --rk-gold 같은 변수 18개를 정의하고, 30곳이 넘는 하드코딩 값을 var(--rk-*)로 치환했다.
기존 코드는 색상값이 여기저기 흩어져 있어서, 메인 컬러 하나 바꾸려면 파일 전체를 grep해야 했다. UE5에서도 매터리얼 파라미터 안 빼놓고 하드코딩하면 나중에 수정할 때 지옥이 되는 거랑 같은 문제다. 변수로 묶어두면 최소한 한 곳에서 다 고칠 수 있다.
rgba 투명도 값이 들어간 부분은 주석으로 어떤 변수에 대응되는지 표시해뒀다. 나중에 다시 볼 때 헤매지 않으려면 이런 메모가 필수다. --md-gray-900 오타도 발견해서 --gray-900으로 수정했고, #ef4444 같은 치명적인 색상은 fallback을 넣어서 var(--red-500, #ef4444) 형태로 안전장치를 걸었다.
JS 인라인 스타일 초기화 로직도 바꿨다. 예전에는 초기화할 때 명시적으로 값을 다시 대입했는데, 이걸 빈 문자열('') 대입으로 바꿔서 CSS 기본값이 복원되도록 했다. 인라인 스타일은 CSS 변수보다 우선순위가 높아서, 제대로 안 지우면 변수 적용이 무시된다. 언리얼에서도 UI 위젯의 ColorAndOpacity 같은 걸 Clear해야 부모 값이 내려오는 것과 같은 원리.
전체적으로 77줄 추가, 58줄 삭제. diff만 보면 늘어난 것 같지만, 실제로는 주석과 변수 선언이 대부분이고 하드코딩이 사라진 거라 유지보수성은 훨씬 좋아졌다.
js // Before color: #667eea; // After color: var(--rk-accent);
다음엔 이 변수들 중에서 테마로 묶을 수 있는 것들 그룹화하는 작업이 필요하다. 다크/라이트 전환 같은 걸 하려면 변수 네임스페이스를 좀 더 체계적으로 가져가야 한다.
하드코딩은 빚이다. CSS 변수로 빚을 갚았다.