# page-agent - 코드 1줄로 웹페이지에 AI 에이전트 추가하기

> Clean Markdown view of GeekNews topic #27404. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=27404](https://news.hada.io/topic?id=27404)
- GeekNews Markdown: [https://news.hada.io/topic/27404.md](https://news.hada.io/topic/27404.md)
- Type: news
- Author: [xguru](https://news.hada.io/@xguru)
- Published: 2026-03-11T11:36:02+09:00
- Updated: 2026-03-11T11:36:02+09:00
- Original source: [alibaba.github.io](https://alibaba.github.io/page-agent/)
- Points: 76
- Comments: 11

## Summary

알리바바가 꽤 신기한 것을 내놨는데요. `<script>` 한 줄만으로 기존 웹페이지를 **AI-네이티브 앱**으로 확장할 수 있는 오픈소스 도구입니다. **북마클릿**을 이용해 아무 페이지에나 추가할 수 있고요. 페이지에 삽입된 스크립트를 통해 **별도 권한**이나 **브라우저 확장 없이 DOM을 직접 제어**하며, 자연어로 각종 지시를 내릴 수 있습니다. 전혀 AI스럽지 않은 페이지에도 삽입하여 에이전트 같은 처리가 가능하니 다양하게 시도해보세요.

## Topic Body

- `<script src="page-agent.js"></script>` 한줄만 넣으면 웹사이트가 AI-네이티브 앱으로 변신  
  - **브라우저 확장, Python, 헤드리스 브라우저** 없이도 동작  
- 자연어로 지시하면 나머지는 AI가 처리. **텍스트 기반 DOM 조작** 기능으로 스크린샷, OCR, 멀티모달 LLM 필요없음  
- 모든 처리가 웹페이지 내부에서 수행되는 **in-page 실행 모델**로 별도 권한 요청 없이 DOM 요소를 직접 제어함  
- OpenAI, Claude, DeepSeek, Qwen 등 다양한 모델 사용가능하며 Ollama로 풀 오프라인도 가능 (API 키 기반 통합)  
- 인터랙티브한 UI와 **human-in-the-loop 인터페이스** 제공  
- 북마클 이용해서 아무 웹페이지에서나 테스트 가능  
- **Chrome 확장**을 설치하면 **멀티 페이지를 연결한 테스크도 지원**하며, **브라우저 레벨 제어**, **외부 연동까지 지원**  
- 주요 활용 사례  
  - **SaaS AI Copilot**: 백엔드 수정 없이 제품 내 AI Copilot 구현  
  - **스마트 폼 자동화**: 다단계 클릭 과정을 한 문장으로 단축해, ERP/CRM/관리자 도구를 개선   
  - **접근성 강화**: 음성 명령과 스크린리더를 통한 웹 접근성 향상    
- **MIT 라이선스** : Repo 는 [alibaba/page-agent](https://github.com/alibaba/page-agent)

## Comments



### Comment 52895

- Author: fbtmdxor
- Created: 2026-03-12T13:55:17+09:00
- Points: 1

와 신기해..!!

### Comment 52868

- Author: rlaaudgjs5638
- Created: 2026-03-12T10:59:05+09:00
- Points: 1

와 신기하네요.

### Comment 52852

- Author: limgk9
- Created: 2026-03-12T08:57:05+09:00
- Points: 1

bookmarklet 으로 간단하게 페이지에 LLM 붙이기 좋은 것 같습니다. 기본 bookmarklet 은 알리바바(중국)로 가는 것이 찜찜 하신 분들은 baseURL 과 apiKey를 넣어서 사용하시는 LLM Endpoint 로 지정하실 수 있습니다. ( local LLM이나 OpenAI 등 )  
  
javascript:(function(){import('https://cdn.jsdelivr.net/npm/page-agent@1.5.5/+esm').then(module=>{window.agent=new module.PageAgent({model:'gpt-5.4',baseURL:'<your-api-url>',apiKey:'<your-api-key>'});if(window.agent.panel)window.agent.panel.show();}).catch(e=>console.error(e));})();

### Comment 52848

- Author: act1000
- Created: 2026-03-12T01:03:49+09:00
- Points: 1

처음 뭐지 어떻게 쓰는거야 했는데 이제 이해했네요  
  
익스텐션 설치하고 토스증권에서 soxl 30일 전 주가 가격알고싶다고 하니까 자기가 조작해서 들어가서 가격보고 알려주네요.  
playwright와 AI 연결 보다 훨씬 속도도 빠르네요.

### Comment 52833

- Author: princox
- Created: 2026-03-11T16:14:09+09:00
- Points: 1

이거 SNS 상에서 난리던데.. 함 해봐야겠네요

### Comment 52823

- Author: arinaru
- Created: 2026-03-11T13:06:46+09:00
- Points: 1

대박이네요 당장 활용할수있는 부분이 정말 다양하게 많을것같습니다  
보안적인 측면만 개선해서 사용하면 될것같아요

### Comment 52820

- Author: awbrg789
- Created: 2026-03-11T12:38:07+09:00
- Points: 1

오우 재밌네요 진짜

### Comment 52816

- Author: crawler
- Created: 2026-03-11T11:57:53+09:00
- Points: 1

> Try on Other Sites  
> Step 2: Drag this button to your bookmarks  
  
와 사이트에 이런 게 있는데 진짜로 드래그 하니까 북마크로 추가되네요  
처음 보는데 너무 신기하다 북마클릿 공유할 때 좋은 방법이네요

### Comment 52817

- Author: xguru
- Created: 2026-03-11T12:02:49+09:00
- Points: 1
- Parent comment: 52816
- Depth: 1

앗.. 긱뉴스 북마클릿도 오픈 초기부터 있었습니다.   
https://news.hada.io/bookmarklet

### Comment 52819

- Author: crawler
- Created: 2026-03-11T12:37:35+09:00
- Points: 1
- Parent comment: 52817
- Depth: 2

헉 긱뉴스에도 이런 좋은 북마클릿이 있었군요 ㅋㅋㅋ  
일반인도 사용하기 쉬울 거 같고 진짜 좋은 거 같습니다

### Comment 52814

- Author: xguru
- Created: 2026-03-11T11:48:42+09:00
- Points: 1

재미나네요. 알리바바가 또 신기한거 내놓은듯  
서비스 내부 관리자 도구에는 넣어볼만 할지도?  
대충 CRUD 만 만들고, 이거하고 저거하라고 순차적으로 시키면 워크플로우 만들어지는거 같아요.   
데모 동작이 흥미롭네요  
  
이거 코드에 직접 안넣고 북마클릿 이용해서   
아무 웹사이트에나 적용 가능합니다.