PC 에디터에서 잘 되던 로그인 입력창이 모바일에서는 말을 듣지 않았다. 아이디를 입력한 뒤 비밀번호 칸을 눌렀는데 키보드가 닫히거나, 입력 커서는 옮겨갔지만 글자가 이전 칸에 들어가는 경우가 있었다. 엔터 키로 다음 칸을 선택하는 기능까지 더해지니 재현 순서도 매번 달라 보였다.
처음에는 Select()를 한 번 더 호출하면 해결될 것 같았다. 호출 횟수를 늘릴수록 잠깐 좋아지는 기기도 있었지만 화면이 열리는 타이밍에 따라 다시 실패했다. 포커스를 값 하나가 아니라 이벤트의 순서로 봐야 했다.
선택과 입력 활성화는 같은 일이 아니었다
Unity UI에서 오브젝트가 선택된 것과 모바일 키보드 입력을 받는 상태는 미묘하게 달랐다. 화면이 활성화되는 프레임에 바로 포커스를 주면 다른 UI 이벤트가 뒤에서 선택을 빼앗기도 했다.
private IEnumerator FocusNextFrame(TMP_InputField field)
{
yield return null;
field.Select();
field.ActivateInputField();
}
무조건 한 프레임 기다리는 게 모든 상황의 답은 아니지만, 레이아웃과 화면 전환이 끝난 뒤 실행돼야 하는 이유를 확인할 수 있었다.
이벤트가 두 번 연결돼 있지 않은지 봤다
프리팹을 복사하거나 화면을 다시 열 때 리스너를 계속 추가하면 한 번의 완료 이벤트에서 다음 칸 선택과 로그인 요청이 함께 실행될 수 있었다. 초기화할 때 기존 리스너를 제거하고 화면이 닫힐 때 정리했다.
idField.onSubmit.RemoveListener(OnIdSubmit);
idField.onSubmit.AddListener(OnIdSubmit);
void OnIdSubmit(string _)
{
StartCoroutine(FocusNextFrame(passwordField));
}
로그에는 현재 선택된 오브젝트와 입력 필드의 활성 상태를 같이 남겨 순서를 확인했다.
실제 키보드 동작을 기준으로 시험했다
마우스로 클릭하는 것만으로는 모바일 문제를 재현하기 어려웠다. 화면 첫 진입, 아이디 입력 후 다음 버튼, 비밀번호 표시 토글, 뒤로 가기로 키보드 닫기, 앱을 잠깐 백그라운드로 보낸 뒤 복귀하는 순서를 나눠 확인했다.
기기 키보드마다 완료 버튼의 이름과 동작이 조금 달랐다. 에디터 성공을 모바일 입력 완료로 볼 수 없다는 걸 다시 느꼈다.
작은 입력창에도 상태가 많았다
로그인 폼은 필드 두 개와 버튼 하나라 단순해 보였다. 하지만 선택된 UI, 활성 입력 필드, 가상 키보드, 화면 전환 상태가 함께 움직였다. 이 중 하나만 보고 수정하면 다른 기기에서 다시 어긋났다.
이 작업 뒤로 모바일 UI 문제를 볼 때 “클릭이 됐나?”만 확인하지 않는다. 어떤 이벤트가 어떤 순서로 포커스를 바꿨는지, 화면이 그때 입력 가능한 상태였는지를 살핀다. 눈에 보이는 커서 하나 뒤에도 여러 상태가 있다는 걸 배운 꽤 오래 걸린 수정이었다.