오토프로그 — 노트북 앞의 개구리오토프로그
메뉴
무료 진단
Repo 목차펼치기

Playwright MCP

V2작성2026-04-12읽는 시간12분

AI에게 브라우저라는 손을 달아주는 도구

AI에게 브라우저 손을 달아준다 — 로그인 기억, 기존 글 학습, 글쓰기·발행, 수정 반복의 4단계 흐름도

이건 뭐예요?

컴퓨터 앞에 앉은 신입 직원을 한 명 떠올려 보세요. 이 직원은 일은 빠른데, 손이 없어요. 무엇을 해야 하는지는 다 알고 있지만 마우스를 못 잡고 키보드를 못 두드려요. Playwright(플레이라이트)는 이 직원에게 손을 하나 달아주는 도구예요.

손이 생긴 AI는 이런 일을 합니다. 크롬 브라우저를 직접 열고, 네이버에 들어가고, 글쓰기 버튼을 누르고, 제목을 치고, 본문을 쓰고, 사진을 끌어다 올리고, 카테고리를 고르고, 마지막에 발행 버튼까지 누릅니다. 사람이 하던 순서 그대로예요.

만든 곳은 마이크로소프트(Microsoft)입니다. 원래 개발자들이 "우리 홈페이지 회원가입이 잘 되나" 같은 걸 자동으로 검사하려고 만든 도구였는데, AI가 등장하면서 훨씬 넓은 자리에 쓰이게 됐어요.

여기에 MCP(Model Context Protocol, 모델 컨텍스트 프로토콜)라는 말이 붙습니다. 어려워 보이지만 뜻은 단순해요. AI와 바깥 도구를 이어주는 공용 콘센트예요. 예전엔 기기마다 충전기 모양이 달라서 못 꽂았는데 USB-C가 표준이 되고 나서는 노트북이든 핸드폰이든 케이블 하나면 끝나잖아요. MCP가 딱 그 역할이에요. 그래서 Playwright MCP는 "AI가 바로 꽂아 쓸 수 있게 포장한 브라우저 손"이라고 보시면 됩니다.

여기서 제일 중요한 건 이거예요.

코드는 AI가 짭니다. 우리는 말로 순서를 시킵니다.

저는 코딩을 한 줄도 못 씁니다. 그런데도 이 도구로 회사 업무가 여러 개 돌아가고 있어요. 제가 하는 일은 "이렇게 해라, 저건 틀렸다 고쳐라"라고 말하는 것뿐이에요.


우리는 이렇게 쓰고 있어요

말로만 하면 안 와닿으니까, 저희가 실제로 돌리고 있는 일들을 보여 드릴게요.

1. 부동산 매물을 5개 채널에 한 번에 올리기

가장 최근 사례예요. 「자동화 해드립니다」 3편에서 대구에서 부동산을 하시는 대표님을 모시고, 실제로 그분 업무를 자동화해 봤습니다.

대표님이 안고 계시던 문제는 두 가지였어요.

첫째, 건축물대장. 매물을 광고하려면 건축물대장(건물의 층수·면적·사용승인일 같은 게 적힌 공적 장부)에 있는 기재사항을 광고에 같이 넣어야 합니다. 그래서 광고 한 건마다 장부를 떼서 눈으로 보고 손으로 옮겨 적으셨어요. 하루에 열 건, 스무 건, 서른 건, 많을 땐 오십 건까지요. 게다가 잘못 적으면 과태료가 나옵니다.

둘째, 채널이 다섯 개. 네이버 블로그, 인스타그램, 당근, 틱톡, 유튜브. 무료로 올릴 수 있는 곳은 다 하고 계셨는데, 전부 손으로 하나하나 올리셨어요.

그래서 만든 게 관리자 페이지 하나입니다. 주소를 넣고, 사진과 영상을 넣고, 등록 버튼을 누르면 건축물대장을 자동으로 조회해서 기재사항을 채우고 다섯 개 채널에 알아서 올라갑니다. 네이버·인스타·당근 세 곳이 올라가는 데 걸린 시간은 약 1분이었어요.

촬영 현장에서 화면이 자동으로 넘어가는 걸 보시던 대표님 반응이 이랬습니다.

"만세하고 있는데 지금 나는." "인스타에 이렇게 진짜 똑같이 올라가는지 몰랐어. 내가 쓰는 말투 그대로."

말투가 똑같이 나온 건 우연이 아니에요. 왜 그런지는 바로 다음 절에서 설명드릴게요.

2. 우리 회사 네이버 블로그를 매일 아침 알아서 쓰기

저희 회사 블로그는 아침마다 사람이 안 씁니다. 자동으로 그날의 인기 주제를 고르고 1,500~2,000자짜리 글을 써서 네이버 블로그에 임시저장까지 해 둬요. 발행 버튼은 제가 읽어 보고 누릅니다. 글은 사람이 마지막에 확인하는 게 맞다고 생각해서요.

이때 쓰는 브라우저도 그냥 크롬입니다. 로그인된 상태를 그대로 유지한 채 재사용하고, 글자도 붙여넣기가 아니라 사람이 치듯 한 글자씩 칩니다. 원리는 부동산 편과 똑같은 Playwright예요.

3. 유튜브 영상 올리기

저희 채널에 영상을 올릴 때도 사람이 누르지 않습니다. 제목·설명·태그·썸네일·고정댓글까지 브라우저 자동화가 대신 채워요.

4. 글 쓰고 나서 화면 확인

지금 보고 계신 이 랩스 사이트도 새 글을 올린 뒤에 실제 화면을 열어 캡처해서 제대로 보이는지 눈으로 확인합니다.


어떻게 시키는 건가요? — 브라우저 자동화 4단계

영상에서 대표님께 원리를 설명드린 부분이 있어요. 그게 사실상 전부입니다. 네 단계예요.

1단계 — "로그인은 내가 할 테니, 로그인 정보를 기억해라"

AI한테 갑자기 "네이버 블로그에 글 써"라고 하면 못 합니다. 로그인이 안 돼 있으니까요. 그래서 순서를 이렇게 잡습니다.

브라우저를 열어 달라고 하고, 로그인은 내가 직접 합니다. 아이디·비밀번호·2차 인증은 사람 몫이에요. 그리고 "이 상태를 기억해 둬"라고 말하면 됩니다.

한 번 기억시켜 두면 보통 1~3주는 유지됩니다. 다만 평생 기억하는 건 아니에요. 종종 풀립니다. 풀렸을 땐 이렇게만 말하면 돼요.

"네이버 블로그 로그인이 풀렸다. 브라우저 열어 줘. 내가 로그인할 테니 다시 기억해라."

그러면 창을 열어 줍니다. 로그인만 다시 하시면 끝이에요.

2단계 — "우리 블로그 최근 글 다섯 개를 분석해서, 어떻게 쓰는지 학습해라"

이게 아까 그 "내 말투 그대로"의 비밀입니다.

그냥 "글 써"라고만 하면 AI가 자기 마음대로 씁니다. 딱 봐도 AI가 쓴 티가 나는 글이 나와요. 그래서 먼저 우리 블로그에 이미 올라가 있는 최근 글 다섯 개를 읽고 학습하라고 시킵니다. 제목을 어떻게 다는지, 사진을 어디에 넣는지, 법적 고지 사항은 어떤 문장으로 적는지를 전부 그 글들에서 배웁니다.

그렇게 나온 결과물이 대표님이 평소 쓰시던 글과 똑같았던 거예요. 새로 가르친 게 아니라, 이미 쓰고 계시던 걸 그대로 따라 하게 한 것뿐입니다.

3단계 — "매물을 등록하면, 학습한 대로 글을 써라"

이제 실제로 시킵니다. 관리자 페이지에서 매물을 하나 등록하면, 그 정보로 학습한 형식에 맞춰 글을 씁니다.

여기에 세부 규칙을 얹어요. 예를 들면 이런 것들입니다.

  • 발행 버튼을 누를 때 카테고리를 골라라. 매물이 원룸이면 원룸, 투룸이면 투룸.
  • 붙여넣기 하지 말고 사람이 치듯 한 글자씩 입력해라. (계정이 문제 되지 않게 하려고 일부러 그렇게 시켰습니다)
  • 발행까지 할지, 임시저장에서 멈출지 체크박스로 고를 수 있게 해라.

말로 이렇게 시키면 AI가 스스로 코드를 짜고 알아서 수정합니다. 저는 코드를 안 봅니다.

4단계 — "A가 틀렸다, B가 틀렸다" — 수정과 반복

여기가 제일 중요한데 다들 그냥 넘어가는 부분이에요.

한 번에 되지 않습니다. 처음에는 글이 이상하게 나오는 경우가 많아요. 그럼 그때마다 이렇게 말하면 됩니다.

"A가 잘못됐다. B도 잘못됐다. 수정해라."

이걸 몇 번만 반복하면 거의 완벽해집니다. 부동산 편도 이 과정을 네이버 → 인스타 → 당근 → 유튜브 → 틱톡, 사이트마다 하나씩 반복한 거예요. 원리는 다섯 번 다 똑같습니다.

그리고 — 처음 일주일은 눈으로 보세요

저희가 만든 화면에는 「브라우저 백그라운드 실행」 체크박스가 있습니다. 끄면 크롬 창이 뜨면서 글이 써지는 게 다 보이고, 켜면 창 없이 조용히 혼자 처리해요.

촬영 때 대표님이 "그냥 안 보고 돌릴까요?" 하시길래 제가 말렸습니다.

"아니에요. 한 일주일 동안은 브라우저를 보세요. 잘못된 정보가 올라가면 지우는 게 더 귀찮거든요."

처음 일주일은 눈으로 확인하고, 익숙해지면 백그라운드로 돌리세요. 이 순서가 안전합니다.


한번 써볼까요?

설치부터 말씀드릴게요. 터미널에서 뭘 치실 필요 없습니다.

오토프로그 셋팅 페이지(autofrog.kr/class/1/setup)에 가시면 「브라우저 자동화 (Playwright)」 항목이 있어요. 기본으로 켜져 있습니다. 페이지가 만들어 주는 스크립트를 복사해서 붙여넣으면 등록이 끝나요. 기본은 화면이 보이는 상태로 설치됩니다. 나중에 "안 보이게 해 줘"라고 말하면 조용히 도는 방식으로 바뀝니다.

설치가 끝났으면 클로드 코드를 껐다 켜시고, 아래 프롬프트를 순서대로 하나씩 넣어 보세요. 위에서 본 4단계를 여러분 블로그에 그대로 적용한 문장입니다.

1단계 — 로그인을 기억시킵니다.

네이버 블로그 로그인은 내가 직접 할게.
브라우저를 열어 주고, 내가 로그인을 마치면 그 상태를 기억해 둬.
다음부터는 다시 로그인하지 않아도 되게 해 줘.

창이 뜨면 여기서 손을 잠깐 쓰셔야 합니다. 아이디·비밀번호를 치고 문자 인증 같은 2차 인증이 뜨면 그것까지 직접 마쳐 주세요. 이것만 직접 하시면 나머지는 클로드가 알아서 해 줘요.

2단계 — 내 글쓰기 방식을 학습시킵니다.

내 네이버 블로그에 올라가 있는 최근 글 다섯 개를 열어서 읽고,
제목 짓는 방식 · 문단 길이 · 사진 넣는 위치 · 말투 · 해시태그 규칙을 분석해 줘.
분석한 내용을 규칙 파일로 정리해 두고, 앞으로 글을 쓸 때 그 규칙대로 써.

3단계 — 실제로 글을 쓰게 합니다.

아래 내용으로 네이버 블로그 글을 하나 써 줘.
네가 학습한 내 규칙대로 쓰고, 사진은 내가 지정한 폴더에서 순서대로 넣어 줘.
글자는 붙여넣기 하지 말고 사람이 치듯 한 글자씩 입력해.
카테고리는 내용에 맞는 걸 골라 주고, 발행은 하지 말고 임시저장까지만 해.
[여기에 오늘 쓸 내용을 적으세요]

처음에는 임시저장까지만 시키시는 걸 권합니다. 결과를 눈으로 보고 마음에 들면 그때 "발행까지 해 줘"로 바꾸시면 돼요.

4단계 — 틀린 부분을 고칩니다.

방금 쓴 글에서 두 가지가 틀렸어.
1) 제목이 너무 길다 — 25자 안으로 줄여.
2) 사진이 첫 문단 위에 들어갔다 — 두 번째 문단 아래로 내려.
이 두 가지를 규칙에 추가하고 다시 써 줘.

이걸 몇 번 반복하면 자리를 잡습니다. "규칙에 추가해" 라는 말을 꼭 붙이세요. 그래야 다음 글부터 같은 실수를 안 합니다.

로그인이 풀렸을 때.

네이버 블로그 로그인이 풀렸어. 브라우저 열어 줘.
내가 다시 로그인할 테니 로그인 상태를 다시 기억해 둬.

클로드 코드 터미널에서는 이렇게

원리가 궁금한 분만 보세요. 위에서 셋팅 페이지로 설치하셨다면 안 하셔도 됩니다.

셋팅 페이지가 대신 실행해 주는 명령은 사실 딱 한 줄이에요. 클로드 코드 대화창에서 ! 를 맨 앞에 붙이면 터미널 명령어를 바로 실행할 수 있어요.

# 클로드 코드에 Playwright 브라우저 손을 등록하는 한 줄
# --scope user : 한 프로젝트가 아니라 내 컴퓨터 어디서든 쓰게 등록해요
! claude mcp add --scope user playwright -- npx @playwright/mcp@latest

등록이 잘 됐는지 보고 싶으면 목록을 확인하시면 되고, 빼고 싶으면 remove 로 내리시면 됩니다.

# 등록된 목록 보기 — "playwright" 가 보이면 성공이에요
! claude mcp list

솔직하게 말씀드릴 것

좋은 얘기만 하면 안 되니까 못 하는 것도 적어 둘게요.

  • 틱톡은 촬영 당일에 실패했습니다. 네이버·인스타·당근·유튜브는 잘 올라갔는데, 마지막 라이브 테스트에서 틱톡만 안 됐어요. 사이트에서 뭔가가 바뀌어서 다시 손봐야 했습니다.
  • 사이트가 바뀌면 다시 수리해야 합니다. 네이버든 인스타든 화면 구조를 바꾸면 AI가 버튼을 못 찾아요. 그때마다 "뭐가 이상하다"고 말해 주면서 고쳐 나가야 합니다.
  • 로그인은 종종 풀립니다. 1~3주에 한 번쯤이요. 그때마다 브라우저 열고 다시 로그인해 주셔야 해요.
  • 처음엔 틀린 글이 나옵니다. 한 번에 완성되는 경우는 거의 없어요. 몇 번 지적하고 고치는 시간이 필요합니다.

그래서 저는 이렇게 말씀드려요. 완전 무인 기계가 아니라, 손이 빠른 신입 직원을 한 명 들인 것에 가깝습니다. 처음엔 옆에서 봐 주셔야 하고 가끔 챙겨 주셔야 해요. 대신 한번 자리를 잡으면 손으로 한 시간 걸리던 일이 1분이 됩니다.


이런 분께 추천해요

  • 매물 광고를 여러 채널에 올리는 공인중개사. 건축물대장 기재사항을 광고마다 손으로 옮겨 적고 계시다면, 그리고 같은 매물을 네이버·인스타·당근에 세 번 올리고 계시다면 바로 그 자리입니다.
  • 매일 블로그를 써야 하는 소상공인. 가게 소식, 신메뉴, 후기 답글. 내용은 사장님이 정하고 타이핑은 AI에게 넘기세요. 임시저장까지만 시키고 발행은 직접 누르시면 마음도 편합니다.
  • 혼자 영상 올리는 1인 채널 운영자. 제목·설명·태그·썸네일·고정댓글. 영상 하나 올릴 때마다 반복되는 그 과정을 대신 눌러 줍니다.
  • 같은 화면을 매일 확인하는 분. 재고 현황, 주문 목록, 광고 대시보드. 아침마다 열어서 캡처해 두라고 시키면 됩니다.

공통점이 하나 있어요. "사람이 브라우저에서 손으로 반복하는 일" 이라면 전부 후보입니다. 코딩을 아실 필요는 없어요. 순서를 말로 설명하실 수 있으면 됩니다.


참고 링크

▸개정 이력2건
  • v22026-09-13전면 개정 — 터미널 설정 위주 설명을 걷어내고, 부동산 자동화(유튜브 3편)·네이버 블로그 자동 작성·유튜브 발행 등 실제 사례 중심으로 다시 씀. 브라우저 자동화 4단계를 뼈대로 재구성하고 「한번 써볼까요」를 추천 프롬프트 방식으로 교체
  • v12026-04-12초판

이 글은 오토프로그(AutoFrog) 랩스에서 씁니다 — (주)디온웍스가 운영하는 AI 업무 자동화·바이브 코딩 교육 브랜드 · autofrog.kr