LLMs, Playwright, 브라우저 사용으로 AI 브라우저 에이전트 만들기

튜토리얼

브라우저 사용은 AI 에이전트(예: OpenAI의 GPT 모델 또는 다른 대형 언어 모델)가 지능적이고 자동화된 방식으로 웹 브라우저를 상호 작용하고 제어할 수 있도록 설계된 도구 또는 플랫폼입니다. 이는 AI 능력과 실제 웹 브라우저 상호 작용 사이의 간격을 좁히어, AI 시스템이 웹 사이트를 탐색하거나 데이터를 추출하거나 양식을 작성하거나 버튼을 클릭하는 등의 작업을 수행할 수 있도록 만들어줍니다 — 마치 인간 사용자가 하는 것처럼.

브라우저 사용의 주요 목표 은 브라우저 자동화의 복잡성을 추상화하여 웹 사이트를 AI 에이전트에게 접근 가능하고 실행 가능하게 하는 것입니다. 개발자가 웹 페이지 요소를 찾아 상호 작용하는 복잡한 스크립트를 작성하는 것 대신, 브라우저 사용은 이 프로세스를 간소화하여 모든 상호 작용 요소(버튼, 입력 필드, 링크 등)를 추출하고 AI 에이전트가 상호 작용할 수 있도록 구조화된 인터페이스를 제공합니다.

브라우저 사용의 주요 특징

AI 주도 자동화

브라우저 사용은 AI를 활용하여 웹 페이지를 이해하고 상호 작용합니다. 예를 들어, 웹 페이지의 내용을 분석하고 버튼을 클릭하거나 양식을 작성하는 것과 같은 관련 작업을 식별하고 이러한 작업을 자율적으로 실행할 수 있습니다.

비전 + HTML 추출

이는 화면의 요소를 인식하는 시각적 이해와 웹 페이지의 기본 코드를 구문 분석하는 HTML 구조 추출을 결합합니다. 이 이중 접근 방식은 AI 에이전트가 식별자(예: ID 또는 클래스)가 없더라도 정적 및 동적 웹 요소와 상호 작용할 수 있도록 보장합니다.

다중 탭 관리

브라우저 사용은 여러 브라우저 탭을 동시에 처리할 수 있어 AI 에이전트가 여러 웹 페이지와 상호 작용하는 복잡한 워크플로를 수행할 수 있습니다.

이 도구는 AI 에이전트가 수행한 정확한 작업(예: 버튼 클릭 또는 양식 작성)을 추적하고 웹 사이트 레이아웃이 약간 변경되더라도 그러한 작업을 일관되게 복제할 수 있습니다. 이는 QA 자동화에서 자가 치유 테스트를 만드는 데 특히 유용합니다.

사용자 정의 작업

사용자는 파일에 데이터 저장, 데이터베이스 작업 수행, 알림 전송 또는 자동화 프로세스의 특정 단계에서 인간 입력 처리와 같은 사용자 정의 작업을 추가하여 브라우저 사용을 확장할 수 있습니다.

자가 교정

브라우저 사용은 지능적인 오류 처리 및 자동 복구 메커니즘을 포함합니다. 자동화 중에 문제가 발생하는 경우(예: 요소 누락 또는 네트워크 시간 초과), 도구가 문제를 감지하고 자동으로 복구를 시도하여 워크플로가 중단되지 않도록 보장합니다.

여러 LLM과 호환성

브라우저 사용은 OpenAI의 GPT-4, Anthropic의 Claude, Meta의 Llama 2를 포함한 다양한 대형 언어 모델(LLM)을 지원합니다. 이 유연성을 통해 사용자는 자신의 특정한 요구에 가장 적합한 AI 모델을 선택할 수 있습니다.

브라우저 사용 작동 방식

브라우저 사용은 웹페이지를 스캔하여 모든 상호작용 요소(버튼, 입력 필드, 링크, 폼 등)를 추출합니다. 그런 다음 이러한 요소들의 구조화된 표현을 제공하여 AI 에이전트가 이해하고 상호작용할 수 있도록 합니다.

AI 상호작용

상호작용 요소가 식별되면 AI 에이전트는 버튼 클릭, 폼 작성, 페이지 간 이동 또는 데이터 추출과 같은 작업을 수행할 수 있습니다. AI 에이전트는 또한 웹페이지의 내용을 분석하고 발견한 정보를 기반으로 결정을 내릴 수 있습니다.

자동화 워크플로우

브라우저 사용을 통해 사용자는 복잡한 자동화 워크플로우를 생성할 수 있습니다. 예를 들어, AI 에이전트는 전자 상거래 사이트를 탐색하여 장바구니에 상품을 추가하고 구매를 완료할 수 있습니다 — 모두 인간의 개입 없이.

오류 처리 및 복구

자동화 프로세스 중에 문제가 발생하는 경우(예: 요소 누락 또는 페이지 로딩이 느린 경우), 브라우저 사용은 문제를 감지하고 자동으로 복구를 시도할 수 있습니다. 이를 통해 예측할 수 없는 환경에서도 워크플로우가 원활하게 계속되도록 보장합니다.

설치 안내

Browser Use를 시작하는 것은 간단하지만 모든 것이 원활하게 실행되도록 초기 설정이 필요합니다. 아래는 제공한 전제 조건과 단계를 기반으로 한 상세한 설치 안내서입니다. 이 안내서를 통해 로컬 환경에서 Browser Use를 설정하는 방법을 안내받을 수 있습니다.

전제 조건

시작하기 전에 시스템이 다음 요구 사항을 충족하는지 확인하십시오:

  • Python 3.11 이상. 아래 명령어를 실행하여 Python 버전을 확인할 수 있습니다:
    Python

     

  • Git. Git은 저장소를 복제하는 데 필요합니다

로컬 설치

단계 1: 저장소 복제

Shell

 

단계 2: Python 환경 설정

Python 환경을 관리하기 위해 uv를 사용하는 것을 권장합니다(맥용 권장):

Shell

 

1. Create a virtual environment. Run the following command to create a virtual environment with Python 3.11:

Shell

 

2. Activate the virtual environment.
  • Windows (명령 프롬프트):
    쉘

  • macOS/Linux:
    쉘

활성화되면 가상 환경이 활성화되었음을 나타내는 터미널 프롬프트에 .venv가 표시됩니다.

단계 3: 종속성 설치

환경이 설정되었으므로 필요한 종속성을 설치할 시간입니다.

Python 패키지 설치. requirements.txt에 나열된 필수 Python 패키지를 설치하려면 다음 명령을 사용하십시오:

Shell

 

단계 4: Playwright 설치

Playwright는 Browser Use에서 사용하는 브라우저 자동화 라이브러리입니다.

설치하려면 다음 명령을 실행하십시오:

Shell

 

Browser Use WebUI를 위한 로컬 설정 가이드

Browser Use를 위한 설치 단계를 완료하면 로컬에서 WebUI를 실행할 수 있습니다. 이 가이드에서는 응용 프로그램을 시작하고 설정을 사용자 정의하며 필요한 경우 자체 브라우저를 사용하도록 구성하는 방법을 안내합니다.

WebUI 실행

설치 단계를 완료한 후 다음 명령을 실행하여 Browser Use WebUI를 시작할 수 있습니다:

Shell

 

WebUI는 동작을 사용자 정의하는 여러 옵션을 제공합니다. 사용 가능한 플래그에 대한 설명은 다음과 같습니다:

  • --ip– WebUI를 바인드할 IP 주소
    • 기본값 – 127.0.0.1 (로컬호스트)
  • --port– WebUI를 바인드할 포트
    • 기본값 – 7788
  • --테마 – 사용자 인터페이스의 테마

웹UI에 액세스하기

웹UI가 실행되면 웹 브라우저를 열고 다음으로 이동하십시오:

Plain Text

 

Once the above command is executed, you should see the Browser Use interface, where you can interact with the tool and configure AI-driven browser automation tasks.

LLM 구성

LLM 구성에서 언어 모델을 선택하십시오, 예를 들어, gemini. 젬니은 무료 API 키를 제공합니다.

Generate the API keys from the link attached below.

아래 스크린샷에서 볼 수 있듯이, 우리는 위의 링크로 생성된 API 키를 추가했습니다.

에이전트 실행

에이전트 실행에서 프롬프트를 “amazon.in에 가서 ‘플레이라이트’를 입력하고 검색을 클릭하고 첫 번째 URL을 제공해주세요.

아래 스크린샷에서 볼 수 있듯이, 프롬프트를 실행하면 크로미움 브라우저가 열리고 페이지의 전체 DOM과 상호 작용합니다.

마지막으로, 검색 상자에 플레이라이트라는 값을 입력하고 아래 스크린샷을 볼 수 있습니다.

In the below screenshot, you can see it gives us the first URL.

백엔드에서 에이전트가 수행하는 동안 실행된 모든 로그를 볼 수 있습니다; 에이전트가 수행하는 모든 로그는 백엔드에 있습니다.

결과

결과 탭에서 최종 결과, 모델 작업, 모델 생각, 추적 파일 및 에이전트 이력을 볼 수 있습니다.

비디오

제공된 링크를 클릭하여 비디오를 다운로드할 수 있습니다. 또한 녹화 탭 아래에 첨부된 비디오를 볼 수 있습니다. 비디오를 실행하면 에이전트가 수행한 모든 단계를 볼 수 있습니다.

비디오의 스크린샷은 아래에 있습니다.

결론

LLMs, Playwright 및 Browser Use의 통합은 브라우저 자동화 및 AI 기반 워크플로의 새로운 진전을 나타냅니다. 이러한 도구를 결합하면 최소한의 인간 개입으로 복잡한 작업을 수행할 수 있는 지능형 브라우저 에이전트를 만들 수 있습니다. 반복적인 프로세스 자동화부터 동적 QA 테스트 및 실시간 의사 결정을 가능하게 함으로써 가능성은 무한합니다.

참고

Source:
https://dzone.com/articles/build-ai-browser-agent-llms-playwright-browser-use