AI 도구

🌐🤖 Browser-Use WebUI: AI로 웹 브라우저를 제어하세요

James AI Explorer 2025. 1. 12. 17:57
728x90

안녕하세요! 오늘은 Browser Use WebUI에 대해 알아보겠습니다. Browser Use WebUI는 Gradio를 기반으로 구축된 사용자 친화적인 인터페이스로, AI 에이전트를 활용해 웹 브라우징 작업을 자동화할 수 있도록 지원하는 도구입니다. 이 WebUI는 다양한 대규모 언어 모델(LLM)과 통합되어, 브라우저 상호작용을 간편하게 수행할 수 있도록 설계되었습니다. Browser Use WebUI는 특히 사용자가 선호하는 브라우저와 다양한 LLM을 유연하게 연동할 수 있습니다. 이번 블로그에서는 Browser Use WebUI의 주요 특징, 설치 방법, 활용 예제 등을 자세히 살펴보며, 이 도구가 제공하는 혁신적인 웹 브라우징 경험에 대해 탐구해 보겠습니다.

🌐🤖 Browser-Use WebUI: AI로 웹 브라우저를 제어하세요

"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."

1. Browser Use WebUI 개요

Browser Use는 AI 에이전트가 웹사이트에 접근할 수 있도록 강력하고 사용하기 쉬운 인터페이스를 제공하여 브라우저 자동화를 가능하게 하는 도구입니다. Browser Use WebUI는 Gradio를 기반으로 구축되었으며, Browser Use의 대부분의 기능을 지원하는 사용자 친화적인 인터페이스입니다. 이 WebUI는 브라우저 에이전트와의 쉬운 상호 작용을 가능하게 하며, 다양한 대규모 언어 모델(LLM)을 지원합니다.

Browser Use 데모 영상

주요 특징:

  • 사용자 친화적 인터페이스: Gradio를 기반으로 하여 사용하기 쉽습니다.
  • 다양한 LLM 지원: Gemini, OpenAI, Azure OpenAI, Anthropic, DeepSeek, Ollama 등 다양한 LLM을 지원하며, 향후 더 많은 모델을 추가할 계획입니다.
  • 사용자 정의 브라우저 지원: 사용자의 브라우저를 사용하여 웹사이트에 다시 로그인하거나 인증 문제를 처리할 필요가 없습니다. 또한, 고화질 화면 녹화 기능도 지원합니다.
  • AI 에이전트 연동: AI 에이전트가 웹사이트에 접근하여 자동화 작업을 수행할 수 있도록 돕습니다.

Browser Use WebUI는 웹사이트를 AI 에이전트가 접근 가능하게 만들어 다양한 자동화 작업을 지원합니다. 이는 사용자에게 더욱 편리하고 효율적인 웹 브라우징 경험을 제공합니다.

728x90

2. Browser Use WebUI 특징 및 주요 기능

Browser Use WebUI는 다음과 같은 특징과 주요 기능을 제공합니다.

1) 다양한 LLM 통합:

  • Gemini, OpenAI, Azure OpenAI, Anthropic, DeepSeek, Ollama 등 다양한 LLM을 지원합니다.
  • 사용자는 선호하는 LLM을 선택하여 에이전트를 구성할 수 있습니다.
  • 각 LLM은 API 키를 설정해야 합니다.
  • GPT-4o 모델이 가장 높은 정확도(89%)를 보입니다.

Browser Use WebUI LLM 설정메뉴

2) 사용자 정의 브라우저 지원:

  • Chrome 외에 Firefox 또는 Edge와 같은 다른 브라우저를 사용할 수 있습니다.
  • 사용자의 브라우저 데이터를 사용하여 로그인 상태를 유지할 수 있습니다.
  • CHROME_PATH와 CHROME_USER_DATA 환경 변수를 설정하여 사용자의 브라우저를 지정할 수 있습니다.

3) 브라우저 설정:

  • headless 모드를 설정하여 브라우저 UI 없이 실행할 수 있습니다.
  • 보안 설정을 비활성화하여 특정 기능 문제를 해결할 수 있습니다.
  • 프록시 설정을 통해 외부 프록시 서비스를 사용할 수 있습니다.
  • 브라우저 컨텍스트 설정을 통해 페이지 로드 시간 및 브라우저 창 크기를 사용자 정의할 수 있습니다.

Browser Use WebUI 브라우저 설정메뉴

4) 에이전트 설정:

  • 에이전트가 수행할 작업(task)과 사용할 LLM을 지정할 수 있습니다.
  • 비전 기능을 활성화/비활성화하여 이미지 처리 비용을 관리할 수 있습니다.
  • 대화 기록을 저장하여 디버깅에 활용할 수 있습니다.
  • 사용자 정의 시스템 프롬프트를 사용하여 에이전트의 동작을 제어할 수 있습니다.
  • 최대 실행 단계 수(max_steps)를 설정하여 에이전트의 무한 루프를 방지할 수 있습니다.
  • 기존 브라우저 인스턴스 또는 브라우저 컨텍스트를 재사용하여 세션을 유지할 수 있습니다.

Browser Use WebUI 에이전트 설정메뉴

5) 사용자 정의 함수:

  • 사용자 정의 액션 함수를 등록하여 페이지를 원하는 만큼 스크롤하거나, 텍스트를 대문자로 바꾸는 등 에이전트 기능을 확장할 수 있습니다.
  • Pydantic 모델을 사용하여 액션 함수의 매개변수 스키마를 정의할 수 있습니다.
  • 브라우저 접근이 필요한 함수는 requires_browser=True 매개변수를 사용하여 설정할 수 있습니다.

Browser Use WebUI는 이러한 기능들을 통해 사용자가 AI 에이전트를 활용하여 웹 브라우징 작업을 더욱 효율적으로 자동화할 수 있도록 지원합니다.

3. Browser Use WebUI 설치 방법

Browser Use WebUI를 설치, 실행하는 방법은 다음과 같습니다. 이 블로그의 설치 환경은 Windows 11, VSCode입니다.

 

1) 필수 사항: Python 3.11 이상. uv를 사용하여 Python 환경을 설정하는 것이 좋습니다. uv는 pip보다 빠르고 편리한 파이썬 패키지 관리도구로 윈도우 PowerShell에서 "powershell -ExecutionPolicy ByPass -c "irm https://astral.sh/uv/install.ps1 | iex"" 명령어로 설치할 수 있습니다.

윈도우 PowerShell에서 uv 설치

uv 설치 후, 아래 명령어로 환경변수를 설정하여 윈도우에서 설치경로를 인식하도록 합니다. 

$env:Path += ";C:\Users\User\.local\bin"
[Environment]::SetEnvironmentVariable("Path", $env:Path, [System.EnvironmentVariableTarget]::User)

uv 환경변수 추가

2) 레포지토리 복제 및 패키지 설치:"git clone https://github.com/browser-use/web-ui.git" 명령어로 레포지토리를 복제하고, 작업 디렉토리로 이동합니다.

깃 허브 레포지토리 복제

3) 가상 환경 설정: VSCode 터미널에서 "uv venv --python 3.11" 명령어로 가상 환경을 생성하고, ".venv\Scripts\activate "로 활성화합니다.

uv 가상 환경 설정

4) 패키지 설치: "uv pip install -r requirements.txt" 명령어로 필요한 패키지를 설치합니다.

uv를 이용한 패키지 설치

5) Playwright 설치: Playwright는 Microsoft에서 개발한 강력한 브라우저 자동화 프레임워크로 자동화된 브라우저 제어, 페이지 스크린샷/비디오 녹화 등을 지원합니다. "playwright install" 명령어로 설치할 수 있습니다.

Playwright 설치

6) 환경 변수 구성: .env.example 파일을 .env 파일로 복사하고 필요한 환경 변수를 설정합니다.

cp .env.example .env
  • LLM API 키를 .env 파일에 설정합니다. 

.env 파일 API Key 입력

  • OpenAI 모델 중 API 가격이 저렴한 gpt-4o-mini 모델을 사용하려면 아래 화면과 같이 browser-use/web-ui/src/utils/utils.py 파일의 113번 라인의 모델명을 수정해 주면 됩니다. 

Browser Use WebUI OpenAI 모델 수정

사용자 정의 브라우저를 사용하는 경우 CHROME_PATH와 CHROME_USER_DATA를 설정합니다.

  • Windows: 
    CHROME_PATH = " C:\Program Files\Google\Chrome\Application\chrome.exe "
CHROME_USER_DATA = " C:\Users\YourUsername\AppData\Local\Google\Chrome\User Data "
  • Mac: 
    CHROME_PATH = " /Applications/Google Chrome.app/Contents/MacOS/Google Chrome "
CHROME_USER_DATA = " ~/Library/Application Support/Google/Chrome/Profile 1 "

6) Browser Use WebUI 실행: 다음 명령어를 사용하여 Browser Use WebUI를 실행합니다.

python webui.py --ip 127.0.0.1 --port 7788

Browser Use WebUI 실행

  • 사용자 정의 브라우저를 사용하는 경우 Chrome이 아닌 다른 브라우저(Firefox, Edge)를 사용해야 하고, Chrome 브라우저는 종료한 후, 다른 브라우저를 실행해야 합니다. 또한 Browser Settings에서 "Use Own Browser"를 체크합니다. 
  • 웹 브라우저를 열고 http://127.0.0.1:7788에 접속합니다.

Browser Use WebUI 실행화면

4. Browser Use WebUI 예제

다음은 Browser Use WebUI를 사용하는 예제입니다.

  • 많이 본 기사 가져오기: https://www.aitimes.com/news/articleList.html?view_type=sm에서 많이 본 기사 Top 3를 가져옵니다.

AI Times 많이 본 기사 가져오기
AI Times 많이 본 기사 가져오기 실행결과

  • 항공편 검색: https://www.kayak.co.kr/에서 오늘 날짜를 확인하고, 서울에서 베이징으로 오늘 가장 빨리 출발하는 항공편의 출발시각을 알려주세요.

항공편 검색
항공편 검색 실행결과

이러한 예제는 Browser Use WebUI를 사용하여 다양한 웹 브라우징 작업을 자동화할 수 있음을 보여줍니다.

"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."

5. 맺음말

Browser Use WebUI는 AI 에이전트를 활용하여 웹 브라우징 작업을 자동화하는 데 매우 유용한 도구입니다. 다양한 LLM 지원, 사용자 정의 브라우저, 테마 및 다크 모드, 브라우저 설정, 에이전트 설정, 사용자 정의 함수 등의 기능을 통해 사용자에게 더욱 편리하고 효율적인 웹 브라우징 경험을 제공합니다.

 

Browser Use WebUI를 사용해 본 후기는 다음과 같습니다.

  • gemini-2.0-flash-exp 모델이 아닌 경우, 작업을 완료하지 못하는 경우가 많습니다. 
  • 사용자 지정 브라우저 실행의 경우 보안설정으로 인해 실행이 제한적입니다. 
  • 캡챠나 로봇 자동화 제한에 갇혀서 자동화를 더 이상 진행하지 못하는 경우도 있습니다. 

 

오늘은 Browser Use WebUI의 개요, 특징 및 주요 기능, 설치 방법, 예제에 대해 자세히 살펴보았습니다. 이 글을 통해 Browser Use WebUI를 이해하고 활용하는 데 도움이 되셨기를 바라면서 저는 다음시간에 더 유익한 정보를 가지고 다시 찾아뵙겠습니다. 감사합니다. 

 

https://fornewchallenge.tistory.com/

 

 

2024.11.21 - [AI 도구] - 🤖Browser Use: AI가 스스로 웹을 탐색하고 상호작용하는 혁신적 도구

 

🤖Browser Use: AI가 스스로 웹을 탐색하고 상호작용하는 혁신적 도구

안녕하세요! 오늘은 AI 에이전트가 웹사이트와 상호 작용할 수 있도록 돕는 혁신적인 도구인 Browser Use를 소개해 드리겠습니다. Browser Use는 웹 브라우저와 AI를 연결하는 것뿐만 아니라, 지원하는

fornewchallenge.tistory.com

 

728x90
저작자표시