AI와 마이그레이션 작업을 실제 브라우저 검증으로 닫았습니다
요약
AI가 만든 변경과 App Router·React 업그레이드가 빌드 성공에 그치지 않도록 실제 사용자 흐름을 브라우저에서 재현하고 검증하는 E2E 루프를 적용했습니다.
맡은 일
- 브라우저 시나리오, 변경 전후 비교, 제약 환경의 API mocking과 검증 절차를 설계했습니다.
문제
- 빌드와 단위 테스트만으로는 실제 탐색, 입력, 상태 전환과 브라우저 동작이 깨졌는지 확인하기 어려웠습니다.
- AI가 변경을 빠르게 만들수록 사용자 흐름을 반복 검증하는 장치가 더 필요했습니다.
판단과 합의
- 수동 확인과 자동 테스트를 대립시키지 않고 반복 가능한 핵심 흐름부터 자동화했습니다.
- 네트워크 제약이 있는 환경에서도 프론트엔드 흐름을 검증할 수 있도록 API mocking을 사용했습니다.
실행
- Snapshot, reference와 code generation으로 현재 상태를 고정하고 변경 후 차이를 확인했습니다.
- 실제 브라우저에서 핵심 사용자 시나리오를 재현했습니다.
- TypeScript interface를 기준으로 API를 모킹해 외부 연결 없이도 UI 검증을 이어갔습니다.
- 테스트, 빌드, 코드 리뷰와 브라우저 검증을 하나의 완료 기준으로 연결했습니다.
결과
- 마이그레이션과 AI 생성 변경을 코드 작성에서 끝내지 않고 사용자 흐름 검증까지 닫는 기준을 만들었습니다.
- 정량 커버리지와 결함 감소 수치는 추가 확인 전까지 공개하지 않습니다.