WYSIWYG 웹 에디터는 HTML 태그를 모르는 사람도 쉽게 웹 콘텐츠 페이지를 제작할 수 있도록 도와주는 도구입니다. 하지만 정말 그럴까요?

일반적으로 인쇄 매체에서는 단락의 구분을 줄바꿈으로 표현합니다. 그리고 타이포그래피의 개념이 조금이라도 반영되었다면 단락의 첫 글줄을 ‘들여쓰기’하여 그 구분이 더욱 명확해지도록 하겠죠.

디지털 매체에서는 단락과 단락 사이에 공백을 만들어 구분하고 있습니다. 페이지로 구분되는 인쇄 매체와는 달리 웹 환경에서는 하나의 페이지에서 콘텐츠가 밑으로 계속 이어지기 때문입니다.

갑자기 단락 이야기를 한 이유는 WYSIWYG 웹 에디터의 중요한 기능이 바로 단락과 관련이 있기 때문입니다. 지금부터 그 이유를 알아보겠습니다.

 

대부분의 WYSIWYG 웹 에디터는 Enter 키를 눌러서 단락을 구분하고 있습니다. 그런데 문제는 에디터 마다 코드를 생성하는 방식에는 큰 차이가 있다는 것입니다.

‘워드프레스 비주얼 에디터’나 ‘TinyMCE’의 경우에는 Enter 키를 눌러서 이전 단락을 마무리하고 새로운 단락을 시작하게 됩니다. 그리고 단락과 단락 사이에 공백을 두어서 WYSIWYG 웹 에디터 상에서도 명확하게 구분하고 있습니다.

반면에 Daum과 Naver가 제공하는 에디터의 경우에는 Enter 키를 눌러서 단락을 구분하는 것은 동일(코드 생성 측면에서 봤을 때)하지만, 단락과 단락 사이에 공백이 생성되지는 않습니다. 그래서 그냥 줄바꿈을 한 것처럼 보이게 되고, 사용자들은 이때 Enter 키를 한 번 더 눌러서 인위적으로 공백을 생성하게 됩니다. 마치 우리가 메모장에 글을 쓸때처럼 말이죠. 문제는 이 과정에서 불필요한 단락 태그가 한 번 더 생성된다는 것입니다.

앞서 우리는 디지털 환경에서 단락과 단락을 구분하기 위하여 공백을 만들어 준다고 했습니다. CSS에는 단락의 하단에 특정 높이의 마진을 정의해 놓았는데, 위 경우에는 단락과 단락 사이에 불필요한 단락이 하나 더 생겨서 마진이 2배가 되는 것이죠.

 

이는 단순한 코드 생성 오류의 문제가 아닙니다. 물론 단락 태그가 중복 생성되더라도 마진이 2배가 되지 않게 CSS를 설정할 수는 있습니다. 그러면 매번 단락을 구분하기 위하여 Enter 키를 두 번 눌러야겠죠.

하지만 여전히 HTML 페이지 내에는 불필요한 태그가 존재하게 됩니다. 우리 사이트에서는 CSS 조작을 통해 어느 정도 해결을 하지만, 만약 타 사이트에 콘텐츠를 제공하기라도 하면 어떻게 될까요? 그들은 표준을 충실하게 따르고 있다면 말이죠.

Leave a Reply

Your email address will not be published. Required fields are marked *

nine − eight =