브라우저 자동화는 Selenium 및 Playwright와 같은 도구들이 주도해 왔습니다. 이 도구들은 매우 강력하지만, 의미 있는 작업을 수행하기 전에 DOM을 이해하고, 셀렉터 (selectors)를 관리하며, 테스트 스택을 설정해야 합니다.

Vibium은 단계 기반 명령 (step-based commands)을 사용하여 다른 접근 방식을 취합니다.

• 웹사이트 열기
• 요소 찾기
• 필드 채우기
• 버튼 클릭
• 결과 검증

Vibium은 에이전트 방식 (agentic usage)을 위해 두 가지 방법을 지원합니다: 브라우저 자동화에 사용되는 명령 스타일의 스킬 (command-style skill)과 구조화된 워크플로우를 위한 MCP 서버입니다. 요소 발견 (element discovery)을 위해, vibium find는 텍스트, 레이블 (labels), 플레이스홀더 (placeholders), 테스트 ID (test IDs), CSS, XPath 및 접근성 트리 (accessibility tree)와 같은 의미론적 신호 (semantic signals)를 사용하여 페이지가 변경될 때까지 재사용할 수 있는 안정적인 참조 (references)를 반환합니다.

목차

• 왜 Vibium인가?
• Vibium 설치하기
• 첫 번째 Vibium 자동화
• 핵심 명령 이해하기
• 녹화 (Recording)
• 트레이스 (Trace) 보기
• Vibium의 위치
• Vibium vs. Selenium vs. Playwright
• 마치며

왜 Vibium인가?

전통적인 자동화는 보통 다음과 같은 익숙한 경로를 따릅니다:

1. CSS 셀렉터 (CSS selector) 찾기
2. DOM 검사하기
3. 프레임워크 설정하기
4. 코드 작성하기
5. 앱이 변경됨에 따라 셀렉터 유지 관리하기

Playwright에서는 다음과 같은 모습이 됩니다:

await page.Locator("#username").FillAsync("Admin");

이 방식에 잘못된 점은 없습니다. 잘 작동하며, 이유가 있는 표준 방식입니다. 하지만 단 한 줄의 코드를 쓰기 전에 이미 DOM 구조를 알고 있어야 합니다.

Vibium은 워크플로우를 뒤집습니다. 셀렉터를 먼저 찾는 대신, 요소를 대화형으로 발견 (discover) 하고 진행하면서 참조합니다:

vibium fill "@e1" "Admin"

Vibium은 사용자를 대신해 요소를 찾아주고 즉시 사용할 수 있는 임시 참조 (@e1)를 전달합니다.

Vibium 설치하기

npm을 사용하여 CLI를 전역으로 설치하세요:

npm install -g vibium

처음으로 실행하는 브라우저 기반 명령은 관리형 Chrome for Testing 빌드를 자동으로 다운로드하므로, 별도의 브라우저 설정 단계가 필요하지 않습니다.

모든 것이 제대로 작동하는지 확인하세요:

vibium go https://example.com

지정된 URL과 함께 브라우저가 열립니다.

첫 번째 Vibium 자동화

OrangeHRM 데모 사이트를 대상으로 간단한 로그인 흐름을 자동화해 보겠습니다.

계획:

1. 녹화 시작
2. OrangeHRM 열기
3. 사용자 이름(username) 필드를 찾아 값 입력
4. 비밀번호(password) 필드를 찾아 값 입력
5. 로그인 버튼 클릭
6. 녹화 중지 및 트레이스(trace) 저장

Vibium map을 사용하여 현재 페이지의 대화형 요소(interactive elements)를 스캔합니다.

다음은 한 줄씩 작성된 PowerShell 스크립트입니다:

vibium record start

vibium go "https://opensource-demo.orangehrmlive.com"
...

이것은 셀렉터(selector)를 찾거나 테스트 프레임워크(test framework)의 구조를 잡을 필요 없이, 약 10줄 내외로 완성된 실제 작동하는 로그인 자동화입니다.

핵심 명령어 이해하기

녹화 시작 (Start recording)

vibium record start

URL 열기 (Open URL)

vibium go "https://example.com"

요소 찾기 (Find element)

vibium find placeholder "Username"

입력 채우기 (Fill input)

vibium fill "@e1" "Admin"

버튼 찾기 및 클릭 (Find and click button)

vibium find role button
vibium click "@e3"

녹화 (Recording)

Vibium으로 실제 결과물을 만들기 전에 반드시 숙지해야 할 한 가지 차이점이 있습니다.

**녹화 모드 (Recording mode)**는 워크플로우(workflow)를 탐색하고 자동화를 빠르게 스케치하는 데 매우 유용합니다.

트레이스 보기 (Viewing the Trace)

녹화를 중지한 후에는:

vibium record stop

Vibium은 record.zip 트레이스(trace) 파일을 생성합니다. Playwright Trace Viewer를 사용하여 파일을 여세요:

npm install -g playwright
playwright show-trace record.zip

거기서부터 스크린샷, 액션 (actions), 타이밍, 실패 사례, 그리고 전체 세션에 대한 브라우저 상태 (browser state)를 단계별로 살펴볼 수 있으며, 이는 사후에 불안정한 단계 (flaky step)를 디버깅할 때 매우 유용합니다.

Vibium의 활용 분야

AI 에이전트 (AI agents). Vibium의 명령 인터페이스 (command surface)는 LLM이 이미 추론하는 방식인 "사이트를 열고, 로그인 필드를 찾고, 자격 증명을 입력하고, 제출을 클릭하고, 결과를 확인한다"와 같은 단계들과 자연스럽게 매핑됩니다. 이는 에이전트가 로케이터 (locator) 기반의 생코드를 작성하는 것보다 작동 가능한 자동화 코드를 생성하는 것을 눈에 띄게 더 쉽게 만들어 줍니다.

테스트 자동화 (Test automation). 회귀 테스트 (Regression suites), 스모크 테스트 (smoke tests), 엔드 투 엔드 테스트 (end-to-end tests), 그리고 사용자 여정 검증 (예: 로그인 → 사용자 생성 → 프로필 업데이트 → 로그아웃)은 모두 Vibium의 단계 기반 (step-based) 스타일로 깔끔하게 매핑됩니다.

내부 자동화 (Internal automation). 반복적인 브라우저 작업인 데이터 입력, 관리자 대시보드, 보고서 추출, 백오피스 워크플로우 등은 전체 테스트 프레임워크를 구축할 만큼의 가치가 없는 경우가 많습니다. Vibium의 낮은 절차적 복잡성 (low ceremony)은 이러한 일회성 또는 가볍게 유지 관리되는 스크립트에 합리적인 선택지가 됩니다.

Vibium vs. Selenium vs. Playwright

Selenium과 Playwright는 여전히 생태계 성숙도, 플러그인 지원, 그리고 대규모 환경에서의 검증된 신뢰성 측면에서 우위에 있습니다. Vibium의 강점은 "이것을 자동화하고 싶다"라는 생각에서 작동하는 스크립트까지 도달하는 속도가 매우 빠르다는 점에 있습니다.

마치며

Vibium은 브라우저 자동화, 특히 AI 기반 워크플로우의 진입 장벽을 낮춰줍니다. 하지만 이는 책임을 개발자로부터 도구로 전환함으로써 이루어집니다.

개발자, QA 엔지니어, 또는 웹에서 동작해야 하는 AI 에이전트를 구축하고 있다면, Vibium을 살펴볼 가치가 있습니다.