Recorder
클릭 녹화해서 자동화 코드 뽑기
해결하는 문제
반복되는 클릭·입력 순서를 자동으로 재생하고 싶다.
개발자 도구의 Recorder 패널에서 내 클릭과 입력을 녹화해 재생하고, Puppeteer 자동화 코드로 내보냅니다.
서버 의존도
Node·Python·로컬 AI 서버처럼 브라우저 밖의 실행 환경이 필요합니다.
브라우저만브라우저 + CDN브라우저 + API 키브라우저 + 엣지 함수서버 필요
데이터가 흐르는 길
무엇이 들어와서 브라우저 안에서 어떻게 바뀌어 나가는지 정리했습니다.
들어오는 것나의 클릭·입력
브라우저가 하는 일단계별로 기록하고 재생
나오는 것재생 가능한 흐름, 자동화 코드
쓰는 브라우저 기술
DevTools RecorderPuppeteer 내보내기
라이브러리와 모델
Puppeteer (내보낸 코드 실행 시)
바꿀 수 있는 옵션
- 단계 편집·기다리기 조건
- 선택자 종류
자주 막히는 곳
- 화면이 바뀌면 녹화한 선택자가 깨진다
- 내보낸 코드는 Node 환경이 있어야 실행된다
이 능력으로 만들 수 있는 서비스
같은 기술을 AI 서비스, 웹 서비스, 피지컬 AI로 넓힌 예시입니다.
AI 서비스
- 녹화 결과를 AI에 주고 안정적인 코드로 다듬기
웹 서비스
- 신규 직원 업무 시연 기록
피지컬 AI
- 장비 웹 설정 반복 작업 자동화
넓히는 방법
- Playwright로 옮겨 정기 실행
- 테스트 시나리오 문서화
지원 브라우저
PC 크롬·엣지된다
맥 사파리안 된다
안드로이드 크롬안 된다
아이폰 사파리안 된다
코딩 에이전트에게 줄 프롬프트
복사해서 Claude, Codex, Cursor 같은 코딩 에이전트에 그대로 붙여 넣습니다.
Recorder로 녹화해 내보낸 아래 Puppeteer 코드를 화면이 조금 바뀌어도 덜 깨지게 고쳐줘.
같은 분류의 능력
06 브라우저 자동화·수집에 속한 다른 능력입니다.
무료로 보는 것
체험 페이지, 한 줄 설명, 미리보기 영상
스킬팩 구성
full.html, skill.md, prompt.md, rules.md, customize.md, troubleshooting.md, 예시 데이터, agent-instructions.md