[AI] 블로그 업로드 자동화 스킬 제작

개요

블로그를 꾸준히 관리하다 보니 글을 쓰는 시간만큼 업로드 과정에도 많은 시간이 들어갔습니다.
작성해 둔 글을 옮길 때마다 서식 유지, 이미지 첨부, 업로드 확인을 계속 신경 써야 했습니다.
특히 비슷한 과정을 반복하다 보니 글 자체보다 배포 과정에서 피로가 더 크게 쌓였습니다.
그래서 Obsidian에서 관리하던 마크다운 Note를 최대한 그대로 블로그에 올릴 수 있도록 업로드 자동화 스킬을 제작했습니다.
 

목표

목표는 단순했습니다.
본문을 다시 복사하고, 이미지를 다시 맞추고, 글마다 서식을 확인하는 반복 작업을 줄이는 것이었습니다.
블로그 글의 품질은 유지하되, 업로드 과정은 최대한 자동화하고 싶었습니다.
 
특히 중요하게 본 부분은 두 가지였습니다.
하나는 Obsidian에서 작성한 본문 흐름을 최대한 유지하는 것이었습니다.
다른 하나는 이미지 첨부까지 에이전트에게 맡길 수 있게 만드는 것이었습니다.
 

프로세스

블로그 본문에 작성할 내용은 PARA Note 기반으로 정리해 두는 만큼,
이 내용을 배포할 수 있는 방법만 찾으면 됐습니다.
 
처음에는 Tistory API를 활용하는 방향을 찾아봤으나, 기존 Tistory API는 지원이 중단되어 사용할 수 없었습니다.
그래서 Playwright CLI로 웹을 직접 조작하면서 블로그 업로드를 자동화하는 방향으로 잡았습니다.
 
다만, 브라우저 자동화는 자유도가 높은 만큼 문제가 발생할 가능성도 높습니다.
그래서 script 기반 제어를 통해 제약을 두는 방향으로 설계하여
제어 가능하면서도 안정적으로 블로그 글을 작성할 수 있게 만들고자 했습니다.
 

이슈

만드는 과정에서 다양한 이슈를 만났습니다.
특히 Playwright를 활용한 브라우저 자동화 과정에서 예상보다 많은 기술 이슈가 나왔습니다.
 
- 실행 환경 이슈
문제1: Chrome 프로필 경로가 실제 User Data 구조와 어긋나면 자동화가 바로 멈췄습니다.
문제2: 실행 인자가 조금만 달라도 같은 흐름이 재현되지 않았습니다.
문제3: 원격 제어 포트 조건이 맞지 않으면 자동화가 시작조차 되지 않았습니다.
그래서 전용 프로필 경로, 실행 인자, 원격 제어 조건을 고정하고 실행 기준을 하나로 정리했습니다.
 
- 티스토리 에디터 판정 이슈
문제1: 겉으로는 같은 화면처럼 보여도 실제로는 다른 모드인 경우가 있었습니다.
문제2: 숨은 편집 영역을 잘못 읽어서 에디터 상태를 잘못 판단하는 문제가 있었습니다.
문제3: 첫 번째 편집기만 잡는 방식 때문에 실제 입력 대상이 아닌 곳을 건드리는 경우가 있었습니다.
그래서 실제로 보이는 상태를 더 엄격하게 확인하도록 바꾸고, 모드 전환과 편집기 판정 로직을 다시 다듬었습니다.
 
- 본문과 이미지 분리 이슈
문제1: 본문 입력과 이미지 첨부는 실패 지점이 달랐는데 처음에는 한 단계처럼 다뤘습니다.
문제2: 그래서 어디서 막혔는지 파악하기 어려웠고, 재시도 과정도 비효율적이었습니다.
그래서 본문 반영 단계와 이미지 반영 단계를 분리했습니다.
본문 반영 단계에서는 이미지가 들어갈 위치에 표시를 남겨두고, 이미지 반영 단계에서 해당 표시를 실제 이미지로 전환하는 방식으로 수정했습니다.
 
- 이미지 업로드 방식 이슈
문제1: 파일 선택기 방식은 상황에 따라 불안정해서 같은 동작이 안정적으로 재현되지 않았습니다.
문제2: 실패를 가리는 우회 처리 때문에 실제 원인을 찾기 더 어려웠습니다.
그래서 이미지 반영 방식을 클립보드 붙여넣기 방식으로 바꾸고, 실패하면 원인이 바로 드러나도록 수정했습니다.
 
- 마크다운 변환 이슈
문제1: 마크다운 모드로 작성하니 줄바꿈이 사라지거나 빈 줄이 무너져서 초안의 읽는 흐름이 달라졌습니다.
그래서 작성한 글의 서식을 유지한 채 HTML로 변환한 다음, HTML 모드로 입력하도록 하여 본문 형태가 최대한 유지되도록 했습니다.
 

결과

결과적으로 제가 원했던 범위 이상으로 만족스러운 결과물이 나왔습니다.
Obsidian에서 글을 정리하고, 자동화 스킬을 통해 Tistory 글쓰기 화면에 반영하는 흐름까지 연결할 수 있었습니다.
 
특히 인상 깊었던 부분은 세 가지였습니다.
 
- Playwright는 로컬 서버 포트를 열고 CDP를 통해 통신한다는 점.
- 기본 프로필은 자동화 도구로 제어하지 못하게 구현되어 있다는 점.
- 본문에 이미지를 추가할 때 파일 탐색기를 사용하면서 발생하는 여러 복잡한 이슈를 복사 붙여넣기라는 간단한 방식으로 해결할 수 있었다는 점.
 
Playwright와 프로필 관리 규칙에 대한 도메인 지식이 부족하다 보니 여러 이슈를 만났습니다.
이를 해결하는 과정에서 도메인 지식의 중요성을 다시 한번 상기했고, 관련 지식이 늘어나는 계기가 되었습니다.

---

긴 글 읽어주셔서 감사합니다.

궁금한 점이 있으시다면 링크드인을 통해 편하게 연락 주시면 감사하겠습니다.
https://www.linkedin.com/in/highcl/