$0.outerHTML
브라우저 콘솔 자동화
해결하는 문제
웹페이지의 반복 작업과 표 옮기기를 손으로 하기 지쳤다.
화면 캡처 대신 요소의 실제 구조를 AI에게 건네면, AI가 정확한 코드를 써서 반복 작업을 콘솔에서 처리합니다.
서버 의존도
서버 없이 브라우저 기본 기능만 씁니다.
브라우저만브라우저 + CDN브라우저 + API 키브라우저 + 엣지 함수서버 필요
데이터가 흐르는 길
무엇이 들어와서 브라우저 안에서 어떻게 바뀌어 나가는지 정리했습니다.
들어오는 것웹페이지 화면
브라우저가 하는 일요소 구조를 AI에 전달해 코드 작성, 콘솔에서 실행
나오는 것반복 작업 자동 처리, 표 데이터
쓰는 브라우저 기술
개발자 도구 콘솔$0querySelectorAllfetch
라이브러리와 모델
외부 라이브러리 없이 브라우저 기본 기능만 씁니다.
바꿀 수 있는 옵션
- 요소 복사 (Copy element)
- 주소의 페이지 번호 규칙
- CSV로 내보내기
자주 막히는 곳
- 화면 캡처만 주면 AI가 선택자를 추측해 틀린 코드를 쓴다
- 로그인이 필요한 데이터 수집은 약관과 권한을 먼저 확인해야 한다
이 능력으로 만들 수 있는 서비스
같은 기술을 AI 서비스, 웹 서비스, 피지컬 AI로 넓힌 예시입니다.
AI 서비스
- AI가 정확한 선택자로 수집 코드 작성
- 게시판 목록 수집 자동화
웹 서비스
- 반복 입력 자동화
- 웹 표를 엑셀로
피지컬 AI
- 장비 관리 웹 화면의 값 수집
넓히는 방법
- 자주 쓰는 코드를 스니펫으로 저장
- 북마클릿 버튼으로 만들기
지원 브라우저
PC 크롬·엣지된다
맥 사파리된다
안드로이드 크롬안 된다
아이폰 사파리안 된다
코딩 에이전트에게 줄 프롬프트
복사해서 Claude, Codex, Cursor 같은 코딩 에이전트에 그대로 붙여 넣습니다.
지금 페이지의 게시물 목록에서 제목, 날짜, 링크를 뽑아 CSV로 내려받는 콘솔 코드를 만들어줘. 아래 outerHTML을 참고해.
같은 분류의 능력
06 브라우저 자동화·수집에 속한 다른 능력입니다.
무료로 보는 것
체험 페이지, 한 줄 설명, 미리보기 영상
스킬팩 구성
full.html, skill.md, prompt.md, rules.md, customize.md, troubleshooting.md, 예시 데이터, agent-instructions.md