프론트를 AI로 짜면서 MSW 핸들러를 상황마다 고쳐야 했던 문제를 풀려고 만든 cuesheet는, 핸들러마다 응답을 여러 개 이름 붙여 두고 URL로 고르게 한다. /?cue=getCoupons:Empty, delay:1500 식 링크로 빈 목록·500 에러·응답 지연·오프라인을 전환하며, Playwright MCP를 붙인 AI에게 링크를 열어 확인시키거나 QA가 화면 패널에서 골라 Copy URL로 버그 제보에 첨부한다. 기존 MSW 핸들러를 그대로 쓰고 MSW 공식 Dynamic mock scenarios 가이드에서 출발했다.
새 서비스에서 프론트를 AI로 짜는데 백엔드 API가 늦게 나오고, 나와도 빈 목록·에러 같은 상태를 실제 서버에서 만들기 어려웠다. MSW로 목을 붙이니 이번엔 상황을 바꿀 때마다 핸들러 코드를 응답 []로, 500으로 고쳤다가 되돌리는 일이 반복됐다. AI에 코드를 맡겨도 그 화면이 상황별로 맞는지는 결국 사람이 하나씩 띄워 확인해야 했다.
cuesheet는 핸들러마다 여러 응답을 넣고 이름을 붙인 뒤 링크로 선택하게 한다. /?cue=getCoupons:Empty, /?cue=getCoupons:Server error,delay:1500처럼 응답 지연·현재 시각·오프라인까지 같은 링크에 담을 수 있다. 덕분에 AI에게 "이 링크들 열어서 확인해"라고 맡길 수 있고, 제작자는 Playwright MCP를 붙여 쓴다. QA는 화면 구석 패널에서 클릭으로 상황을 고르고 Copy URL로 링크를 복사해 버그 제보에 첨부한다.
기존 MSW 핸들러를 그대로 재사용하며 MSW 공식 Dynamic mock scenarios 가이드가 출발점이다. 라이브러리 자체는 AI로 많이 만들었지만 문제와 해결 흐름은 실제 업무에서 겪은 것으로, 상태를 URL로 고정해 에이전트 검증에 넘기는 패턴이 핵심이다.