티스토리 HTML / CSS 편집기 업데이트! 드디어 편집기에 인텔리센스를 지원 / 티스토리 치환자 자동완성 기능

티스토리가 이미지 편집기를 업데이트 하더니 갑자기 HTML / CSS 편집기 까지 업데이트가 되어 있습니다. 그 동안 (아마한 10년 넘게) 티스토리 편집기는 사용하기가 여러모로 불편했습니다. 솔직히 티스토리 직원분들도 아실텐데 이게 2022년의 편집기는 아니긴 합니다.

 

요즘에 REPL 온라인 IDE도 얼마나 좋아졌는데 티스토리의 HTML 편집기는 오래전에 시간이 멎은 듯 보였습니다. 스킨 작업이나 자바 스크립트를 만들 때 다들 VS CODE에서 작업한 후에 불편한 방식으로 스킨 업로드를 해야 합니다. 스킨을 자주 수정하지 않는 사람들은 잘 모를 수도 있지만 문제는 티스토리에 치환자가 있어서 최종 결과물을 보려면 이중작업을 해야한다는 치명적인 문제가 있었습니다. 스킨 작업은 일반인을 위한 사용환경이 아니라서 그 정도는 이해할 수 있긴한데 하다보면 좀 빡치기도 하고 귀찮게 되서 한두번 수정할 것 수정하고는 그다지 스킨에 신경을 잘 안쓰게 되지요.

 

 

그런데 이번의 스킨 편집기 업데이트는 꽤 주목할 만합니다. 왜냐하면 인텔리센스와 자동정렬 기능 같은 현재적 IDE의 플러그인 기능을 집어넣었기 때문입니다.

 

아래 HTML편집기를 보면 인텔리센스 기능이 추가되었습니다! class 같은 속성도 나와서 혹시나 해서 emmet 문법을 써봤지만 그건 안되더군요;;; emmet이 아니라 티스토리 자체적인 인텔리센스 같습니다.

 

 

 

하지만 더 중요한 것은 이겁니다. 바로 티스토리 치환자!

 

아래처럼 티스토리 치환자가 자동으로 리스트에 뜹니다. 이게 엄청난 생산성 차이가 있습니다. 치환자는 티스토리 CMS 전용이기 때문에 비주얼 스튜디오 코드로 코딩을 하면 바로바로 확인이 불가능합니다. 맨날 치환자 찾아서 넣고 실행해보고 매우 지루했는데 이 자동완성 기능으로 매우 빠르게 스킨 코딩이 가능해졌습니다. 이제는 기본 와꾸는 VS CODE에서 잡아놓고 최종 개발을 티스토리 환경에서 세부적으로 테스트하며 진행할 수 있을 것 같습니다.

 

이게 별거 아닌 거라 생각할 수도 있겠지만 코딩할 때 자동완성 기능 있고 없고가 차이가 큽니다. 그래서 VS CODE 사용자들이 언어별로 확장 프로그램 세팅부터 하라고 강조하는 것 이지요. 특히 아래에서 보면 알겠지만 티스토리 치환자는 이름이 참 깁니다. 딱봐도 눈에 잘 안들어오지요? 

 

인텔리센스가 어느 정도까지 구현되었는지는 이제 부터 하나씩 테스트 하며 알아보겠습니다. 이걸 계기로 더 많은 사람들이 티스토리 개발(혹은 수정)에 참여할 수도 있겠네요.

 

또 한가지 기능은 검색기능입니다. 이전 HTML 편집기의 가장 큰 문제가 검색기능이었습니다. CSS가 길면 잘 안찾아지기도 하는 등 문제가 많았는데 이번에는 뭔가 바뀌었습니다. 전체 단어 매치와 부분 매치, 그리고 정규식까지 사용해서 검색이 가능합니다. 이 정도면 단순히 인텔리 센스만 추가한게 아니라 티스토리 편집기 자체만으로도 스킨을 제작할 수 있도록 수준을 높이겠다는 의지가 보입니다.

 

HTML CSS 검색창

 

 

아직 티스토리 공지사항에 업데이트 내용을 발표하지 않은 것 같은데 추가적인 기능을 구현하는 작업을 하고 있는지도 모르겠습니다. 일단 지금 티스토리가 진행하는 프로젝트들을 긍정적으로 보고 있습니다. (아직 좀 부족하다고 생각하는 부분도 있지만 무료 CMS인 티스토리니까 이 정도는 혜자라는 생각)

 

 

Emmet 사용법 (html / css 빨리 입력하기) - 비주얼 스튜디오 코드 (tistory.com)

Emmet 사용법 (html / css 빨리 입력하기) - 비주얼 스튜디오 코드