BrowserAct 실습: CLI를 통한 실제 브라우저 자동화

며칠 전, 제가 작성한 기사 중 하나를 접한 BrowserAct 팀으로부터 이메일을 받았습니다. 그들은 BrowserAct를 AI 에이전트(AI agents)를 위해 구축된 브라우저 자동화 CLI(browser automation CLI)라고 소개하며, 직접 사용해 볼 것을 권유했습니다.

브라우저 자동화(Browser automation)는 보통 셀렉터(selectors), 대기(waits), 스크립트(scripts), 브라우저 상태 관리(browser state management), 그리고 디버깅(debugging)을 의미합니다.

Playwright, Selenium, 또는 Puppeteer를 사용하든 상관없이, 간단한 브라우저 워크플로우(browser workflows)조차도 종종 자동화 코드를 작성하고 유지 관리해야 합니다.

BrowserAct 팀이 연락하여 그들의 브라우저 자동화 CLI를 사용해 보라고 권했을 때, 저는 한 가지가 궁금했습니다:

AI 친화적인 CLI가 제가 Playwright나 Selenium 스크립트를 작성할 필요 없이 실제 브라우저 워크플로우를 처리할 수 있을까?

개괄적인 설명 대신, 저는 BrowserAct를 설치하고, 실제 웹사이트를 대상으로 테스트하며, 브라우저 세션(browser sessions)을 생성하고, 상호작용을 자동화하며, 실제 시나리오에서 어떻게 작동하는지 평가해 보기로 했습니다.

이 기사는 실제 워크플로우에서 BrowserAct를 테스트한 후의 실습 경험과 첫인상을 기록합니다.

BrowserAct란 무엇인가?

BrowserAct는 다음과 같은 기능을 제공하는 오픈 소스(open-source) 브라우저 자동화 CLI입니다:

• 브라우저 자동화 (Browser automation)
• 브라우저 세션 관리 (Browser session management)
• Chrome 프로필 가져오기 (Chrome profile importing)
• 콘텐츠 추출 (Content extraction)
• 네트워크 검사 (Network inspection)
• 스크린샷 (Screenshots)
• CAPTCHA 지원 (CAPTCHA assistance)
• AI 에이전트 친화적인 브라우저 상호작용 (AI-agent friendly browser interactions)

흥미로운 점은 BrowserAct가 개발자에게 Playwright나 Selenium 스크립트 작성을 요구하는 대신, 브라우저 자동화를 단순한 명령어로 추상화(abstract)하려고 시도한다는 것입니다.

설치 (Installation)

저는 uv를 사용하여 BrowserAct를 설치했습니다:

uv tool install browser-act-cli --python 3.12

설치 후, 사용 가능한 명령어를 확인했습니다:

browser-act --help

CLI는 즉시 다음과 같은 명령어들을 노출했습니다:

• 탐색 (Navigation)
• 브라우저 생성 (Browser creation)
• 세션 관리 (Session management)
• 상태 검사 (State inspection)
• 콘텐츠 추출 (Content extraction)
• 네트워크 모니터링 (Network monitoring)
• 스크린샷 캡처 (Screenshot capture)

이 시점에서 BrowserAct가 단순한 웹 스크래핑 (Web scraping) 유틸리티 그 이상이라는 점이 명확해졌습니다.

첫 번째 테스트: 콘텐츠 추출 (Content Extraction)

가장 단순한 가능한 예제로 시작했습니다.

browser-act stealth-extract https://example.com

출력:

# Example Domain
This domain is for use in documentation examples without needing permission. Avoid use in operations.
[Learn more](https://iana.org/domains/example)

결과는 깔끔한 마크다운 (Markdown) 형식으로 반환되었습니다.

브라우저 스크립팅 (Browser scripting) 없음.
셀렉터 (Selectors) 없음.
파싱 로직 (Parsing logic) 없음.

단 하나의 명령만으로 가능합니다.

실제 웹사이트 테스트

다음으로, BrowserAct가 현대적인 자바스크립트 (JavaScript) 기반 웹사이트를 어떻게 처리하는지 확인하고 싶었습니다.

Whale TV의 채용 페이지를 선택했습니다.

browser-act stealth-extract \ https://www.whaletv.com/careers \ --content-type markdown

출력:

BrowserAct는 다음 항목들을 성공적으로 추출했습니다:

• 직무 제목 (Job titles)
• 위치 (Locations)
• 고용 형태 (Employment types)
• 채용 링크 (Job links)

추출된 직무 중 일부는 다음과 같습니다:

• Smart TV App Engineer / Smart TV App Specialist
• Product Manager
• Technical Product Specialist
• Android System Engineer

추출 결과는 놀라울 정도로 깔끔하고 읽기 쉬웠습니다.

상세 직무 기술서 추출

다음으로, 특정 채용 공고를 테스트했습니다.

browser-act stealth-extract \ https://www.whaletv.com/open-positions/smart-tv-app-engineer-smart-tv-app-specialist \ --content-type markdown

출력:

BrowserAct 추출 항목:

• 직무 제목 (Job title)
• 고용 형태 (Employment type)
• 위치 (Location)
• 주요 업무 (Responsibilities)
• 기술 요구 사항 (Technical requirements)
• 연락처 정보 (Contact information)

예를 들어, 추출된 기술 스택에는 다음이 포함되었습니다:

• HTML5
• CSS3
• JavaScript
• MySQL
• SQL Server
• Angular
• Bootstrap
• Lightning JS

이는 단순한 HTML 검색 그 이상이었습니다. 콘텐츠는 구조화되어 있었으며 즉시 사용 가능한 상태였습니다.

기존 Chrome 프로필로부터 브라우저 생성하기

다음으로 제가 평가하고 싶었던 기능은 브라우저 생성입니다.

먼저, 사용 가능한 브라우저 프로필 목록을 확인했습니다.

browser-act browser list-profiles

출력 결과:

local_profile_101257381414961177 Your Chrome     local      shouriearyandev@gmail.com      Chrome
  browser:chrome_local_101261645860307073 whale-tv-evaluation managed    -                              whale-tv-evaluation

...

그 다음, 기존 Chrome 프로필을 사용하여 브라우저를 생성했습니다.

browser-act browser create \ --type chrome \ --name "whale-tv-evaluation-test" \ --desc "Testing BrowserAct browser automation features" \ --source-profile <profile-id>

출력 결과:

id=chrome_local_101361762646884363 name="whale-tv-evaluation-test" type=chrome
  desc="Testing BrowserAct browser automation features, navigation, interaction, and content extraction for Smart TV and developer tooling evaluation."
  imported_cookies=1606
...

BrowserAct 보고 내용:

imported_cookies=1592
imported_ls_domains=157

기존 브라우저 상태가 자동으로 임포트되어 브라우저가 성공적으로 생성되었습니다.

사용 가능한 브라우저 목록 확인

브라우저가 성공적으로 생성되었는지 확인하기 위해, 사용 가능한 브라우저 목록을 조회했습니다.

browser-act browser list

출력 결과:

새로 생성된 브라우저가 목록에 나타났으며, 자동화에 사용할 준비가 되었습니다.

브라우저 세션 열기 (Opening a Browser Session)

브라우저를 생성한 후, 새로운 브라우저 세션 (browser session)을 열었습니다.

browser-act \ --session whale-test \ browser open \ <browser-id> \ https://www.google.com

출력 (Output):

session_name=whale-test
browser_type=chrome
url=https://www.google.com/
...

BrowserAct는 즉시 세션을 생성하고 Google로 이동했습니다.
출력에는 다음 내용이 포함되었습니다:

session_name=whale-test
browser_type=chrome
url=https://www.google.com
...

이를 통해 브라우저가 작동 중이며 상호작용할 준비가 되었음을 확인했습니다.

페이지 상태 검사 (Inspecting Page State)

BrowserAct의 가장 흥미로운 기능 중 하나는 페이지를 검사하고 상호작용 가능한 요소 (interactive elements)들의 구조화된 표현을 받을 수 있는 능력입니다.

browser-act \ --session whale-test \ state

출력 (Output):

BrowserAct는 가공되지 않은 HTML (raw HTML)을 노출하는 대신, 상호작용 트리 (interaction tree)를 생성했습니다.

예를 들어:

[14] 검색창 (Search Box)
[17] Google 검색 (Google Search)
[18] I'm Feeling Lucky

이는 CSS 선택자 (CSS selectors) 대신 요소 인덱스 (element indexes)를 사용하여 동작을 수행할 수 있기 때문에 상호작용을 훨씬 더 쉽게 만들어 줍니다.

검색어 입력 (Entering a Search Query)

state 명령에 의해 반환된 인덱스를 사용하여 검색어를 입력했습니다.

browser-act \ --session whale-test \ input 14 "Whale TV careers"

출력 (Output):

input="Whale TV careers" element=14

BrowserAct는 검색창에 텍스트를 성공적으로 입력했습니다.

검색 클릭 (Clicking Search)

다음으로, 검색을 실행했습니다.

browser-act \ --session whale-test \ click 17

출력 (Output):

clicked=17

클릭이 성공적으로 실행되었습니다.

페이지 로딩이 완료될 수 있도록 브라우저가 안정화될 때까지 기다렸습니다.

browser-act \ --session whale-test \ wait stable

출력 (Output):

대기 완료: 페이지가 안정적입니다 (wait completed: page is stable)

이는 BrowserAct가 단순한 명령 기반 워크플로우 (command-driven workflow)를 통해 브라우저 상호작용 (browser interactions)을 어떻게 처리하는지 보여주었습니다.

Whale TV Careers로 직접 이동하기

다음으로, 특정 웹사이트로 직접 이동하는 것을 테스트해보고 싶었습니다.

browser-act \ --session whale-test \ navigate https://www.whaletv.com/careers

출력 (Output):

url=https://www.whaletv.com/careers
title=whaletv.com/careers
new_tab=False

BrowserAct는 요청된 URL로 즉시 이동하여 다음과 같이 보고했습니다:

url=https://www.whaletv.com/careers
title=whaletv.com/careers

이 시점에서 저는 단순한 테스트 페이지가 아닌 실제 웹사이트와 상호작용하고 있었습니다.

상호작용 가능한 요소 탐색하기

채용 페이지를 로드한 후, 페이지 상태 (page state)를 다시 점검했습니다.

browser-act \ --session whale-test \ state

출력 (Output):

BrowserAct는 다음과 같은 실행 가능한 요소 (actionable elements)들을 식별했습니다:

[11] Head of Ad Sales, Emerging Markets
[12] Ad Operations Specialist
[15] Accept Cookies

페이지 콘텐츠를 실행 가능한 요소로 변환하는 것은 BrowserAct 워크플로우의 가장 흥미로운 측면 중 하나입니다.

채용 공고 열기

다음으로, 사용 가능한 채용 목록 중 하나를 클릭했습니다.

browser-act \ --session whale-test \ click 11

출력 (Output):

clicked=11

BrowserAct는 채용 공고를 열고 상세 직무 설명 (job description) 페이지로 이동했습니다.

다시 한번, 페이지 로딩이 완료될 때까지 기다렸습니다.

browser-act \ --session whale-test \ wait stable

출력 (Output):

대기 완료: 페이지가 안정적입니다 (wait completed: page is stable)

이제 페이지는 콘텐츠 추출 (content extraction)을 위한 준비가 되었습니다.

채용 콘텐츠 추출하기

마지막으로, 직무 상세 페이지에서 콘텐츠를 추출했습니다.

browser-act \ --session whale-test \ get markdown

출력 (Output):

BrowserAct는 다음을 포함한 전체 직무 기술서(job description)를 반환했습니다:

• 주요 업무 (Responsibilities)
• 자격 요건 (Required qualifications)
• 고용 세부 사항 (Employment details)
• 연락처 정보 (Contact information)

이 시점에서 저는 다음과 같은 엔드 투 엔드 (end-to-end) 워크플로우를 완료했습니다:

브라우저 생성 (Create Browser)
→ 세션 열기 (Open Session)
→ 탐색 (Navigate)
→ 상태 검사 (Inspect State)
→ 요소 클릭 (Click Elements)
→ 대기 (Wait)
→ 콘텐츠 추출 (Extract Content)

브라우저 자동화 (browser automation) 코드를 단 한 줄도 작성하지 않고 말입니다.

평가 중 테스트된 명령어

평가 과정에서 저는 다음과 같은 BrowserAct의 기능들을 성공적으로 테스트했습니다:

콘텐츠 추출 (Content Extraction)

browser-act stealth-extract <url>

브라우저 프로필 검색 (Browser Profile Discovery)

browser-act browser list-profiles

브라우저 생성 (Browser Creation)

browser-act browser create

브라우저 세션 (Browser Sessions)

browser-act browser open

페이지 검사 (Page Inspection)

browser-act state

브라우저 상호작용 (Browser Interaction)

browser-act input 
browser-act click 
browser-act navigate 
...

활성 세션으로부터의 콘텐츠 추출 (Content Extraction From Active Sessions)