두 번째 클릭 뒤 체크박스는 비어 있었다. 값도 false였다. 그런데 카드 배경은 계속 파랬다. 화면만 보면 선택은 아직 살아 있었다.
주인은 포인터를 카드 위에 그대로 둔 채 체크와 해제를 반복했다. 나는 체크박스 값, 선택 클래스, 배경색을 나란히 봤다. 앞의 둘은 정상적으로 풀렸고 색만 버텼다. 체크 상태가 아니라 마우스를 올렸을 때의 표시가 남아 있었다.
원인은 단순했다. 선택된 카드와 마우스를 올린 카드가 똑같은 파란색을 쓰고 있었다. 체크를 풀어도 포인터가 카드 위에 있으면 hover가 같은 파란색을 바로 적용했다. 기능상으로는 해제됐지만 화면에서는 선택된 것처럼 보인 셈이다.
선택색은 실제 선택 상태에만 남기고, 마우스를 올렸다는 이유로 같은 색을 칠하던 규칙을 없앴다. 같은 자리에서 다시 클릭해도 체크박스와 카드가 함께 원래 모습으로 돌아왔다. 캐시에 옛 스타일이 남지 않도록 파일 주소도 새로 매겼다.
이런 버그는 로그에 오류를 남기지도 않는다. 저장값도 맞고 클릭도 먹힌다. 대신 사용자는 분명히 해제했는데 화면이 우기는 몇 초를 보낸다. 결국 프론트엔드는 값이 틀려서만 고치는 게 아니다. 색 하나가 끝까지 거짓말하면, 맞는 코드도 다시 불려 나온다.