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

- 게시: 2026.07.18
- 원문(HTML): https://trendbrief.news/articles/%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80-%EC%9E%90%EB%8F%99%ED%99%94-%EC%9B%8C%ED%81%AC%ED%94%8C%EB%A1%9C%EC%9A%B0-%EB%85%B9%ED%99%94-%EB%AC%B4%EB%A3%8C-%EB%8F%84%EA%B5%AC-3%EA%B0%80%EC%A7%80-%EB%B9%84%EA%B5%90.html
- 발행: [트렌드브리프](https://trendbrief.news/)

![브라우저 자동화 워크플로우 녹화, 무료 도구 3가지 비교](https://trendbrief.news/assets/articles/%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80-%EC%9E%90%EB%8F%99%ED%99%94-%EC%9B%8C%ED%81%AC%ED%94%8C%EB%A1%9C%EC%9A%B0-%EB%85%B9%ED%99%94-%EB%AC%B4%EB%A3%8C-%EB%8F%84%EA%B5%AC-3%EA%B0%80%EC%A7%80-%EB%B9%84%EA%B5%90/hero-auto.png)

> 브라우저에서 클릭·입력을 녹화해 테스트 코드로 바꿔 주는 무료 도구 세 가지 — Playwright 코드 생성기, 크롬 개발자도구 레코더, Selenium IDE의 실행법과 선택 기준, 녹화 스크립트가 깨지는 이유까지 정리했다.

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

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

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

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

이름만 보면 [실제 방문자의 화면을 녹화하는 세션 리플레이](https://trendbrief.news/articles/microsoft-clarity%EB%A1%9C-%ED%9E%88%ED%8A%B8%EB%A7%B5%EA%B3%BC-%EC%84%B8%EC%85%98-%EB%85%B9%ED%99%94-%EB%B6%84%EC%84%9D-%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0.html)와 헷갈리기 쉽다. 둘은 목적이 다르다. 세션 리플레이는 진짜 사용자가 어디서 헤맸는지 관찰하는 도구고, 여기서 말하는 워크플로우 녹화는 개발자가 설계한 검증 시나리오를 코드로 만들어 반복 재생하는 쪽이다.

## 세 도구는 어떻게 다른가

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

| 도구 | 형태 | 내보내기 형식 | 특징 |
| --- | --- | --- | --- |
| Playwright 코드 생성기 | CLI 명령 | JS·TS·Python·Java·C# | 로케이터 자동 추천 |
| 크롬 개발자도구 레코더 | 브라우저 내장 | JSON·Puppeteer | 성능 측정 연계 |
| Selenium IDE | 브라우저 확장 | WebDriver 다국어 | Firefox·Brave 설치 |

세 도구 모두 녹화 결과를 그냥 재생만 하는 게 아니라 편집할 수 있는 코드로 내보낸다. 그래서 녹화는 출발점일 뿐이고 다듬는 작업은 사람 몫으로 남는다. [Selenium 공식 사이트](https://www.selenium.dev/selenium-ide/)의 안내로는 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 개발자 문서](https://developer.chrome.com/docs/devtools/recorder)에 따르면 이 레코더는 조작을 녹화한 뒤 JSON, @puppeteer/replay, Puppeteer 스크립트 형식으로 내보낼 수 있고, 확장 프로그램을 설치하면 내보내기 형식을 더 붙일 수도 있다.

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

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

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

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

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

녹화 도구는 자동화의 문턱을 낮춰 주지만, 유지보수 체계 없이 녹화만 쌓으면 [자동화가 실험 단계에서 멈추는](https://trendbrief.news/articles/ai-%EB%8F%84%EC%9E%85-%EB%8B%A8%EA%B3%84-%EA%B0%9C%EB%B0%9C%ED%8C%80%EC%9D%B4-%EC%8B%A4%ED%97%98%EC%97%90%EC%84%9C-%EB%A9%88%EC%B6%94%EB%8A%94-%EC%A7%80%EC%A0%90.html) 흔한 함정에 빠진다. 로케이터 규칙, 실패 추적, 정기적인 재녹화까지 묶어야 녹화가 실제 회귀 방어선으로 남는다.

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

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

![같은 웹페이지 두 장을 나란히 둔 선화 — 왼쪽은 녹화된 점선 경로가 버튼에 정확히 닿고, 오른쪽은 버튼이 옮겨져 같은 경로가 빈자리에서 뚝 끊긴다](https://trendbrief.news/assets/articles/%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80-%EC%9E%90%EB%8F%99%ED%99%94-%EC%9B%8C%ED%81%AC%ED%94%8C%EB%A1%9C%EC%9A%B0-%EB%85%B9%ED%99%94-%EB%AC%B4%EB%A3%8C-%EB%8F%84%EA%B5%AC-3%EA%B0%80%EC%A7%80-%EB%B9%84%EA%B5%90/sec-broken-1.png)

녹화-재생 자동화가 깨지는 원리: 경로는 그대로인데 화면이 바뀌면, 클릭은 버튼이 있던 빈자리를 두드린다.

## 관련 글

- [사내 지식베이스 구축, 세 가지 방식과 도구 선택 기준](https://trendbrief.news/articles/%EC%82%AC%EB%82%B4-%EC%A7%80%EC%8B%9D%EB%B2%A0%EC%9D%B4%EC%8A%A4-%EA%B5%AC%EC%B6%95-%EC%84%B8-%EA%B0%80%EC%A7%80-%EB%B0%A9%EC%8B%9D%EA%B3%BC-%EB%8F%84%EA%B5%AC-%EC%84%A0%ED%83%9D-%EA%B8%B0%EC%A4%80.md)
- [Gemini 스피커, 어시스턴트 대체와 Home API 자동화 스크립트](https://trendbrief.news/articles/gemini-%EC%8A%A4%ED%94%BC%EC%BB%A4-%EC%96%B4%EC%8B%9C%EC%8A%A4%ED%84%B4%ED%8A%B8-%EB%8C%80%EC%B2%B4%EC%99%80-home-api-%EC%9E%90%EB%8F%99%ED%99%94-%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8.md)
- [퍼지 검색(fuzzy search) 구현법, 편집 거리와 트라이그램 비교](https://trendbrief.news/articles/%ED%8D%BC%EC%A7%80-%EA%B2%80%EC%83%89-fuzzy-search-%EA%B5%AC%ED%98%84%EB%B2%95-%ED%8E%B8%EC%A7%91-%EA%B1%B0%EB%A6%AC%EC%99%80-%ED%8A%B8%EB%9D%BC%EC%9D%B4%EA%B7%B8%EB%9E%A8-%EB%B9%84%EA%B5%90.md)
- [추상 구문 트리(AST), 코드를 트리로 다루는 원리와 실무 도구](https://trendbrief.news/articles/%EC%B6%94%EC%83%81-%EA%B5%AC%EB%AC%B8-%ED%8A%B8%EB%A6%AC-ast-%EC%BD%94%EB%93%9C%EB%A5%BC-%ED%8A%B8%EB%A6%AC%EB%A1%9C-%EB%8B%A4%EB%A3%A8%EB%8A%94-%EC%9B%90%EB%A6%AC%EC%99%80-%EC%8B%A4%EB%AC%B4-%EB%8F%84%EA%B5%AC.md)
- [세션 녹화·히트맵을 무료로, Microsoft Clarity 시작](https://trendbrief.news/articles/microsoft-clarity%EB%A1%9C-%ED%9E%88%ED%8A%B8%EB%A7%B5%EA%B3%BC-%EC%84%B8%EC%85%98-%EB%85%B9%ED%99%94-%EB%B6%84%EC%84%9D-%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0.md)