블로그 관리일지 | 신규 글쓰기 에디터 개발 및 UI 개선

블로그 관리일지 | 신규 글쓰기 에디터 개발 및 UI 개선

최근 블로그 관리자 페이지의 글쓰기 에디터를 전면적으로 개선하는 작업을 진행하고 있습니다. 처음 블로그를 만들었을 때는 게시글 작성 기능을 아주 단순하게 시작했습니다. 이미 검증된 에디터를 사용하는 것이 개발 시간을 줄일 수 있다고 판단했고, 그래서 Toast UI Editor를 적용해 사용했습니다. 당시에는 블로그 자체의 기능을 확장하는 것이 가장 중요한 목표였습니다. 유틸리티 페이지를 추가하고, 관리자 기능을 만들고, 검색 엔진에 사이트를 노출시키는 것이 우선이었기 때문에 글쓰기 기능은 "작성만 가능하면 된다"는 수준에서 시작했습니다. 하지만 최근 들어 사이트 규모가 어느 정도 커지면서 상황이 달라졌습니다. 이전 게시글을 보강하거나 수정하는 작업이 많아졌고, 새롭게 추가되는 유틸리티를 소개하는 글도 꾸준히 작성하게 되었습니다. 이제는 단순히 기능을 만드는 단계를 넘어 실제 블로그처럼 콘텐츠를 운영하는 단계에 들어섰다고 느끼게 되었습니다. 그러면서 자연스럽게 기존 글쓰기 환경의 한계도 보이기 시작했습니다.

Toast UI Editor는 기본적인 기능만 놓고 보면 충분히 훌륭한 에디터입니다. 제목을 작성하고, 본문을 입력하고, 이미지를 첨부한 뒤 저장하는 일반적인 작업에는 큰 문제가 없었습니다. 하지만 실제로 블로그를 운영하다 보니 아쉬운 부분들이 점점 늘어났습니다. 예를 들어 밑줄, 글자색, 배경색, 구분선, 코드 블록, 인용문과 같은 기능들을 제가 원하는 디자인으로 사용하기 어려웠고, 블로그 전용 스타일을 적용하기에도 한계가 있었습니다. 결국 WYSIWYG 모드보다는 Markdown 모드를 사용하게 되었고, 필요한 디자인을 구현하기 위해 HTML을 직접 입력하는 방식으로 글을 작성하기 시작했습니다. 

문제는 여기서부터였습니다. 

HTML을 직접 작성하다 보니 작은 실수 하나가 글 전체를 망가뜨리는 경우가 자주 발생했습니다. 태그를 닫지 않거나, < 와 > 기호를 하나 빠뜨리거나, 이미지의 alt 속성을 누락하는 등의 사소한 실수가 생각보다 자주 발생했습니다. 또한 글을 작성하는 동안 현재 콘텐츠 상태를 확인하기도 어려웠습니다. 지금 작성 중인 글이 몇 글자인지, 이미지가 몇 장 들어갔는지, 제목 구조는 적절한지, SEO 관점에서 부족한 부분은 없는지 등을 실시간으로 확인할 수 없었습니다. 결국 글을 작성하다가 저장하고, 미리보기 창을 열어 확인하고, 다시 수정하는 작업을 반복해야 했습니다. 특히 긴 게시글이나 사용 설명서를 작성할 때는 실제 글을 작성하는 시간보다 오류를 확인하고 수정하는 시간이 더 많이 소요되는 경우도 있었습니다. 이러한 경험들이 쌓이면서 "이제는 나에게 맞는 에디터가 필요하다"는 생각을 하게 되었습니다. 그래서 이번에는 단순히 디자인만 바꾸는 것이 아니라, 실제 블로그 운영 과정에서 느꼈던 불편함을 해결하는 방향으로 새로운 글쓰기 에디터를 직접 개발하게 되었습니다.

반복 작업이 많았던 기능 개선

HTML 코드 

JAVASCRIPT 코드 

자주 사용하는 요소들을 한 번의 클릭으로 추가할 수 있는 퀵 툴bar를 추가해서 HTML을 직접 찾아서 넣을 필요가 없어 긴 글 작성에 큰 도움이 될 것 같습니다. 

---

HTML 관리 기능 및 썸네일 선택 기능

마무리