입력 폼이 모바일에서 제대로 안 될 때 확인할 것

모바일 앱이나 반응형 사이트에서 입력 폼이 이상하게 작동할 때가 있다. 보통 몇 가지 원인으로 좁혀진다.

모바일 뷰포트 확인

브라우저의 개발자 도구에서 모바일 크기로 시뮬레이션해서 입력 필드가 제대로 보이는지 본다. 특히 키보드가 올라올 때 입력 필드가 가려지지 않는지 확인해야 한다.

# 빌드하고 모바일 기기나 에뮬레이터에서 직접 테스트
npm run build
npm run start

input 타입 설정

HTML input의 type 속성이 모바일 키보드 종류에 맞춰져 있는지 확인한다. 이메일 입력에는 type="email", 전화번호에는 type="tel"을 줘야 해당 키보드가 나타난다.

<input type="email" placeholder="[email protected]" />
<input type="tel" pattern="[0-9-]*" />

포커스와 자동스크롤

input에 포커스가 갔을 때 키보드가 올라오면서 입력 필드가 화면 아래로 나간다. JavaScript에서 입력 필드로 자동 스크롤되도록 처리해줘야 한다.

배포 후 실제 기기에서 여러 번 테스트해보는 게 중요하다. 개발자 도구의 시뮬레이션과 실제 모바일 기기는 다르게 작동할 수 있다. 사용자 피드백이 들어오면 어느 기기의 어떤 OS 버전에서 문제가 나는지 기록해두면, 비슷한 문제를 다시 만났을 때 빠르게 해결할 수 있다.