모드 버튼을 눌렀더니 판이 출렁였다

2026년 10월 26일 · 기술

지뢰찾기 아래 조작 줄에는 열기(곡괭이)와 깃발, 두 개의 모드 버튼이 있다. 버튼을 눌러 모드를 바꿀 때마다 위의 판과 버튼이 출렁였다. 판이 커졌다 작아지고, 버튼의 가운데 자리도 움직였다. 다른 게임에서도 겪은 문제라 이번에 원인을 제대로 찾았다.

화면 구조부터 설명해야 한다. 이 사이트의 판 크기는 게임 CSS 가 계산하지 않고 사이트가 정한다. 판의 높이는 칸의 높이에서 조작 줄의 실제 높이를 뺀 값이다. 그러니 조작 줄의 높이가 달라지면 판 크기도 같이 달라진다.

원인은 선택한 버튼의 크기를 바꾸는 방식에 있었다. 고른 버튼은 눈에 띄게 width 와 height 를 48px 에서 64px 로 키우고, 이 변화를 부드럽게 보이려고 transition: all 을 걸어 두었다. 이때 width 와 height 는 레이아웃에 영향을 준다. 부드럽게 바뀌는 동안 두 버튼의 높이가 잠깐씩 달라져서 조작 줄 전체의 높이가 줄었다가 돌아왔다. 판은 이 높이에 맞춰 계산되므로 커졌다 작아졌고, 버튼의 가운데 자리도 함께 움직였다.

/* before: the size change affects layout, so the whole row moves */
.mode-btn { width: 48px; height: 48px; transition: all .15s; }
.mode-btn.on { width: 64px; height: 64px; }

/* after: the slot is fixed, only the drawing scales */
.mode-btn { width: 64px; height: 64px; transition: scale .15s; scale: .75; }
.mode-btn.on { scale: 1; }

설명을 위해 줄인 예시다. 고치는 방법은 두 버튼 모두 64px 자리를 처음부터 차지하게 하고, 크기는 scale 로만 바꾸는 것이었다. scale 은 그려지는 모양만 바꾸고 차지하는 자리는 바꾸지 않아서 조작 줄의 높이가 변하지 않는다. 안 고른 쪽은 0.75배(실제 누르는 영역 48px)로 줄여 둔다.

고쳤는지는 눈으로만 보지 않고 숫자로 확인했다. 버튼을 바꾸는 동안 10ms 간격으로 80번 판 크기, 버튼 위치, 조작 줄 높이를 읽어 비교했고, 세 값 모두 변하지 않았다.

같은 실수를 막으려고 규칙을 문서에 남겼다. 버튼 크기는 scale 로 바꾸고, transition: all 은 쓰지 않는다. all 은 레이아웃을 바꾸는 속성까지 부드럽게 만들어서, 의도하지 않은 곳에서 자리가 움직이는 원인이 되기 쉽다.

참고한 문서

• MDN, transition: https://developer.mozilla.org/en-US/docs/Web/CSS/transition
• MDN, scale: https://developer.mozilla.org/en-US/docs/Web/CSS/scale

이 글과 관련된 게임

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