네이버 블로그에도 종종 글을 올리는데, 매번 도입부-소제목-본문-마무리 구조를 손으로 맞추는 게 번거로웠다. Claude로 아티팩트 형태의 글쓰기 도구를 만들어봤는데, 막상 겪어 보니 글 내용보다 네이버 에디터에 맞춰 서식을 살리는 쪽이 훨씬 손이 많이 갔다.
붙여넣기부터 막혔다
아티팩트는 보안 샌드박스 안에서 돌기 때문에 클립보드 자동 복사가 막히는 경우가 있었다. 자동 복사가 실패하면 전체 선택된 상태로 화면에 띄워서 Ctrl+C만 누르면 되도록 폴백을 추가했다.
외부 CSS는 다 무시된다
네이버 에디터에 붙여넣으면 class로 지정한 스타일은 전부 날아갔다. 소제목 크기, 굵은 글씨, 줄간격까지 태그 안에 인라인으로 직접 넣어야 살아남았다.
<!-- 외부 클래스 대신 style 속성에 직접 -->
<p style="font-size:18px;font-weight:700;">소제목</p>
<p style="line-height:1.8;">본문 문단...</p>line-height는 씨알도 안 먹혔다
문단 사이 여백은 margin이나 line-height를 줘도 에디터가 자체 값으로 덮어썼다. 결국 문단 사이마다 빈 문단을 하나씩 끼워 넣는 방식으로 우회했다. 코드로 보면 어색한데, 실제 에디터에서는 여백이 제대로 살아났다.
이미지는 포기하고, 링크는 스타일을 뺐다
이미지를 base64로 붙여넣으면 에디터가 걸러냈다. 그래서 이미지는 복사 대상에서 아예 빼고, 미리보기만 참고해서 별도로 업로드하는 방식으로 정리했다. 링크는 반대 경우였다 — <a> 태그에 스타일을 입혀서 복사하면 에디터가 카드 변환을 건너뛰었다. URL을 아무 스타일 없는 순수 텍스트로 남겨야 썸네일 카드가 제대로 붙었다.
돌아보면 글 구조를 잡는 부분은 생각보다 빨리 끝났고, 시간을 더 쓴 건 네이버 에디터가 뭘 살리고 뭘 걸러내는지 하나씩 직접 붙여넣어보면서 확인하는 과정이었다.