Dumb Game Lab

블로그 · 개발 이야기

개발 일지 · 리뷰 고침

«휴대폰 비율에 안 맞아요» 리뷰가 알려 준 것

Justin Lee, Dumb Game Lab ·

PC방 키우기 게임 화면. 아이소메트릭 PC방 안에 손님들이 PC 앞에 앉아 있고, 화면 맨 아래에 «상점», 번개 모양 «가속», «전단지 돌리기» 단추가 한 줄로 놓여 있다

안드로이드 15부터는 targetSdk 35 이상인 앱의 화면이 상태바와 내비게이션 바 밑까지 강제로 깔립니다. 웹뷰로 그리는 Capacitor 앱이라면 capacitor.config.json의 android.adjustMarginsForEdgeToEdge를 "force"로 켜서 웹뷰를 시스템 바 안쪽으로 내리고, 바 뒤로 비치는 창 배경을 앱 바탕색으로 칠하면 하단 버튼이 다시 보입니다. 하단 여백을 픽셀 숫자로 더하는 땜질은 기기마다 바 높이가 달라서 맞지 않았습니다.

별 하나와 함께 온 리뷰

2026년 11월 2일, 고양이 PC방 키우기 Google Play 페이지에 별점 1짜리 한국어 리뷰가 하나 달렸습니다. 원문은 이렇습니다.

«게임은 재밌는데, 휴대폰 비율에 안 맞아요. 안 옮겨지는 가구들도 많아요. 게임이 휴대폰 비율만 맞아도 보일 버튼이 많을 것 같아서 아쉽네요. 재밌으나 게임하기 불편해서 수정되면 할게요»

그날 바로 사과 답글을 달았고, 원인도 같은 날 찾았습니다. 이 글은 그 하루 동안 무엇을 찾았고 무엇을 고쳤는지, 그리고 아직 무엇을 모르는지에 대한 기록입니다.

별 하나의 이유는 재미가 아니라 단추였습니다

리뷰를 다시 읽으면 «재밌다»가 두 번 나옵니다. 게임이 싫어서 별 하나를 준 게 아니었습니다. 보여야 할 버튼이 안 보이고, 가구가 안 옮겨져서 못 하겠다는 얘기였습니다.

이런 리뷰는 고치는 쪽에서 보면 고마운 리뷰입니다. 재미가 없다는 말은 어디를 고쳐야 할지 알려 주지 않지만, 버튼이 안 보인다는 말은 화면의 어느 줄을 봐야 하는지 짚어 줍니다. 마지막 문장도 «수정되면 할게요»였습니다. 고치면 돌아올 사람이라는 뜻입니다.

같은 무렵 «가구가 안 옮겨져요»라는 제보도 따로 와 있었습니다. 따라가 보니 원인이 같아서 두 티켓을 하나로 합쳤습니다. 가구를 고르면 화면 아래에 이동, 회전, 보관, 팔기 단추가 한 줄로 뜨는데, 그 줄이 통째로 가려져 있었습니다.

PC방 키우기의 «게임» 탭 화면. 설치된 게임과 잠긴 게임 카드가 격자로 놓여 있고, 화면 맨 아래에 «상점» 단추와 «전단지 돌리기 10/10» 단추가 있다
맨 아래 «상점»과 «전단지 돌리기»가 있는 이 줄이 내비게이션 바 밑으로 깔렸습니다.

안드로이드 15에서 바뀐 것

안드로이드 15부터 targetSdk 35 이상으로 빌드한 앱은 edge-to-edge가 강제됩니다. 앱 화면이 위쪽 상태바와 아래쪽 내비게이션 바 밑까지 늘어나고, 그 밑에 깔린 부분을 피하는 건 앱이 알아서 해야 합니다. 이 앱은 targetSdk 36이라 그대로 해당됐습니다.

네이티브 앱이라면 시스템이 알려 주는 인셋 값을 받아 여백을 잡으면 됩니다. 우리 게임은 Capacitor 7 위에서 웹뷰 안에 그리는 구조인데, 웹뷰 쪽에서 읽는 env(safe-area-inset-bottom) 값이 0으로 들어왔습니다. 웹 코드는 아래에 바가 없다고 믿고 탭바를 화면 맨 끝에 붙였고, 그 위에 내비게이션 바가 덮였습니다.

바 높이는 내비게이션 방식과 기기마다 다르니, 같은 앱이라도 사람마다 가려지는 정도가 달랐을 것으로 짐작합니다. 직접 재 본 값은 아닙니다.

하단 여백 24px 땜질이 틀렸던 이유

사실 이 문제의 흔적은 전에도 있었습니다. 코드에 하단 여백 24px을 더하는 줄이 들어가 있었습니다. 아래가 가려 보여서 그만큼 올려 둔 땜질이었습니다.

숫자 하나로는 안 됩니다. 내비게이션 바 높이는 기기마다, 내비게이션 방식마다 다릅니다. 바가 24px 보다 두꺼우면 여전히 가리고, 바가 없는 환경에서는 쓸데없는 빈칸이 생깁니다. 땜질이 한 기기를 고치는 동안 다른 기기에서는 그대로 깔려 있었던 셈입니다.

그래서 이번에는 24px 줄을 지웠습니다. 여백을 웹 코드가 짐작하지 않고, 웹뷰가 처음부터 바 안쪽에만 그려지게 바꾸는 쪽을 골랐습니다.

고친 방법: 설정 한 줄과 바 색 주입, 그리고 검사

수정은 11월 2일, 리뷰가 온 그날 머지했습니다. 타이쿤 앱 6개와 새 게임을 찍어 내는 템플릿에 같은 변경을 넣었습니다.

첫째는 capacitor.config.json의 android.adjustMarginsForEdgeToEdge를 "force"로 켠 것입니다. 이 값이 웹뷰를 시스템 바 안쪽으로 내립니다. "auto"를 두지 않은 이유는, auto는 테마에 edge-to-edge 옵트아웃 설정이 있으면 꺼지는데 안드로이드 16은 그 옵트아웃을 무시하기 때문입니다. 안드로이드 14 이하에서는 인셋이 0이라 force로 둬도 달라지는 게 없습니다.

둘째는 바 색입니다. 웹뷰를 안쪽으로 내리면 이번엔 바 뒤로 창 배경이 비치는데, 기본값이 흰색이라 어두운 게임 위아래에 흰 띠가 생깁니다. 그래서 빌드할 때 안드로이드 테마의 창 배경과 상태바, 내비게이션 바 색을 앱 바탕색으로 칠하는 스크립트를 넣었습니다. 바탕이 어두우면 바 아이콘은 밝게 둡니다. android 폴더는 sync 때마다 다시 써지기 때문에, 이 스크립트가 sync 뒤에 꼭 돌도록 순서를 묶었습니다.

셋째는 재발 방지입니다. 앱마다 이 설정이 켜져 있는지 보는 검사를 만들어 커밋 때마다 돌게 했습니다. 아직 못 켠 다른 장르 앱 7개는 사유를 적어 장부에 올렸고, 이 장부는 줄어드는 쪽으로만 고칠 수 있습니다. 새 앱이 설정 없이 들어오면 검사가 막습니다.

  • capacitor.config.json에 android.adjustMarginsForEdgeToEdge: "force"
  • 창 배경과 시스템 바 색을 앱 바탕색으로 주입(sync 뒤에 실행)
  • 하단 여백 24px 땜질 삭제
  • 앱마다 설정 여부를 보는 검사와, 줄어들기만 하는 예외 장부

아직 못 잰 것

하나는 실기기 확인입니다. 우리가 가진 테스트 폰은 안드로이드 14라서 이 증상이 애초에 나지 않습니다. 고친 빌드의 하단 탭바를 안드로이드 15 기기에서 직접 눈으로 보는 일은 아직 남아 있습니다.

다른 하나는 결과 숫자입니다. 수정 뒤에 평점이 어떻게 됐는지, 그 리뷰어가 다시 들어왔는지는 아직 못 쟀습니다. 고친 지 사흘밖에 안 됐고, 지금 쓸 수 있는 숫자가 없습니다. 숫자가 나오면 이 글을 고치겠습니다.

리뷰 35건을 나눠 보니

이번 일을 계기로 PC방 알바 앱에 쌓인 리뷰 35건을 내용별로 나눠 봤습니다.

가장 많은 건 게임에 아예 못 들어간다는 진입 실패 27건이었습니다. 다만 10월 14일 이후로는 새로 들어온 진입 실패 리뷰가 0건입니다. 지난번에 고친 것이 버티고 있다는 뜻으로 읽고 있습니다.

광고 얘기 2건 중에는 광고를 막 끝낸 직후에 리뷰를 써 달라는 창이 뜨는 문제가 있었습니다. 광고를 보고 난 바로 그 순간은 리뷰를 부탁하기에 가장 나쁜 때입니다. 11월 3일에 광고 뒤 10분 안에는 리뷰를 묻지 않도록 바꿨습니다.

분류건수
진입 실패27
버벅임3
광고2
저장1
조작1
기타1

FAQ

안드로이드 15에서 앱 하단 버튼이 내비게이션 바에 가려지는 이유는?

안드로이드 15부터 targetSdk 35 이상인 앱은 화면이 시스템 바 밑까지 강제로 늘어나는 edge-to-edge가 적용됩니다. 앱이 바 높이만큼 여백을 잡지 않으면 맨 아래 단추가 내비게이션 바 밑에 깔립니다.

Capacitor 앱에서 adjustMarginsForEdgeToEdge는 어떻게 설정하나요?

capacitor.config.json의 android 항목에 adjustMarginsForEdgeToEdge를 넣습니다. PC방 키우기는 "force"로 켰습니다. "auto"는 테마에 edge-to-edge 옵트아웃이 있으면 꺼지는데, 안드로이드 16은 옵트아웃을 무시해서 force 쪽을 골랐습니다.

하단 여백을 픽셀로 더하면 안 되나요?

기기마다, 내비게이션 방식마다 바 높이가 달라서 숫자 하나로는 맞지 않습니다. 이 앱도 24px을 더하는 땜질이 있었지만 두꺼운 바에서는 계속 가렸고, 이번에 지웠습니다.

웹뷰를 바 안쪽으로 내렸더니 위아래에 흰 띠가 생겨요.

바 뒤로 창 배경이 비치는 것입니다. 기본 창 배경이 흰색이라 그렇습니다. 안드로이드 테마의 창 배경과 상태바, 내비게이션 바 색을 앱 바탕색으로 맞추면 사라집니다. Capacitor는 sync 때 android 폴더를 다시 쓰니, 색을 넣는 단계는 sync 뒤에 둬야 합니다.

다른 글

새 게임과 작은 소식을 한 달에 한 번쯤 보냅니다.

다른 언어English한국어日本語繁體中文