캔버스 게임을 모바일 화면에 맞추는 법
두들타워나 두들라이츠아웃처럼 캔버스에 직접 그림을 그리는 게임을 만들 때 가장 먼저 부딪히는 문제는 "화면 크기가 기기마다 다 다르다"는 사실이다. 완전히 반응형으로 만들면 좌표 계산이 복잡해지고, 고정으로 만들면 큰 화면에서 작아 보인다. 두들게임즈는 후자에 가까운 방식을 택했다.
논리적 해상도를 하나로 고정한다
두들타워의 캔버스는 실제로 가로 360, 세로 560이라는 고정된 논리 좌표계로 그려진다. 화면이 아이폰이든, 갤럭시든, 태블릿이든 게임 내부의 모든 계산(블록 위치, 충돌 판정, 점수판 위치)은 이 360×560 좌표계 안에서만 이루어진다. 화면이 이보다 크면 CSS로 감싸는 바깥 요소가 최대 너비를 제한해 중앙에 배치하고, 화면이 이보다 작으면 비율에 맞춰 축소해서 보여준다. 이렇게 하면 "이 지점을 탭했을 때 어떤 블록과 부딪혔는가" 같은 판정 로직을 기기별로 다르게 짤 필요가 없다. 좌표계가 하나로 고정돼 있으니 판정 코드도 하나면 충분하다.
바깥 틀은 420px, 안쪽 좌표는 360px
여기서 눈여겨볼 부분이 하나 더 있다. 게임 전체를 감싸는 바깥 래퍼(wrapper)의 너비는 min(100vw, 420px)로 잡혀 있다. 즉 화면 너비가 420px보다 좁으면 화면 너비 그대로, 420px보다 넓으면 420px에서 멈춘다. 그런데 캔버스 안쪽 논리 좌표계는 360px이다. 바깥 틀이 안쪽 좌표계보다 60px 더 넓게 잡혀 있는 이유는, 화면 양옆에 약간의 여백을 남겨 게임판이 화면 가장자리에 딱 붙어 답답해 보이지 않게 하기 위해서다. 캔버스 자체는 width:100%로 지정돼 있어서 이 바깥 틀의 실제 크기에 맞춰 유동적으로 늘어나거나 줄어들고, 그 안에서 벌어지는 좌표 계산은 여전히 360×560 기준 그대로 유지된다. 바깥 틀의 물리적 크기와 안쪽 좌표계의 논리적 크기를 분리해 둔 덕분에, 여백을 조정하고 싶을 때도 판정 로직은 전혀 건드릴 필요가 없다.
흐릿해 보이지 않게, 디바이스 픽셀 비율
문제는 요즘 스마트폰 화면 대부분이 고밀도(Retina급) 디스플레이라는 점이다. 논리 좌표계를 360×560으로 고정한 채 캔버스 크기도 그대로 360×560 픽셀로 그리면, 고밀도 화면에서는 이미지가 확대돼 보이면서 뭉개진다. 이를 막기 위해 실제 캔버스의 비트맵 크기는 devicePixelRatio(기기의 실제 픽셀 밀도)를 곱한 값으로 만들고, 그리기 명령 자체는 ctx.scale()로 다시 논리 좌표계 기준으로 맞춰준다. 코드를 쓰는 입장에서는 여전히 360×560 세계에서 좌표를 다루지만, 실제로 화면에 찍히는 픽셀은 기기의 진짜 해상도에 맞게 촘촘해지는 방식이다. 이 한 줄짜리 스케일 처리를 빼먹으면 최신 기종에서도 게임 화면이 오래된 저해상도 화면처럼 흐릿하게 보인다.
손가락과 손톱 사이, 확대 제스처 막기
모바일 웹에서 빠르게 연속으로 탭하는 게임을 만들면 반드시 마주치는 방해 요소가 있다. 브라우저의 기본 확대 제스처다. 두 번 빠르게 탭하면 화면이 확대되거나, 두 손가락으로 벌리면 핀치줌이 걸리는 동작은 일반적인 웹페이지에서는 유용하지만 타이밍 게임에서는 그대로 오작동이 된다. 두들게임즈의 게임 페이지들은 뷰포트 메타 태그에 user-scalable=no를 넣어 애초에 확대 자체를 막고, 게임판을 감싸는 요소에는 touch-action: manipulation을 지정해 두 번 탭했을 때 브라우저가 확대 여부를 판단하느라 생기는 약간의 지연(더블탭 딜레이)까지 없앤다. 특히 두들터치처럼 손가락을 빠르게 연타하는 게임에서는 이 지연 하나가 체감 반응 속도를 눈에 띄게 갉아먹는다.
탭할 때 번쩍이는 회색을 지운다
모바일 브라우저에는 화면을 탭할 때마다 그 자리에 잠깐 회색 하이라이트가 번쩍이는 기본 동작이 있다. 링크나 버튼을 눌렀다는 걸 알려주기 위한 배려인데, 손그림 스타일로 직접 그린 버튼과 이펙트가 있는 게임에서는 오히려 방해가 된다. 두들게임즈의 모든 게임은 CSS에서 -webkit-tap-highlight-color: transparent를 전역으로 지정해 이 회색 번쩍임을 완전히 없앴다. 사소한 한 줄이지만, 이게 빠지면 손그림 톤으로 정성 들여 만든 탭 이펙트 위에 시스템 기본 하이라이트가 겹쳐 보이면서 화면이 지저분해 보이는 문제가 생긴다.
세로 화면을 기본값으로
마지막으로, 모든 게임은 가로가 아니라 세로 화면을 기준으로 설계했다. 손그림 스타일의 미니게임은 대부분 한 손으로, 이동 중에 짧게 즐기는 용도라고 판단했기 때문이다. PC에서 접속해도 가로로 넓게 늘어나는 대신 세로 비율의 카드가 화면 가운데 뜨는 이유가 여기 있다. 화면이 넓다고 게임 영역까지 넓힐 필요는 없다는 게 결론이었다. 몸통을 감싸는 body도 플렉스 박스로 짜서 화면 크기와 무관하게 게임 카드가 항상 정중앙에 오도록 만들었는데, 이 역시 같은 원칙의 연장이다. 화면이 크든 작든, 사용자가 보는 건 언제나 같은 비율의 게임판이어야 한다는 것이다.
여섯 게임이 같은 틀을 공유하는 이유
여기서 설명한 규칙들, 그러니까 고정 논리 좌표계, devicePixelRatio 스케일링, 확대 제스처 차단, 탭 하이라이트 제거, 세로 우선 레이아웃은 두들타워 하나에만 적용된 게 아니라 두들라이츠아웃·두들푸시·두들스팟·두들컬러·두들터치까지 여섯 게임 전부에 공통으로 적용돼 있다. 게임마다 논리 좌표계의 정확한 수치(캔버스를 쓰는지, DOM 격자를 쓰는지)는 조금씩 다르지만, 뼈대가 되는 이 다섯 가지 규칙은 그대로 재사용한다. 새 게임을 만들 때마다 화면 대응 문제를 처음부터 다시 고민하지 않아도 되는 건, 이 문제를 한 번 제대로 풀어서 여섯 게임이 공유하는 공통 기반으로 만들어 뒀기 때문이다. 사소해 보이는 뷰포트 설정 몇 줄이, 실은 게임 하나하나를 새로 만들 때마다 반복해서 겪지 않아도 되는 반복 작업을 없애주는 셈이다.