회사에서 새 서비스를 만들면서 프론트 코드의 상당 부분을 AI로 짜고 있습니다. 새 제품이라 백엔드도 같이 개발되는데, API가 프론트보다 늦게 나오는 경우가 많고, 나와도 실제 서버에서는 빈 목록이나 에러 같은 상황을 만들기가 어려웠습니다. 그래서 프론트를 독립적으로 빠르게 개발하려고 MSW를 도입했습니다.
그런데 MSW로 옮기니 이번엔 상황을 바꿀 때마다 핸들러 코드를 고쳐야 했습니다. 빈 목록을 보려면 응답을 []로 고치고, 에러를 보려면 500으로 고치고, 보고 나면 다시 되돌리고... 이걸 계속 반복하게 되더라고요.
AI한테 코드를 맡겨도 마찬가지였습니다. 코드는 금방 짜 오는데 그 화면이 상황별로 맞게 나오는지는 결국 제가 하나하나 띄워 봐야 했습니다. QA분들이 "목록이 비었을 때 화면 보고 싶어요" 하시면 그것도 제가 만들어 드려야 했고요.
그래서 핸들러마다 응답을 여러 개 넣어 두고 이름을 붙인 다음, 링크로 고를 수 있게 만들었습니다. 응답 지연, 현재 시각, 오프라인도 같은 링크에 넣을 수 있습니다.
/?cue=getCoupons:Empty /?cue=getCoupons:Server error,delay:1500이렇게 하니까 AI한테 "이 링크들 열어서 확인해 봐" 하고 맡길 수 있게 됐습니다. 저는 Playwright MCP를 붙여서 씁니다. QA분들은 화면 구석 패널에서 클릭으로 상황을 고르고, Copy URL로 링크를 복사해서 버그 제보에 같이 붙여 주십니다.
기존 MSW 핸들러는 그대로 쓸 수 있고, MSW 공식 문서의 Dynamic mock scenarios 가이드에서 출발했습니다. 라이브러리는 AI로 많이 만들었고 블로그 글도 AI 도움을 받아 다듬었지만, 문제와 해결 과정은 실제로 겪은 것입니다. 회사 일이라 화면은 쿠폰 예시로 바꿨습니다. 써 보시고 부족한 데가 보이면 피드백 주시면 감사하겠습니다!
- 저장소: https://github.com/GUMBOKIM/cuesheet
- 블로그: https://blog.daeheekim.dev/posts/ai-verified-frontend/