요즘IT
위시켓
AIDP
콘텐츠프로덕트 밸리
요즘 작가들컬렉션물어봐
놀이터
콘텐츠
프로덕트 밸리
요즘 작가들
컬렉션
물어봐
놀이터
새로 나온
인기
개발
AI
IT서비스
기획
디자인
비즈니스
프로덕트
커리어
트렌드
스타트업
서비스 전체보기
위시켓요즘ITAIDP
고객 문의
02-6925-4867
10:00-18:00주말·공휴일 제외
yozm_help@wishket.com
요즘IT
요즘IT 소개작가 지원
기타 문의
콘텐츠 제안하기광고 상품 보기
요즘IT 슬랙봇크롬 확장 프로그램
이용약관
개인정보 처리방침
청소년보호정책
㈜위시켓
대표이사 : 박우범
서울특별시 강남구 테헤란로 211 3층 ㈜위시켓
사업자등록번호 : 209-81-57303
통신판매업신고 : 제2018-서울강남-02337 호
직업정보제공사업 신고번호 : J1200020180019
제호 : 요즘IT
발행인 : 박우범
편집인 : 노희선
청소년보호책임자 : 박우범
인터넷신문등록번호 : 서울,아54129
등록일 : 2022년 01월 23일
발행일 : 2021년 01월 10일
© 2013 Wishket Corp.
로그인
요즘IT 소개
콘텐츠 제안하기
광고 상품 보기
프로덕트

page-agent — 코드 한 줄로 웹페이지에 AI 에이전트 추가하는 법

요즘 프로덕트 메이커
10분
1시간 전
188
에디터가 직접 고른 실무 인사이트 매주 목요일에 만나요.
newsletter_profile0명 뉴스레터 구독 중

안녕하세요, 요즘 프로덕트 메이커입니다.

 

프로덕트 소식은 넘쳐나지만 대부분 이런 게 나왔대에서 끝납니다. 그래서 뭘 어떻게 하라고? 내 작업에 어떻게 써먹지? 거기까진 연결이 잘 안 되죠. 따라서 요즘 프로덕트 메이커는 바로 쓸 수 있는 것, 그 중에서도 주목해볼 만한 것을 엄선해서 매주 금요일에 전달드리려 합니다.

 

요즘 프로덕트 메이커는 매주 세 가지를 골라 전합니다:

  1. 써볼 것: page-agent - 코드 한 줄로 웹페이지에 AI 에이전트 추가하는 법
  2. 참고할 것: Claude Code에 코드 리뷰를 얹다
  3. 적용해볼 것: 가속의 10년을 버티는 11가지 방법
 
<출처: page-agent>

 

1. 써볼 것: page-agent - 코드 한 줄로 웹페이지에 AI 에이전트 추가하는 법

page-agent는 Alibaba가 만든 오픈소스 JavaScript 라이브러리입니다. 웹페이지에 스크립트 한 줄만 추가하면 AI 에이전트가 그 페이지 안에서 DOM을 직접 제어합니다. Hacker News에서 화제가 됐고, 작성 기준 GitHub 스타 5,100개를 넘겼습니다.

 

기존 browser-use, Playwright, Selenium은 브라우저를 바깥에서 제어합니다. 별도 서버나 Python 스크립트, 헤드리스 브라우저를 띄워야 하죠. page-agent는 방향이 다릅니다. 에이전트가 페이지 안에 살면서, 사용자가 쓰는 브라우저 세션을 그대로 씁니다. 로그인 상태도 공유되고, 별도 인증도 필요 없습니다.

 

무슨 문제를 해결해 주나요?

AI 코파일럿을 SaaS 제품에 붙이려면 보통 꽤 많은 작업이 필요합니다. 백엔드를 수정하고, 별도 인프라를 구성하고, 권한 문제를 해결해야 하죠. Notion, Salesforce, HubSpot 같은 회사들이 월 $20~30에 파는 AI 코파일럿 기능이 바로 이 작업의 결과물입니다.

 

page-agent는 이 복잡함을 코드 몇 줄로 줄입니다. 스크립트를 추가하고, LLM API 키를 연결하면 끝입니다. 백엔드 수정도, 새 인프라도 필요 없습니다. 스크린샷이나 OCR, 멀티모달 LLM도 필요 없고요. 텍스트 기반 DOM 조작만으로 동작하기 때문에 더 가볍습니다.

 

한국어 번역을 돌린 이미지입니다. <출처: page-agent>

 

어떻게 쓰나요?

가장 빠르게 써보려면 북마클릿을 활용하면 됩니다. alibaba.github.io/page-agent에서 북마클릿을 등록하면 아무 웹페이지에서나 바로 테스트할 수 있습니다. API 키 설정 없이 무료 데모 API가 제공되고요.

 

저는 설치 대신, 북마클릿을 등록해서 써봤는데, 요즘 프로덕트 메이커 작가 페이지에 접속해 [최신 글에 들어가서 달린 댓글에, 감사합니다! 라고 댓글 달아줘]라는 자연어 명령을 입력했습니다. 이후 에이전트가 스스로 페이지를 스크롤하면서 최신 글을 찾고, 댓글 위치를 파악해서 답글을 다는 과정을 볼 수 있었죠. 크롬 확장프로그램 설치 하나로, 웹 페이지가 조작되는 모습을 보니 신기합니다.

 

흐름을 이미지로 보면 이렇습니다 <출처: 작가>

 

흐름을 움짤로 보면 이렇습니다. (움짤 길이 사정상 약간의 컷편집이 들어갔습니다) <출처: 작가>

 

기존 웹페이지에 바로 붙이고 싶다면 CDN 스크립트를 한 줄 추가하면 됩니다. 별도 설치 없이 동작하고, 무료 데모 API도 그대로 쓸 수 있습니다.

 

빠른 체험 (데모 CDN)
데모 CDN은 무료 테스트용 LLM API를 사용하며, 사용 시 이용 약관에 동의한 것으로 간주됩니다.

<script src="https://cdn.jsdelivr.net/npm/page-agent@1.5.6/dist/iife/page-agent.demo.js" crossorigin="true"></script>

프로젝트에 직접 붙이려면 npm으로 설치합니다.

 

NPM 설치

// npm install page-agent

import { PageAgent } from 'page-agent'

 

import { PageAgent } from 'page-agent'

const agent = new PageAgent({
  model: 'qwen3.5-plus',
  baseURL: 'https://dashscope.aliyuncs.com/compatible-mode/v1',
  apiKey: 'YOUR_API_KEY',
  language: 'en-US',
})

// 코드로 직접 명령
await agent.execute('로그인 버튼 클릭하고, 사용자 이름을 홍길동으로 입력해줘')

// 또는 사용자가 직접 입력할 수 있는 패널 띄우기
agent.panel.show()

 

자연어로 명령하면 에이전트가 페이지 구조를 파악해서 해당 요소를 찾고 실행하는 플로우며, 꽤나 신기합니다. OpenAI, Claude, DeepSeek, Qwen은 물론 Ollama로 완전 오프라인도 되고, Chrome 확장 프로그램을 설치하면 여러 탭에 걸친 작업도 가능합니다.

 

누구에게 좋을까요?

  • 사이드 프로젝트나 내부 도구에 AI 코파일럿 기능을 빠르게 붙여보고 싶은 개발자
  • ERP, CRM 같은 반복적인 폼 입력 워크플로를 자동화하고 싶은 사람
  • 에이전트가 웹 인터페이스를 제어하는 방식을 실제로 구현해보려는 사람
  • AI 에이전트를 기존 웹앱에 연동하는 아키텍처를 탐구 중인 팀

 

다만 몇 가지 알아두면 좋은 점이 있습니다. 현재 베타 단계라 API가 언제든 바뀔 수 있어서 프로덕션 환경에는 아직 쓰지 않는 게 좋습니다.

 

보안 측면에서는 에이전트가 페이지 안의 모든 요소에 접근할 수 있는 구조라 민감한 버튼이나 결제 기능에 대한 제어가 중요합니다. 다행히 page-agent는 이를 위한 장치를 제공합니다. 삭제 버튼이나 결제 버튼처럼 AI가 건드리면 안 되는 요소는 차단 목록으로 막을 수 있고, 반대로 AI가 조작할 수 있는 요소를 허용 목록으로 명시적으로 지정하는 것도 됩니다. 위험도가 높은 작업은 완전히 금지하거나, 중간 수준의 작업은 사용자 확인을 거치도록 설정할 수 있고요.

 

백엔드 자동화나 클라우드 브라우저 원격 제어가 목적이라면 browser-use나 Playwright가 더 맞습니다. page-agent는 사용자가 쓰는 페이지 안에서 동작하는 구조라 서버 사이드 자동화에는 적합하지 않습니다.

 

 

<출처: Claude 유튜브>

 

2. 참고할 것: Claude Code에 코드 리뷰를 얹다

Claude Code 코드 리뷰는 Anthropic이 3월 9일 발표한 Claude Code의 새 기능입니다. PR이 열릴 때마다 에이전트 팀을 투입해 버그를 병렬로 탐색하고, 오탐을 걸러낸 뒤 심각도 순으로 정리해 PR 코멘트로 전달합니다. Team/Enterprise 플랜 대상 리서치 프리뷰로 현재 베타 운영 중입니다.

 

이는 Anthropic 내부에서 먼저 만들어 수개월간 쓰다가 공개한 기능이라고 하는데요. 이 시작점은 Anthropic 내부에서 엔지니어 1인당 코드 생산량이 지난 1년간 200% 늘었는데, 리뷰 속도는 그만큼 따라가질 못했던 거였죠.

 

기존 코드 리뷰와 무엇이 다른가요?

코드 리뷰는 개발팀에서 오랫동안 병목이었습니다. AI가 코드를 더 빠르게 쓸수록 병목은 더 심해지고요. 결국 바쁜 리뷰어가 PR을 훑어보기만 하다가 중요한 문제를 놓치는 일이 생깁니다. 기존에도 Claude Code GitHub Action 같은 가벼운 자동화 도구는 있었습니다. 하지만 이번 코드 리뷰는 방향이 조금 다릅니다. 속도보다 깊이에 최적화했고, 에이전트 여러 개가 팀처럼 병렬로 버그를 찾습니다. 비용이 높은 대신 훨씬 철저하게 들여다보는 구조이죠.

 

어떻게 작동하나요?

PR이 열리면 우선 에이전트 팀이 배치됩니다. 각 에이전트가 병렬로 버그를 탐색하고, 발견된 버그를 서로 검증해서 오탐을 걸러냅니다. 심각도 순으로 순위를 매기고, PR에 전체 요약 코멘트 하나와 버그별 인라인 코멘트로 전달합니다. PR 크기에 따라 투입되는 에이전트 수와 분석 깊이가 자동으로 조정되고, 평균 리뷰 소요 시간은 약 20분입니다. PR을 승인하는 건 여전히 사람의 몫입니다. 에이전트는 발견하고 알려주는 역할이고, 최종 판단은 리뷰어가 합니다.

 

무슨 일이 벌어지고 있나요?

Anthropic 내부 데이터가 흥미로운데요. 도입 전에는 PR의 16%만 실질적인 리뷰 코멘트를 받았지만, 도입 후에는 54%로 올랐다고 합니다. 1,000줄 이상 대규모 PR에서는 84%가 버그를 발견했고, 평균 7.5개 이슈를 보고했고요. 오탐으로 표시된 비율은 1% 미만이었습니다.

 

Anthropic 내부 사례도 있었는데요. 프로덕션 서비스에서 코드 한 줄을 바꾸는 PR이었고, 변경량이 적어서 평소라면 빠르게 승인됐을 겁니다. 그런데 코드 리뷰가 이걸 심각한 문제로 표시했고, 확인해보니 서비스 인증을 깨뜨릴 수 있는 버그였다고 합니다. 다행히 머지 전에 잡았다네요. (담당 엔지니어는 혼자였다면 놓쳤을 거라고 했습니다)

 

무엇을 얻어가야 하나요?

지금은 Team/Enterprise 플랜 베타라 직접 쓰기 어려울 수 있습니다. 하지만 구조 자체가 흥미로워 살펴봤습니다. 에이전트 하나가 아니라 여러 에이전트가 팀처럼 투입되고, 서로 검증하면서 오탐을 줄이는 방식입니다. 비용은 PR당 평균 $15~25로, 대규모 PR일수록 높아집니다.

 

프로덕트 메이커 입장에서 핵심은 이겁니다. AI가 코드를 더 빠르게 만들수록 리뷰가 병목이 된다는 문제는 이미 많은 팀이 겪고 있습니다. Anthropic은 그 병목을 에이전트 팀으로 해결했고, 수치로 검증했습니다. 우리 팀의 병목이 어디인지 생각해보면 같은 패턴이 적용될 곳이 보일 수 있습니다.

 

 

<출처: Scott Barke>

 

3. 적용해볼 것: 가속의 10년을 버티는 11가지 방법

Scott Barker는 10년간 핀테크, 소프트웨어, 미디어, 벤처캐피탈을 거쳐 VC 펀드 공동창업까지 한 사람입니다. 그리고 번아웃으로 시스템 전체가 무너졌습니다. 약 없이는 집중도, 수면도, 이완도 안 되는 상태에 도달했다고 했습니다. 2026년 2월 18일 Substack에 올린 글이 현재 기준 좋아요 4,221개, 공유 1,140회를 기록했습니다.

 

그가 이 글을 쓴 이유는 자신이 겪은 게 예외가 아니라 곧 보편이 될 거라고 봐서입니다. AI가 코드 생산량을 200% 늘리고, 에이전트가 PR을 리뷰하는 세상에서 인간의 신경계는 그 속도를 따라가도록 설계되지 않았다는 게 요지죠.

 

무슨 문제를 해결하려 하나요?

기술의 본질적 역할은 시간을 압축하는 것, 즉 원하는 것과 얻는 것 사이의 거리를 줄이는 것입니다. 과거에는 발명과 채택 사이에 완충 구간이 있어서 인간이 적응할 시간이 있었습니다. 농업혁명은 수천 년, 인쇄기는 1세기, 전기화는 40년이 걸렸습니다. ChatGPT는 1억 사용자에 2개월이 걸렸고요. 그 완충 구간이 사라졌습니다. 그가 가속의 10년이라고 부르는 시기가 지금 시작되고 있습니다.

 

어떻게 준비하나요?

Scott이 공유한 11가지를 프로덕트 메이커 관점에서 핵심만 추립니다.

 

  1. 감속을 전략으로 삼기
    AI가 속도를 높여주는 환경에서 방향 전환 없이 계속 가속만 하면 원하는 곳에 도달하지 못합니다. 시속 100마일로 달리는 차에서 우회전을 하려면 가속이 아니라 감속이 필요하듯이요. 앞으로는 가속 자체가 환경이 알아서 해줄 거라 언제 감속할지를 아는 게 오히려 경쟁력이 됩니다.
    → 한 달에 한 번, 오후 하나를 비워서 6시간 동안 아무것도 소비하지 않는 침묵 시간을 가져보기
     
  2. 표면 기술보다 깊이 쌓기
    평생 쌓은 기술을 초보자가 AI로 몇 분 만에 80%까지 따라잡는 시대가 이미 왔습니다. AI가 평탄화하지 못하는 역량은 따로 있습니다. 판단력, 취향, 분야 간 연결력, 스토리텔링, 도덕적 추론입니다. 이것들은 삶의 경험과 실패, 많은 성찰 시간이 있어야 쌓입니다.
    → 성공이란 무엇인가, 의미 있는 삶이란 무엇인가 중 하나를 골라 14일간 철학·과학·역사·개인 경험의 렌즈로 깊이 탐구해보기
     
  3. 신경계 훈련하기
    명상, 침묵, 긴 산책, 수면 규율, 자연, 디지털 단절. 과거에는 스트레스 관리 정도로 여겼던 것들이 앞으로는 필수 역량이 됩니다. 가속이 계속될수록 압도감을 해결해준다는 솔루션들이 넘쳐날 텐데, 대부분 환경이 아닌 개인에게 문제가 있다고 말합니다. 기준은 하나입니다. 신경계를 조절하는 데 필요한 것은 전부 무료이고 언제든 쓸 수 있습니다. 그 외의 것은 대부분 눈속임입니다.
    → 움직임, 고요함, 호흡, 고독을 포함하는 매일 1시간 수련 만들기
     
  4. 반취약한 정체성 구축하기
    Nassim Taleb의 반취약성은 충격을 받아도 깨지지 않고 오히려 더 강해지는 시스템을 말합니다. 단순히 버티는 게 아니라 혼란 자체에서 이득을 얻는 구조입니다. 정체성을 직업에 과도하게 묶으면, 그 직업이 사라질 때 정체성도 함께 무너집니다. 나는 변호사다, 나는 개발자다가 아니라 나는 새로운 환경에서 배우고 적응하고 번성할 수 있는 사람이다로 바꾸면, 변화 자체가 위협이 아니라 이득이 됩니다.
    → 자신의 정체성 라벨 다섯 개를 적고 전부 지워보기. 이것이 전부 사라지면 나는 여전히 누구인가?
     
  5. 신호와 잡음 구분하기
    AI가 생성하는 콘텐츠, 뉴스, 합성 미디어는 이제 겨우 시작입니다. 조만간 광고, 뉴스레터, 영상이 인터넷이 나에 대해 알고 있는 모든 정보를 기반으로 1대1로 개인화될 겁니다. 정보가 많아질수록 무엇이 진짜 중요한지 구분하는 능력이 힘이 됩니다.
    → 지난 48시간 동안 소비한 것을 전부 나열하고 세 가지를 물어보기. 내 사고를 지속적으로 바꿨는가? 30일 후에도 기억할 것인가? 더 나은 결정에 영향을 줬는가? 셋 다 아니면 잡음입니다.
     
  6. 성공의 정의 다시 쓰기
    의식적으로 정의하지 않으면 알고리즘이 대신 답을 내립니다. Scott은 돈과 지위를 성공으로 정의했고 모두 달성했지만 더 충족되지 않았다고 했습니다. 어릴 때 정의한 성공이 지금도 유효한지 점검해볼 필요가 있습니다.
    → 나는 ____일 때 성공했다고 느낄 것이다를 완성하고, 각 항목에 이게 중요하다고 누가 가르쳤는가를 물어보기
     
  7. 더 긴 시간 지평으로 생각하기
    가속은 반응에 보상을 줍니다. 하지만 진짜 진화는 인내에 보상을 줍니다. 하루·주·월 단위가 아닌 10년 단위로 생각하는 게 의미 있는 삶을 만드는 경쟁적 해자라고 그는 말합니다.
    → 실현에 최소 10년이 걸리는 프로젝트를 하나 정해서 전념하기

 

나머지 네 가지, 진정한 연결에 투자하기 / 냉소주의에 굴복하지 않기 / 자신이 치르는 거래 분석하기 / 신을 찾기는 원문에서 더 깊게 읽을 수 있습니다.

 

한 가지 덧붙이자면, 이 글에는 비판적인 댓글도 달렸습니다. 감속을 선택하고 10년짜리 프로젝트에 전념하는 건 어느 정도 여유가 있어야 가능한 이야기라는 지적이었습니다. Scott 본인도 이 비판에 동의했고요. 모든 사람에게 똑같이 적용되는 처방은 아닐 수 있다는 점은 읽으면서 염두에 둘 만합니다.

 

적용해볼 질문

AI가 내 작업 속도를 높여주고 있다면, 그 빨라진 시간을 나는 어디에 쓰고 있나요? 더 많은 작업을 하는 데 쓰고 있다면, Scott이 말하는 패턴과 같은 방향입니다. 표면 기술이 AI로 빠르게 대체되는 시대에, 지금 내가 쌓고 있는 것은 판단력과 깊이인가요, 아니면 더 빠른 실행력인가요?

 

실행해볼 수 있는 것

  • 이번 주에 쓰는 AI 도구 한 가지를 골라서 그게 조용히 빼앗아 가는 것이 무엇인지 써보세요. 속도를 주는 대신 무엇을 외주화하고 있는지 적어보는 겁니다.
  • 내가 매일 소비하는 콘텐츠 중 30일 후에도 기억할 것이 얼마나 되는지 체크해보세요. 잡음과 신호를 구분하는 기준을 하나라도 만들어두면, 가속이 빨라질수록 그 기준이 더 유용해집니다. (요즘 프로덕트 메이커 콘텐츠도 예외는 아닙니다.)
 

정리

page-agent와 Claude Code 코드 리뷰는 같은 방향을 가리킵니다. AI에게 더 많이 맡기는 방법이죠. 코드 한 줄로 에이전트를 웹페이지에 심고, 에이전트 팀이 PR을 병렬로 검토합니다. 맡길 수 있는 범위가 계속 넓어지고 있습니다. Scott Barker의 글은 그 반대편 질문을 던집니다. 무엇은 맡기면 안 되는가. AI가 80% 수준을 대체하는 시대에 나머지 20%가 무엇인지 모르면, 맡기는 것과 잃는 것을 구분하기 어려워집니다.


도구는 앞으로도 계속 나올 겁니다. 그러기에 우리는 더욱 분명히 해야할 것이 있습니다. AI한테 맡길 것과 내가 직접 결정할 것, 그 경계를 아는 것이죠.

 

이렇게 적용해보세요

  • 내 웹앱이나 내부 도구에 AI 코파일럿 기능을 붙이고 싶었다면, page-agent 북마클릿으로 먼저 아무 페이지에서나 어떻게 동작하는지 확인해보세요. 설치 없이 바로 됩니다.
  • AI가 내 코드 생산량을 높여줬다면, 리뷰가 병목이 되고 있지는 않은지 살펴보세요. Claude Code 코드 리뷰 구조처럼, 에이전트를 여러 개 투입해서 서로 검증하게 하는 패턴은 코드 외에도 쓸 수 있습니다.
  • 이번 주 AI로 아낀 시간을 어디에 썼는지 돌아보세요. 또 다른 작업으로 채웠다면, 내가 그걸 선택한 건지 아니면 그냥 그렇게 됐는지 생각해보세요. Scott이 경고한 건 바쁜 것 자체가 아니라, 왜 바쁜지 모르는 것이니까요.

 

다음 주에도 여러분이 놓치지 말아야 할 프로덕트 메이커 소식을 정리해서 찾아뵙겠습니다. 요즘 프로덕트 메이커 콘텐츠가 도움이 되셨다면, 꼭 작가 알림 설정을 부탁드립니다. 콘텐츠 내용 중 잘못된 정보나 정정이 필요한 부분이 있다면 댓글로 알려주세요. 빠르게 수정하겠습니다. 다음 주에 또 만나요!

 

콘텐츠가 마음에 드셨다면, 꼭꼭 작가 알림 설정을 부탁드립니다!

 

©️요즘IT의 모든 콘텐츠는 저작권법의 보호를 받는 바, 무단 전재와 복사, 배포 등을 금합니다.

AI로 아낀 시간, 주로 어디에 쓰시나요?3명 참여중