네이버 블로그 자동 발행, 붙여넣은 서식이 깨졌다 — 에디터 대신 키보드를 흉내 낸 기록

앞 글에서 네이버 블로그 로그인을 겨우 뚫었다. 이제 글만 올리면 되는 줄 알았다.

올라가긴 했다. 그런데 본문이 깨져 있었다.

방식은 이랬다. 원고를 마크다운으로 쓰고, HTML로 바꾸고, 그걸 클립보드에 담아 에디터에 붙여넣는다. 이미지와 소제목이 나오는 자리에서 본문을 조각으로 잘라, 글 조각은 붙여넣고 이미지는 따로 올리고 소제목은 따로 넣는다. 설계만 보면 깔끔했다.

문제는 네이버 에디터가 붙여넣은 HTML을 그대로 받아주지 않는다는 거였다. 실제 글로 테스트하다가 증상이 하나씩 튀어나왔다.

목록이 목록이 아니었다

첫 증상은 목록이었다. 굵은 제목 한 줄 밑에 대시로 항목을 달아둔 부분이, 화면에서는 대시가 한 문단 안에 줄줄이 붙어서 나왔다.

처음엔 에디터 탓인 줄 알았다. 그런데 붙여넣기 전 HTML을 열어보니 애초에 목록 태그가 없었다. 마크다운은 목록 바로 앞에 빈 줄이 없으면 목록으로 인식하지 않는다. 굵은 제목 바로 다음 줄에 대시를 붙여 쓴 탓에, 변환기가 그걸 제목 문단의 연속으로 읽은 것이다.

그래서 변환 전에 목록 줄 앞에 빈 줄이 없으면 하나 끼워 넣게 했다. 에디터 문제처럼 보였지만 원인은 한 단계 앞에 있었다.

본문이 조금씩 밀렸다

다음은 본문이 이미지 근처에서 조금씩 아래로 밀리는 증상이었다. 이미지 위아래로 빈 문단이 하나씩 생겼다.

그 무렵 소제목 넣는 방식을 바꾼 참이라 그걸 의심했다. 한참 들여다봤는데 소제목은 정상이었다. 진짜 원인은 이미지였다. 마크다운은 이미지를 문단 태그로 감싼다. 이미지 기준으로 본문을 자르면 그 문단 태그의 여는 쪽과 닫는 쪽이 빈 조각으로 남고, 그게 빈 문단이 돼 들어갔다. 자르기 전에 이미지를 감싼 문단 태그부터 벗겨내니 해결됐다.

소제목은 붙여넣기로 안 됐다

네이버 블로그에서는 소제목을 인용구로 넣는 경우가 많다. 나는 선 하나로 된 라인형 인용구를 쓰고 싶었다.

인용구 태그를 붙여넣으면 에디터가 인용구로 바꿔주긴 했다. 그런데 항상 따옴표형이었다. 그러면 넣고 나서 스타일만 바꾸면 되겠다 싶었는데, 스타일 버튼은 기존 인용구를 바꾸지 않고 새 인용구를 하나 더 삽입했다. 직접 해보고서야 알았다.

결국 HTML로 넣는 걸 포기했다. 인용구 종류 메뉴를 열고, 라인형 삽입 버튼을 누르고, 안에 글자를 친다. 사람이 하는 순서 그대로다.

여기서도 걸렸다. 인용구는 본문 칸과 출처 칸 두 칸짜리라서, 소제목을 치고 나면 뒤에 오는 본문까지 인용구 안으로 빨려 들어갔다. 인용구를 빠져나오는 방법을 찾아야 했는데, 아래 방향키를 두 번 눌러 인용구 전체를 선택한 다음 Enter를 치면 그 아래에 새 문단이 생겼다.

클릭 한 번에 문단이 쪼개졌다

인용구를 넣기 전에 본문을 한 번 클릭해 커서를 두던 게 또 문제였다. 두 줄로 넘어가는 긴 문단이나 목록을 클릭하면 커서가 문단 중간에 박혔다. 인용구가 거기서 삽입되면서 텍스트가 두 동강 나고, 빈 글머리표가 하나 생겼다.

에디터는 마우스를 누른 위치에 커서를 둔다. 스크립트로 커서를 끝으로 옮기려 해도 클릭 직후에는 에디터 내부 커서가 따라오지 않았다. 그래서 클릭을 아예 뺐다. 직전에 붙여넣기나 이미지 업로드가 끝나면 커서는 이미 끝에 있으니 그걸 그대로 쓰고, 끝으로 한 번 보정만 했다.

굵게 한 번에 본문 전체가 굵어졌다

소제목은 굵게 보이도록 했다. 처음엔 Ctrl+B로 굵게를 켜고, 타이핑하고, 다시 Ctrl+B로 끄는 방식이었다.

끄는 동작이 한 번 어긋나면 그 뒤로 붙는 본문이 전부 굵어졌다. 켜고 끄는 상태를 내가 추적해야 하는 방식 자체가 불안했다. 그래서 순서를 바꿨다. 평문으로 먼저 치고, 그 줄만 선택해서 굵게 만든다.

Home        줄 맨 앞으로
Shift+End   줄 끝까지 선택
Ctrl+B      선택한 줄만 굵게
End         선택 해제하고 끝으로

토글 상태가 남지 않으니 번질 여지가 없다. 이 방식으로 바꾼 뒤 테스트 글에서 본문이 굵어진 비율은 0이 됐다.

이미지 뒤 빈 줄은 안에 숨어 있었다

이미지 바로 뒤에 소제목이 오면 가끔 본문 앞에 빈 줄이 하나 끼었다. 매번은 아니었다.

한동안 못 잡았다. 에디터는 글을 컴포넌트 단위로 묶는데, 나는 빈 컴포넌트가 있는지만 검사했다. 빈 줄은 컴포넌트 밖이 아니라 본문 컴포넌트 안의 첫 문단이었다. 이미지가 뒤에 빈 문단을 남기고, 거기에 인용구 삽입과 탈출이 겹치면서 생긴 것이다.

지우는 것도 한 번에 안 됐다. 스크립트로 다음 문단을 클릭시키고 Backspace를 눌렀는데 아무 일도 없었다. 스크립트 클릭은 에디터 내부 커서를 잡지 못했다. 브라우저 자동화 도구로 실제 마우스 클릭을 보내고, Home을 누르고, Backspace를 쳐야 지워졌다.

이번엔 문단 간격이 사라졌다

며칠 뒤 다른 게 눈에 들어왔다. 문단과 문단이 빈 줄 없이 바짝 붙어 있었다. 네이버 블로그는 보통 문단 사이를 한 줄 띄우는데, 에디터는 문단 태그 여러 개를 간격 없이 붙여 넣었다.

붙여넣을 HTML의 블록 사이마다 빈 문단을 하나씩 끼웠다. 목록 항목끼리는 벌리지 않고, 이미지나 인용구와 맞닿는 조각 맨 앞과 맨 끝에도 넣지 않았다.

그런데 넣은 간격이 발행하고 나면 없어졌다. 범인은 며칠 전 내가 만든 빈 줄 청소였다. 빈 문단 뒤에 내용 문단이 오면 위치를 가리지 않고 지웠으니, 방금 일부러 넣은 간격까지 지운 것이다. 청소 조건을 컴포넌트 맨 앞에 있는 빈 줄로만 좁혔다. 붙여넣는 조각의 첫 줄은 항상 내용이라 간격용 빈 문단은 여기에 걸리지 않는다.

정리하면

에디터는 HTML을 입력으로 받는 게 아니라 해석한다. 붙여넣기로 되는 건 문단과 목록 정도였고, 인용구 모양이나 굵기처럼 조금만 까다로운 건 에디터 마음대로 바뀌었다. 그런 건 HTML을 더 다듬기보다 사람이 키보드로 하는 순서를 그대로 따라 하는 편이 빨랐다.

켜고 끄는 상태를 기억해야 하는 동작은 언젠가 어긋난다. 굵게를 토글에서 선택 후 적용으로 바꾼 것처럼, 상태가 남지 않는 방식을 고르는 게 나았다.

그리고 고친 코드가 다른 고친 코드를 망가뜨린다. 빈 줄 청소가 문단 간격을 지운 게 그랬다. 지우는 쪽은 넓게 잡지 말고, 정확히 무엇을 지울지 좁혀두는 게 맞았다.