모래게임 Sandrop TIL 19

이 글은 Today I Learn 시리즈의 118번째 기록입니다. (총 213개)

소리가 세 번째로 안 꺼졌다

최근 앱 버튼을 누르면 붓는 소리가 계속 났다

앞선 TIL 18에서 붓기 소리가 안 꺼지던 걸 고쳤는데 또 나왔다. 모래를 붓는 중에 최근 앱 목록 버튼을 누르면 소리가 멈추지 않고 반복됐다.

원인이 하나가 아니었다.

앱이 가려질 때 소리를 끄게 해 뒀는데, 최근 앱 화면에서는 앱이 계속 그려져서 게임 루프가 멈추지 않았다. 소리를 꺼도 다음 순간 루프가 “지금 붓는 중이니 소리를 켜라”며 도로 켰다
소리를 켜는 작업이 비동기(명령을 보내 두고 끝나기를 기다리지 않은 채 다음 일로 넘어가는 방식)라, 끄는 명령이 먼저 처리되고 켜는 작업이 나중에 끝나면 아무도 관리하지 않는 소리가 남았다

끄는 쪽을 아무리 고쳐도 켜는 쪽이 되돌렸다. 그래서 켜는 쪽에 빗장을 걸었다. 앱이 앞에 없으면 소리를 아예 못 켠다. 루프가 돌든 말든 상관없어졌다. 40판쯤 연달아 하면 붓기 소리가 아예 안 나던 것도 같은 누수였다. 고친 뒤 다시 해 보니 소리가 계속 났다.

끄는 쪽만 고치면 켜는 쪽이 되돌린다. 상태를 되돌리는 경로가 있으면 그 입구를 막는다
같은 증상이 세 번 나오면 원인이 하나라는 가정부터 버린다

광고가 다음 레벨을 덮었다

레벨을 깨고 넘어갈 때 다음 레벨이 먼저 뜨고 그 위를 광고가 덮었다.

광고를 띄우는 명령은 광고가 뜨는 순간 끝난 것으로 처리되고, 닫힌 건 별도 신호로 온다. 그래서 광고가 뜨자마자 다음 화면으로 넘어가 버렸다. 닫힘 신호를 기다렸다가 넘어가게 하고, 신호가 영영 안 오면 게임이 멈추니 30초 상한을 뒀다.

“보여 줬다”는 “닫혔다”가 아니다. 외부 부품이 끝났다고 할 때 무엇이 끝났다는 건지 확인한다
남의 신호를 기다릴 때는 늘 상한을 둔다. 안 오는 경우에 게임이 같이 멈추면 안 된다

성능 정리

30픽셀짜리 썸네일이 그리기 작업의 절반이었다

테스트하다 보면 폰이 따뜻해졌다. UE5 게임 수업에서 강사가 최적화 안 된 모바일 게임은 “폰이 뜨거워져요” 같은 댓글이 달린다고 했던 게 떠올라 Claude에게 최적화를 시켰다.

찾아보니 게임 루프는 매 프레임 화면을 새로 그리는데, 바뀌지도 않는 것까지 전부 다시 그리고 있었다. 가장 심한 건 좌측 상단의 작은 레벨 썸네일이었다. 30픽셀짜리 상자 안에 사각형 4096개를 초당 60번 다시 그렸고, 이게 게임 전체 그리기 작업의 절반이었다. 판이 끝날 때까지 안 변하는 그림인데도.

안 변하는 부분에 RepaintBoundary(한 번 그린 결과를 따로 떼어 두고 재사용하게 하는 경계)를 뒀다. 반대로 모래 캔버스에는 두지 않았다. 거기는 실제로 매 프레임 바뀌어서 경계를 둬도 다시 그려야 하고, 경계는 그림 층을 하나 더 만드는 비용이 든다. 같은 점검에서 승리·게임오버 화면이 떠 있는 동안에도 뒤에서 게임이 초당 60번 돌고 있던 것이 나와서 멈췄다. 폰이 뜨거워지는 원인이 바로 이런 것이다.

최적화는 “더 빨리 그리기”보다 “안 그려도 되는 것 찾기”가 먼저다
재사용 장치는 공짜가 아니다. 붙일지 말지는 “느린가”가 아니라 “안 변하는가”로 정한다
화면에 안 보이는 동안 돌고 있는 것이 없는지 본다
발열은 플레이어가 댓글로 남기는 문제다. 테스트 중에 폰이 따뜻해지면 기능이 아니라 버그로 다룬다

핵심 규칙을 건드리기 전에 검사부터 깔았다

모래가 어느 칸에 차는지 계산하는 부분도 빠르게 고쳐야 했다. 여기는 게임 규칙의 핵심이라 잘못되면 그림이 다르게 채워진다. 그런데 기존 테스트는 채운 칸의 개수와 클리어 여부만 봐서, 모래가 엉뚱한 칸에 차도 통과했다. 앞선 TIL 1에서 통과해도 의미가 없는 테스트가 있다고 했던 바로 그 경우다.

그래서 빨라진 계산의 답이 예전 방식의 답과 같은지 매번 확인하는 검사(assert — 개발 빌드에서만 도는 확인문)를 넣었다. 기존 테스트가 지나가는 길목에 놓으니 테스트를 새로 짜지 않아도 칸 위치까지 확인하게 됐다. 500레벨 전체를 봇으로 돌려도 한 번도 안 걸렸다.

핵심을 고치기 전에 “지금 테스트가 이 실수를 잡는가”를 먼저 묻는다
이 검사는 출시 빌드에서는 꺼진다. 나중에 여기를 또 고치면 그때도 테스트를 돌려야 한다

3483줄짜리 파일을 나눴다

최적화를 시키면서 코드도 깔끔하게 정리하라고 했다. 게임 화면 코드 한 파일이 3483줄까지 커져 있었다. Claude가 그리는 부분·타일·HUD(점수·하트 같은 상단 표시)·장면 모델을 네 파일로 나눠 2278줄이 됐다. 나누면서 코드 내용은 고치지 않았고, 상태와 얽힌 부분은 깨질 위험이 커서 그대로 뒀다고 했다.

정리를 시킬 때는 “옮기기만 했는가”를 확인한다. 옮기면서 고치면 뭔가 깨졌을 때 어느 쪽 탓인지 가를 수 없다

출시하면 못 바꾸는 것

홈 화면에 sandart라고 떴다

폰 홈 화면에 게임 이름이 sandart로 떴다. 처음 프로젝트를 만들 때 붙인 이름이 그대로 남아 있었던 것이다. Claude에게 고치라고 했다. 이 이름은 패키지 이름(앱을 구분하는 고유 ID)이라 스토어 주소에 그대로 박히고, 출시하고 나면 영영 못 바꾼다.

패키지 이름을 sandrop으로, 홈 화면 이름을 샌드아트 Sandrop으로 첫 업로드 전에 바로잡았다.

출시하면 못 바꾸는 값이 있다. 첫 업로드 전에 그 목록을 한 번 훑는다
개발 중에 붙인 임시 이름은 생각보다 오래, 생각보다 바깥까지 남는다

분석 설정 파일은 숨겨야 하는 비밀인가

유저가 몇 탄에서 그만두는지 보려고 진행도 분석(Firebase Analytics)을 붙였다. 레벨 번호와 성패만 보내고, 설정이 없거나 인터넷이 끊겨도 게임은 그대로 돈다. 개인정보처리방침에도 앞선 TIL 18의 광고 조항에 이어 분석 조항을 넣었다.

붙이면서 받은 설정 파일이 기본적으로 커밋(저장소에 올리는 것)에서 빠지도록 돼 있었다. Claude가 이 파일을 커밋해도 보안상 괜찮은지 따져 봐야 한다고 했다. 들어 보니 이 파일은 앱 설치 파일 안에 그대로 들어가서 앱을 뜯으면 누구나 볼 수 있다. 안에 든 값은 비밀 키가 아니라 앱을 알아보는 식별자이고, 접근은 서버 쪽 규칙이 막는다. 오히려 빼 두면 새로 내려받아 빌드했을 때 분석이 조용히 꺼진 채로 나간다. 앱은 정상으로 돌아서 눈치채기 어렵다.

그래서 설정 파일은 커밋하기로 했다. 서명 키(앱이 내 것임을 증명하는 키)는 다르다. 유출되면 남이 내 앱인 척 업데이트를 올릴 수 있으니 계속 빼 두기로 했다.

비밀인지는 “비밀스러워 보이는가”가 아니라 “이걸 가진 사람이 무엇을 할 수 있는가”로 가른다
괜히 숨기면 그것대로 조용한 고장이 생긴다

일일 접속 보상

상자 아홉 개 중 하나를 고르게 했다

일일 접속 보상으로 상자 아홉 개 중 하나를 고르게 했다. 코인 50~200, 아이템 각 2개, 하트 무제한 10·30분이 나온다.

보상을 언제 정할지는 내가 정했다. UE5로 가위바위보를 만들 때 배운 게 있었다. 가챠 같은 뽑기는 결과가 시작할 때 이미 정해져 있고, 연출은 플레이어가 그걸 나중에 알게 해 줄 뿐이다.

그래서 상자를 누르는 순간 보상을 뽑아 바로 저장하고, 상자가 뒤집히는 연출은 그 결과를 보여 주기만 하게 했다. 연출 도중에 뒤로가기를 누르거나 앱을 꺼도 보상은 이미 정해져 저장돼 있으니 다시 고를 틈이 없다. 플레이어 입장에서는 결과가 언제 정해졌는지 구분되지 않는다. 고르는 재미는 “내가 골랐다”는 감각과 열어 보는 연출에서 온다.

플레이어가 구분할 수 없는 차이라면 구멍이 적은 쪽을 고른다
재미가 어디서 오는지 알면 구현을 단순하게 할 여지가 생긴다

무제한 하트는 보여야 쓴다

보상 중 하나가 “하트 무제한 30분”이다. 그 시간 동안은 레벨에 들어가도 하트를 안 쓴다. 그런데 화면에 안 보이면 받은 줄 모른다. 무제한인데도 하트를 아끼느라 안 하게 된다.

그래서 상단의 하트 숫자를 ∞와 남은 시간으로 바꾸고 강조색을 주라고 했다. 무제한이 남아 있는데 또 받으면 덮어쓰지 않고 뒤에 이어 붙인다. 덮어쓰면 30분짜리가 10분짜리로 줄어든다.

새 상태를 줬으면 눈에 보이게 한다. 안 보이는 혜택은 없는 혜택과 같다
같은 혜택이 겹치면 이어 붙인다. 두 번째 보상이 첫 번째를 깎으면 벌이 된다

채도를 올렸더니 크루아상이 빨개졌다

Kenney 도안이 전체적으로 칙칙해서 채도를 1.3배 올렸다. 그랬더니 크루아상이 구운 갈색에서 주황빛 빨강이 됐다.

크루아상은 원래 채도가 0.6으로 이미 진한 편이었는데 곱하기만 하니 0.8까지 올라갔다. 상한을 둬서 연한 색만 올리고 진한 색은 그대로 두게 했다. 되돌릴 때는 계산으로 역산하면 원본이 정확히 복원되지 않아서, 원본 이미지 178장을 처음부터 다시 처리했다.

전체에 같은 배율을 곱하면 이미 진한 것이 넘친다. 일괄 보정에는 상한을 둔다
보정은 원본에서 다시 하는 것이지 결과를 거꾸로 푸는 것이 아니다. 원본은 늘 남겨 둔다

Series: Today I Learn