글 작성 중 반복되던 문제

초기에는 Toast UI로 글을 쓰고 필요한 HTML을 직접 고쳤다. 코드·FAQ·안내 상자를 반복해서 넣다 보니 태그 닫힘, 코드의 꺾쇠 문자, 이미지 대체 텍스트를 빠뜨리기 쉬웠다. 자주 쓰는 요소를 버튼으로 넣고 글 구조를 옆에서 확인하려고 별도 편집기를 만들었다.

아래는 2026년 6월 개편 당시 HTML·임시저장 관리와 썸네일 선택 영역이다. 현재 화면의 모든 버튼 배치가 같다는 뜻은 아니다. 이 글의 저장·통계 설명은 2026년 9월 21일 저장소의 v2 구현을 기준으로 보완했다.

2026년 6월 에디터의 HTML·임시저장 관리 버튼과 썸네일 선택 영역

본문 HTML이 서버에 저장되기까지

본문 작성 영역은 contenteditable 요소다. 편집 스크립트는 내용을 HTML 출력 영역에 동기화하고, 통계·점검 표시를 갱신한다. 새 글 저장 화면은 이 본문과 제목·요약·카테고리·태그·썸네일 선택값을 모아 서버에 POST한다. 현재 v2 경로는 HTML을 content에 저장하고 content_markdown은 비워 둔다.

이 구조에서는 편집기 안의 보기와 공개 글의 보기가 달라질 수 있다. 같은 HTML이어도 적용되는 CSS와 화면 폭이 다르기 때문이다. 특히 긴 코드와 표는 미리보기뿐 아니라 저장한 공개 글에서도 확인해야 한다. HTML 정리 버튼이 있다는 사실만으로 모든 입력의 안전성이 보장되는 것도 아니며, 작성 경로는 운영자 권한으로 제한한다.

임시저장은 세 가지로 구분하기

화면에 “저장”이 표시돼도 저장 위치가 다르면 복구 범위가 달라진다. 현재 새 글 화면에는 두 종류의 브라우저 저장과 서버 저장이 함께 있다.

종류 보관하는 내용 복구 범위
편집기 자동저장 본문 HTML·저장 시각 본문 복원 버튼에서 사용
새 글 화면의 로컬 임시저장 제목·작성자·요약·카테고리·색인 값·본문·태그·썸네일·시각 새 글 화면의 복구 확인에서 사용
서버 저장 저장 요청이 성공한 게시글 데이터 관리자에서 저장된 글을 다시 열어 확인

편집기 자동저장은 winj_editor_v2_autosave, 새 글 화면은 blog_content_write_draft_v2라는 localStorage 키를 사용한다. 글마다 별도 이름을 만드는 구조가 아니므로 여러 작성 탭을 동시에 열 때 각각의 원고가 독립적으로 보존된다고 가정하면 안 된다. 정상 서버 저장 응답 뒤에는 이 두 로컬 임시저장을 삭제한다.

localStorage는 해당 사이트 출처와 브라우저 저장소에 속한다. 다른 PC로 원고가 자동 이동하지 않으며 사이트 데이터 삭제, 시크릿 창 종료, 저장 차단 등도 복구에 영향을 준다. MDN localStorage 설명

따라서 긴 글은 서버에 초안으로 저장한 뒤 다시 열어 확인하는 편이 좋다. 자동저장 문구만 보고 브라우저를 바꾸거나 기존 원고를 지우지 않는다. 본문 복원은 현재 내용을 교체하므로 필요한 내용은 먼저 별도로 보관한다.

글자 수와 SEO 점수의 실제 기준

편집기의 글자 수는 본문 텍스트에서 공백을 뺀 JavaScript 문자열 길이다. 단어 수는 공백으로 나눈 값이고, 문단 수는 p 요소 개수다. 본문에 보이는 문단 느낌이나 언어학적 단어 수와 항상 같지는 않다. 별도 글자수 계산기는 입력 원문·바이트·단어 규칙을 따로 안내하므로 두 화면의 수치도 기준을 맞춰 비교해야 한다.

현재 SEO 점검은 아래 7개 조건 중 통과한 비율을 반올림한 내부 점검값이다.

  1. 공백을 제외한 글자 수가 800 이상인가.
  2. H2가 2개 이상인가.
  3. H3가 1개 이상인가.
  4. 대체 텍스트가 빠진 이미지가 없는가.
  5. 주소가 있는 링크 요소가 1개 이상인가.
  6. 편집기의 목차 상자가 있는가.
  7. 편집기 FAQ가 없거나, FAQ가 있으면 연결된 구조화 데이터 요소도 있는가.

이미지가 아예 없어도 4번은 통과하고, FAQ가 없어도 7번은 통과한다. 링크 조건은 대상 주소의 실제 응답을 검사하지 않는다. 따라서 점수가 높아도 출처가 틀리거나 본문이 반복적일 수 있다. 800자와 제목 개수는 이 편집기의 설정값이며 Google의 승인 요건이나 검색 순위 점수가 아니다. 점수를 맞추기 위해 불필요한 소제목·문장을 추가하지 않는다.

작성 후 확인하는 순서

먼저 글이 해결하려는 문제와 실제 확인한 결과가 있는지 읽는다. 그다음 코드의 언어·입력·출력, 표의 단위, 이미지 설명과 링크 목적을 확인한다. 미리보기에서는 코드가 문자 그대로 보이는지, 제목 순서가 자연스러운지 점검한다.

마지막으로 초안 저장 후 다시 열어 본문·요약·썸네일이 유지되는지 확인하고 공개 화면의 좁은 폭에서도 읽어 본다. 템플릿은 반복 입력을 줄여주지만 기본 예시 문구까지 그대로 게시하면 빈 내용이 남는다. 당시 공지의 “핵심 내용 1·2·3” 같은 틀은 실제 설명으로 교체했다.

외부 배포용 에디터 라이브러리나 DB 기반 템플릿은 초기 글에서 적었던 후속 구상이다. 이 기록에서 구현·배포 완료로 다루지 않는다. 글쓰기 접근 권한은 별도 개발 기록에 정리했다.