TISTORY 에디터 변경

 티스토리 에디터가 새롭게 단장했습니다.

 기존의 에디터는 굉장히 다양한 기능이 존재한데 반해 약간 부산스러운 느낌이 들었다면, 이번에 새로 공개된 에디터의 경우 깔끔함과 사용하기 편함을 무기로 들고온 것 같습니다. 플래시도 이용하지 않습니다. 따라서 기존에 잘 저장이 되지 않았던 임시저장 기능도 잘 저장되는 듯 보여요. 다만, Beta 서비스이다보니 확실히 부족한 부분들도 있습니다.

---

https://notice.tistory.com/2478

[Beta] 새 에디터를 소개합니다.

 티스토리에서 에디터를 공개하면서 공지한 포스트입니다. 간단히만 안내하면 아래와 같습니다.

• 사진 업로드 변경
• 동영상 삽입 변경
• HTML 편집기 변경
• 마크다운 지원 (github, Beta)
• 맞춤법 검사 지원
• 기종별 미리보기 지원
• 웹 폰트 추가
• 개발자용 코드블럭 추가
• URL 오픈 그래프 카드 자동 삽입
• 임시 저장기능 개선
• 표 꾸미기 추가
• 구분선 스타일 추가
• 단축키 변경
• 클립보드 이미지 업로드 지원(링크)

 이 외에도 개선된 사항이 많이 있습니다. 다만, 몇가지 기능에 문제가 있는것으로 보입니다. 아직 Beta이기 때문에 발생하는 듯 하니, 공식 개발이 마칠 때까지 사용자들이 지속적으로 피드백 한다면 더 좋은 에디터가 만들어질 것입니다.

 

 개선점에 대한 설명은 위에 링크된 공식 포스트에서 잘 보여주니 이번 포스트에서는 변경된 에디터를 잠시 사용해본 후 나온 개선점과 불편한 점들을 보여드리고자 합니다.

---

 잠깐 사용하면서 몇가지 변화를 확인했습니다. 동시에 개선했으면 하는 점들도 몇가지 눈에 띄네요.

 개발자 블로그이니 무엇보다 먼저 코드 하이라이터 부분을 살펴보겠습니다.

 

문제점 1: 자체 지원 코드 하이라이터의 문제(해결)

 자체 지원하는 코드 하이라이터에 사소한(?) 문제가 있습니다. 다음 이미지를 보겠습니다.

 코드 블럭을 통해 코드를 삽입하게 되면 아래 이미지와 같이 코드 하이라이트가 잘 정리되어 표시가 됩니다. 심지어 하이라이트를 지원하는 언어가 HTML, CSS, Javascript, Python, Java, C++, Kotlin, Swift, PHP, Go 가 지원되는 만큼 웬만한 언어지원이 이루어진다고 볼 수 있습니다. 다만, C#이 지원되지 않는것과 코드 삽입시에도 하이라이트가 지원되지 않는 것은 아쉽네요.

 

코드 하이라이트가 잘 정리되어 있습니다. 코드 수정을 하려면 코드 부분을 누른 뒤 상단 꺽쇠 부분을 누르면 됩니다.

 문제는 여기서 발생합니다. 글을 잘 작성해서 포스트를 진행하면 위와 같이 나와야하는 코드 하이라이터가 적용이 되지 않습니다. 즉, 포스트 작성을 위해 수정중에만 보이는 셈이죠.

코드 하이라이터가 적용되지 않았습니다.

 이에 그치지 않고

문제점 2: 타 코드 하이라이터 사용시 불편

 자체적인 코드 하이라이터(이하 HL)가 지원되면서 작성시에 서식으로 지정해두었던 코드 하이라이트가 제대로 동작하지 않습니다. 현재 제가 사용하는 하이라이터는 prism.js 를 사용합니다. 태그 내 class attribute로 어떤 언어를 사용하는지를 작성해주는데 자체 HL을 지원하면서 이러한 사전 지정해둔 class attribute가 제대로 적용이 되지 않습니다. 따라서 prism.js를 사용하기가 힘들어진 상황이죠.

사용중인 하이라이트 서식을 HTML, 기본 모드로 바라본 모습

 서식 자체에는 문제가 없으나, 수정을 위해 기본 모드에서 코드 수정으로 지원하는

 

이 기능을 이용하게 되면 사전 설정한 line-numbers, language-c cpp 이러한 attribute value가 사라지게 됩니다.

 

 따라서 에디터가 변경된 위 시점에서 자신이 기존에 사용하던 하이라이트를 사용하고싶다면 HTML 영역에서 입력하는 문제가 있지요. 이러한 문제는 < >와 같은 꺽쇠 등의 특수 문자들이 제대로 저장되지 않는 문제가 있습니다. 기존 방식보다 불편함이 가중된다고 볼 수있겠죠.

그.러.나.

 다시 한 번 봤습니다. 티스토리 포스트를요. 그 결과 확장팩 형식으로 추가를 해주어야 적용이 됨을 확인했습니다.

티스토리 블로그팀의 게시물

코드블럭으로 소스코드 작성하기

 위 포스트의 하단을 참고하세요. 그래도 기존 prism 사용자 입장에서는 좋은 편은 아니네요 ㅠㅠ 아무래도 다시 hljs로 넘어가야겠습니다...

 

---

 아직까지 코드 하이라이트 부분에서 발견한 문제점, 혹은 개선이 필요하다고 생각되는 부분은 이것으로 끝났습니다. 여기서부터는 코드 하이라이트 부분 외에 기존에 잘 사용했던 기능 중 사라진 기능, 그리고 오류들입니다.

 

불편 1: 들여쓰기로 탭(TAB) 사용 불가

 기존 에디터에서는 들여쓰기를 사용하려면 탭 기능을 이용할 수 있었습니다. 현재 에디터의 경우 탭을 사용하면 현재 웹문서의 다음 태그가 선택되도록 변경된 듯 싶습니다. 탭을 사용해 들여쓰기가 되었으면 좋겠군요. 아직 들여쓰기 기능이 그래픽 메뉴에서 지원이 되는것같지는 않습니다. 혹은 아예 지원에서 뺐을지도 모르겠습니다. 좀더 찾아보아야하는 항목이에요.

 

불편 2: 작성중 자동 스크롤 안됨

 포스트를 조금만 작성하면 포스트 문서 길이가 길어져서 스크롤을 해야합니다. 읽을 때는 애초에 스크롤을 하며 작성하지만, 작성중에는 다릅니다. 글 작성하는것에 치중할 수 있도록 글이 길어질 경우 해당 작성중인 부분이 화면 중간에 오면 좋겠지만, 혹은 아래 패딩이나 마진이 있으면 좋겠지만, 그런게 없습니다. 조금 개선이 되면 좋겠는 작은 바람입니다.

 

오류 1: 모바일의 접은 글 오류

 

 

부가 설명, 혹은 토막 상식 등을 접은 글로 작성 하곤 합니다.

 이 접은 글이 모바일 웹, 즉 제 블로그의 경우 https://pang2h.tistory/m/ 으로 시작하는 URL 포스트에서 정상적으로 펼쳐지지 않습니다. 오류로 보고 있기때문에 추후 수정이 되겠지만, 하루빨리 수정되어야하는 문제가 아닌가 싶습니다.

 

---

끝으로.

 전반적으로 새로운 에디터는 만족하는 편입니다. 다만, 새로 변경됐고 Beta 서비스이다보니 발생하는 문제나 개선점들이 눈에 보입니다. 조금만 더 다듬으면 더 좋은 포스트 편집기가 되리라 생각되면서 티스토리 개발진에 감사의 인사를 보냅니다.

Tistory: 에디터 업데이트

 새로운 업데이트가 나왔네요.

 

# index