네이버 블로그 글쓰기, AI로 임시저장 직전까지 완전 자동화

하루 한 편, 매번 30분 넘게 손으로 하던 네이버 블로그 업로드를 AI가 브라우저를 직접 조종해 본문·사진·캡션·제목까지 넣고 임시저장하는 데까지 자동화했다.

어제 처음으로 끝까지 성공했다. 내가 하는 건 임시저장된 글을 열어 한 번 훑어보고 발행 버튼을 누르는 것뿐이다. 회사 업무에 바로 쓸 수 있는 수준이라는 게 이번 작업에서 제일 큰 의미다.

원래는 이랬다

업체가 인블로그에 써 준 회사 블로그 글을 네이버 블로그로 이관하는 업무를 하고 있다. 그대로 옮기지 않고 네이버 검색에 맞게 문체와 구조를 바꿔서 올린다. 하루 한 편 정도다. 바꿔 쓰는 작업은 이미 AI와 같이 하고 있었다. 그래도 네이버 에디터에 넣으면서 클릭하고, 사진 올리고, 내 문체에 맞게 다시 손보는 일이 매번 남았다.

네이버 블로그는 글을 올리는 공식 API가 없다. 그래서 AI가 쓴 글을 결국 사람이 손으로 옮겨야 했다. 그나마 줄이려고 만든 게 즐겨찾기 버튼(북마클릿)과 파워쉘 명령이었다.

순서	담당	할 일
1	AI	본문, 제목 후보, 사진 목록과 캡션이 담긴 작업 시트 만들기
2	사람	작업 시트의 「사진 받기 명령」을 복사해 파워쉘에 붙여넣기
3	사람	「본문 복사」 눌러서 네이버 글쓰기에 붙여넣기
4	사람	즐겨찾기 「서식 변환」 누르기 (인용구 모양, 구분선 모양 바꾸기)
5	사람	즐겨찾기 「사진 넣기」를 사진 수만큼 누르고, 매번 파일 선택 창에서 사진 고르기
6	사람	사진마다 캡션 칸 눌러서 붙여넣기
7	사람	제목 입력, 링크 카드 확인, 발행

버튼 덕분에 많이 줄긴 했다. 그래도 사진이 열 장 넘어가면 클릭이 수십 번이다. 캡션은 자동으로 넣는 데 실패해서 클립보드에 복사만 해두고 사람이 붙여넣는 식이었다. 한 편에 30분은 기본으로 들었다.

바꾼 방식: AI가 브라우저를 코드로 조종

핵심은 Playwright MCP다. Playwright는 브라우저를 코드로 조작하는 도구고, MCP로 연결하면 AI가 그걸 직접 쓴다. 화면을 캡처해서 좌표를 누르는 방식이 아니라 페이지 구조를 읽고 요소를 골라서 조작한다. 그래서 빠르고, 좌표가 어긋날 일이 적다.

연결은 이렇게 했다.

단계	내용
1	웨일 바로가기 대상 끝에 --remote-debugging-port=9222를 붙여서, 그 바로가기로 웨일 실행
2	Claude 데스크톱 앱 설정 파일에 Playwright MCP 등록. 이미 켜진 웨일(9222 포트)에 붙도록
3	앱을 완전히 종료했다가 다시 켜기

설정 파일에 들어간 내용은 이거다. 프리미어 MCP를 이미 쓰고 있어서 둘이 같이 들어가 있다.

{
  "mcpServers": {
    "playwright": {
      "command": "cmd",
      "args": ["/c", "npx", "-y", "@playwright/mcp@latest", "--cdp-endpoint", "http://localhost:9222"]
    },
    "premiere-pro": { "...": "..." }
  }
}

새 웨일을 따로 띄우는 게 아니라 내가 평소 쓰는 웨일에 붙는다는 점이 중요하다. 네이버 로그인이 이미 돼 있으니 아이디·비밀번호를 AI에게 넘길 일이 없다.

네이버 에디터와 씨름한 부분

네이버 스마트에디터는 자동화하기 까다롭다. 실제로 막혔던 곳과 푼 방법을 남겨둔다.

막힌 곳	해결
본문 붙여넣기	클립보드를 쓰지 않고, 에디터 안쪽 입력 영역에 가짜 붙여넣기 이벤트를 직접 보낸다. HTML 그대로 들어가서 표·굵게·줄바꿈이 유지된다
문단 여백	네이버는 문단 여백을 무시한다. 빈 줄은 실제 빈 문단으로 넣어야 한다
인용구 모양	HTML로 붙인 인용구는 무조건 따옴표 인용구로 들어온다. 붙인 다음 인용구를 눌러 모양 버튼으로 바꾼다
사진 자리	본문에 [📸 사진 01 | 캡션: …] 같은 자리표시 줄을 넣어두고, 그 줄을 지운 자리에서 사진 버튼을 누른다
줄 지우기	Shift+Home 같은 선택 키를 에디터가 가로챈다. 줄 끝을 클릭하고 Backspace를 글자 수만큼 반복한다
사진 올리기	파일 선택 창을 띄우지 않고 Playwright의 파일 업로드 기능으로 바로 넣는다. 단, 작업 폴더 밖 파일은 거부해서 사본을 작업 폴더에 둔다
캡션 칸	사진을 먼저 클릭해야 캡션 칸이 나타난다. 예전에 캡션 자동 입력이 실패한 이유가 이거였다
업로드 확인	올라간 직후 사진 주소가 svg 자리표시로 보이는데 정상이다. 몇 초 기다리면 된다
버튼이 안 눌림	사이드 패널에 가려졌거나 애니메이션 중이다. 버튼 위치를 매번 다시 구해서 마우스로 누른다
숨은 탭	탭이 뒤에 숨어 있으면 화면이 응답하지 않는다. 탭을 앞으로 가져온 뒤 진행한다

본문 붙여넣기 코드는 이렇다. 이게 되고 나서 나머지가 풀렸다.

async (page) => {
  const HTML = `...본문 HTML...`;
  const fr = page.frame({ name: 'mainFrame' }) || page.mainFrame();
  await fr.locator('.se-component.se-text .se-text-paragraph').first().click();
  await page.waitForTimeout(400);
  await fr.evaluate((h) => {
    const ib = [...document.querySelectorAll('iframe')]
      .map(i => { try { return i.contentDocument } catch (e) { return null } })
      .find(x => x && x.body && x.body.isContentEditable);
    const W = ib.defaultView, dt = new W.DataTransfer();
    dt.setData('text/html', h);
    dt.setData('text/plain', h.replace(/<[^>]+>/g, ''));
    ib.body.dispatchEvent(new W.ClipboardEvent('paste', { clipboardData: dt, bubbles: true, cancelable: true }));
  }, HTML);
  await page.waitForTimeout(4000);
}

사진은 한 장씩 반복이다. 한 번 실행하면 「앞 사진에 캡션 넣기」와 「다음 📸 자리를 지우고 사진 버튼 누르기」를 같이 하고, 파일 선택 상태가 되면 그 순번의 사진을 올린다. 📸 자리가 더 없을 때까지 돈다.

발행은 절대 안 누르게

마지막 단계는 임시저장이다. 여기서 제일 신경 쓴 건 발행 버튼을 실수로라도 누르지 않게 하는 것. 버튼 글자를 먼저 읽어서 「저장」이 아니거나 「발행」이 들어 있으면 누르지 않고 멈춘다. 저장 버튼 옆 숫자가 1 늘었는지로 성공을 확인한다.

async (page) => {
  const fr = page.frame({ name: 'mainFrame' }) || page.mainFrame();
  const btn = fr.locator('button[class*="save_btn"]').first();
  const label = (await btn.textContent()).trim();
  if (!/저장/.test(label) || /발행/.test(label)) return { error: label };
  const cnt = () => fr.evaluate(() => document.querySelector('[class*="save_btn"]').parentElement.textContent);
  const before = await cnt();
  const b = await btn.boundingBox();
  await page.mouse.click(b.x + b.width / 2, b.y + b.height / 2);
  await page.waitForTimeout(2500);
  return { before, after: await cnt() };
}

발행을 사람 몫으로 남긴 건 일부러다. 공개되는 글이고 회사 이름으로 나가는 글이라, 마지막 확인은 내가 한다. 대신 그 확인 말고는 손댈 게 없다.

단계	예전	지금
글 쓰기	AI	AI
사진 준비	파워쉘에 명령 붙여넣기	AI
본문 넣기	복사·붙여넣기	AI
서식 정리	즐겨찾기 버튼	AI
사진·캡션	사진 수만큼 클릭, 캡션 붙여넣기	AI
제목·링크 카드	사람	AI
임시저장	사람	AI
확인·발행	사람	사람

개인 블로그용으로도 만들었다

같은 방식을 개인 네이버 블로그에도 쓸 수 있게 스킬로 따로 정리했다. 회사 버전과 다른 점은 말투다. 내 예전 글 몇 편을 읽어서 어미, 이모지, 문단 길이, 사진 배치 습관을 표로 뽑아두고 그 말투로 쓰게 했다. 사진 폴더와 대충 적은 메모만 주면 글을 써서 임시저장까지 해둔다.

항목	내용
입력	사진 폴더 경로 + 메모
말투	처음 한 번, 최근 글 5편 구조를 읽어서 문체 프로필 저장
지어내지 않기	메모·사진에 없는 가게 이름, 가격, 날짜는 안 쓰고 [확인 필요]로 남김
사진	HEIC는 JPG로, 너무 크면 줄이고, 원하면 위치정보 지운 사본 사용
끝	임시저장. 발행은 내가

스킬 파일은 공개해둔다. Claude에 스킬로 넣어 쓰면 된다.

파일	내용
SKILL.md	전체 절차와 코드
my-blog.md	문체 프로필 빈 양식

집 PC에도 같은 연결을 깔다가 중간에 멈춰 있다. 설정 파일까지 넣었는데 Claude 앱이 아직 Playwright를 못 잡았다. 앱 설정의 개발자 탭에서 어떤 설정 파일을 읽는지 확인하는 것부터 다시 할 거다.

다음 글에는 이걸 해놓고 든 생각을 적는다. 이 도구가 생기고 나서 왜 서둘러야겠다고 느꼈는지.