티스토리 업데이트 (2021.5.12) 때문에 발생한 버그 오류 내용 및 해결 방법
안녕하세요. 친절한효자손입니다. 2021년 5월 12일 쯤 티스토리 에디터가 또 한번 도약을 했습니다. 꾸준히 업데이트를 해줘서 무척이나 감사하긴한데 문제는 이번 업데이트로 인해서 문제점이 발생했습니다. 먼저 업데이트 내용을 살펴보고자 합니다. PC 기준으로 설명드립니다.
인용구 기능 추가
인용구는 원래 있었지만 새로운 한 가지 스타일이 추가되었습니다. 스타일은 아래와 같습니다. 각각 하나씩 순차적으로 적용시킨 결과입니다.
인용구입니다.
인용구입니다.
인용구입니다.
이렇게 세 가지입니다. 첫번째 인용구 스타일이 새롭게 추가된 것입니다. 참고로 첫번째 인용구 스타일을 적용시키면 글꼴도 변경됩니다. 스킨의 글꼴과 별개로 적용됩니다. 위의 인용구들을 HTML 코드로 살펴보겠습니다.
<blockquote data-ke-style="style1"><span style="font-family: 'Noto Serif KR';">인용구입니다.</span></blockquote>
<blockquote data-ke-style="style2">인용구입니다.</blockquote>
<blockquote data-ke-style="style3">인용구입니다.</blockquote>보시면 스타일1의 인용구에는 <span>태그가 추가되었고 해당 태그의 스타일에는 폰트 스타일이 정의되어 있습니다. 글꼴은 Noto Serif KR 입니다. 그리고 인용구는 스킨의 스타일에 따라서 디자인의 차이가 발생할 수 있습니다. 인용구 버튼을 눌러보면 다음의 아이콘들을 살펴볼 수 있습니다.
첫번째부터 세번째까지는 인용구 스타일을 적용시키는 아이콘이며 맨 마지막의 네번째 아이콘은 인용구 스타일을 해제하는 기능입니다. 참고하시기 바랍니다.
이모티콘 기능 추가
이 부분은 많은 분들이 바래왔던 기능 중 하나입니다. 아시다시피 티스토리는 카카오에서 운영하는 플랫폼 서비스 중 하나입니다. 티스토리는 원래 다음에서 서비스를 담당하고 있었으나 카카오가 다음을 인수하면서 다음카카오가 되었지요? 때문에 티스토리의 카카오프렌즈 아이콘은 당연한 수순이었던 것입니다. 언젠가는 나올 줄 알았는데 생각보다 빨리 적용되었군요.
방금 소개해드린 인용구 버튼 바로 오른쪽에 위치해있습니다. 눌러보시면 카카오톡에서 사용 가능한 카카오프렌즈 이모티콘 시리즈 중 일부를 사용할 수 있게 되었습니다. 아마 이 부분은 점차 업데이트가 진행되면서 개인적으로 이모티콘샵에서 구매한 상품들도 사용 가능하게 변경되지 않을까 싶습니다. 왜냐하면 티스토리가 카카오 계정과 통합이 되었기 때문입니다. 그러므로 전혀 불가능한 내용이 아닐 것 같습니다. 만약 이렇게되면 티스토리 유저가 지금보다는 많이 늘어날 것 같다는 생각입니다.
이런 식으로 본문에 적절히 삽입하면 꽤 귀여울 것 같습니다. 이모티콘은 가로 배치가 되지 않는군요. 너무 아쉽습니다. 그리고 카카오프렌즈 중에서는 역시 라이언이 짱입니다.
단축키 안내
이제 공식적으로 티스토리에서 사용 가능한 단축키를 안내하는 기능이 추가되었습니다.
메뉴 버튼을 눌러보시면 맨 아래에 단축키 항목이 있습니다. 들어가봅시다.
그러면 이렇게 다양한 단축키 기능을 지원하고 있다는 사실을 알 수 있습니다. 근데 코드블럭이라는 글씨가 두 개나 들어가있습니다. 확인해보니 Ctrl+Alt+E는 이모티콘 단축키입니다. 단축키 목록인 Alt+/ 는 작동을 하지 않는군요. 댓글 제보에 의하면 Ctrl+/ 라고 합니다. 알려주셔서 감사합니다.
버그(오류) 발생 및 해결 방법
다음은 이번 업데이트로 인해 새롭게 추가된 버그(오류)입니다. 글씨가 무조건 16px로 고정이 됩니다. 사용중인 반응형 스킨이 원래 16px이 기본 글씨 크기라면 전혀 상관 없지만 문제는 그렇지 않은 스킨들입니다. 친효스킨도 모바일과 PC에서의 글꼴 크기가 다르기에 이 부분은 매우 치명적이라 할 수 있겠습니다. 업데이트 이전에 작성한 문서들은 괜찮습니다. 하지만 이 문서들도 수정 과정을 거치면 이 버그가 적용됩니다.
<p>안녕하세요. 친절한효자손입니다. 2021년 5월 12일 쯤 티스토리 에디터가 또 한번 도약을 했습니다. 꾸준히 업데이트를 해줘서 무척이나 감사하긴한데 문제는 이번 업데이트로 인해서 문제점이 발생했습니다. 먼저 업데이트 내용을 살펴보고자 합니다. PC 기준으로 설명드립니다.</p>
<p> </p>
<h3>인용구 기능 추가</h3>
<p>인용구는 원래 있었지만 새로운 한 가지 스타일이 추가되었습니다. 스타일은 아래와 같습니다. 각각 하나씩 순차적으로 적용시킨 결과입니다.</p>
<p> </p>본문의 첫 부분을 HTML 모드에서 살펴본 모습입니다. 원래는 <p>태그와 <h3>태그만 있어야하는데 지금 태그 안쪽에 무언가가 추가된게 보이시죠? 이라는 매소드가 추가되었습니다. 이게 그냥 자동으로 들어가버립니다. 어떻게 할 수가 없습니다. 그러면 이 문제를 해결하려면 어떤 방법이 있을까요? 뾰족한 방법이 없습니다. 그냥 수동으로 강제 삭제를 할 수 밖에요.
저게 한두개면 수동으로 지울 수 있지만 문제는 본문 내용이 길어질수록 작업량도 늘어날 것입니다. 그러나 다행스럽게도 우리에게는 메모장이 있습니다. 꼭 메모장에서 작업할 필요는 없습니다. 한글 프로그램 혹은 브라켓같은 코딩 프로그램에서도 사용 가능합니다. 본문에서는 메모장에서 편집하는 방법을 안내해드리겠습니다.
우선 지금 티스토리 에디터에서 작성중인 글을 모두 완성합니다. 다 완성하고나서 수정합니다. 다 작성하셨다면 HTML모드로 변경 후 모든 태그들을 전체 복사하여 메모장에 붙여넣기합니다.
메모장에 붙여넣기가 끝났다면 없애야 할 부분만 블록 지정합니다. 위의 이미지처럼 블록 지정하면 되겠습니다. 중요한 포인트는 <p 바로 다음부터 블록으로 지정해야 합니다. 띄어쓰기 부분까지 포함시켜야 한다는 의미입니다. 이 상태에서 단축키를 누릅니다. 단축키는 Ctrl+H입니다.
그러면 바꾸기 창이 실행됩니다. 바꿀 내용은 텅 빈 상태여야합니다. 스페이스바가 적용되어있어도 안 됩니다. 찾을 내용 안에는 방금 지정한이 있어야하며 data 앞에는 스페이스바가 한 번 적용된 상태여야합니다. 이상없다면 모두 바꾸기 버튼을 누릅니다. 그리고 바꾸기 창을 닫기 위해서 취소 버튼을 눌러줍니다.
무슨 소린지 잘 모르겠다 하시는 분들은 아예 문제가 되는 태그를 통째로 블록 지정하여 정상적인 태그를 바꿀내용에 입력하는 방법을 사용해도 됩니다. 그리고 본문에 머릿말(소제목)을 적용시켰다면 <h3>태그로 변경되는데 <h3 data-ke-size="size23"> 이라는 매소드가 추가되므로 따로 작업을 해주시면 됩니다. 방법은 위와 동일합니다.
그러면 이렇게 깔끔하게 태그 정리가 완료됩니다. 이제 전체 선택해서 복사 후 티스토리 에디터에 그대로 붙여넣기합니다. 기존 코드와 바꿔치기를 하는 것입니다.
중요 포인트! 아까 제가 글을 다 완성 후 코드 수정하라고 말씀 드렸을겁니다. HTML 모드에서 바꿔치기까지 한 다음에 바로 오른쪽 하단의 완료 버튼을 눌러야 합니다. 코드 수정 후 다시 기본모드로 돌아가면 방금 제거한 코드가 다시 생성됩니다. 즉 HTML모드에서 완료 버튼을 눌러서 글을 저장 및 발행해야합니다. 그래야 완벽하게 적용됩니다. 부디 티스토리측에서는 어서 이 문제를 해결해주었으면 좋겠습니다. 끝.
