내 폰에서만 확인하고 앱을 배포했다

앱을 제대로 확인하지 않고 배포했다가 난감했던 적이 있다. 아예 실행도 안 해본 건 아니었다. 내 폰에서는 확인했다. 문제는 거기서 확인을 끝냈다는 데 있었다.

다른 폰에서는 화면과 배치가 이상했다. 배포하기 전에 다른 폰에서도 해봤어야 했는데 내 폰에서 본 모습만으로 넘어갔다. 이번에는 그때 놓친 확인을 적어보려 한다.

확인한 기기는 내 폰 하나였다

앱을 만들면 내 폰으로 확인하는 게 가장 편하다. 손에 있는 기기이고 화면이 어떻게 보여야 하는지도 익숙하다. 같은 폰으로 계속 보니 내가 만든 화면을 판단하는 기준도 그쪽에 맞춰지기 쉽다.

그때 내가 확인한 범위는 내 폰 하나였다. 다른 폰에서 같은 화면을 보는 단계가 빠졌고 그 상태로 앱을 배포했다. 내 폰에서 확인했다는 사실까지는 맞지만 다른 기기에서도 괜찮다는 것까지 확인한 건 아니었다.

배포하고 나서 다른 폰의 화면 배치가 이상한 걸 알게 되니 난감했다. 기능을 더 넣을지 고민하기 전에 이미 만든 화면이 다른 폰에서 어떻게 보이는지부터 봤어야 했다.

다른 폰에서도 같은 화면을 열어봤어야 했다

돌아보면 다른 폰에서 앱을 한 번 켜보는 것뿐 아니라 내 폰에서 확인한 화면을 똑같이 열어봤어야 했다. 그래야 두 기기에서 무엇이 다르게 보이는지 비교할 수 있다.

화면 배치를 확인할 때는 기종 이름만 바꾸는 것보다 앱이 쓸 수 있는 화면 공간을 함께 보는 게 좋겠다. Flutter의 적응형 화면 안내도 기기 종류보다 사용 가능한 창 크기를 기준으로 배치를 정하도록 설명한다.

배포 전에 화면을 점검한다면 아래 조건으로 같은 화면을 비교해 볼 것 같다.

바꿔 볼 조건	같은 화면에서 확인할 것
화면 폭이 더 좁은 기기	글자와 버튼이 영역 밖으로 밀리거나 서로 겹치지 않는지
화면 폭이 더 넓은 기기	내용이 지나치게 벌어지거나 한쪽으로 쏠리지 않는지
시스템 글자 크기를 키운 상태	글자가 잘려서 읽기 어렵거나 버튼 이름이 사라지지 않는지
입력 화면에서 키보드를 연 상태	입력 중인 칸과 다음에 눌러야 할 버튼에 접근할 수 있는지
내용이 길거나 항목이 많은 상태	아래쪽 내용까지 스크롤하고 마지막 버튼을 누를 수 있는지

우선 앱에서 자주 쓰는 화면을 고르고 조건을 바꿔가며 같은 순서로 열어보면 좋겠다. 앱에서 쓰지 않는 화면이나 조건은 빼고 실제 사용하는 흐름을 따라 보면 된다. 첫 화면이 잘 보이는지에 더해 입력하거나 스크롤한 뒤에도 다음 동작을 할 수 있는지 확인하는 식이다.

바이브 코딩으로 만들 때도 확인할 조건은 내가 정한다

첫 앱을 만들 때는 Cursor의 도움을 많이 받았다. AI에게 화면을 만들거나 고치게 부탁할 수 있지만 어떤 기기와 어떤 상태에서 확인했는지는 따로 남겨야 한다.

다른 폰에서 화면이 이상하다고 하면 보이는 모습과 재현 조건부터 전달하는 게 좋겠다. 앱 이름이나 계정 정보는 가리고 문제 화면을 보여주되 기기, 화면 방향, 글자 크기, 문제가 나온 순서를 함께 적는 식이다. 구체적인 조건 없이 화면을 고쳐 달라고만 하면 수정 전후를 비교하기도 어렵다.

아래는 배포 전에 AI에게 점검을 맡길 때 쓸 요청 예시다.

앱을 배포하기 전에 화면 배치를 점검하고 싶어.

프로젝트에서 실제 사용하는 주요 화면과 이동 흐름을 먼저 찾아줘.
화면 폭이 좁을 때와 넓을 때, 시스템 글자 크기를 키웠을 때,
입력 화면에서 키보드가 열렸을 때 확인할 항목을 정리해줘.

화면을 전부 다시 만들기보다 문제가 의심되는 부분부터 짚어줘.
실제로 재현해서 확인한 문제와 코드만 보고 추정한 문제는 구분해줘.
수정한 뒤에는 문제가 생긴 조건과 원래 확인했던 조건에서 다시 확인해줘.
실행하지 못한 기기나 화면은 확인했다고 쓰지 마.

AI가 점검 결과를 적어줬더라도 어떤 조건에서 실제로 실행했는지 봐야 한다. 코드만 읽고 예상한 결과와 기기에서 직접 확인한 결과를 섞어 두면 확인하지 않은 화면을 확인한 것처럼 넘기기 쉽다.

수정한 화면은 원래 폰에서도 다시 본다

다른 폰에서 이상한 화면을 고친다면 그 조건에서 다시 열어보는 게 먼저다. 그다음에는 원래 잘 보였던 내 폰에서도 같은 화면을 확인해야겠다. 한쪽에 맞춘 수정이 다른 쪽 배치에 영향을 주지는 않았는지 보는 과정이다.

Flutter로 만든 앱이라면 자동 테스트도 확인을 도울 방법이다. Flutter 테스트 안내는 위젯의 모습과 상호작용을 확인하는 테스트와 앱 전체 흐름을 확인하는 통합 테스트를 나눠 설명한다. 내 앱에 맞는 화면 조건을 테스트에 넣는 방법도 생각해 볼 수 있다.

내 폰에서는 확인했다. 그런데 다른 폰에서는 화면 배치가 이상했고 이미 배포한 뒤라 난감했다. 같은 화면을 다른 폰에서도 한 번 봤어야 했다는 게 이번 배포에서 남은 후회다.