네이버 블로그 자동화, 복붙했더니 왜 이래? | 아카바네 레드 개발일지 07

안녕하세요! 스낵걸즈의 아카바네 레드입니다.

워드프레스에선 예뻤는데 네이버에 옮기니까 말풍선도 줄바꿈도 왜 이래? 오늘은 네아랑 네이버 블로그 자동화를 준비하면서, 글은 읽기 편한 텍스트로, 짧은 캐릭터 대화는 카드 이미지로 옮겨봐요. 복붙하고 끝내기엔 우리 얼굴이 너무 아깝잖아!

오늘은 네아랑 네이버 블로그를 열어볼게요. 우리가 WordPress에 쓴 기사를 네이버에서도 읽을 수 있게 옮기는 얘기예요.

제목 복사하고, 본문 붙여넣고, 사진 넣으면 될 것 같은데요. 막상 준비하다 보니 사진 밑의 출처 문구가 엉뚱한 곳에 남고, 원래 있던 영상은 어떻게 옮길지 또 정해야 하더라고요.

으음. 붙여넣기 버튼 하나로 끝내고 싶었는데.

SNACK 3줄 요약

1. WordPress에 공개한 한국어 기사를 네이버용 제목·본문·태그·사진으로 정리해 옮겨요.
2. 사진은 네이버에 직접 첨부하고 출처를 가까이 붙여요. 옮기기 어려운 영상은 열 수 있는 링크로 연결해요.
3. 네아의 말투로 다듬고, 발행한 글과 목록에서 제대로 보이는지까지 확인해요.

같은 기사, 네이버에서도 읽을 수 있게!

우리 뉴스의 원문은 WordPress로 만든 Game Sunakku 사이트에 있어요. WordPress는 글과 사진을 올리고 사이트를 꾸밀 수 있는 도구예요. 지금 이 개발일지도 거기에 올리고 있고요.

네이버 블로그에도 기사가 있으면, 그쪽에서 블로그를 읽던 사람이 우리 소식을 만날 수 있겠죠. 그래서 이미 쓴 한국어 기사를 가져가 보기로 했어요.

같은 기사를 두 군데에서 처음부터 각각 쓰면, 가격이나 날짜를 고칠 때도 어느 쪽을 고쳤는지 챙겨야 해요. 우리는 WordPress 원문을 기준으로 두고, 네이버에서 읽기 좋게 정리해서 가져가는 방식을 골랐어요. 작업 문서에서는 이걸 ‘미러링’이라고 부릅니다. 여기서는 원문을 다른 곳에도 옮겨 보여주는 작업이라고 생각하면 돼요.

원문이 바뀌었을 때 네이버 글에도 수정이 필요한지는 따로 확인해야 하고요. 둘을 한 번 연결했다고 이후의 모든 수정까지 알아서 따라가는 건 아니니까요.

지난 편에서 집 PC와 서버에 작업을 나눠 맡긴 얘기를 했죠. 집에서는 Codex라는 AI 개발 도구와 프로그램을 만들고 고쳐요. 인터넷으로 빌린 컴퓨터인 VPS에는 Hermes를 두고 준비한 일을 실행하게 했고요. Discord는 그 Hermes에게 부탁하고 결과를 받는 채팅 창구로 쓰고 있어요.

이번에는 그 서버에 네이버로 옮길 글을 준비하고, 글쓰기 화면에 넣는 일을 맡겨본 거예요.

붙여넣기 전에, 옮길 짐부터 챙기자

먼저 공개된 WordPress 기사를 읽어서, 네이버용 자료 묶음을 만드는 작업부터 준비했어요.

안에는 제목, 본문, 짧은 소개, 태그, 사진과 출처가 들어가요. 태그는 글의 주제를 표시하는 말이에요. 같은 주제의 글을 찾는 데 쓰죠. 본문 끝에 해시태그 줄을 그대로 붙이기보다 네이버의 태그 입력칸에 넣도록 따로 챙겼어요.

원문에 반복해서 들어간 문단이나 사이트 이름 꼬리표도 정리하고요. 네이버 독자가 처음부터 읽을 글을 준비하는 거니까, 다른 사이트에서 쓰던 표시까지 전부 가져올 필요는 없겠죠.

이렇게 준비한 자료를 로그인해둔 서버의 브라우저로 가져가요. 브라우저는 크롬처럼 웹페이지를 열어보는 프로그램이고, 여기서는 네이버의 글쓰기 화면을 여는 데 써요.

우리가 붙인 매크로는 사람이 하던 제목 입력, 사진 선택, 본문 붙여넣기 같은 동작을 프로그램으로 진행하는 방식이에요. 글쓰기 화면에 내용을 넣는 단계와 실제 발행하는 단계는 나눠두었어요. 들어간 내용을 먼저 확인할 수 있게요.

9월 초에는 이 자료 묶음과 브라우저 입력을 준비하고, 정해진 시간에 새 글을 확인하는 작업도 연결했어요. 다만 화면이나 로그인 상태가 달라지면 멈출 수 있어서, 중간에 어디까지 진행했는지 남기도록 했고요.

여기까지 보면 꽤 순조로워 보이죠?

이제 사진 차례예요.

사진이 글에도, 목록에도 보여야 하잖아

블로그 목록에 작게 보이는 대표 사진을 썸네일이라고 해요. 글을 누르기 전에 먼저 보는 그 작은 이미지요.

우리는 네이버 본문에 사진이 보이는지와, 목록에서 썸네일이 뜨는지를 각각 확인하도록 손봤어요. 사진 한 장이 들어갔다는 이유로 두 화면의 확인을 한꺼번에 끝내면 놓치는 부분이 생기니까요.

그래서 원문에서 가져갈 사진 파일을 준비한 다음, 네이버 글쓰기 화면의 ‘사진 추가’로 첨부하는 방식을 넣었어요. 네이버에 사진이 첨부됐는지 확인한 다음 본문을 넣는 순서예요.

이때 같은 사진을 원문 본문에서도 또 가져오면 두 번 나올 수 있잖아요. 먼저 첨부한 대표 사진은 본문을 옮길 때 중복으로 들어가지 않게 챙겼어요.

9월 6일 검증 기록에는 실제 게시된 글 하나를 다시 열어서, 본문 사진과 PC·모바일 목록의 썸네일까지 확인한 내용이 있어요. 목록도 글 위주로 보는 화면과 사진 위주로 보는 화면이 달라서 각각 살펴봤고요.

아, 독자는 글쓰기 화면을 보는 게 아니지. 네아랑 확인할 화면이 하나씩 늘어나는 이유가 여기 있네요.

사진 밑에 있어야 할 출처가 왜 거기 있어?

사진 아래에 붙이는 짧은 설명을 캡션이라고 해요. 어디에서 가져온 사진인지 적는 출처 문구도 여기 붙일 수 있고요.

9월 8일에는 로봇청소기 기사를 옮기다가 이 부분에서 멈춘 기록이 있어요. 사진은 들어갔는데, 출처 문구가 사진 바로 아래로 따라오지 않고 요약문 뒤에 남은 거예요.

원인은 출처 문장에 들어 있던 글자 꾸밈 표시였어요. 화면에서는 그냥 한 줄로 보여도, 속에는 ‘여기를 굵게 보여줘’ 같은 표시가 들어갈 수 있거든요. 웹페이지에서 쓰는 HTML이 이런 글의 구조와 표시를 담고 있어요.

당시 프로그램은 꾸밈 표시가 들어간 출처 문장을 제대로 골라내지 못했어요. 그래서 출처를 사진 밑으로 옮기는 과정에서 빠진 거죠.

수정할 때는 안쪽에 꾸밈이 있어도 출처 문장을 찾고, 보이는 출처 문구를 대표 사진 바로 아래에 놓도록 고쳤어요. 다른 본문 사진의 캡션은 각 사진 곁에 두고요.

그때 해당 글은 출처 위치 확인에서 멈춰서 발행 전 대기 상태로 남았어요. 프로그램을 고치고 입력 내용을 확인한 것까지가 그 수리 기록이에요.

사진, 출처, 다음 문단. 이렇게 읽으면 단순한 순서인데, 프로그램에도 출처를 어느 사진 아래에 둘지 정확히 정해줘야 하네요.

영상은 눌러서 볼 수 있게 남겨두자

사진 다음에는 영상이었어요.

WordPress 글 안에서 바로 재생되던 영상을 네이버로 옮길 때, 같은 재생 화면이 그대로 들어가는지 확인이 필요했어요. 우리 자동화에서는 이 문제로 글 옮기기가 막힌 사례가 있었고요.

그래서 원래 영상을 볼 수 있는 주소가 있으면, ‘원문 영상 보기’라는 링크를 본문에 남기는 방법을 넣었어요.

그런데 여기서도 확인하는 프로그램을 한 번 더 고쳤어요. 네이버 편집기가 붙여넣은 링크를 자기 방식으로 바꿔 저장해서, 우리가 처음 찾던 형태와 달라졌거든요.

링크는 들어갔는데, 확인 프로그램이 바뀐 저장 형태를 찾지 못했던 거예요.

그래서 편집기 안에 목적지 주소가 들어갔는지, 그리고 발행한 글에서 독자가 그 링크를 눌러 영상을 열 수 있는지를 나눠 확인했어요. 영상 주소를 찾지 못하면 그 부분을 조용히 빼고 진행하지 않고, 글을 보류하도록 했고요.

9월 8일에는 이 방법을 적용한 스트리트 파이터 기사를 발행하고, 공개된 모바일 글에서 영상 링크까지 다시 확인한 기록이 있어요.

그때 네이버로 옮긴 글 보기

주소가 들어갔다는 기록만 보면 놓칠 뻔했어요. 우리가 확인하고 싶은 건 결국 읽는 사람이 영상을 열 수 있느냐는 거니까요.

네아가 쓰는 블로그니까, 말투도 같이 보자

내용과 사진을 옮기는 동안 블로그 이름도 ‘네아의 스낵 뉴스’로 정리했어요. 9월 3일에 소개 문구와 상단 이미지, 카테고리 이름을 손본 기록이 있어요.

그러면 글을 열었을 때도 네아가 말을 걸어주면 좋겠죠.

그래서 이미 올라가 있던 글도 다시 살폈어요. 네아가 먼저 인사하고, 소식의 핵심을 전한 다음, ‘네아의 확인 메모’에서 챙겨볼 내용을 덧붙이는 형태로요. 예전의 ‘편집부 관점’ 같은 표현도 정리했어요.

이 작업은 당시 대상으로 정한 기존 글 39건까지 진행했어요. 9월 4일 기록에는 39건을 수정하고, 공개된 모바일 페이지에서 네아 소개와 확인 메모가 들어갔는지 다시 확인한 결과가 남아 있어요.

물론 네아 이름이 들어갔는지 찾는 것과, 글이 네아답게 읽히는지는 따로 봐야겠죠. 문장마다 이름만 붙여놓으면 네아도 좀 민망할 것 같은데요.

이건 앞으로 우리도 같이 다듬어갈 부분이에요. 어려운 내용을 한 번 더 풀어주거나, 놓치기 쉬운 조건을 짚어주거나. 네아의 설명을 덧붙이면 이해하기 쉬워지는 부분를 찾아보고 싶어요.

발행했으면, 우리도 독자처럼 열어보자

네아랑 이번 기록을 보면서, 다음에도 챙길 항목을 이렇게 적어봤어요.

1. 사진과 출처는 가까이. 사진 바로 아래에서 어디서 가져왔는지 읽을 수 있게 해요.
2. 영상은 열 수 있는 곳까지. 재생 화면을 옮기기 어려우면, 실제로 열리는 원문 링크를 남겨요.
3. 발행한 글과 목록을 각각 확인하기. 본문이 잘 보여도 목록의 썸네일은 따로 확인해요.
4. 결과가 애매하면, 먼저 다시 보기. 이미 올라갔을 수 있으니 발행 버튼을 또 누르기 전에 공개 글을 찾아봐요.

마지막 항목은 우리 프로그램에도 반영했어요. 발행을 눌렀는데 결과 확인이 끊기면, 같은 글을 바로 또 올리는 대신 공개된 결과부터 다시 확인하도록 했어요. 네아 블로그에 똑같은 글이 나란히 올라가면 우리 둘 다 머쓱하잖아요.

댓글 쪽은 새 댓글을 읽고 답변 초안을 준비하는 데까지 맡겼어요. 실제 답글 등록은 사람이 내용을 보고 직접 하도록 두었고요. 독자가 무엇을 물었는지는 우리도 읽어봐야죠.

이번에 돌아본 건 9월 초에 옮기고, 막히고, 고친 작업들이에요. 앞으로도 새 글에서 사진이나 문장이 달라지면 같은 기준으로 계속 봐야 해요.

일단 네아랑 다음 글을 볼 때는 “들어갔어?” 뒤에 한마디를 더 붙이려고요.

“읽는 화면에서도 괜찮아?”

다음엔 키라리랑 인스타로!

네이버에서는 긴 글과 사진, 영상을 어떻게 이어 보여줄지 챙겼어요. 다음은 키라리의 인스타그램이에요.

이번에는 사진이 먼저 눈에 들어오는 곳이죠. 같은 그림이라도 어디를 잘라 보여줄지, 사진 밑에 어떤 말을 붙일지부터 같이 봐야겠어요.

#바이브코딩 #개발일지 #AI코딩 #AI자동화 #블로그자동화 #왕초보AI코딩 #스낵걸즈 #네이버블로그 #워드프레스 #콘텐츠자동화