Claude Fable은 끊임없이 적극적으로 움직인다

2 hours ago 1

2일간의 실험 결과 Claude Fable 5는 "relentlessly proactive" 하다고 표현하는게 적절함
스크린샷과 한 줄 프롬프트만으로 로컬 개발 서버 실행, 실제 브라우저 조작, 측정 코드 삽입까지 수행해 CSS 버그 원인을 추적함
Fable은 Playwright, Firefox, WebKit, Safari를 오가며 버그를 재현하려 했고, 실패 후 실제 브라우저 창을 찾아 스크린샷 자동화를 직접 구성함
/ 키로 열리는 모달 대화상자를 테스트하기 위해 Datasette 템플릿에 JavaScript를 삽입하고, 창 로드 후 키보드 이벤트를 발생시켜 필요한 상태를 만들어냄
페이지 내부 측정값을 얻기 위해 Python http.server 기반 CORS 수집 서버를 만들고, Web Component의 shadow DOM 안 <textarea> 정보를 JSON으로 저장함
강력한 코딩 에이전트는 터미널에서 사용자가 할 수 있는 일을 수행할 수 있어, 샌드박스 밖 실행은 프롬프트 인젝션과 데이터 유출 위험을 키움

Claude Fable 5의 디버깅 과정

Datasette Agent의 점프 메뉴 채팅 프롬프트에 생긴 불필요한 가로 스크롤바를 조사하기 시작
Claude Fable 5는 목표 달성을 위해 다양한 기법을 적극적으로 동원함
입력은 스크린샷과 Look at dependencies to help figure out why there is a horizontal scrollbar here라는 한 줄 프롬프트였음
문제 원인이 Datasette Agent의 의존성, 특히 Datasette 자체에 있을 수 있다는 판단 아래 의존성 코드부터 살펴보도록 요청함
Claude Code는 명시적 브라우저 자동화 지시 없이 일반 Firefox 창을 열고 해당 대화상자로 이동했으며, 이후 Safari 창도 열어 탐색을 이어감

브라우저 스크린샷 자동화

Fable은 uv run --with pyobjc-framework-Quartz를 사용해 브라우저 창 스크린샷을 찍는 자체 방식을 구성함
Python으로 머신의 모든 창을 순회하고, 창 이름에 "textarea" 같은 예상 문자열이 있는 Safari 창을 필터링함
창 번호 같은 정수 식별자 153551을 찾은 뒤 screencapture CLI로 PNG를 저장함
/tmp/textarea-scrollbar-test.html 같은 임시 HTML 페이지를 작성하고 Safari에서 열어 스크린샷을 확보함
예시 명령은 screencapture -x -o -l 153551 /tmp/safari-cases.png였음

모달 대화상자 자동 실행

테스트 대상 모달은 클릭이나 키보드 단축키로만 열 수 있었고, Safari 안에서 마우스 이동이나 키보드 단축키를 실행하는 명확한 메커니즘은 보이지 않았음
Claude는 애플리케이션 소스 코드가 있는 폴더에서 실행 중이었고, Datasette 로컬 개발 서버를 실행할 수 있을 만큼 구조를 파악함
Datasette 템플릿에 JavaScript를 추가해 창이 열린 뒤 / 키 입력을 시뮬레이션하도록 만들었음
이 코드는 창 로드 1.2초 후 / 키 keydown 이벤트를 발생시켜 모달 대화상자를 여는 단축키를 실행함

페이지 내부 측정값 수집

Claude는 페이지에서 JavaScript를 실행해 직접 측정값을 얻어야 했고, 이를 위해 CORS로 정보를 받는 자체 웹 애플리케이션을 작성함
Python 표준 라이브러리 http.server를 사용해 127.0.0.1:9999에서 로컬 서버를 실행함
서버는 JSON이 담긴 POST 요청을 받아 /tmp/diag.json에 기록하고, Access-Control-Allow-Origin: * 헤더를 보내 다른 도메인의 코드도 통신할 수 있게 함
Claude는 브라우저에서 로드되는 템플릿에 JavaScript를 삽입해 <navigation-search> Web Component 안의 <textarea>를 찾음
삽입된 코드는 devicePixelRatio, scrollWidth, clientWidth, whiteSpace, width를 측정해 로컬 서버로 전송함

const host = document.querySelector("navigation-search"); const ta = host.shadowRoot.querySelector("textarea"); const cs = getComputedStyle(ta); fetch("http://127.0.0.1:9999/diag";, { method: "POST", body: JSON.stringify({ dpr: window.devicePixelRatio, scrollWidth: ta.scrollWidth, clientWidth: ta.clientWidth, whiteSpace: cs.whiteSpace, width: cs.width, }), });

Opus 전환과 수정 검증

Fable은 여러 기법을 찾아낸 뒤 보이지 않는 가드레일에 걸려 Opus로 다운그레이드됨
Opus는 전체 대화 기록에 접근할 수 있었고, Fable이 개척한 기법을 이어 사용함
이후 Opus는 문제를 찾고 테스트하고 검증한 뒤 수정 커밋을 완료함
Opus는 세션에서 실제 브라우저를 대상으로 사용한 자동화 기법과 실행 가능한 코드 예시를 /tmp/automation-report.md에 정리함
해당 보고서는 별도 gist로 공유됐고, 전체 Claude Code 터미널 기록도 공개됨

수행한 작업 전체 검토

Claude Fable 5와 Claude Code는 로컬 개발 서버 실행 방법을 찾아냈고, 실행에 필요한 가짜 환경 변수도 구성함
Playwright Chrome 세션을 실행하고, Chrome의 가시적 스크롤바 설정을 defaults write com.google.chrome.for.testing AppleShowScrollBars Always로 켰다가 나중에 다시 끔
Playwright의 Firefox와 WebKit도 순회했지만 버그 재현에는 실패함
기본 브라우저가 Safari임을 파악하고, textarea-scrollbar-test.html HTML 문서를 만듦
실제 Firefox에서 테스트 문서를 열었고, osascript 접근은 “osascript is not allowed assistive access” 때문에 차단됨
pyobjc-framework-Quartz 우회 방법을 찾아 창 번호 기반 스크린샷 흐름을 구성함
사이트 템플릿에 JavaScript를 추가해 / 키를 발생시키고, Python CORS 서버로 JSON 데이터를 받음
Web Component의 shadow DOM을 거쳐 필요한 정보를 찾고, Safari에서 버그 원인을 확인함
사용자 정의 템플릿에 잠재적 수정을 적용해 동작을 확인한 뒤 문제 해결 방법을 보고함

비용 추정

사용 중인 플랜은 월 $100의 Claude Max 플랜이며, Anthropic은 6월 22일까지 Fable에 대해 넉넉한 허용량을 제공하고 이후 전체 API 가격을 청구한다고 밝힘
AgentsView는 지출 추적에 사용됐고, 전체 가격을 냈다면 해당 세션 비용은 약 $12.11로 계산됨
세션 출력은 68606, 최대 컨텍스트는 113178, 사용 모델은 claude-fable-5와 claude-opus-4-8였음
Fable은 비용을 면밀히 보지 않으면 CSS 디버깅을 위해 새로운 방법을 만들어내며 토큰 비용 약 $12를 쉽게 소모할 수 있음

샌드박스 필요성

Fable이 결국 두 줄짜리 CSS 수정에 필요한 정보를 얻기 위해 극단적인 방법까지 동원한 과정은 인상적이었음
코딩 에이전트는 사용자가 터미널에 명령을 입력해 할 수 있는 일을 수행할 수 있고, frontier 모델은 매우 많은 기법을 알고 있음
악성 지시, 코드나 이슈 스레드 안의 프롬프트 인젝션, 터미널에 부주의하게 붙여 넣은 내용이 있었다면 데이터 유출이나 다른 피해로 이어질 수 있음
샌드박스 밖에서 코딩 에이전트를 실행하는 것은 항상 나쁜 생각이며, 코딩 에이전트 보안 사고의 주요 후보로 간주됨
Fable은 더 똑똑해 악성 지시에 더 의심을 품을 수 있지만, 한 번 지시에 넘어가면 끊임없는 선제성 때문에 피해 규모가 커질 수 있음

Read Entire Article