← 글 목록

notes

Nextjs-Workflow Use

5 min read

Next.js Workflow 사용법·구성 방식과 자동화 적용 포인트 메모.

Kim mr.

프론트엔드 · 기술 블로그
  • Workflow Use는 브라우저 작업을 한 번 녹화해 JSON 워크플로로 저장하고 다시 돌리는 도구다.
  • 평소엔 LLM 없이 녹화대로 재생하고, 실패한 단계만 Browser Use 에이전트가 이어받는다.
  • 녹화 대신 자연어로 시켜서 워크플로를 만드는 Generation Mode도 있다.

브라우저 클릭을 한 번 녹화해 JSON 워크플로로 남기고, 실패하면 Browser Use로 자가 치유를 시도하는 툴이 Workflow Use(browser-use/workflow-use)다. 제목이 Nextjs-Workflow라 헷갈리는데, Next.js 전용 프레임워크가 아니라 브라우저 RPA 쪽에 가깝다. Next 앱 관리자 화면에서 매번 하던 반복 작업을 어떻게 줄일까 하다가 찾았다. 아직 초기 단계라 프로덕션 메인으로 두진 않는다.

어떻게 도나

확장 프로그램을 켜고 실제로 한 번 클릭하고 입력하면, 그 과정이 단계 목록으로 저장된다. 검색어나 이름처럼 매번 바뀌는 값은 변수로 빠진다. 다음부터는 변수만 넣고 재생하면 되고, 이때는 LLM을 안 부른다. 중간에 버튼 위치가 바뀌어서 단계가 실패하면 그때만 Browser Use 에이전트가 화면을 보고 이어서 처리한다.

뭐가 좋은지

  • 한 번 녹화 → 파라미터만 바꿔 재실행 (LLM 없이도 결정적 실행 가능)
  • 단계 실패 시 Self-Healing
  • 자연어로 워크플로 생성(Generation Mode)
  • workflows/storage/에 저장·조회, GUI(launch-gui)로 그래프/로그

폴더

  • workflows/ — CLI·실행·storage
  • ui/ — 시각화 GUI
  • extension/ — 녹화용 브라우저 확장

설치 빠른 길

git clone https://github.com/browser-use/workflow-use
cd extension && npm install && npm run build

cd ../workflows
uv sync
source .venv/bin/activate
playwright install chromium
cp .env.example .env   # OPENAI_API_KEY 등
python cli.py run-workflow examples/example.workflow.json
python cli.py run-as-tool examples/example.workflow.json --prompt "fill the form with example data"

Generation Mode

녹화 없이 말로 시키는 방식이다. 하고 싶은 일을 문장으로 주면 Browser Use 에이전트가 실제로 한 번 수행하고, 그 기록을 단계와 변수로 정리해서 워크플로로 저장한다. 저장된 뒤로는 녹화한 것과 똑같이 재사용한다.

저장소는 단순하다. storage/ 아래에 전체 목록을 담은 metadata.json과, 워크플로마다 <id>.workflow.json 파일이 하나씩 생긴다. JSON이라 git에 올려 두고 변경 이력을 보기도 쉽다.

python cli.py generate-workflow "Find GitHub stars for browser-use repo"
python cli.py list-workflows
python cli.py run-stored-workflow <workflow-id> --prompt "Find stars for playwright repo"
python cli.py delete-workflow <workflow-id>

GUI:

python cli.py launch-gui
# http://localhost:5173

코드에서

from workflow_use import Workflow
import asyncio

workflow = Workflow.load_from_file("example.workflow.json")
result = asyncio.run(workflow.run_as_tool("I want to search for 'workflow use'"))

run_as_tool은 프롬프트를 받아서 LLM이 변수 값을 채워 넣고 실행하는 방식이다. 변수를 이미 알고 있으면 LLM 없이 돌리는 run_with_no_ai 쪽이 더 빠르고 비용도 안 든다.

Cloud Browser로 돌릴 때

내 맥에서 Chromium을 띄우지 않고 Browser Use 클라우드의 브라우저를 쓸 수도 있다. .env에 BROWSER_USE_API_KEY를 넣고, 실행할 때 use_cloud=True를 주면 된다. 서버에서 크론으로 돌리려고 할 때 브라우저 설치·헤드리스 설정을 안 해도 돼서 편했다.

다만 로그인 세션이 필요한 사이트는 쿠키가 클라우드로 넘어가는 거라, 사내 관리자 화면은 로컬에서만 돌린다.

결정적 실행과 에이전트 사이

Playwright 스크립트는 빠르고 공짜지만 화면이 조금만 바뀌어도 깨진다. 반대로 매번 에이전트한테 시키면 적응은 잘하는데 느리고 토큰이 나간다. Workflow Use는 평소엔 녹화대로 재생하고 깨진 단계에서만 에이전트를 부르니까, 내가 보기엔 둘 사이 어딘가에 있는 도구다.

쓸 때 메모

  • 녹화는 클릭을 최소화할수록 견고하다. 입력값은 변수로 빼 둔다.
  • DOM이 자주 바뀌는 사이트는 유지비가 크다.
  • 자동화·개인정보 정책 확인.
  • Next 앱 E2E 대용으로 Playwright 정식 스위트를 대체하진 않는다 — 탐색·운영 잡무 자동화 실험용.