...
`, 문단 안 줄바꿈 ``(네이버는 문단 여백을 무시한다). - 정렬·크기는 프로필대로 `
` 식으로 적는다.
- 사진 자리는 단독 문단으로 ` [📸 사진 01 | 캡션: ...]`, 구분선은 `
`.
- 링크는 URL만 단독 문단으로(나중에 링크 카드로 바꾼다).
3. 쓴 HTML은 작업 폴더에 `draft.html`로 저장해 둔다(나중에 다시 붙여넣을 수 있게).
## 4. 네이버 글쓰기에 넣기 (Playwright MCP)
브라우저는 CDP(예: `localhost:9222`)로 연결된 웨일/크롬. 시작 전에 `browser_tabs`(list)로 연결부터 확인한다.
### 4-1. 글쓰기 열기
- `browser_tabs`(new)로 `https://blog.naver.com/아이디/postwrite`를 연다.
- 「작성 중인 글이 있습니다」 팝업이 뜨면 **멈추고 사용자에게 묻는다**(확인=이어쓰기, 취소=새 글).
- 화면이 응답 없거나 스크린샷이 시간초과면 탭이 숨겨진 상태다(`document.visibilityState==='hidden'`). `browser_tabs`(select)로 앞으로 가져온다.
- 에디터 문서: `const fr = page.frame({ name: 'mainFrame' }) || page.mainFrame();`
### 4-2. 본문 붙여넣기 (가짜 붙여넣기 이벤트, 클립보드 불필요)
`browser_run_code_unsafe`로 실행. `HTML`에 draft.html의 본문을 넣는다.
```js
async (page) => {
const HTML = `...draft 본문...`;
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);
return fr.evaluate(() => [...document.querySelectorAll('.se-text-paragraph')].filter(p => p.textContent.includes('📸')).length);
}
```
붙여넣은 blockquote는 따옴표 인용구(인용구 1)로 들어온다. 다른 모양이 필요하면 인용구를 클릭해 뜨는 `button[data-name$="-layout"][data-value="quotation_line"]` 같은 버튼으로 바꾼다.
### 4-3. 사진 넣기 (사진마다 반복)
한 번 실행 = 「캡션이 빈 사진에 캡션 넣기」 + 「다음 📸 자리 지우고 사진 버튼 누르기」. 실행 후 파일 선택 상태가 되면 `browser_file_upload`로 그 순번 파일을 올리고, 다시 같은 코드를 실행한다. `next:"none"`이 나올 때까지.
```js
async (page) => {
const CAPS = ['캡션1', '캡션2' /* 사진 순서대로, 캡션 안 쓰면 '' */];
const fr = page.frame({ name: 'mainFrame' }) || page.mainFrame();
const out = {};
await page.waitForTimeout(4000); // 직전 업로드 대기 (img src가 svg 자리표시여도 정상)
const imgs = fr.locator('.se-component.se-image');
const n = await imgs.count(); out.imgs = n;
for (let k = 0; k < n; k++) {
const want = CAPS[k]; if (!want) continue;
const cap = imgs.nth(k).locator('.se-caption .se-text-paragraph').first();
const txt = (await cap.textContent()).replace(/[\s]/g, '');
if (txt !== '' && txt !== '사진설명을입력하세요.') continue;
const im = imgs.nth(k).locator('img').first();
await im.evaluate(e => e.scrollIntoView({ block: 'center' })); await page.waitForTimeout(400);
const bb = await im.boundingBox();
await page.mouse.click(bb.x + bb.width / 2, bb.y + bb.height / 2); await page.waitForTimeout(500); // 캡션 칸은 사진을 눌러야 보인다
await cap.click({ timeout: 5000 }); await page.waitForTimeout(400);
await page.keyboard.type(want); await page.waitForTimeout(500);
out['cap' + (k + 1)] = (await cap.textContent()).trim();
}
const ph = fr.locator('.se-text-paragraph', { hasText: '[📸 사진 ' }).first();
if (!(await ph.count())) { out.next = 'none'; return out; }
out.next = (await ph.textContent()).slice(0, 12);
const pid = await ph.getAttribute('id');
await ph.evaluate(e => e.scrollIntoView({ block: 'center' })); await page.waitForTimeout(300);
const box = await ph.locator('span').last().boundingBox();
await page.mouse.click(box.x + box.width - 1, box.y + box.height / 2); await page.waitForTimeout(200);
const left = () => fr.evaluate(id => { const p = document.getElementById(id); return p ? p.textContent.replace(/[\s]/g, '').length : -1; }, pid);
for (let i = 0; i < 150 && (await left()) > 0; i++) { await page.keyboard.press('Backspace'); await page.waitForTimeout(20); }
out.remain = await left(); if (out.remain !== 0) return out;
const pb = await fr.evaluate(() => { const all = [...document.querySelectorAll('button[data-name="image"]')].filter(x => x.offsetParent); const b = all.find(x => x.getAttribute('data-group') === 'documentToolbar') || all[0]; const r = b.getBoundingClientRect(); return [r.x + r.width / 2, r.y + r.height / 2]; });
await page.mouse.click(pb[0], pb[1]); // 위쪽 툴바 「사진」
return out;
}
```
- 사진 크기: 사진을 클릭한 뒤 `button[data-name="content-mode-without-pagefull"]` 중 「작게」/「문서 너비」, 또는 `button[data-name="image-resizing"]`(크기 입력, 「모든사진 적용」은 끈 채로)로 프로필에 맞춘다.
- 여러 장을 한 줄로 묶는 블로그(이미지 그룹)라면 해당 사진들을 한 번에 `browser_file_upload`에 넘기고 뜨는 배치 선택에서 고른다.
### 4-4. 제목
```js
async (page) => { const fr = page.frame({ name: 'mainFrame' }) || page.mainFrame();
const t = fr.locator('.se-documentTitle .se-text-paragraph').first(); const b = await t.boundingBox();
await page.mouse.click(b.x + 20, b.y + b.height / 2); await page.waitForTimeout(400);
await page.keyboard.type('제목'); return (await t.textContent()).trim(); }
```
### 4-5. 링크 카드 (URL이 있을 때만)
URL 문단을 4-3과 같은 방식(끝 클릭 → Backspace 반복)으로 비운 뒤, 4-2의 붙여넣기 코드로 `text/plain`과 `` 형태의 URL만 붙여넣으면 카드가 생긴다. 카드 위에 URL 글자 줄이 하나 더 남으므로 그 문단도 비우고 Backspace를 한 번 더 눌러 빈 줄을 없앤다. 썸네일을 끄려면 카드 썸네일에 마우스를 올린 뒤 `button.se-oglink-thumbnail-delete`를 누른다.
### 4-6. 임시저장
```js
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() }; }
```
저장 옆 숫자가 1 늘었으면 성공.
### 자주 막히는 곳
| 증상 | 해결 |
|---|---|
| Shift+Home으로 줄 선택이 안 됨 | 네이버 에디터가 키를 가로챈다. 줄 끝 클릭 + Backspace 반복으로 지운다 |
| locator.click이 계속 대기 | 툴바가 「라이브러리」 같은 사이드 패널에 가려졌거나 애니메이션 중. 패널 X를 누르고, 버튼은 `getBoundingClientRect` 좌표로 `page.mouse.click` |
| 업로드한 사진의 img src가 svg | 정상. 업로드 완료 판단은 몇 초 대기 + 라이브러리/화면 확인으로 |
| 캡션 칸이 안 보임 | 사진을 먼저 클릭해야 나타난다 |
| `browser_file_upload`가 경로 거부 | 사진 사본을 작업 폴더 안에 두고 그 경로를 쓴다 |
| 창 크기가 바뀌어 좌표가 어긋남 | 좌표는 매번 `boundingBox`로 다시 구한다 |
## 5. 마지막 점검과 보고
- 점검: 📸 자리 남은 것 없음, 사진 수 = 계획 수, 캡션 확인, 제목 확인, URL 글자 줄 남은 것 없음, 저장 숫자 +1.
- 보고(짧게): 저장한 제목, 사진 몇 장, `[확인 필요]`로 남긴 부분, 추천 태그 5~10개(태그는 발행 화면에서 넣는 것이라 직접 넣으시라고 안내).
- 발행은 사용자가 직접 한다.