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