폼 입력이 불편해질 때 확인하는 흐름

사용자가 "이 폼이 불편해"라고 말할 때는 보통 어느 부분이 문제인지 불명확하다. 검색해서 들어온 상황이라면 바로 재현 조건부터 잡는 편이 빠르다.

한 줄 요약부터 정하기

중요한 건 입력 자체보다 재현 가능한 단서를 남기는 것이다. 모바일 화면을 확인하면 다음으로 봐야 할 범위가 줄어난다.

먼저 봐야 할 파일 찾기

중요한 건 입력 문제 자체보다 재현 가능한 단서를 남기는 것이다. 상태 이름을 확인하면 다음으로 볼 범위가 확 줄어난다.

• 먼저 볼 값: 상태 이름
• 비교할 값: 정상 상태의 프론트엔드 UX
• 남겨둘 기록: 명령 출력, 응답 코드, 수정한 설정

이벤트 흐름부터 그려보기

정상 상태를 먼저 정해두는 게 좋다. 그래야 렌더링이 바뀌는 조건을 빠르게 판단할 수 있다.

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

브라우저에서 직접 확인하기

프론트엔드는 환경 차이가 자주 숨어 있다. 이벤트 흐름이 애매하면 다른 부분을 고쳐도 결과가 바뀌지 않을 수 있다.

모바일 화면 점검하기

입력 주변 문제가 또 나오면 확인 순서를 고정해두는 게 좋다. 감으로 접근하면 같은 실수를 반복한다.

최종 확인 체크리스트

1. 원래 증상이 같은 조건에서 다시 나는지 확인한다.
2. 로그나 응답에서 바뀐 부분을 한 줄로 설명해본다.
3. 공개 화면, 빌드 결과, 실제 요청 중 하나로 마지막 확인을 한다.

프론트엔드 작업은 로컬과 운영의 차이가 자주 숨어 있다. 작은 확인을 남겨두면 다음 문제를 훨씬 짧게 처리할 수 있다.