Paw Work: 보고 있는 웹 페이지에서 고른 요소를 편집 가능한 오피스 파일로 바꾸는 크롬 확장

Paw Work 소개

로그인해서 보고 있는 페이지의 내용을 표나 문서로 정리하는 일은 아직 손으로 복사해 붙이는 작업으로 남아 있습니다. 브라우저를 다루는 AI 에이전트는 여러 갈래로 나왔지만, 별도의 헤드리스(Headless) 브라우저를 새로 띄우거나 브라우저 자체를 갈아타는 형태가 많아서 이미 로그인해 둔 세션과 지금 화면에 떠 있는 페이지를 그대로 쓰기 어렵습니다. 대화형 도구에 페이지를 물어보면 페이지를 설명하는 글이 돌아오지, 열어서 계속 고칠 수 있는 파일이 돌아오지는 않습니다.

Paw Work는 이 문제를 브라우저 안에서 푸는 Chrome 확장 프로그램(Manifest V3)입니다. 확장의 선택 모드를 켜고 지금 열어 둔 페이지에서 이미지, 표, 텍스트, 블록, 링크를 직접 클릭한 다음, 사이드패널에 원하는 결과를 문장으로 적으면 됩니다. 돌아오는 것은 페이지를 요약한 채팅 답변이 아니라 살아 있는 캔버스 위에 열리는 편집 가능한 파일입니다. 저자는 프로젝트를 소개하면서 웹을 대신 돌아다니는 무인 조작 에이전트도, 터미널 코딩 에이전트도 아니라고 밝혀 둡니다. 사용자가 범위를 정하고 확장은 그 범위 안에서 확인 가능한 결과물을 돌려주는 분업입니다.

기술 구성은 브라우저 안에서 끝나도록 짜여 있습니다. 에이전트 루프는 Vercel AI SDK 7ToolLoopAgent를 쓰고, 스프레드시트와 문서는 Univer, 포스터와 슬라이드는 tldraw 캔버스가 담당하며, 사이트 결과물은 실제 HTML로 나옵니다. 모델이 만든 자바스크립트는 확장에 함께 담긴 WASM(WebAssembly) 샌드박스에서만 돌고, 만들어진 파일은 브라우저의 IndexedDB와 OPFS에 남습니다. 계정도 Paw Work 서버도 없고, 모델 키는 사용자가 직접 넣는 BYOK(Bring Your Own Key) 방식입니다.

Paw Work과 기존 브라우저 에이전트 방식의 비교

브라우저를 다루는 AI 도구를 실행 형태로 갈라 보면, Paw Work가 어느 자리를 노리는지가 분명해집니다. 아래는 PyTorchKR에서 앞서 소개한 프로젝트들을 실행 형태와 다루는 페이지 기준으로 정리한 것입니다:

프로젝트 실행 형태 다루는 페이지
Paw Work 사용자의 Chrome에 설치하는 Manifest V3 확장 이미 열어 둔, 로그인된 페이지
On-Device Browser Agent Chrome 확장 이미 열어 둔 페이지
Moli, Obscura 별도 프로세스로 띄우는 헤드리스 브라우저 엔진 도구가 새로 여는 페이지
BrowserOS 브라우저 자체를 대체하는 애플리케이션 그 브라우저로 여는 페이지
BrowserCode, Browser Harness 외부에서 Chrome을 원격 제어하는 프레임워크 프레임워크가 여는 페이지

표의 아래쪽 세 갈래는 페이지를 여는 주체가 도구입니다. 자동화를 스크립트로 예약하기에는 유리하지만, 사용자가 이미 인증을 마치고 화면에 띄워 둔 페이지에서 시작하려면 로그인 상태를 옮겨 주는 절차가 추가로 필요합니다. 확장 형태인 위쪽 두 갈래는 그 절차가 없습니다.

같은 확장 형태 안에서 Paw Work가 다른 점은 무엇을 남기는가입니다. Paw Work는 선택한 범위를 재료로 스프레드시트, 슬라이드, 사이트, 문서 가운데 하나를 만들어 캔버스로 열고, 그 뒤의 수정 지시도 채팅으로 설명하는 대신 열려 있는 그 파일에 적용합니다. 문서 자체를 다루는 도구로는 OfficeCLI처럼 로컬 파일 경로를 받아 처리하는 명령줄 계열도 있는데, Paw Work는 그 앞단인 웹 페이지에서 재료를 모으는 단계까지 함께 가져간 형태입니다.

Paw Work은 누구에게 맞는가

Paw Work가 잘 맞는 쪽은 일의 시작점이 이미 브라우저 안에 있는 사람입니다. 로그인해야 보이는 관리 화면이나 상품 목록을 비교해 표로 옮기는 작업이 반복된다면, 페이지를 새로 열어 주는 도구보다 지금 화면에 설치되어 있는 확장이 단계를 줄여 줍니다. 결과물이 그 자리에서 고칠 수 있는 파일로 떨어지므로 붙여 넣기 왕복도 사라집니다.

반대로 무인 자동화를 전제로 한 팀에게는 Paw Work가 적절한 선택지가 아닙니다. 저자는 사이트를 돌아다니거나 결제와 제출을 대신하지 않는다고 Limitations 절에 명시해 두었고, 사용자가 고른 범위 밖으로 조용히 넓히지 않는 것을 설계 원칙으로 삼고 있습니다. 사람이 지켜보지 않는 시간대에 돌려야 하는 작업이라면 위 비교 표의 헤드리스 계열이 맞습니다.

한국어 화면이 필요한 팀에게도 Paw Work는 아직 준비가 덜 된 상태입니다. 사이드패널의 문자열 표는 src/sidepanel/i18n.js에 중국어와 영어 두 벌만 들어 있고 기본값이 중국어이므로, 한국어로 쓰려면 번역을 직접 추가해야 합니다. 여기에 Chrome 웹 스토어 등재가 아직 없어 압축 파일을 직접 올려 설치해야 한다는 점까지 겹치므로, 확장 설치를 정책으로 통제하는 조직에서는 도입 전에 확인이 필요합니다.

Paw Work의 격리 실행 구조와 작업 범위

Paw Work의 설계에서 가장 눈여겨볼 부분은 모델이 만든 코드를 다루는 방식입니다. 프로젝트는 모델이 생성한 타입스크립트와 자바스크립트를 확장의 소스 코드가 아니라 작업 데이터로 취급합니다. 생성된 코드는 확장에 함께 담긴 esbuildesbuild-wasm으로 로컬에서 컴파일되고, 격리된 QuickJS 가상 머신(VM) 안에서 실행됩니다. 이 게스트 프로그램은 chrome 확장 API, window, document, fetch, IndexedDB, OPFS를 받지 못하고, 현재 세션의 파일 시스템과 콘솔 출력만 봅니다.

게스트가 보는 파일 시스템은 세 갈래로 나뉩니다. /context는 읽기 전용 입력이고, /artifacts는 세션의 결과물이 남는 곳이며, /scratch는 실행이 끝나면 정리되는 임시 공간입니다. 호스트가 모든 경로를 검증하고 세션 사이의 접근을 막으므로, 다른 세션의 파일을 읽으려는 시도는 경로 단계에서 걸립니다. 실행에 쓰이는 자바스크립트와 WASM 바이너리는 전부 확장 패키지 안에 들어 있어, 프로젝트는 실행 코드를 CDN에서 내려받는 경로가 없다고 docs/CWS_CODE_RUNTIME.md에 명시하고 있습니다. 다만 저자는 같은 문서에서 이 저장소가 검증할 수 있는 것이 기술적 격리와 패키징 국소성까지이고 Chrome 웹 스토어 승인은 별개라고 덧붙입니다.

범위를 제한하는 장치는 코드 실행 쪽에만 있지 않습니다. 사용자가 클릭한 것이 캡처의 전부이고 에이전트는 필요할 때만 추가로 페이지를 살펴보며, 실행 중인 작업을 사용자가 중단하면 배경에서 계속 돌지 않아야 한다는 것이 문서에 적힌 조건입니다. 복잡한 작업에서는 쓰기 전에 계획 카드가 먼저 나오고, 사용자는 승인, 거절, 수정 요청 가운데 하나를 고릅니다. 거절은 완전한 중단이고, 수정 요청은 남긴 메모를 반영해 새 계획 카드를 다시 내놓으며 이전 카드는 그대로 남습니다.

Paw Work가 내놓는 결과물

Paw Work의 도구 목록은 항상 고정되어 있습니다. 살펴보기, 가져오기, 실행, 확인을 담당하는 inspect, acquire, run, clarify 네 개와, 결과물 종류에 대응하는 sheet, deck, doc, web 네 개가 언제나 함께 노출됩니다. 사용자가 편집기를 고르는 단계는 없고, 요청한 결과물의 종류가 열릴 화면을 결정합니다.

위 화면은 저장소가 공개한 예시로, 제품 사진들을 페이지에서 고르면 사이드패널에 선택 항목이 종류별로 쌓이는 모습입니다. 여기서 비교 표를 요청하면 결과가 Univer 워크북으로 열리고, 8장짜리 덱이나 포스터를 요청하면 tldraw 캔버스에 프레임으로 만들어지며 덱은 PPTX로 내보낼 수 있습니다. 페이지를 편집 가능한 사이트로 다시 만들어 달라고 하면 실제 HTML 파일이 나오고, 이후의 수정은 그 파일에 그대로 적용됩니다.

만들어진 파일을 고치는 방식도 채팅 첨부와 다릅니다. 위 화면에서 에이전트는 이미 열려 있는 워크북의 열을 분리하고 있는데, 새 파일을 대화창에 하나 더 떨어뜨리는 대신 같은 파일을 수정합니다. 캔버스에서 노드를 하나 고정해 두고 바꿀 내용을 말하면 그 노드만 바뀌고, 캔버스 품질 검사가 실패하면 새 파일을 만들지 않고 같은 결과물을 고쳐 다시 검사합니다. 한 세션에서 작업을 여러 개 돌릴 수 있으며, 이전 캡처는 @로 다시 불러 쓸 수 있습니다.

Paw Work 설치와 사용

Chrome 웹 스토어 등재가 아직 없어서, 설치는 저장소에서 확장 패키지를 받아 개발자 모드로 올리는 방식입니다. 저장소 이름과 클론 주소는 프로젝트 이름과 달리 PawWork_ZhuaZhua이므로 아래 명령에서는 그 이름을 그대로 씁니다. 저자는 소스 트리 전체를 클론하지 말고 빌드 결과만 담긴 unpacked 브랜치만 받으라고 안내합니다:

git clone --depth 1 --single-branch --branch unpacked https://github.com/Player-YN/PawWork_ZhuaZhua.git paw-work
realpath paw-work

두 번째 줄이 출력한 절대 경로를 그대로 씁니다. Chrome에서 chrome://extensions를 열고 개발자 모드를 켠 다음 압축해제된 확장 프로그램을 로드해서 그 폴더를 고르면 됩니다. 폴더 루트에 manifest.json이 있어야 하며, 소스 저장소의 루트를 올리면 동작하지 않습니다. Git 없이 받으려면 GitHub 페이지에서 브랜치를 unpacked로 바꿔 ZIP으로 내려받거나, 같은 내용이 담긴 Release의 paw-work-unpacked.zip을 쓸 수 있습니다.

설치 전에 확인할 것이 하나 더 있습니다. manifest.json은 모든 사이트를 대상으로 하는 호스트 권한(<all_urls>)과 함께 tabs, scripting, downloads, storage, offscreen 권한을 요청하고, 최소 Chrome 버전을 115로 적어 두었습니다. 어느 페이지에서든 선택 모드가 동작하고 결과물을 내려받아야 하는 구조에서 나오는 요구이지만, 확장에 그만큼의 접근을 허용한다는 뜻이기도 하므로 브라우저 정책과 함께 검토가 필요합니다. 지원 대상은 Chromium 계열 브라우저의 확장으로 한정되며 별도의 데스크톱 앱이나 웹 서비스는 없습니다.

설치가 끝나면 사이드패널을 열고 모델 키를 먼저 넣습니다. 대화 모델은 OpenAI 호환 HTTPS 엔드포인트라면 기본 URL, 키, 모델 이름을 적어 쓸 수 있습니다. 이미지 생성 키는 선택 사항이고 빈 항목은 대화 모델 설정을 물려받습니다. 웹 검색과 수집 키도 선택 사항인데 이쪽은 물려받지 않고, 키가 없으면 익명 GET으로 페이지를 받아오는 것까지만 동작합니다. tldraw 상용 라이선스 키는 선택 사항이지만, 넣지 않으면 디자인과 슬라이드 캔버스에 tldraw의 공식 워터마크가 남습니다. 페이지에서 선택 모드를 켜는 단축키는 Alt+Shift+S, 영역 스크린샷은 Alt+Shift+C입니다.

직접 빌드하려면 Node.js 20 이상과 npm, Chrome 120 이상이 필요합니다:

git clone https://github.com/Player-YN/PawWork_ZhuaZhua.git
cd PawWork_ZhuaZhua
npm install
npm run build:agent
npm run pack:extension

빌드가 끝나면 artifacts/unpacked/를 로드합니다. npm install 이후 저장소 폴더는 node_modules 때문에 수백 MB가 되며, 코드를 새로 받아온 뒤에는 npm run build:agent로 다시 빌드하고 확장을 새로 고쳐야 합니다. 빌드와 테스트 절차는 CONTRIBUTING.md에 정리되어 있습니다.

Paw Work의 라이선스

Paw Work의 자체 코드는 MIT 라이선스로 공개되어 있어 개인 및 상업적 목적으로 자유롭게 사용할 수 있습니다.

단, 설치용으로 안내되는 unpacked 브랜치와 Release ZIP에는 서드파티 엔진의 빌드 결과가 함께 들어갑니다. Univer와 SheetJS CE는 Apache-2.0, esbuild와 QuickJS, PptxGenJS는 MIT지만, tldraw 5.x는 소스가 공개된 자체 라이선스이고 OSI(Open Source Initiative) 기준의 오픈소스가 아닙니다. 저자는 이 구분과 워터마크 조건을 THIRD_PARTY_NOTICES.md에 적어 두고, 빌드를 재배포하는 사용자가 각 상위 라이선스를 지킬 책임이 있다고 명시합니다. 사내 배포나 재배포를 계획한다면 그 문서를 먼저 읽고 tldraw 조건을 확인해야 합니다.

:books: Paw Work 런타임 계약 문서 (저장소 docs 디렉토리)

:github: Paw Work 프로젝트 GitHub 저장소

:wrapped_gift: Paw Work 확장 설치용 패키지 (GitHub Release)

더 읽어보기




이 글은 GPT 모델로 정리한 초안을 바탕으로 한 것으로, 원문의 내용 또는 의도와 다르게 정리된 내용이 있을 수 있습니다. 관심있는 내용이시라면 원문도 함께 참고해주세요! 읽으시면서 어색하거나 잘못된 내용을 발견하시면 댓글로 알려주시기를 부탁드립니다. :hugs:

:pytorch:파이토치 한국 사용자 모임:south_korea:이 정리한 이 글이 유용하셨나요? 회원으로 가입하시면 주요 글들을 이메일:love_letter:로 보내드립니다! 텔레그램(Telegram)이나 Slack/Discord/Teams/Dooray/GoogleChat 등으로도 새 글 알림을 받으실 수 있습니다. :smiley:

:wrapped_gift: 아래:down_right_arrow:쪽에 좋아요:+1:를 눌러주시면 새로운 소식들을 정리하고 공유하는데 힘이 됩니다~ :star_struck: