온라인 리치텍스트 에디터

웹에서 글을 작성하는 도구인 온라인 리치텍스트 에디터(Online Rich-text Editor)는 결과물이 HTML로 만들어진다는 본질이 오래도록 바뀌지 않았지만, 2010년대 중반 들어 몇 갈래의 새로운 형태가 등장했다. Iframe Editor(Tistory 등)는 페이지 안에 독립된 편집 프레임을 두고 툴바로 굵게·밑줄·글자크기 등을 지정하는 전통적인 워드프로세서 방식이다. Markdown Editor(Ghost 등)는 좌측에 마크다운 문법으로 글을 쓰면 우측에 결과가 실시간으로 렌더링되는 구조로, 마우스 없이 키보드만으로 스타일을 지정할 수 있다는 장점이 있다. Inline Editor(CKEditor, SnapEditor 등)는 HTML의 `contentEditable` 속성을 이용해 결과 페이지 자체를 그 자리에서 직접 수정하는 방식으로, 편집 모드와 결과 화면의 스타일이 완전히 같아 진정한 WYSIWYG에 가장 가깝다. Medium Editor는 툴바를 상시 노출하지 않고 텍스트를 선택했을 때만 맥락에 맞는 서식 옵션을 팝업으로 보여주는 방식으로, iOS의 텍스트 선택 메뉴와 유사한 구조다.

이런 다양화의 배경에는 세 가지 공통된 목적이 있다. 첫째는 글쓰기에 집중할 수 있는 환경을 만드는 것으로, 사용자가 HTML 구조를 몰라도 되게 하려는 목적이다. 둘째는 스타일 통일로, 제목·본문·강조 등 몇 가지 제한된 스타일만 제공해 페이지마다 스타일이 제각각이 되는 것을 막는다. 셋째는 WYSIWYG의 완성도를 높이는 것으로, 편집 화면과 실제 결과 화면의 차이(WYSIAWYG, WYSIWYM 같은 풍자적 약어가 나올 정도로 고질적인 문제였다)를 최소화하려는 시도다.

리치텍스트(스타일이 적용된 텍스트)는 플레인텍스트와 대비되는 개념으로, 온라인 에디터의 핵심은 결국 사용자가 HTML 마크업을 직접 다루지 않고도 이를 생성하게 돕는 데 있다. 다만 이 글의 논의는 글쓰기와 스타일에 국한되며, 이미지·동영상 삽입이나 이를 아우르는 CMS 차원의 진화는 별도의 주제로 남아 있다.

핵심 내용

  • Iframe Editor: 독립된 편집 프레임 + 툴바 방식의 전통적 워드프로세서형 (예: Tistory)
  • Markdown Editor: 마크다운 문법 작성 + 실시간 렌더링 미리보기 (예: Ghost)
  • Inline Editor: `contentEditable`로 결과 페이지를 직접 편집, 가장 순수한 WYSIWYG (예: CKEditor, SnapEditor)
  • Medium Editor: 텍스트 선택 시에만 서식 옵션 노출, 상시 툴바 제거 (예: Medium)
  • 변화의 세 가지 동인: 글쓰기 집중, 스타일 통일, WYSIWYG 완성도 향상
  • WYSIWYG의 한계를 풍자하는 표현들(WYSIAWYG, WYSIWYM, WYSYHYG)이 존재할 만큼 편집 화면과 결과물의 불일치는 오랜 과제였음

관련 개념

  • 글쓰기 기술 — 온라인 에디터가 지원하려는 목표인 '글쓰기 자체에 대한 집중'과 맞닿아 있음

출처

최종 업데이트: 2026-07-28 | 출처 1개