티스토리 구형 글쓰기 에디터의 최대 단점은?
구형 글쓰기 에디터를 아직도 사용 중 입니다. 티스토리의 신형 글쓰기 에디터는 다 좋은데 이미지를 여러장 본문에 넣어야 하는 상황일 때, 워터마크를 일괄 적용 할 수가 없습니다. 한장 한장 수동으로 워터마크를 넣어야 하는 큰 단점이 있습니다. 또한 본문에 HTML 및 CSS 관련 태그를 입력하면 이걸 자동으로 순수 태그로 인식해서 스타일이 적용이 된다는 점 입니다. 이건 장점임과 동시에 단점이 될 수 있는데... 개인적으로는 단점에 해당합니다. 태그 설명하기가 어려워지기 때문 입니다. 구형 글쓰기 에디터의 가장 큰 단점은 본문의 HTML태그가 매우 지저분하다는 점 입니다. 먼저 아무 이미지나 하나 가지고 와보도록 하겠습니다.
티스토리 구형 글쓰기 에디터로 작성한 글의 HTML 상태
티스토리 로고 이미지를 올려봤습니다. 이제 본문 내용이 여기까지라고 가정하고 현재 상태의 HTML 태그 부분을 그대로 살펴보도록 합니다.
<p>구형 글쓰기 에디터를 아직도 사용 중 입니다. 티스토리의 신형 글쓰기 에디터는 다 좋은데 이미지를 여러장 본문에 넣어야 하는 상황일 때, 워터마크를 일괄 적용 할 수가 없습니다. 한장 한장 수동으로 워터마크를 넣어야 하는 큰 단점이 있습니다. 또한 본문에 HTML 및 CSS 관련 태그를 입력하면 이걸 자동으로 순수 태그로 인식해서 스타일이 적용이 된다는 점 입니다. 이건 장점임과 동시에 단점이 될 수 있는데... 개인적으로는 단점에 해당합니다. 태그 설명하기가 어려워지기 때문 입니다.</p>
<p><br /></p>
<p>가장 큰 구형 글쓰기 에디터의 단점은 본문의 HTML태그가 매우 지저분하다는 점 입니다. 먼저 아무 이미지나 하나 가지고 와보도록 하겠습니다.</p>
<p><br /></p>
<p style="text-align: center; clear: none; float: none;">[샵샵_1N|cfile23.uf@본문 이미지 주소|width="598" height="295" filename="본문 이미지 파일명.jpg" filemime="image/jpeg" style=""""|_샵샵]</p>
<p style="text-align: left; clear: none; float: none;">티스토리 로고 이미지를 올려봤습니다. 이제 본문 내용이 여기까지라고 가정하고 현재 상태의 HTML 태그 부분을 그대로 살펴보도록 합니다.</p>
위의 본문 태그가 현재까지 작성된 내용에 해당되는 부분 입니다. 개인적으로는 크롬 브라우저를 사용합니다. 그리고 티스토리 글쓰기에서 이미지를 올리면 이미지가 자동으로 중앙정렬이 되어 들어갑니다. 저기 이미지 태그 부분이 보이시나요?
<p style="text-align: center; clear: none; float: none;">[샵샵_1N|cfile23.uf@본문 이미지 주소|width="598" height="295" filename="본문 이미지 파일명.jpg" filemime="image/jpeg" style=""""|_샵샵]</p>
바로 이 부분 입니다. 노란색으로 표시한 인라인방식의 스타일 매소드 부분이 바로 중앙정렬을 만드는 요소 입니다. 이 부분을 삭제하면 이미지는 좌측 정렬이 됩니다. 하지만 문제는 이 부분이 아닙니다.
방금 크롬을 사용한다고 말씀 드렸는데, 크롬에서는 이미지 바로 아래에 커서를 활성화 시키려면, 즉 빈 공간을 확보하려면 이미지를 선택 후 엔터를 입력하면 됩니다. 그러면 이미지 바로 아래에 커서가 생성되어 글을 작성할 수 있습니다. 문제는 선택한 기존 p 스타일을 그대로 따라간다는 것 입니다. 저 위의 태그 구성을 살펴보시기 바랍니다. 이미지 바로 아래의 p단락 부분 이므로 바로 여기가 문제의 구간 입니다.
<p style="text-align: left; clear: none; float: none;">티스토리 로고 이미지를 올려봤습니다. 이제 본문 내용이 여기까지라고 가정하고 현재 상태의 HTML 태그 부분을 그대로 살펴보도록 합니다.</p>
이렇게 이미지에 적용된 중앙정렬 매소드가 그대로 계승 됩니다. 이 부분을 글쓰기 에디터에 있는 좌측 정렬을 적용하면 center 였던 부분이 저렇게 초록색 부분처럼 left로 변경되는 것 뿐 입니다. 기존 스타일 매소드는 굳이 필요가 없는데 p태그 안에 인라인 방식의 스타일로 적용되어 있습니다. 상당히 보기가 지저분해 집니다. 딱히 html 기능상 문제가 있는건 아니지만, 깔끔한 방식의 태그를 좋아하는 제 기준에서는 정말 신경이 쓰이는 부분 입니다.
신형(새로운) 글쓰기 에디터에서는 이 부분이 많이 개선되었습니다. 확실히 본문의 HTML 태그 구성이 간결해지고 이런 지저분한 부분들이 사라졌습니다. 그래서 신형 글쓰기로 글을 작성하고 싶은데... 이미지 워터마크 넣는게 많이 불편해서 조금 망설여지는 부분도 없지않아 있습니다. 또한 본문에 글 설명을 위한 태그를 사용하면 그대로 스타일이 적용되는 단점도 존재하죠. 이런 부분만 빼면 신형 글쓰기 에디터가 HTML 입장에서 바라본다면 훨씬 깨끗한 상태의 태그만 사용 됩니다. 검색엔진 입장에서도 지저분한 것 보다는 깨끗한게 더 낫지 않을까 싶기도 합니다. 그냥 개인 취향 차이 입니다.
티스토리 구형 글쓰기 에디터가 가지고 있는 또 하나의 작은 문제점
현재 이 부분까지 작성한 본문의 전체 HTML 태그 상태를 살펴봅니다. 본문 중간 부분도 몇 가지 단점이 존재하지만 가장 큰 걱정은 본문을 감싸고 있는 태그 입니다. 위에서 보여드린 예시는 일부 구간에 해당하지만 아래는 본문 전체 입니다.
<p></p>
<p>구형 글쓰기 에디터를 아직도 사용 중 입니다. 티스토리의 신형 글쓰기 에디터는 다 좋은데 이미지를 여러장 본문에 넣어야 하는 상황일 때, 워터마크를 일괄 적용 할 수가 없습니다. 한장 한장 수동으로 워터마크를 넣어야 하는 큰 단점이 있습니다. 또한 본문에 HTML 및 CSS 관련 태그를 입력하면 이걸 자동으로 순수 태그로 인식해서 스타일이 적용이 된다는 점 입니다. 이건 장점임과 동시에 단점이 될 수 있는데... 개인적으로는 단점에 해당합니다. 태그 설명하기가 어려워지기 때문 입니다. 구형 글쓰기 에디터의 가장 큰 단점은 본문의 HTML태그가 매우 지저분하다는 점 입니다. 먼저 아무 이미지나 하나 가지고 와보도록 하겠습니다.</p>
<p><br /></p><h3>티스토리 구형 글쓰기 에디터로 작성한 글의 HTML 상태</h3><p style="text-align: center; clear: none; float: none;">[샵샵_1N|cfile23.uf@이미지위치.jpg|width="598" height="295" filename="이미지파일명.jpg" filemime="image/jpeg"|_샵샵]</p>
<p style="text-align: left; clear: none; float: none;">티스토리 로고 이미지를 올려봤습니다. 이제 본문 내용이 여기까지라고 가정하고 현재 상태의 HTML 태그 부분을 그대로 살펴보도록 합니다.</p>
<p><br /></p>
<div class="rgyBG rBK">
<p><span style="color: rgb(255, 0, 0);"><p></span>구형 글쓰기 에디터를 아직도 사용 중 입니다. 티스토리의 신형 글쓰기 에디터는 다 좋은데 이미지를 여러장 본문에 넣어야 하는 상황일 때, 워터마크를 일괄 적용 할 수가 없습니다. 한장 한장 수동으로 워터마크를 넣어야 하는 큰 단점이 있습니다. 또한 본문에 HTML 및 CSS 관련 태그를 입력하면 이걸 자동으로 순수 태그로 인식해서 스타일이 적용이 된다는 점 입니다. 이건 장점임과 동시에 단점이 될 수 있는데... 개인적으로는 단점에 해당합니다. 태그 설명하기가 어려워지기 때문 입니다.<span style="color: rgb(255, 0, 0);"></p></span></p>
<p><span style="color: rgb(255, 0, 0);"><p><br /></p></span></p>
<p><span style="color: rgb(255, 0, 0);"><p></span>가장 큰 구형 글쓰기 에디터의 단점은 본문의 HTML태그가 매우 지저분하다는 점 입니다. 먼저 아무 이미지나 하나 가지고 와보도록 하겠습니다.<span style="color: rgb(255, 0, 0);"></p></span></p>
<p><span style="color: rgb(255, 0, 0);"><p><br /></p></span></p>
<p><span style="color: rgb(255, 0, 0);"><p</span> <span style="color: rgb(255, 187, 0);">style="text-align: center; clear: none; float: none;"</span><span style="color: rgb(255, 0, 0);">></span>[샵샵_1N|cfile23.uf@본문 이미지 주소|width="598" height="295" filename="본문 이미지 파일명.jpg" filemime="image/jpeg" style=""""|_샵샵]<span style="color: rgb(255, 0, 0);"></p></span></p>
<p><span style="color: rgb(255, 0, 0);"><p</span> <span style="color: rgb(255, 187, 0);">style="text-align: left; clear: none; float: none;"</span><span style="color: rgb(255, 0, 0);">></span>티스토리 로고 이미지를 올려봤습니다. 이제 본문 내용이 여기까지라고 가정하고 현재 상태의 HTML 태그 부분을 그대로 살펴보도록 합니다.<span style="color: rgb(255, 0, 0);"></p></span></p>
</div>
<p>위의 본문 태그가 현재까지 작성된 내용에 해당되는 부분 입니다. 개인적으로는 크롬 브라우저를 사용합니다. 그리고 티스토리 글쓰기에서 이미지를 올리면 이미지가 자동으로 중앙정렬이 되어 들어갑니다. 저기 이미지 태그 부분이 보이시나요?</p>
<p><br /></p>
<div class="rgyBG rBK">
<p><p <span style="color: rgb(255, 187, 0);">style="text-align: center; clear: none; float: none;"</span>>[샵샵_1N|cfile23.uf@본문 이미지 주소|width="598" height="295" filename="본문 이미지 파일명.jpg" filemime="image/jpeg" style=""""|_샵샵]</p></p>
</div>
<p>바로 이 부분 입니다. 노란색으로 표시한 인라인방식의 스타일 매소드 부분이 바로 중앙정렬을 만드는 요소 입니다. 이 부분을 삭제하면 이미지는 좌측 정렬이 됩니다. 하지만 문제는 이 부분이 아닙니다.</p>
<p><br /></p>
<p>방금 크롬을 사용한다고 말씀 드렸는데, 크롬에서는 이미지 바로 아래에 커서를 활성화 시키려면, 즉 빈 공간을 확보하려면 이미지를 선택 후 엔터를 입력하면 됩니다. 그러면 이미지 바로 아래에 커서가 생성되어 글을 작성할 수 있습니다. 문제는 선택한 기존 p 스타일을 그대로 따라간다는 것 입니다. 저 위의 태그 구성을 살펴보시기 바랍니다. 이미지 바로 아래의 p단락 부분 이므로 바로 여기가 문제의 구간 입니다.</p>
<p><br /></p>
<div class="rgyBG rBK">
<p><p <span style="color: rgb(255, 187, 0);">style="text-align: <span style="color: rgb(31, 218, 17);">left</span>; clear: none; float: none;"</span>>티스토리 로고 이미지를 올려봤습니다. 이제 본문 내용이 여기까지라고 가정하고 현재 상태의 HTML 태그 부분을 그대로 살펴보도록 합니다.</p></p>
</div>
<p>이렇게 이미지에 적용된 중앙정렬 매소드가 그대로 계승 됩니다. 이 부분을 글쓰기 에디터에 있는 좌측 정렬을 적용하면 center 였던 부분이 저렇게 초록색 부분처럼 left로 변경되는 것 뿐 입니다. 기존 스타일 매소드는 굳이 필요가 없는데 p태그 안에 인라인 방식의 스타일로 적용되어 있습니다. 상당히 보기가 지저분해 집니다. 딱히 html 기능상 문제가 있는건 아니지만, 깔끔한 방식의 태그를 좋아하는 제 기준에서는 정말 신경이 쓰이는 부분 입니다.</p>
<p><br /></p>
<p>신형(새로운) 글쓰기 에디터에서는 이 부분이 많이 개선되었습니다. 확실히 본문의 HTML 태그 구성이 간결해지고 이런 지저분한 부분들이 사라졌습니다. 그래서 신형 글쓰기로 글을 작성하고 싶은데... 이미지 워터마크 넣는게 많이 불편해서 조금 망설여지는 부분도 없지않아 있습니다. 또한 본문에 글 설명을 위한 태그를 사용하면 그대로 스타일이 적용되는 단점도 존재하죠. 이런 부분만 빼면 신형 글쓰기 에디터가 HTML 입장에서 바라본다면 훨씬 깨끗한 상태의 태그만 사용 됩니다. 검색엔진 입장에서도 지저분한 것 보다는 깨끗한게 더 낫지 않을까 싶기도 합니다. 그냥 개인 취향 차이 입니다.</p>
<p><br /></p><h3>티스토리 구형 글쓰기 에디터가 가지고 있는 또 하나의 작은 문제점</h3><p>현재 이 부분까지 작성한 본문의 전체 HTML 태그 상태를 그대로 가지고 오겠습니다. 위에서 보여드린 예시는 일부 구간에 해당하지만 아래는 본문 전체 입니다.</p>
<p><br /></p>
<br /><p></p>
이렇게 세팅되어 있습니다. 이게 아마 버그 같은데 구형 글쓰기 에디터로 글을 작성하면 항상 본문의 HTML 부분을 p태그가 이상하게 감싸고 있습니다. 그리고 저게 매번 같은 형태가 아닙니다. 글을 작성 할 때마다 약간씩 변형이 됩니다. 아무튼 본문을 감싸고 있는 불필요한 p태그가 존재한다는 점 입니다. 빨간색으로 표시한 부분 입니다. 필요 없으므로 본문에서 수동으로 제거하면 됩니다. 하지만 매번 이렇게 수동으로 제거를 해야 한다는 단점이 발생 합니다.
다음으로는 노란색으로 표시한 태그 부분 입니다. 본문에서 소제목으로 적용시킨 부분인데 보시면 아시겠지만 태그 정렬이 안 되어 있습니다. 원래대로라면 h태그는 블록요소이기 때문에 p태그 바로 다음 줄에 들어가야 합니다. 물론 저렇게 마크업이 되어도 기능상 아무런 문제는 없습니다. 이 부분도 지극히 개인적인 부분으로 태그를 읽을 때의 가독성 부분에서 문제가 되는 겁니다. 보기가 매우 불편해 집니다. 소제목을 수동으로 수정해야 할 때, 찾기가 힘들다는 겁니다. 물론 크롬의 검색 기능을 통해서 쉽게 해당 영역을 찾을 수 있습니다. 하지만 기왕이면 보기에도 좋은 떡이 먹기 좋다는 말이 있듯, 태그도 보기에 좋아야 왠지 기분도 상쾌하다고 할까요? 아무튼 그렇습니다.
이런 부분들은 신형 글쓰기 에디터에서 발행하고 있는 문제가 아닙니다. 신형 글쓰기 에디터는 현재 본문에서 문제 삼고 있는 모든 부분이 완벽히 해결되었습니다. 그래서 신형 글쓰기를 사용하고 싶지만 그놈의 워터마크가 발목을 붙들고 있습니다. 게다가 본문에 태그를 그대로 사용해버리면 바로 스타일 인식이 되어서 코딩하는 사람의 입장에서는 상당히 불편하기 그지 없군요. 일반적으로 글 쓰시는 분들은 워터마크 문제 빼고는 신형 글쓰기 에디터를 사용하시는것이 바람직하다고 봅니다. 태그가 지저분해질 일이 없으니까요.
그러면 결국 해결 방법은?
간단합니다. 그냥 신형 글쓰기 에디터를 사용하거나 구형 글쓰기 에디터에서 글을 작성하면 수동으로 태그를 수정해주면 됩니다. 번거롭지만 어쩔 수 없습니다. 티스토리팀에서 구형 글쓰기 에디터의 버그나 오류등은 수정하지 않을 겁니다. 어차피 어도비 플래시 플레이어가 올해까지만 지원되고 내년인 2021년부터는 서비스가 중지가 되기 때문입니다. 티스토리의 구버전 글쓰기 에디터는 플래시 플레이어 기반 입니다.
개인적으로는 코딩을 할 수 있다는 점에서 매우 감사한 일 입니다. 이런 자잘한 부분을 수정할 수 있으니까요. 번거롭지만 동시에 즐거운 일 입니다. 같은 구형 글쓰기 에디터의 글이라도 태그 상태가 달라지기 때문 입니다. 저는 브라켓(Bracket) 이라고 하는 코딩 프로그램을 사용 합니다. 가독성도 뛰어나며 기능이 편리하기 때문 입니다. 만약 브라켓을 사용할 줄 아신다면 수동으로 HTML 태그를 수정하여 적용하면 될 겁니다. 끝.
"친절한효자손 취미생활" 을 검색!
