브라우저 자동화 워크플로우 녹화, 무료 도구 3가지 비교

게시 2026.07.18 · 약 6분 분량

브라우저 자동화 워크플로우 녹화는 사람이 브라우저에서 하는 클릭·입력·이동을 도구가 지켜보다가 그 순서를 그대로 실행 코드로 옮겨 적는 기능이다. 2026년 7월 기준 개발자가 무료로 쓸 수 있는 대표 도구는 셋이다 — Playwright의 코드 생성기(codegen), 크롬 개발자도구에 내장된 레코더(Recorder), 그리고 Selenium IDE 브라우저 확장. 셋 다 녹화 버튼을 누르고 화면을 한 번 조작한 뒤 결과를 테스트 코드로 내보내는 흐름을 공유하며, Playwright 공식 문서 기준으로 세부 사용법을 정리했다. 이 글은 개발자가 반복 테스트나 회귀 검증을 자동화하려는 관점에서 세 도구를 비교하며, UiPath 같은 상용 RPA 제품이나 실제 사용자 행동을 담는 세션 리플레이는 다루지 않는다.

녹화 방식 자동화는 정확히 무엇인가

사람이 브라우저에서 하는 조작을 도구가 코드로 받아 적는 방식이다. 버튼 클릭, 텍스트 입력, 페이지 이동을 손으로 한 번 해 보면 그 순서가 테스트 스크립트로 남는다. 처음부터 코드를 타이핑하지 않아도 되니 자동화 첫 스크립트를 만드는 시간이 줄어든다.

용어 하나만 짚고 가자. 로케이터(locator)는 "이 페이지에서 어떤 요소를 조작할지" 가리키는 주소다. 녹화 도구의 품질은 이 로케이터를 얼마나 안정적으로 뽑느냐에 달려 있다. Playwright 공식 문서에 따르면 코드 생성기는 역할(role)·텍스트·test id 순으로 로케이터를 우선 추천해, 화면 구조가 조금 바뀌어도 덜 깨지도록 설계돼 있다.

이름만 보면 실제 방문자의 화면을 녹화하는 세션 리플레이와 헷갈리기 쉽다. 둘은 목적이 다르다. 세션 리플레이는 진짜 사용자가 어디서 헤맸는지 관찰하는 도구고, 여기서 말하는 워크플로우 녹화는 개발자가 설계한 검증 시나리오를 코드로 만들어 반복 재생하는 쪽이다.

세 도구는 어떻게 다른가

같은 녹화라도 설치 형태와 내보내기 형식이 갈린다. 자기 팀 스택에 맞춰 고르면 된다.

세 도구 모두 녹화 결과를 그냥 재생만 하는 게 아니라 편집할 수 있는 코드로 내보낸다. 그래서 녹화는 출발점일 뿐이고 다듬는 작업은 사람 몫으로 남는다. Selenium 공식 사이트의 안내로는 IDE 확장이 Chrome 웹스토어에서는 내려간 상태라 Firefox 부가기능이나 Brave 등에서 설치해 쓴다. Chrome을 주로 쓴다면 이 점이 선택에 영향을 준다.

Playwright 코드 생성기로 첫 스크립트 만들기

Node.js가 깔려 있으면 명령 한 줄로 시작한다. URL을 붙여 실행하면 브라우저 창과 Playwright Inspector 창이 함께 열리고, 브라우저에서 조작하는 동안 Inspector에 코드가 실시간으로 쌓인다.

npx playwright codegen demo.playwright.dev/todomvc

Playwright 공식 문서에 정리된 옵션 몇 가지가 실무에서 자주 쓰인다. 모바일 화면으로 녹화하거나, 로그인 상태를 저장해 두거나, 결과를 곧바로 파일로 떨구는 식이다.

npx playwright codegen --device="iPhone 13" playwright.dev
npx playwright codegen --save-storage=auth.json github.com
npx playwright codegen -o tests/record.spec.ts playwright.dev

--device는 뷰포트와 사용자 에이전트를 특정 기기 기준으로 맞춘다. --save-storage는 세션이 끝날 때 쿠키와 로컬스토리지를 파일로 저장해, 다음 녹화 때 로그인 뒤 화면부터 시작하고 싶을 때 요긴하다. -o는 녹화 결과를 지정한 경로의 파일로 바로 내보낸다.

크롬 개발자도구 레코더로 녹화하고 내보내기

따로 설치할 게 없다는 점이 크롬 레코더의 장점이다. 크롬 개발자도구를 열고 오른쪽 위 더보기(⋮) → 도구 더보기 → Recorder 순서로 패널을 연다. Chrome 개발자 문서에 따르면 이 레코더는 조작을 녹화한 뒤 JSON, @puppeteer/replay, Puppeteer 스크립트 형식으로 내보낼 수 있고, 확장 프로그램을 설치하면 내보내기 형식을 더 붙일 수도 있다.

녹화한 흐름을 그 자리에서 다시 재생해 성능을 측정하는 기능도 붙어 있다. Chrome 개발자 문서 설명으로는 Lighthouse 분석을 끼워 넣은 Puppeteer 스크립트로 내보낼 수 있어, "이 결제 흐름이 몇 초 걸리나"를 반복해서 재는 용도로도 쓴다. 순수 테스트 자동화보다 사용자 흐름 점검과 성능 회귀 감시에 무게가 실린 도구다.

녹화한 스크립트는 왜 금방 깨지나

가장 먼저 부딪히는 벽이 이 문제다. 녹화한 스크립트가 며칠 뒤 UI가 조금 바뀌자 무더기로 실패한다. 원인은 대개 로케이터다. 녹화 도구가 화면 구조에 의존하는 약한 로케이터(예: 세 번째 div의 두 번째 버튼)를 잡으면 마크업이 한 줄만 바뀌어도 요소를 못 찾는다.

그래서 녹화는 초안으로 쓰고 사람이 손보는 전제가 안전하다. Playwright 공식 문서가 역할·텍스트·test id 로케이터를 우선하는 것도 이 취약성을 줄이려는 설계다. 실무에서는 버튼이나 입력창에 data-testid 같은 안정적인 속성을 미리 심어 두면 녹화 결과의 수명이 길어진다.

깨진 원인을 추적할 때는 실행 기록을 되짚는 도구를 함께 쓴다. Playwright 트레이스 뷰어가 그중 하나로, 실행 중 화면 캡처와 네트워크·콘솔 로그를 한 타임라인에 남긴다. Playwright 공식 문서에 따르면 이 트레이스는 trace.playwright.dev에서 열리며, 파일을 외부로 전송하지 않고 브라우저 안에서만 처리한다.

녹화 도구는 자동화의 문턱을 낮춰 주지만, 유지보수 체계 없이 녹화만 쌓으면 자동화가 실험 단계에서 멈추는 흔한 함정에 빠진다. 로케이터 규칙, 실패 추적, 정기적인 재녹화까지 묶어야 녹화가 실제 회귀 방어선으로 남는다.

녹화에서 에이전트 워크플로우로

이 계보의 최신 실험으로 오픈소스 rebrowse(사이트 rebrowse.me)가 있다. 화면 녹화에 음성 설명을 얹어 사람의 브라우징을 기록하면 결정적(deterministic) 에이전트 워크플로우를 만들어 주고, 클라우드 브라우저에서 원클릭으로 재실행하는 방식이다. browser-use와 Playwright를 기반으로 한 TypeScript 프로젝트로, 크롬 확장으로 녹화하며 rrweb 재생 기술로 클라우드의 헤드리스 브라우저를 실시간 미리보기·개입할 수 있게 한 것이 특징이다. 제작자는 기존 AI 코파일럿 자동화의 문제를 "느리고, 실행마다 결과가 다르고, 뭘 하는지 안 보이고, 매번 LLM 추론을 호출한다"로 정리하고, 결정적 실행에 browser-use의 커스텀 플래시 모드를 결합해 20배 속도와 95% 정확도를 얻었다고 주장한다. 위 세 도구가 녹화를 사람이 다듬는 테스트 코드로 옮기는 단계라면, 이쪽은 녹화 자체를 반복 실행 가능한 에이전트 작업으로 바꾸는 시도다.