홈 › 읽을거리 › 가이드

터치 조작을 만들며 정한 임계값과 실패한 순서

가이드 · 2026-10-08 · GamePool 편집팀

터치가 키보드보다 어렵다는 말은 맞지만 거기서 얻을 것이 많지 않습니다. 촉감이 없고 손가락이 화면을 가린다는 사실은 누구나 압니다. 이 글은 GamePool 게임들이 터치 입력을 실제로 어떻게 처리하는지, 그 처리 때문에 어떤 선택을 했고 어떤 한계가 생겼는지를 소스 코드의 수치로 적었습니다. 내용은 모두 Pointer Events(pointerdown, pointermove, pointerup)로 통일된 현재 코드 기준이며, 플레이어가 취할 행동은 각 절의 끝에 붙였습니다.

군단 점령전: 손가락이 움직인 만큼 대포가 움직이게

군단 점령전은 화면 어디든 누른 채 좌우로 끌면 대포가 움직입니다. 손가락의 위치가 아니라 이동량(dx)을 그대로 대포의 이동량으로 바꾸는 방식입니다. 3D 장면이라 화면 폭과 실제 길 폭이 일치하지 않으므로, 카메라로 대포가 서 있는 줄의 길 양끝을 화면에 투영해 “길 폭이 화면에서 몇 픽셀인지(ppu)”를 구하고 dx ÷ ppu 만큼 이동시킵니다. 그래서 손가락이 화면에서 100픽셀 움직이면 대포도 화면에서 같은 100픽셀 움직입니다. 주석에도 “부드럽게 따라가기 없이 즉시 이동”이라고 적혀 있어, 손가락과 대포 사이에 지연이 끼지 않도록 보간을 일부러 뺐습니다.

손가락 하나만 추적하는 것도 의도입니다. pointerId 를 저장해 두고 다른 손가락의 이동은 무시하며, setPointerCapture 로 손가락이 캔버스 밖으로 벗어나도 끌기가 이어집니다. 세로 화면과 가로 화면은 카메라 위치와 시야각(62도와 50도)이 달라서 ppu 도 그에 맞춰 다시 계산합니다. 플레이어가 할 일은 단순합니다. 화면의 아무 곳이나 눌러도 되니 대포가 손가락에 가리는 것을 피해 판 아래쪽 빈 곳에서 끌어 보세요.

솔저 러쉬와 슈팅: 절대 위치냐 상대 이동이냐

솔저 러쉬도 드래그 게임이지만 환산식이 다릅니다. 이동량을 min(창너비, 520)으로 나눈 뒤 15를 곱합니다. 폭 390픽셀 휴대폰에서는 화면 가로를 끝까지 쓸어야 15 단위를 움직이고, 520픽셀보다 넓은 화면에서는 아무리 넓어도 520픽셀을 쓸면 15 단위입니다. 큰 화면에서 손을 그 이상 멀리 움직일 필요가 없게 한도를 둔 셈입니다. 눌렀을 때의 위치가 아니라 이동한 거리만 쓰기 때문에 병사 무리를 어디서 눌러도 순간이동하지 않습니다.

스페이스 슈터는 입력 방식에 따라 다르게 동작합니다. 마우스는 기체가 커서 위치로 가지만 터치는 처음 누른 지점과 기체 위치의 차이를 저장해 두고 이동량만 반영합니다. 손가락이 기체를 가리는 문제를 줄이려는 구조라서, 기체를 누를 필요 없이 화면 아래쪽 빈 곳을 짚고 끌면 됩니다. 반대로 벽돌깨기의 패들은 포인터 이동 이벤트 전체를 받아 x 좌표를 곧바로 패들 중심으로 씁니다. 손가락이 닿은 곳으로 패들이 순간이동하고 손끝이 패들을 가리는 단점이 있습니다. 코드가 x 좌표만 읽기 때문에 원리상 판 아래쪽에서 움직여도 패들은 따라옵니다. 다만 그 영역에서 브라우저가 화면 스크롤로 가져가는지는 화면 구성에 따라 달라서 직접 확인이 필요합니다.

스와이프의 임계값: 스네이크 20, 2048 은 24픽셀

스네이크는 손가락이 움직이는 동안 20픽셀 이상 이동하면 즉시 방향을 바꾸고, 기준점을 현재 위치로 옮깁니다. 한 번 쓸 때 가로로 가다 세로로 꺾는 동작이 두 번의 방향 입력이 될 수 있다는 뜻입니다. 방향 대기열은 3개까지 쌓이고, 반대 방향으로의 전환은 대기열의 마지막 입력을 기준으로 거절해서 순식간에 자기 몸에 부딪히는 일은 생기지 않습니다. 2048 은 반대로 손가락을 뗀 순간(pointerup)에 판정합니다. 이동이 24픽셀 미만이면 무시하고, 가로·세로 중 큰 쪽을 방향으로 삼습니다. 결과적으로 스네이크는 반응이 빠른 대신 한 번의 쓸기가 두 번 꺾일 수 있고, 2048 은 손가락을 뗄 때까지 아무 일도 일어나지 않는 대신 한 번의 쓸기가 정확히 한 수가 됩니다.

플레이어 입장에서의 요령은 이렇습니다. 2048 에서는 길게 끌 필요 없이 25픽셀쯤 짧게 쓸고 떼면 됩니다. 스네이크에서는 큰 원을 그리듯 쓸지 말고 꺾고 싶은 순간 짧게 직선으로 쓰세요. 대각선으로 쓸면 가로 변화량과 세로 변화량 중 큰 쪽만 반영되므로 의도와 다른 방향이 나올 수 있습니다.

블록: 탭은 회전, 쓸기는 이동, 위로 쓸면 즉시 낙하

블록 낙하는 터치 버튼(왼쪽·오른쪽·아래·회전·즉시 낙하·보관)과 보드 위 제스처를 동시에 지원합니다. 보드 제스처는 손가락이 칸 크기의 0.9배만큼 가로로 움직일 때마다 한 칸 이동하고, 같은 거리만큼 아래로 움직이면 소프트 드롭입니다. 아무 이동 없이 떼면 회전, 이동 없이 40픽셀 넘게 위로 쓸고 떼면 즉시 낙하입니다. 이동이 한 번이라도 있었다면 moved 플래그가 켜져 있어서, 옆으로 쓸다가 손을 뗄 때 블록이 갑자기 돌아가지 않습니다. 이동 버튼은 누르고 있으면 170밀리초 뒤부터 60밀리초 간격으로 반복합니다.

이 구조의 한계는 기준이 칸 크기에 비례한다는 점입니다. 예를 들어 칸이 20픽셀인 화면이면 18픽셀만 움직여도 한 칸 이동이라 손가락의 미세한 떨림과 구분하기 어렵습니다. 칸 크기는 화면에 맞춰 달라지므로 보드를 키울수록 한 칸 움직이는 거리도 커져 안정됩니다. 빠른 연속 이동이 필요하면 보드 제스처보다 하단 버튼이 정확합니다.

알까기와 지뢰찾기: 손가락 크기만큼 넉넉하게 집고, 길게 눌러 깃발

알까기는 돌을 집을 때 정확히 돌 위를 누르게 하지 않습니다. 눌린 위치에서 돌 반지름의 1.9배 안에 있는 내 돌 중 가장 가까운 것을 고릅니다. 돌 반지름(R)은 돌 수 설정이 9 이상이면 31, 7이면 34, 그 밖에는 37이라서 집는 범위는 약 59~70 단위가 됩니다. 당긴 거리가 28 미만이면 발사가 취소되고, 최대 260까지 당길 수 있으며 속도는 당긴 거리 × 6.2 입니다. 가장 약하게 쏴도 약 174, 최대로 당기면 약 1612 가 되는 셈이라, 눈으로 보이는 당김 길이를 속도로 읽으면 됩니다. 가볍게 톡 치고 싶을 때는 28 바로 위에서 당겨야 합니다.

지뢰찾기는 마우스와 터치의 동작을 분리했습니다. 마우스는 오른쪽 버튼이 깃발이고 가운데 버튼이 열기입니다. 터치(마우스가 아닌 포인터)는 450밀리초 이상 누르면 깃발이 꽂히고 진동이 30밀리초 울립니다. 손가락이 24픽셀 넘게 움직이면 길게 누르기가 취소되어 스크롤하려던 동작이 깃발이 되지 않게 했습니다. 화면에는 “깃발 모드” 버튼도 따로 있는데, 길게 누르기가 어려운 분은 이 모드로 바꿔 탭하면 칸이 열리지 않고 깃발만 꽂힙니다. 두더지 잡기와 플래피는 손가락을 떼기를 기다리지 않고 pointerdown 에서 바로 반응합니다.

런너의 한계: 점프가 먼저 나가는 순서

우리 코드에서 가장 아쉬운 터치 설계가 런너입니다. 규칙은 “탭 = 점프, 아래로 쓸기 = 숙이기”인데, 구현은 pointerdown 에서 곧바로 점프를 실행하고, 그 뒤 pointermove 에서 시작점보다 30픽셀 넘게 내려가면 숙이기를 켜는 순서입니다. 그래서 바닥에서 숙이려고 화면을 짚는 순간 숙이기가 켜지기 전에 점프가 먼저 나갑니다. 키보드는 아래 방향키 하나로 즉시 숙이지만 터치에서는 땅 위에서 숙이기만 단독으로 입력할 방법이 없습니다.

이 순서가 왜 문제인지는 장애물 판정을 보면 알 수 있습니다. 소스 수치로 정리하면 서 있는 캐릭터의 판정 높이는 52, 숙이면 30이고, 바위는 높이 36 또는 50입니다. 새는 두 높이로 나옵니다. 낮은 새는 몸통이 바닥에서 약 40~60 높이에 있어 서 있으면 맞고 숙이거나 점프하면 피합니다. 높은 새는 바닥에서 약 74~94 높이라 서 있는 채로 지나가고, 오히려 점프하다가 몸이 22~94 높이 사이에 있을 때 만나면 맞습니다. 낮은 새를 키보드는 숙여서, 터치는 점프로 넘겨야 합니다. 점프는 한번 뜨면 착지까지 선택을 취소할 수 없어서, 낮은 새 바로 뒤에 높은 새가 이어지면 위험한 쪽은 터치입니다.

완화 수단도 코드 안에 있습니다. 점프 시간은 얼마나 오래 누르느냐에 따라 달라집니다. 짧게 탭하면 최고 높이 약 90에 공중 시간 약 0.48초이고, 계속 누르면 약 151에 0.71초입니다. 점프 중 아래로 쓸어서 숙이기가 켜지면 초당 3000의 추가 낙하 가속이 붙습니다. 누른 지 0.1초 뒤에 쓸면 공중 시간이 약 0.4초, 높이가 약 99로 줄어듭니다. 이 수치는 소스의 점프 속도(−760)와 중력(1900과 3200)으로 계산한 값이고, 실제 기기에서 잰 것은 아닙니다. 장애물 사이가 좁은 구간에서는 이 아래로 쓸기가 터치 쪽의 유일한 빠른 착지 수단입니다.

플레이어가 취할 행동은 세 가지입니다. 낮은 새는 숙이려 하지 말고 짧게 탭해서 넘기세요. 점프 뒤에 높은 새가 보이면 길게 누르지 말고 곧바로 아래로 쓸어 일찍 내려오세요. 땅에서 숙이고 싶은 경우에만, 안전한 틈에 화면을 짚은 채 아래로 쓸어 두면 착지한 뒤부터 손을 떼기 전까지 숙인 상태가 유지됩니다(점프가 한 번 나가는 대가를 치르고). 근본적인 해결로는 점프를 놓았을 때 실행하거나 화면 아래쪽 절반을 숙이기 영역으로 나누는 방법이 떠오르지만 아직 바꾸지 못했습니다.

터치 게임을 고를 때 확인할 것

  • 드래그 게임(군단 점령전, 솔저 러쉬, 슈터)은 손가락 위치가 아니라 이동량이 반영됩니다. 가리지 않는 아래쪽 빈 곳에서 시작하세요.
  • 스와이프 게임(2048, 스네이크)은 20~24픽셀이면 충분합니다. 짧고 곧게 쓰세요.
  • 지뢰찾기에서 깃발이 자꾸 꽂히면 450밀리초 안에 떼고, 깃발이 필요하면 깃발 모드를 켜세요.

터치는 키보드의 열화판이 아니라 다른 입력입니다. 키보드 규칙을 그대로 옮기지 않고 입력마다 임계값을 따로 정한 부분이 GamePool 의 방식이고, 런너처럼 아직 옮기지 못한 부분도 이렇게 기록해 두었습니다.

관련 게임 플레이하기

다른 읽을거리

가이드반응 속도 게임: 두더지·러너·새의 숫자와 봇 실험두더지 잡기·점프 러너·날갯짓 새의 소스 수치(출현 간격, 점프 물리, 탭 한 번의 상승량)와 봇 실험으로 정리한 연습 포인트입니다.공략군단 점령전 공략: 문 배수와 대장 게이지 활용군단 점령전에서 병사를 폭발적으로 불리는 문 활용법, 벽·황금 문·연타 문 공략, 대장 게이지와 업그레이드 투자 순서까지 정리했습니다.공략솔저 러쉬 공략: 무기 해금, 타이어 탑, 문 선택솔저 러쉬의 무기 5종 해금 순서와 특징, 보급 상자 타이어 탑, 거대 적 대처, 게이트를 고르고 키우는 법을 게임 수치로 설명합니다.입문장기 입문 가이드: 말 움직임부터 외통 몰기까지장기의 말 움직임, 포와 차의 쓰임, 궁성 대각선, 장군과 외통의 원리, 초보가 자주 하는 실수를 GamePool 장기 기준으로 정리했습니다.입문알까기 입문: 힘 조절, 각도, 충돌 물리 활용법알까기를 이기려면 얼마나 세게, 어느 방향으로 튕겨야 할까요? 당김 길이와 이동 거리, 충돌 때 돌이 움직이는 방식과 전술을 정리했습니다.칼럼효과음 181개를 코드로 만든 기록: 볼륨과 템포 조정기GamePool 오디오 엔진의 실제 구조와 효과음 값, 군단 점령전 발사·충돌음 볼륨을 키운 변경, 레오니스 위기 때 템포가 40% 빨라지는 장치를 소스와 개발 이력으로 풀었습니다.