WYSIWYG 에디터의 올바른 선택

WYSIWYG 에디터의 목적은 HTML 태그를 다룰 줄 모르는 일반 사용자들도 쉽게 웹 문서를 생성할 수 있도록 해주는 것입니다.

다양한 WYSIWYG 에디터가 존재하며, 대부분 오픈소스로 공개되어 있습니다.

단락 구분 방식의 차이

많은 WYSIWYG 에디터는 Enter 키를 누르면 작성 중인 단락이 마무리되고 새로운 단락이 시작됩니다. 만약 단락 내에서 줄 바꿈을 해야 할 필요가 있을 때는 Shift+Enter를 누르면 됩니다. 다음은 CKEditor를 이용하여 작성한 예입니다.

반면에 국내에서 많이 사용되는 ‘다음 오픈 에디터‘나 ‘네이버 스마트 에디터’는 Enter 키를 누르면 HTML 코드 상으로는 분명 단락 구분을 하고 있지만, Visual 모드(미리보기)에서는 줄 바꿈만 일어날  뿐 단락 구분이 되지 않습니다. 이때 사용자는 시각적으로 단락을 구분하기 위해서 Enter 키를 2회 이상 누르게 되고, 이 경우 HTML 코드에는 빈 단락 태그가 생성됩니다.

정확한 HTML 코드를 생성해야하는 이유

빈 단락 태그가 HTML 코드를 랜더링 하는 과정이나 검색엔진최적화 등에 어떤 영향을 미치는지는 모르겠습니다. 게다가 미리보기 모드에서는 시각적으로는 아무런 차이가 없습니다. 무엇보다   WYSIWYG 에디터를 사용하는 사람들 중에 얼마나 많은 사람이 이 문제에 관심이 있을까요? 또 개인용 블로그에서 어떻게 사용하건 무슨 상관이 있을까요?

하지만 우리는 개인용 블로그의 콘텐츠를 이야기하는 것이 아닙니다. 일관된 스타일로 고객과 소통해야하는 매체사에 관한 이야기이죠. 이들은 정해진 가이드에 맞춰서 콘텐츠를 생산할 필요가 있습니다. 이 스타일 자체가 바로 매체사의 브랜드 아이덴티티이기 때문입니다. 일관된 스타일을 정의해 놓은 문서를 스타일 가이드라고 하는데, 이 스타일 가이드가 잘 적용되기 위해서는 정확한 HTML 태그로 콘텐츠가 작성될 필요가 있습니다.

일반적으로 단락 태그에는 단락과 단락 사이의 명확한 구분을 위하여 단락의 하단에 여백을 적용합니다. 그런데 만약 단락과 단락 사이에 빈 단락 태그가 있다면 어떻게 될까요? 빈 단락 태그의 하단 여백이 더해진 만큼 여백이 생기게 됩니다. 다음 오픈 에디터에서 생성된 코드를 복사해 크리에이티브 밴드의 WYSIWYG 에디터(워드프레스)에 붙여 보았습니다. 과연 랜더링 결과는 어떨까요?

빈 단락 태그 때문에 단락과 단락 사이의 간격이 넓어져서 어색해 보입니다. 단락 내 강제 줄바꿈한 부분은 의도와는 다르게 단락 구분이 되어 있습니다. 아래 이미지는 CKEditor로 생성한 코드를 적용한 예 입니다.

최근에는 콘텐츠를 다른 제휴사에 제공하는 경우도 많습니다. 정확한 HTML 태그로 마크업된 콘텐츠 페이지는 HTML 코드만 전달하더라도 제휴사의 스타일 가이드에 맞춰서 잘 표현됩니다. 하지만 HTML 코드가 잘못 생성된 콘텐츠라면 전달 과정에서 몇 번의 수정 작업이 필요합니다. 오죽하면 제휴사에서는 원본 리소스를 제공해달라고 요청할까요? 새롭게 입력하는 것이 더 편하기 때문이죠.

위에서 언급한 것은 아주 간단한 상황에 대한 예입니다. 그리고 다음 오픈 에디터는 블로그 환경에서는 최적화된 툴이라 평가받고 있습니다. 이 보다 더한 WYSIWYG 에디터가 적용된 플랫폼과 사이트를 많이 경험했습니다.

실제 웹사이트 구축 과정에서 어떤 WYSIWYG 에디터를 도입할 것인지를 결정하는 주체가 누구인지는 모르겠지만, 앞으로 발행하게될 콘텐츠의 품질과 관련이 있는 만큼 신중하게 결정되어야 합니다. 워드프레스의 기본 WYSIWYG 에디터는 그 자체로 매우 훌륭합니다. 그리고 블로그 용으로 개발된 몇 개의 국산 WYSIWYG 에디터가 아니라면 대부분 정확한 HTML 태그를 생성합니다.