잘못 꽂은 깃발이 0.7초 동안 사라졌다

2026년 10월 26일 · 기술

지뢰찾기에서 지뢰를 밟아 지면 남은 지뢰가 차례로 터지고, 잘못 꽂은 깃발은 X 표시가 붙은 깃발로 바뀐다. 그런데 잘못 꽂은 깃발은 바로 바뀌지 않고, 0.7초쯤 그림이 사라졌다가 X 깃발로 나타났다. 잔디 칸도 한 번 깜빡였다.

연출은 이렇게 만들어져 있었다. 지뢰가 차례로 터지는 간격(전체 700ms 를 지뢰 수로 나눔)은 칸마다 다른 animation-delay 로 정한다. 지뢰가 터지는 애니메이션 ms-pop 은 처음에 크기가 0 인 상태에서 튀어나오는 모양이다. 잘못 꽂은 깃발에도 같은 ms-pop 을 붙였다.

문제는 animation-fill-mode: backwards 다. 이 값은 애니메이션이 시작하기 전, 지연 시간 동안에도 첫 키프레임의 모양을 적용한다. 지뢰 칸에는 이게 필요했다. 차례가 오기 전에는 닫힌 칸처럼 보여야 하기 때문이다. 하지만 잘못된 깃발에 같은 규칙이 적용되면, 차례가 올 때까지(최대 700ms) 그림이 크기 0 으로 숨는다. 이미 보이던 깃발이 사라지고, 잔디 칸도 한 번 깜빡였다.

/* before: the same pop animation as the mines, held at scale(0) until its turn */
.wrong { animation: ms-pop .3s var(--d) backwards; }

/* after: show the X flag right away, only bounce once at its turn */
.wrong { animation: ms-wrong .3s var(--d); }  /* no "backwards" */
@keyframes ms-wrong { 50% { scale: 1.25; } }

설명을 위해 줄인 예시다. 고친 방법은 잘못된 깃발 전용 애니메이션 ms-wrong 을 만드는 것이다. X 깃발은 끝나는 순간 바로 보이고, 자기 차례에 한 번 튀기만 한다. 첫 키프레임을 만들지 않았고 backwards 도 쓰지 않아서, 차례를 기다리는 동안에도 그림이 그대로 보인다.

이번에도 화면을 눈으로만 확인하지 않았다. 깜빡임은 한 프레임만 비어도 눈에 띄는데, 사람 눈으로는 놓치기 쉽다. requestAnimationFrame 으로 매 프레임 칸의 상태(그림이 보이는지)를 기록해서, 연출 내내 그림이 비어 있는 프레임이 0개인 것을 확인했다.

애니메이션 하나를 여러 용도로 돌려 쓰면 이런 부작용이 숨어 있다. 지뢰에 필요한 backwards 가 깃발에는 오히려 해가 되었다. 용도가 다르면 애니메이션도 따로 둔다.

참고한 문서

• MDN, animation-fill-mode: https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode

이 글과 관련된 게임

지뢰찾기숫자 힌트로 숨은 지뢰를 피해 모든 칸을 여세요. 해 보기