모바일에서 폼 입력이 불편할 때

모바일 폼 문제는 보통 뷰포트 설정, 폰트 크기, 터치 영역 크기가 복합적으로 작용한다. 큰 문제로 보이면 모든 파일이 의심스러워지지만 체계적으로 접근하면 원인을 빠르게 찾을 수 있다.

가장 먼저: 어떤 상황에서 불편한가

입력 필드가 작거나, 키보드가 뒤덮거나, 레이아웃이 틀어질 때 각각 원인이 다르다. 정확히 어떤 상황인지 먼저 파악한다.

뷰포트 메타 태그 확인

HTML의 <meta name="viewport"> 태그가 제대로 설정돼 있는지 확인한다. 너비를 고정 픽셀로 설정하면 모바일에서 스케일이 맞지 않을 수 있다.

# HTML에서 viewport 설정 확인
npm run build
# 빌드된 HTML의 head 확인
grep -E 'viewport|meta' dist/index.html

폼 입력 필드의 최소 크기

iOS와 Android는 터치 입력 필드의 최소 크기 기준을 가지고 있다. 너무 작으면 입력이 어렵거나 즉시 확대될 수 있다. 폰트 크기도 함께 확인한다.

모바일 특화 입력 유형

입력 유형에 따라 키보드 타입이 달라진다. type="email"을 사용하면 이메일 키보드가 뜨고, type="tel"을 사용하면 숫자 키보드가 뜬다. 입력 필드의 type 속성이 제대로 설정돼 있는지 확인한다.

키보드 위의 입력 필드

화면이 작을 때 소프트 키보드가 입력 필드를 가리면 불편하다. 입력 중에 필드가 뷰 범위에 있는지 확인하고, 필요하면 자동으로 스크롤하게 한다.

# 실제 모바일 기기나 에뮬레이터에서 테스트
# 또는 브라우저 개발자도구의 모바일 뷰 사용

다양한 디바이스에서 테스트

로컬 개발 환경에서 완벽해도 실제 모바일 기기에서는 다를 수 있다. 최소 2~3개 기기(iOS, Android, 다양한 화면 크기)에서 직접 테스트한다. 특히 느린 기기에서는 렌더링 성능도 함께 확인한다.

완료 후 기록

모바일 폼 개선을 완료했다면 이렇게 확인한 항목들을 기록해둔다. 다음에 새 폼을 만들 때 같은 실수를 반복하지 않을 수 있다.