[태그:] touch-action

작성자: 컴맹 집사

대표 이미지: 손가락으로 강아지를 좌우로 옮겨 떨어지는 간식을 받는다 (출처: 왕립 개집사협회 앱 2026년 9월 24일 버전 화면, 직접 캡처)

“손가락으로 강아지를 좌우로 움직인다.”

왕실 간식 잡기 게임의 조작 규칙은 이 한 줄이다. 가장 간단해 보이는 부분이었지만, 게임 제작 다섯 단계 중에서 가장 오래 걸린 게 바로 이 1단계였다. 컴퓨터에서 마우스로 할 때는 멀쩡한데, 휴대폰 손가락 앞에서는 문제가 줄줄이 나왔다.

이 글은 그 네 가지 문제와 해결 과정을 적는다. 대부분은 휴대폰으로 직접 해 보고 불편한 점을 AI에게 그대로 전하며 풀었다. 휴대폰용 게임이나 드래그 기능을 만드는 분이라면 비슷한 곳에서 막힐 가능성이 높다.

먼저 알게 된 것: 마우스와 손가락은 다르다

AI가 처음 준 코드는 마우스 움직임을 기준으로 되어 있었다. 컴퓨터에서 테스트하니 강아지가 마우스를 잘 따라왔다. 휴대폰에서 열자 강아지가 꿈쩍도 하지 않았다.

브라우저는 입력을 여러 종류로 구분한다. 마우스 이벤트는 마우스를 움직이거나 클릭할 때, 터치 이벤트는 손가락이 화면에 닿거나 움직일 때 발생한다. 이벤트(event)는 “무슨 일이 일어났다”는 신호다. 포인터 이벤트는 마우스, 손가락, 펜을 한꺼번에 다루는 방식이다.

포인터 이벤트로 바꾸는 게 해결책이 됐다. 하나의 코드로 마우스와 손가락을 모두 처리할 수 있다. 바꾸고 나니 휴대폰에서도 강아지가 움직이기 시작했다. (출처: MDN 웹 문서, 포인터 이벤트)

문제 1. 강아지를 움직이면 화면 전체가 같이 움직인다

강아지를 옆으로 끌려고 손가락을 움직이면 게임 화면이 위아래로 출렁거렸다. 손가락이 조금이라도 대각선으로 움직이면 브라우저가 스크롤로 해석해 페이지를 움직였기 때문이다. 심하면 화면이 확대되기도 했다.

AI가 알려 준 방법은 CSS 한 줄로 끝났다. 게임 화면에 touch-action: none을 적용하면, 그 영역에서는 브라우저가 스크롤이나 확대를 하지 않고 손가락 움직임을 모두 게임에 넘긴다. 이 설정은 게임 화면에만 적용해야 한다. 앱 전체에 적용하면 웹툰처럼 스크롤이 필요한 화면이 멈춘다. (출처: MDN 웹 문서, touch-action)

문제 2. 손가락이 강아지를 가린다

내 휴대폰으로 해 보니 게임이 이상하게 어려웠다. 손가락이 강아지를 가리고 있었다. 처음 방식은 손가락이 닿은 자리로 강아지를 바로 옮기는 것이었다. 그러니 강아지를 움직이려면 강아지 위에 손가락을 올려야 했고, 떨어지는 간식과 겹치는 순간을 볼 수 없었다.

그래서 방식을 바꿨다. 손가락이 움직인 만큼만 강아지를 옮기게 하고, 손가락은 화면 아래쪽 빈 곳에 두고 밀게 했다. 강아지가 화면 밖으로 나가지 않도록 양쪽 끝에는 벽을 두었다.

문제 3. 그래도 강아지를 먼저 짚어야 움직인다

바꾼 뒤에도 강아지를 한 번 누른 채 아래로 내려야만 조작이 됐다. 처음부터 빈 곳을 누르면 반응이 없었다. 원인을 찾아보니 두 가지가 겹쳐 있었다.

원인 하나. 떨어지는 간식이 터치를 끊고 있었다.
간식은 계속 새로 생기고, 받거나 바닥에 닿으면 사라진다. 손가락이 처음 닿은 곳이 우연히 간식이면, 그 간식이 사라질 때 일부 휴대폰 브라우저에서 진행 중이던 터치가 통째로 끊겼다. 강아지는 사라지지 않으니 강아지를 짚었을 때만 제대로 됐던 것이다. 강아지와 간식은 손가락 감지에서 빼고, 게임판 전체가 모든 터치를 받도록 바꿔서 해결했다.

원인 둘. 손가락은 생각보다 크다.
강아지가 게임판 맨 아래에 거의 붙어 있어서, 강아지 아래를 누르려 해도 손가락이 강아지와 겹쳤다. 강아지를 조금 위로 올려 아래쪽에 조작 전용 공간을 만들었다.

거기에 “여기를 밀어서 조작하세요” 막대를 강아지 바로 아래에 그려 넣었다. 막대는 강아지와 함께 움직이므로, 설명이 없어도 어디를 밀면 되는지 알 수 있다. 문제는 직접 써 보는 사람이 가장 잘 안다.

같은 날 뼈다귀도 고쳤다. 밝은 배경 위에서 연한 색 뼈다귀가 묻혀 잘 안 보였다. 모든 간식 뒤에 반투명한 흰 동그라미와 그림자를 깔아서 어떤 색이든 도드라지게 했다.

문제 4. 느린 휴대폰에서 받았는데 놓친 것으로 나온다

마지막 문제는 닿았는지 판단하는 순서였다. 게임에서는 이것을 충돌 판정이라고 한다.

간식이 떨어지는 속도는 기기와 상관없이 실제 흐른 시간을 기준으로 계산했다. 최신 휴대폰이든 오래된 휴대폰이든 1초 동안 떨어지는 거리가 같아야 공평하기 때문이다. AI는 이를 델타 타임(delta time) 기준이라고 불렀다.

하지만 느린 휴대폰에서는 화면이 한 번 늦게 그려지면 간식이 그사이 한꺼번에 바닥까지 내려갔다. 처음 코드는 바닥에 닿은 간식을 먼저 지우고 나서 강아지와 닿았는지 확인했다. 그래서 강아지 바로 위로 떨어졌는데도 놓친 것으로 처리됐다.

순서를 바꿨다. 바닥에 닿은 간식도 한 번은 강아지와 닿았는지 확인한 뒤, 안 닿았을 때만 지운다. 바뀐 코드는 다섯 줄 정도다. 강아지 아래에 있을 때만 받은 것으로 치니 난이도는 그대로다.

조작 방법은 세 가지로

• 휴대폰: 손가락으로 밀기
• 컴퓨터: 마우스로 끌기
• 키보드: 왼쪽·오른쪽 방향키

세 가지 모두 움직인 만큼 이동하는 방식으로 통일해서, 어떤 기기에서든 조작감이 비슷하다.

게임까지 넣고 나니 앱이 제법 커졌다. 다음에는 집사의 작위를 한 단계씩 올릴 수 있는 아카데미를 만들었다.

---

이전 글: 앱에 미니게임 넣기, 화면이 움직이는 비밀(게임 루프) 쉽게 풀기
다음 글: 작위를 한 단계씩! 앱에 퀴즈 아카데미 넣는 법