[태그:] requestAnimationFrame

작성자: 컴맹 집사

대표 이미지: 앱에 처음 넣은 미니게임, 왕실 간식 잡기 (출처: 왕립 개집사협회 앱 2026년 9월 23일 버전 화면, 직접 캡처)

웹툰을 넣고 나니 “보는 재미”는 생겼다. 반려인들이 잠깐 쉬는 시간에 들어와서 직접 하는 재미도 있으면 좋겠다는 생각이 들었다. 그래서 게임을 넣기로 했다.

앱을 만들기 시작할 때만 해도 게임은 가장 먼 영역이라고 생각했다. 전문 개발자들이 만드는 것 아닌가. 그런데 지금까지 해 온 걸 돌아보면 못 할 것도 없을 것 같았다. 질문도, 작위증도, 웹툰도 처음엔 막막했지만 결국 해냈으니까.

흔한 게임을 세계관에 맞게 바꾸기

한 가지 원칙은 분명했다. 어디서나 볼 수 있는 게임을 그대로 가져오지 않는다. 간단한 게임이라도 “강아지는 왕, 반려인은 집사”라는 세계관 안에 들어와야 했다.

AI에게 “휴대폰에서 손가락 하나로 할 수 있는 간단한 게임을 왕립 개집사협회 세계관에 맞게 바꿔서 아이디어를 줘”라고 부탁했다. 고르는 기준은 세 가지였다.

1. 규칙을 한 문장으로 설명할 수 있는가
2. 휴대폰에서 손가락 하나로 할 수 있는가
3. 한 판이 1분 이내인가

첫 번째로 고른 건 왕실 간식 잡기였다. “30초 동안 떨어지는 왕의 간식을 받아라.” 한 문장이면 끝이다. 집사가 폐하의 간식을 지킨다는 설정도 세계관에 딱 맞았다.

규칙을 먼저 문서로 정리했다

기획 단계에서 배운 교훈을 게임에도 적용했다. 코드를 요청하기 전에 게임 개발 기준서를 먼저 만들었다. 규칙, 점수, 난이도, 조작 방법, 저장할 것, 하지 말아야 할 것까지 적은 문서다. 이 기준서도 제미나이와 챗GPT에 보여 주며 빠진 점을 찾고, 클로드에게 검토받은 뒤 확정했다.

• 목표: 30초 동안 좋은 간식은 받고 이상한 물건은 피한다.
• 조작: 손가락으로 강아지를 좌우로 움직인다. 컴퓨터에서는 마우스나 방향키.
• 점수: 뼈다귀·고기·베이컨 같은 간식은 +10점, 양말은 -10점, 비누는 -5점. 점수는 0점 아래로 내려가지 않는다.
• 특별 아이템: 마지막 10초에만 가끔 떨어지는 황금 왕관, +50점.
• 난이도: 시간이 지날수록 조금씩 빨리, 더 자주 떨어진다.
• 끝: 점수에 따라 견습 집사부터 왕실 특급 집사까지 등급을 준다.

마지막 항목은 작위증과 연결하려고 넣었다. 게임에서도 집사 등급을 받는 것이다. 이상한 물건으로 양말과 비누를 고른 것도 이유가 있다. 강아지에게 위험한 음식을 게임에 넣으면 오해를 부를 수 있어서, 누구나 웃을 수 있는 물건으로 골랐다.

게임은 지금까지의 앱과 무엇이 다른가

AI에게 기준서를 보여 주며 만들어 달라고 하자, 먼저 개념부터 설명해 줬다. 지금까지의 앱과 게임은 움직이는 방식이 근본적으로 달랐다.

• 지금까지의 앱: 사용자가 버튼을 누를 때만 화면이 바뀐다. 가만히 있으면 화면도 가만히 있다.
• 게임: 사용자가 아무것도 안 해도 화면이 계속 바뀐다. 간식은 알아서 떨어진다.

계속 움직이는 화면을 만드는 원리를 게임 루프(game loop)라고 한다. 설명을 듣고 이해한 내용은 이렇다.

게임은 1초에 약 60번, 아주 빠르게 “위치 계산 → 부딪혔는지 확인 → 다시 그리기”를 반복한다. 그 사이에 간식을 조금씩 아래로 옮기면, 사람 눈에는 떨어지는 것처럼 보인다.

어릴 때 교과서 귀퉁이에 그리던 플립북과 같은 원리다. 한 장 한 장 조금씩 다른 그림을 빠르게 넘기면 움직이는 것처럼 보인다. 게임은 그 플립북을 1초에 60장씩 즉석에서 넘기는 셈이다.

이 반복을 부드럽게 해 주는 기능이 브라우저에 있다(requestAnimationFrame). 이름은 어렵지만 뜻은 “다음 장면 그릴 준비됐으면 알려 줘”다. 화면이 새로 그려질 타이밍에 맞춰 알려 주기 때문에 움직임이 매끄럽다. (출처: MDN 웹 문서, requestAnimationFrame)

AI에게 게임 제작 요청하기

이번에는 처음부터 전부 만들어 달라고 하지 않고 단계를 나눴다.

1. 1단계: 빈 게임 화면에 강아지만 보이게. 손가락으로 좌우 이동.
2. 2단계: 간식이 위에서 떨어지게. 강아지에 닿으면 사라지고 점수 +10.
3. 3단계: 30초 타이머와 결과 화면.
4. 4단계: 이상한 물건, 황금 왕관, 난이도 상승.
5. 5단계: 최고 기록 저장과 등급.

단계마다 휴대폰으로 해 보고 확인한 뒤 커밋했다. 게임은 움직이는 부분이 많아서, 한꺼번에 만들면 문제가 어디서 생겼는지 찾기 어렵다.

게임을 넣으며 겪은 문제들

1. 황금 왕관이 떨어지지 않는다
반짝이는 효과를 주려고 황금 왕관에 움직이는 장식(CSS 애니메이션)을 넣었더니, 아래로 떨어지지 않고 제자리에서 반짝이기만 했다. 반짝이는 효과와 떨어지는 움직임이 같은 설정을 두고 서로 덮어쓰고 있었던 것이다. 왕관 그림을 한 겹 더 감싸서, 바깥은 떨어지고 안쪽은 반짝이게 나눠서 해결했다.

2. 분명히 닿았는데 점수가 안 오른다
처음 코드는 계산을 줄이려고, 간식이 거의 바닥에 왔을 때만 강아지와 닿았는지 확인했다. 그런데 휴대폰이 잠깐 버벅이면 그 구간을 건너뛰어 버려서, 분명히 받았는데 놓친 것으로 처리됐다. 매 장면마다 확인하도록 바꿨다.

3. 게임 화면을 나가도 게임이 계속 돈다
게임 도중에 다른 화면으로 나가도 보이지 않는 곳에서 게임 루프가 계속 돌 수 있다고 AI가 짚어 줬다. 휴대폰이 뜨거워지고 배터리가 닳는 원인이 된다. 그래서 화면을 바꿀 때마다 “나가기 전에 정리할 것”을 실행하는 장치를 앱에 처음으로 만들었다. 게임 루프를 멈추고, 손가락 감지도 해제한다.

4. 효과음이 없다
배포하고 직접 해 보니 너무 조용했다. 소리 파일을 따로 구하지 않고, 브라우저가 즉석에서 소리를 만들어 내는 기능을 썼다. 간식을 받을 때, 이상한 물건에 닿았을 때, 황금 왕관, 게임 끝, 네 가지 소리를 만들었다. 휴대폰 브라우저는 사용자가 화면을 한 번 누르기 전에는 소리를 못 내게 막아 두기 때문에, “게임 시작” 버튼을 누르는 순간 소리를 준비하게 했다. 지하철에서 갑자기 소리가 나면 곤란하니 소리 켜기/끄기 버튼도 넣었다.

테스트는 빠르게, 결과는 똑같이

게임을 확인하려면 매번 30초를 기다려야 했다. AI는 테스트할 때만 쓰는 특별한 주소를 만들어 줬다. 그 주소로 열면 한 판이 6초로 줄고, 간식이 정해진 순서대로 떨어진다. 덕분에 “좋은 간식 → 좋은 간식 → 양말 → 좋은 간식 → 황금 왕관” 순서로 받았을 때 점수가 정확히 몇 점이 되는지 자동으로 확인할 수 있었다. 실제 사용자는 이 주소를 알 필요도 쓸 일도 없다.

---

이전 글: 웹툰이 늘어나면 생기는 일, 회차 목록 정리하는 법
다음 글: 손가락으로 강아지를 쓱쓱! 터치 게임 만들다 막힌 4가지