React 폼 입력을 모바일에서 테스트하는 방법

React 컴포넌트를 혼자 개발할 때 가장 놓치기 쉬운 부분이 모바일 입력 경험이다. 데스크톱 브라우저에서 잘 보이는 폼도 모바일 키보드가 올라왔을 때 레이아웃이 깨질 수 있다.

모바일 화면부터 확인하기

React UX 문제를 마주칠 때는 화면만 보고 판단하면 놓치는 값이 많다. 로그, 응답, 설정 중 하나를 증거로 잡아야 한다.

npm run build
# 브라우저에서 모바일 폭과 키보드 입력 흐름을 확인한다

브라우저 개발자 도구에서 모바일 뷰포트로 전환한 후 직접 입력해보면 문제가 빠르게 보인다.

이벤트 흐름을 단계별로 추적하기

React 폼이 제대로 동작하지 않을 때는 입력 이벤트 흐름을 끊어서 봐야 한다. 특히 onChange 핸들러와 상태 업데이트가 제대로 연결되었는지 확인해야 한다.

• 먼저 볼 것: 모바일 뷰포트의 입력 필드 렌더링
• 같이 비교할 것: 정상일 때의 입력 흐름
• 기록해둘 것: 입력값, 이벤트 발생 여부, 상태 업데이트 로그

수정 후 재확인하기

모바일에서 한 번 확인했다고 끝나는 게 아니다. 수정한 후 같은 입력 흐름으로 다시 테스트해야 한다.

1. 원래 증상을 모바일에서 재현해본다
2. 로그에서 입력 이벤트가 제대로 발생하는지 확인한다
3. 수정 후 공개 환경에서도 모바일로 다시 테스트한다

같은 실수를 반복하지 않기 위해

혼자 개발할수록 확인한 값과 바꾼 값을 따로 남기는 습관이 중요하다. 한 번에 여러 설정을 바꾸지 않으면 다음 번에도 빠르게 대응할 수 있다.