대니
danny's blog@dannywon_dev
발행 132 · 대기 181

1인 개발자. 클로드 코드를 팀처럼 굴린다. 매일 겪은 것만 쓴다.

← 클로드 코드

window.prompt() 한 줄에 브라우저 자동화가 멈췄다

네이티브 대화상자는 메인 스레드를 멈춘다. CDP 연결이 30초 타임아웃으로 끊긴 이유였다.

버튼을 클릭하는 명령을 보냈는데 화면이 그대로 멈춰 있다. 다음 명령을 보내면 CDP 연결이 30초 타임아웃으로 응답이 없다는 에러가 돌아온다. 클릭도 스크린샷도 전부 같은 자리에서 멈춘다.

2026-08-24, nodnod admin 콘솔의 플로어맵 에디터를 새로 만들면서 "네모를 템플릿으로 저장하기" 기능을 넣었다. 저장 버튼을 누르면 이름을 물어봐야 해서 제일 짧은 길로 갔다.

window.prompt("템플릿 이름", 기본값)

코드를 짜고 브라우저 자동화로 직접 눌러 테스트했다. 버튼을 클릭하는 순간 멈췄다. 결국 내가 화면을 직접 보고 그 대화상자를 닫아줘서야 복구됐다.

사람이 쓰는 화면이면 아무 문제가 없었다

window.prompt() 는 자바스크립트에서 가장 오래된, 가장 간단한 입력 받기 방법이다. 한 줄이면 되고 스타일링 걱정도 없다. 마우스를 쓰는 사람 앞에서는 문제가 없다 — 대화상자가 뜨고, 타이핑하고, 확인을 누르면 그만이다.

문제는 이 화면을 테스트하는 주체가 사람이 아니라 브라우저를 원격으로 조작하는 에이전트였다는 점이다. window.prompt()·confirm()·alert() 같은 네이티브 대화상자는 브라우저 메인 스레드를 통째로 멈춘다. 페이지의 다른 자바스크립트 실행이 그 순간 정지한다.

사람에게는 "잠깐 멈추고 응답을 기다리는 평범한 UI"지만, 원격 제어 프로토콜 입장에서는 응답할 수 없는 상태다. 그 프로토콜로 들어오는 다음 명령은 전부 그 자리에 쌓인다. 그래서 30초 타임아웃이 나왔다.

관례는 이미 레포 안에 있었다

걸린 건 이 레포에 이미 이 문제를 피해가는 관례가 있었다는 점이다. 삭제 확인 같은 곳엔 네이티브 confirm() 대신 직접 만든 openConfirmModal() 컴포넌트를 쓰고 있었다. 화면 안에 그려지는 진짜 UI라 메인 스레드를 막지 않는다.

그런데 이번엔 새 기능을 급하게 추가하면서 그 관례를 안 보고 제일 빠른 길로 갔다.

바꾼 것

window.prompt() 를 없애고, 화면 안에 뜨는 텍스트 입력칸 + 저장/취소 버튼으로 바꿨다. React state 하나(namingTemplate)로 입력 모드를 켜고 끄는 정도였다. 원래도 어려운 일이 아니었다. 다시 테스트하니 자동화로도, 직접 눌러도 똑같이 됐다.

AI가 실제로 클릭해가며 테스트할 화면이라면, 그 화면에서 쓸 수 있는 UI 부품 목록이 사람이 쓰는 화면보다 좁아진다. 네이티브 대화상자는 가장 먼저 걸리는 함정이다 — 코드 한 줄로 넣기 쉬운 만큼, 넣는 순간 그 화면을 테스트하던 손을 멈춰 세운다.

← 목록으로