네이버 블로그 글쓰기 API는 2020년에 폐지됐습니다. 그래서 저희도 지금까지 글을 손으로 옮겨 붙였어요. 사진 넣고, 표 다시 만들고, 서체 바꾸고, 태그 달고. 한 편에 40분씩 걸렸습니다.
이제 이렇게 합니다.
node publish.mjs <슬러그> # 임시저장
node publish.mjs <슬러그> --publish # 발행한 번에 들어가는 것
실제 실행 로그입니다. 저희 블로그 글 하나를 그대로 옮긴 결과예요.
| 들어가는 것 | 실측 |
|---|---|
| 본문 | 13,337자 → 12,751자 (네이버 서식으로 다시 조립) |
| 사진 | 13장 — URL로 넣으면 네이버가 알아서 가져간다 |
| 표 | 3개 — 이미지로 구워서 |
| 영상 | 릴스 mp4 16MB (73초 걸림) |
| 해시태그 | 8개 — 본문 맨 끝에 |
| 서체 | 본문 전체 마루부리 270곳 |
이런 소식, 남들보다 먼저 받으실 분?
직접 돌려보고 되는 것만 골라 매주 보내드립니다. 광고성 하이프는 거릅니다.
DOM을 조립하지 않습니다. 붙여넣습니다
스마트에디터 ONE은 컴포넌트 기반이라 DOM을 직접 만들면 계속 깨집니다. 문단 하나를 넣어도 에디터가 자기 구조로 다시 잡아버려요.
그래서 방향을 바꿨습니다. HTML을 클립보드에 올리고 붙여넣으면 에디터가 알아서 자기 컴포넌트로 바꿔줍니다. 우리가 만드는 게 아니라 에디터한테 만들게 하는 것이에요.
윈도우 클립보드에 CF_HTML 형식으로 올리고, 브라우저에는 붙여넣기 키 이벤트를 보냅니다. 이미지도 URL만 맞으면 그대로 올라갑니다.
뭐가 살아남고 뭐가 죽나 — 시험지 16종
문제는 뭐가 살아남는지 문서가 없다는 것이었습니다. 그래서 시험지 16종을 직접 붙여넣고 결과 DOM을 받아 적었어요.
인라인 font-size와 color는 그대로 삽니다. <blockquote>는 진짜 인용 컴포넌트가 되고, <figure>는 캡션까지 따라와요.
반면 <ul> 목록은 평범한 문단으로 풀리고, <style> 시트는 통째로 버려집니다. 그래서 인라인 스타일만 씁니다.
표는 그림으로 굽습니다
버려지는 것 중에 제일 아픈 게 <table>이었습니다. 통째로 안 넘어가요. 비교표가 글의 핵심인 편이 많은데 그게 사라지는 겁니다.
그래서 표를 이미지로 구워서 사진처럼 넣습니다. 사진은 가운데 정렬로 깔끔하게 들어가거든요.
여기 함정이 하나 있습니다. 네이버는 이미지를 URL로만 가져가니 배포된 주소여야 하는데, 저희 firebase.json이 blog/**/*.png를 배포에서 뺍니다(호스팅 용량 때문에). png로 구우면 404가 나요. 반드시 webp로 굽습니다.
영상은 다섯 번 만에 됐습니다
제일 오래 걸린 게 영상이었어요. 네 번 실패했습니다.
- 툴바 「동영상」은 팝업이 아니라 같은 화면 레이어입니다 — 창 개수가 그대로예요
waitForFileChooser로는 안 잡힙니다 — 툴바 버튼이 파일창을 안 엽니다- 레이어 안 「동영상 추가」를 가로채
accept()해도 요청조차 안 나갑니다 - 업로더가
input을 그때그때 만들었다 지워서change가 안 걸립니다
답은 HTMLInputElement.prototype.click을 가로채 그 input을 붙잡아 두는 것이었습니다. 붙잡아 두고 파일을 직접 넣으면 올라갑니다.
그리고 일부러 천천히 돕니다
여기가 이 도구에서 제일 많이 손댄 곳입니다. 빠르게 만들 수 있는데 일부러 안 했어요.
- 마우스가 베지에 곡선으로 움직입니다. 멀리 갈 땐 살짝 지나쳤다 되돌아와요
- 손떨림 ±1.2px을 매 걸음 더합니다
- 뜸 들이는 시간이 가우시안 분포입니다 — 매번 다릅니다
- 실행 한 번마다 템포가 1.0~1.95배로 달라집니다. 어제는 1.70배였어요
- 클릭도 연타하면
clickCount가 올라갑니다 — 사람이 더블클릭하는 것처럼
그래서 한 편 올리는 데 몇 분이 걸립니다. 손으로 하던 40분보다는 훨씬 빠르지만, 기계가 낼 수 있는 속도는 아니에요. 그게 맞다고 봤습니다.
안전장치
기본이 임시저장입니다. 발행은 --publish를 명시해야 해요. 되돌리기 어려운 건 한 번 더 치게 만들어 뒀습니다.
붙여넣은 뒤에는 원본과 비교해서 확인합니다. 붙여넣기는 조용히 실패할 수 있거든요 — 본문 글자 수가 원본의 절반에 못 미치거나, 이미지가 예상보다 적거나, 표 이미지가 404면 저장하지 않고 멈춥니다.
한글이 깨졌는지도 글자로 확인합니다. 눈으로 보면 이미지 속 한글에 속아요. 실제로 속은 적이 있습니다.
오늘 이것만
- 네이버 글쓰기 API는 2020년에 폐지됐습니다. 남은 길은 브라우저입니다.
- DOM을 조립하지 말고 클립보드로 붙여넣으세요. 에디터가 알아서 자기 컴포넌트로 바꿔줍니다.
- 표는 안 넘어갑니다. 이미지로 구워서 넣되 webp로 — png는 배포에서 빠질 수 있습니다.
- 자동화라고 빨라야 하는 건 아닙니다. 사람 속도로 도는 편이 낫습니다.
같은 네이버 쪽으로 이웃 방문을 대신 도는 자동화도 만들고 있습니다. 그쪽은 왜 하루 마흔 명이 한계인지에 대한 이야기예요.
이 도구가 옮기는 글은 이런 편들입니다.
