Erzsamatory Weblog


텍스트큐브 1.9 버전부터는 tinyMCE라는 새로운 형태의 편집기를 사용할 수 있습니다. 이전 버전에서는 매우 기본적인 텍스트 속성만 수정할 수 있는 일반 위지윅 편집기만 사용할 수 있었지만, 텍스트큐브가 1.9 버전으로 업그레이드되면서 tinyMCE라는 새로운 위지윅 편집기를 사용할 수 있게 되었습니다. 티스토리에서 지원하는 것과 같은 고급 부가 기능은 사용할 수 없지만, tinyMCE에서는 기존의 위지윅 에디터에서는 사용할 수 없었던 단락 기능, 특수문자 간편 추가 기능, 표 추가 기능 등 다양한 편집 기능을 사용할 수 있습니다. 이 글에서는 새롭게 업그레이드된 텍스트큐브의 tinyMCE 편집기에 대해서 알아보고, 기존의 위지윅 에디터와 비교하여 어떤 부분이 달라졌는지 분석해보도록 하겠습니다.


텍스트큐브 tinyMCE 편집기는 무엇인가?


tinyMCE 편집기는 워드프레스에서도 사용되고 있는 오픈소스 웹 위지윅 에디터입니다. 텍스트큐브 개발팀에서 자체 개발한 것이 아니라 기존에 오픈소스 방식으로 개발되어 있던 에디터를 텍스트큐브 환경에 맞게 변형시킨 것이 텍스트큐브 tinyMCE 편집기입니다.

태터툴즈 때부터 텍스트큐브 1.8 버전까지 사용되었던 일반 위지윅 에디터는 tinyMCE 편집기에 비하면 정말로 그 기능이 너무나 초라합니다. 이 글에서 설명하겠지만, 기존의 위지윅 에디터에서는 폰트 속성만 수정할 수 있었고, 간단한 색상 박스 추가, 목록 추가 등 매우 기본적인 편집 기능만 지원했었습니다. 하지만 tinyMCE 편집기에서는 기존의 위지윅 에디터에서 지원했던 기능뿐만 아니라 표 삽입, 인용구 삽입, 블럭 보여주기 기능 등 블로그에 글을 작성할 때 매우 유용하게 사용될 수 있는 다양한 기능들을 제공합니다. 특히 저와 같이 포스트에 다양한 블럭 태그를 자주 사용하는 경우에는 블럭 보여주기 기능이 매우 유용합니다.

텍스트큐브 1.9 버전부터는 tinyMCE 편집기가 기본 에디터로 설정되어 있습니다. 따라서 1.9 이전 버전을 사용하다가 업그레이드하는 경우 약간 당황할 수도 있겠습니다. 하지만 기본 편집기는 환경설정의 설정-글작성 메뉴 설정 페이지에서 변경할 수 있습니다.


텍스트큐브 tinyMCE 편집기 살펴보기


tinyMCE는 가장 많이 사용되고 있는 웹 위지윅 에디터인 만큼, 매우 다양한 기능을 제공합니다. 심지어 개발자가 새로운 기능을 추가하고 싶은 경우에는 플러그인 시스템을 통하여 새로운 기능을 쉽게 추가할 수도 있습니다. 텍스트큐브 개발팀은 기존의 위지윅 에디터에서 지원했었던 기능들을 tinyMCE 편집기에서도 사용할 수 있도록 하여 기존의 블로거들을 배려하고 있습니다. 텍스트큐브의 tinyMCE 편집기 외형은 아래 스크린샷과 같습니다. 텍스트큐브 tinyMCE 편집기에는 다양한 고유 기능 이외에도 이전 위지윅 에디터에서 사용할 수 있었던 기능인 More/Less 박스 삽입 기능도 포함되어 있습니다. 이 기능과 더불어, 기존의 위지윅 에디터와 비교해볼 때, tinyMCE 편집기에는 많은 기능이 추가되었습니다.

텍스트큐브 tinyMCE 편집기에는 새로운 기능이 많이 포함되어 있습니다.

텍스트큐브 tinyMCE 편집기에는 새로운 기능이 많이 포함되어 있습니다.



가장 눈에 띄는 변화는 미리보기 버튼과 저장 후 돌아가기 버튼이 화면 오른쪽 위로 그 위치가 변경되었다는 점입니다. 기존의 위지윅 에디터에서는 아래쪽에 저장하기 버튼이 있었기 때문에 블로거가 글을 모두 작성한 후 스크롤을 내려야하는 불편함이 있었으나, tinyMCE 편집기에서는 우측 상단에 그 버튼들을 위치시킴으로써 블로거의 이러한 불편함을 해소시켰습니다. 이와 같은 변화는 티스토리의 글 작성 페이지와 비슷합니다. 티스토리 글 작성 페이지는 블로거가 스크롤을 하지 않고 한 화면에서 모든 작업을 할 수 있도록 하고 있습니다. 이제부터는 텍스트큐브에서도 tinyMCE 편집기를 사용하면 스크롤이 필요 없는 글 작성이 가능합니다. 지금부터는 텍스트큐브 tinyMCE 편집기와 기존의 위지윅 에디터를 비교 분석해보겠습니다.

텍스트큐브 tinyMCE와 기존 위지윅 에디터의 비교


아래의 스크린샷은 텍스트큐브 1.8 버전까지 사용되었던 위지윅 에디터와 1.9 버전부터 사용할 수 있는 tinyMCE 편집기의 화면입니다. 한 눈에 봐도 tinyMCE 편집기가 조금 더 복잡하게 생겼다는 것을 알 수 있을 것입니다. 위에서도 언급했듯이 텍스트큐브 tinyMCE 편집기는 매우 다양한 기능을 제공합니다. 그리고 tinyMCE 편집기 환경에서는 블로거가 편하게 글을 작성할 수 있도록 레이아웃도 약간 변경됩니다. 저는 tinyMCE 편집기 환경이 기존의 위지윅 에디터 환경보다 더 좋은 것 같습니다. 왜냐하면 tinyMCE 편집기가 더 많은 기능을 지원하고 있고, HTML 편집 기능이 좀 더 안정적으로 작동하는 것으로 보이기 때문입니다. 그 이유를 아래에서 설명하도록 하겠습니다.

기존의 위지윅 에디터와 텍스트큐브 tinyMCE 편집기의 비교

기존의 위지윅 에디터와 텍스트큐브 tinyMCE 편집기의 비교



비교 1 - 글쓰기의 편리성


글쓰기 편리성에 있어서는 tinyMCE 편집기 환경이 절대적으로 우위에 있습니다. 왜냐하면 미리보기 버튼저장 후 돌아가기 버튼이 화면 상단에 고정되어 있기 때문에 글쓰기 마무리를 할 때 좀 더 편리하게 할 수 있기 때문입니다. 그리고 본문의 길이가 길어질 경우 본문 입력 텍스트 박스의 크기가 자동으로 늘어나기 때문에 스크롤바를 이중으로 움직일 필요가 없어졌습니다.

또한 tinyMCE 편집기 환경에서는 티스토리에서도 그러하듯이, 글을 작성할 때 한 화면에서 거의 모든 작업을 처리할 수 있습니다. tinyMCE 편집기 환경에서는 첨부파일 업로드 양식이 기본적으로 숨겨져 있으며, 파일을 업로드하기 위해서는 이미지 삽입 버튼 왼쪽에 있는 파일 업로드 및 삽입 버튼을 눌러야 합니다. 이 버튼을 누르면 화면 아래에서 파일 업로드 양식이 나타납니다. 파일 업로드 양식은 기존의 위지윅 에디터에서 사용하던 것과 같습니다.

그런데 티스토리에서는 태그, 절대주소, 등록날짜를 적는 양식까지 오른쪽에 고정되어 있어 글 작성에 필요한 모든 작업을 한 화면에서 처리할 수 있지만, 텍스트큐브 tinyMCE 환경에서는 태그, 절대주소 등을 적는 양식이 화면 하단에 있어 완전하게 모든 작업을 한 화면에서 관리할 수는 없습니다. 하지만 글 작성 시 자주 사용하는 기능은 한 화면에서 모두 처리할 수 있으므로, 이전 위지윅 에디터와 비교해볼 때 편집기의 사용 편리성은 분명히 향상되었습니다.


비교 2 - HTML 직접 편집 기능


저는 글을 작성하면서 HTML 직접 편집 기능을 자주 사용합니다. 특히 DIV 태그로 만들어진 컬러풀한 박스를 만들 때 HTML 직접 편집 기능을 많이 사용합니다. tinyMCE 편집기는 당연히 HTML 직접 편집 기능을 지원합니다. 하지만 기능 작동에 있어서는 기존의 위지윅 에디터와 매우 큰 차이가 있습니다. 아래 화면에서 볼 수 있는 것과 같이 tinyMCE 편집기에서는 HTML 소스코드를 한 화면에서 바로 편집할 수 있습니다.

완전히 한 화면이라고 하기에는 어려울 수 있겠지만, 기존의 위지윅에디터에서는 에디터 화면이 HTML 소스코드로 전환되는 과정을 필요로 했었습니다. 하지만 tinyMCE 편집기에서는 이러한 과정 없이 바로 HTML 소스코드를 편집할 수 있기 때문에, HTML을 수정한 후 블로거는 디자인이 어떻게 변하는지 바로 확인할 수 있습니다. 또한 기존의 위지윅 에디터에서는 화면이 전환되는 과정에서 편집을 하고 있었던 위치가 바뀌는 경우가 종종 있었는데, tinyMCE 편집기에서는 이와 같은 문제가 발생하지 않습니다.

tinyMCE 편집기에서는 한 화면에서 HTML을 직접 편집할 수 있습니다.

tinyMCE 편집기에서는 한 화면에서 HTML을 직접 편집할 수 있습니다.



tinyMCE 편집기에서 HTML을 직접 편집하는 모습은 위 스크린샷과 같습니다. HTML 태그가 보기 편하게 잘 정리되어 있는 모습을 볼 수 있습니다. 기존의 위지윅 에디터에서는 HTML 태그를 수정할 때 매우 눈이 아팠습니다. 왜냐하면 공백이 없이 모든 HTML 태그가 일자로 늘어졌었기 때문입니다. HTML을 직접 수정할 때에는 줄바꿈이 포함되어 있는 것이 좋습니다. tinyMCE 편집기는 각 문단 태그마다 줄바꿈이 되기 때문에 더 편리하게 HTML을 편집할 수 있습니다.

기존의 위지윅 에디터에서는 HTML 편집 기능이 완전하지 못 했습니다. 왜냐하면 이 에디터에서는 DIV 태그를 제대로 인식하지 못 했기 때문입니다. DIV 태그를 넣고 위지윅 환경에서 편집을 하는 경우 DIV 태그의 종료 태그가 자동으로 삭제되는 현상이 일어났습니다. 때문에 이전의 위지윅 에디터에서는 자유롭게 DIV 태그를 사용할 수 없었습니다. 그런데 tinyMCE 편집기 환경에서는 이러한 현상이 나타나지 않는 것으로 보입니다. tinyMCE 편집기가 좀 더 신뢰할 수 있는 에디터인 것은 확실한 것 같습니다.


비교 3 - 문단 기능


tinyMCE 편집기에서는 문단 편집과 관련된 기능이 많이 추가되었습니다. 특히 현재 커서가 위치하고 있는 곳의 문단 구조를 보여주는 기능까지 포함하고 있어, 보이지 않는 문단을 수정할 때 매우 편리합니다. 애드센스를 본문에 직접 넣는 경우에 매우 유용하게 사용될 수 있습니다. 일반적으로 애드센스와 같은 요소를 본문에 추가할 때에는 DIV와 같은 보이지 않는 태그를 이용하는데, tinyMCE 편집기는 블로거가 이와 같은 모든 요소들을 쉽게 인식할 수 있도록 해줍니다. 아래 스크린샷과 같이 편집기 아래쪽에는 현재 커서가 위치하고 있는 곳의 문단 구조가 나타납니다.

tinyMCE 편집기 환경에서는 현재 커서가 위치한 곳의 문단을 확인할 수 있습니다.

tinyMCE 편집기 환경에서는 현재 커서가 위치한 곳의 문단을 확인할 수 있습니다.



이 기능 외에도 tinyMCE 편집기는 매우 다양한 문단 편집 기능을 지원합니다. 기본적으로 H1 ~ H6 까지 제목 태그를 지원하고 있으며, article, section 등 HTML5에서 지원하는 문단 태그를 삽입하는 기능도 제공합니다. 또 다른 기능으로는 불릿 리스트와 숫자 리스트의 다양한 속성들이 있습니다. 기존의 위지윅 에디터에서는 한 가지씩의 속성만 있었지만, tinyMCE 편집기에서는 원, 점, 사각 등의 불릿 리스트와 알파벳, 그리스어 등 매우 다양한 종류의 숫자 리스트를 제공합니다.

tinyMCE 편집기는 모든 블록들을 시각적으로 보여주는 기능도 지원합니다. 블록 보여주기 버튼을 누르면, 모든 블록들의 스타일이 삭제되면서, 모든 블록들에 점선 테두리가 생깁니다. 모든 블록들에 점선이 생기기 때문에, 위에서 설명했던 실제로는 보이지 않는 블록들을 시각적으로 확인할 수 있습니다. 만약 테두리가 없는 HTML 태그를 사용하고자 할 때 이 기능을 사용하면 매우 좋습니다.


비교 4 - 표 삽입 및 수정 기능


텍스트큐브 tinyMCE 편집기에서 지원하는 기능 중 가장 돋보이는 기능은 단연 표 삽입 및 수정 기능입니다. tinyMCE 편집기에서는 워드프로세서에서 표를 만드는 것과 같은 방법으로 표를 만들 수 있습니다. 표를 만드는 것뿐만 아니라 수정하는 것까지도 위지윅 환경에서 편집할 수 있습니다.

수정하고자 하는 표를 선택한 후 커서를 이용하여 모서리를 드래그하면 표 또는 셀의 크기를 조절할 수 있습니다. 기존의 위지윅 에디터에서는 표를 삽입하는 기능을 지원하지 않았고, 표를 수정하는 기능 역시 지원하지 않았습니다. 하지만 이번 tinyMCE 편집기에서 표 삽입 및 수정 기능을 지원하면서 텍스트큐브에서도 티스토리에서와 같이 블로그 본문에 간편하게 표를 넣을 수 있게 되었습니다.

tinyMCE 편집기에서는 완전한 위지윅 환경으로 표를 만들 수 있습니다.

tinyMCE 편집기에서는 완전한 위지윅 환경으로 표를 만들 수 있습니다.



표를 추가하는 방법은 표 삽입 버튼을 이용하는 것 외에도 tinyMCE 편집기 화면에서 오른쪽 마우스 버튼을 누르면 메뉴가 나타나는데 이곳에서 테이틀 삽입 메뉴를 이용하는 방법도 있습니다. tinyMCE 편집기에서는 오른쪽 마우스를 누른 후 속성을 변경하는 기능을 지원합니다. 기존의 위지윅 에디터에서는 지원하지 않던 매우 편리한 기능입니다. 하지만 메뉴에서 바꿀 수 있는 속성이 매우 제한적이기 때문에 자주 사용될 수는 없습니다. 제 생각에는 오른쪽 마우스 버튼을 누르면 나오는 메뉴에 폰트 속성을 바꿀 수 있는 기능이 포함되면 매우 좋을 것 같습니다.


비교 5 - 다양한 부가 기능


기존의 위지윅 에디터는 정말로 기본중의 기본적인 기능만 지원했었습니다. 폰트 속성 변경, 파일 첨부 기능, 문단 지정 기능이 이전 위지윅 에디터가 가지고 있던 모든 기능이었습니다. 하지만 이번 tinyMCE 편집기에서는 다양한 부가기능을 지원합니다.

가장 눈에 띄는 부가기능은 특수문자 추가 기능입니다. 블로그에 글을 쓰다 보면 특수문자를 넣고 싶을 때가 있는데, 한자 키를 이용하여 특수문자를 넣는 것에는 분명히 한계가 있습니다. 이 때 tinyMCE 편집기의 특수문자 추가 기능을 이용하면 편리합니다. 그 다음으로는 앵커를 삽입하는 기능을 지원합니다. tinyMCE 편집기에서 앵커를 삽입하면, 삽입된 바로 그 위치에 앵커 아이콘이 표시됩니다. 따라서 블로거는 어느 곳에 앵커가 삽입되어 있는지를 쉽게 알아볼 수 있습니다. 블로그 글에서 목록을 만들 때 앵커 기능을 사용하면 편리합니다.

tinyMCE 편집기에서는 편집하던 내용을 버튼 하나로 인쇄할 수 있습니다. 인쇄 버튼을 누르면 아래 스크린샷과 같이 본문 내용만 따로 인쇄할 수 있습니다. 본문을 드래그하여 선택할 필요가 없습니다.

tinyMCE 편집기에서는 본문 내용만 따로 추출하여 인쇄할 수 있습니다.

tinyMCE 편집기에서는 본문 내용만 따로 추출하여 인쇄할 수 있습니다.



그리고 저장 기능도 지원하고 있는데, 인쇄 버튼 왼쪽에 있는 디스크 버튼을 누르면 편집 도중에 임시로 중간 저장할 수 있습니다. 이 기능은 기존의 위지윅 에디터에서도 지원했던 기능이지만, 이 때에는 화면 아래쪽에 저장하기 버튼이 숨겨져 있어 블로거가 잘 사용하지 않았습니다.

하지만 tinyMCE 편집기에서는 워드프로세서를 사용할 때와 비슷한 인터페이스로 저장하기 버튼을 제공하고 있으므로 간단하게 중간 저장 기능을 사용할 수 있습니다. 중간 저장 기능을 이용하면, 지금까지 작성했던 내용을 임시로 저장한 후, 나중에 다시 불러와서 사용할 수 있습니다. 하루만에 글을 모두 쓰지 못 하는 경우나 자료가 날아가는 것을 대비하고자 하는 경우에 중간 저장 기능을 사용하면 좋습니다.


마무리


지금까지 텍스트큐브 tinyMCE 편집기에 대해서 알아보았습니다. 이 글에서 소개한 기능 이외에도 tinyMCE 편집기는 매우 다양한 기능을 제공합니다. 기존의 위지윅 에디터와 비교해볼 때 tinyMCE 편집기가 우수한 것은 사실인 것 같습니다. 하지만 오랫동안 텍스트큐브 위지윅 에디터를 사용해오던 블로거라면 인터페이스가 익숙하지 않을 수 있습니다. 하지만 텍스트큐브 1.9 버전부터는 주력 에디터로서 tinyMCE 편집기를 밀고 있는 것 같아 텍스트큐브 블로거라면 이제부터라도 tinyMCE 편집기를 사용하는 것이 좋을 것 같습니다. 1.9 초기 버전에서 발견되었던 각종 버그는 수정된 것으로 확인됩니다. 현재 이 글은 tinyMCE 편집기를 이용하여 작성하고 있는데, 아직까지는 아무런 이상도 발견되지 않았습니다.

※ 기존의 위지윅 에디터를 이용하여 작성된 글은 수정을 할 때에도 tinyMCE 편집기가 아닌 원래의 에디터로 수정을 해야 합니다. 마찬가지로 tinyMCE 편집기를 이용하여 작성된 글은 당연히 tinyMCE 편집기를 이용하여 수정해야 합니다. 왜 이렇게 되는 것인지는 잘 모르겠지만, 글이 저장될 때 사용했던 편집기도 함께 저장되는 것 같습니다.
http://www.erzsamatory.net/trackback/123

건전한 댓글 문화를 만들어주시기 바랍니다 ^^
불건전한 댓글이 등록되는 경우 관리자의 임의적 판단으로 삭제될 수 있음을 미리 공지드립니다.

비밀글로 작성하기
  1. 2014/07/23 21:59
    에디터에서 문단 구조를 알 수 있는 것 좋은데요. 특히 에디터 그림을 보니 저장과 인쇄 아이콘이 있다는 것이 아주 특이한데요. 티스토리에서는 글쓴 후 브라우저에서 인쇄로 PDF로 저장했거든요.
    • Walter E.
      Walter E.
      2014/07/24 00:14
      그렇습니다. 하나의 워드프로세서를 보는 듯한 모습이지요.. ㅎㅎ...
      인쇄 버튼이 있어 쉽게 인쇄할 수 있다는 점은 인쇄를 필요로 하는 블로거에게 매우 유용할 것 같습니다.
  2. 2015/02/05 20:13
    안녕하세요. 티스토리에서 텍스트큐브로 이사를 해서 현재 적응중에 있습니다. 다름이 아니라..현재 tinyMCE를 사용하면서 한가지 불편한점이 있어서 혹시 해결책을 아시나 싶어 이렇게 문의를 남겨봅니다.

    글을 쓰는 도중 엔터를 치고 한줄을 띄고 글을 쓰게 될 경우 ...자동적으로 한줄로 다시 커서가 옴겨지는 현상이 생깁니다. 또 "안녕"이라는 글을 쓸때.."ㅇㅇ아안녕.."이렇게 되는 현상도 나타나는데..이럴 경우 어떻게 해결을 해야 하는지 혹시 아시면 답변좀 부탁드리겠습니다.~~
    • Walter E.
      Walter E.
      2015/02/05 20:50
      텍스트큐브 어떤 버전을 사용하고 있나요?

      현재 제가 tinyMCE에서 테스트를 해보았지만, 똑같은 결과를 얻을 수 없었습니다.

      현재 어떤 웹브라우저를 사용하고 있는지,
      텍스트큐브 어떤 버전을 사용하고 있는지,
      버그가 발생하는 상황을 조금만 더 자세하게 설명해주시면,

      GitHub에 버그 등록해보도록 하겠습니다.

      아니면 직접 등록하실수도 있습니다.

      https://github.com/Needlworks/Textcube/issues

      이곳은 텍스트큐브 개발자 사이트입니다.
      이곳에 버그 사항들을 등록하면 개발자분이 다음 텍스트큐브 버전에 반영해주신답니다~
    • Walter E.
      Walter E.
      2015/02/05 20:52
      확인해보니 가장 최신 버전인 텍스트큐브 1.10.2를 사용하고 계시군요.

      저는 버그를 확인할 수 없었습니다. ㅠㅠ

      혹시 인터넷익스플로러를 사용하고 계신가요?

      크롬에서는 잘 작동하고 있습니다.
  3. 2015/02/06 00:04
    안녕하세요. 현재 익스플로러를 사용중에 있습니다. 크롬을 사용했더니 크롬에서는 이런 문제가 없더라고요..아무래도 익스플로러에 문제였던거 같습니다.

    티스토리 에디터에만 익숙해져 있다보니 텍스트큐브 에디터는 좀 상당히 낯설어서 현재 적응 중에 있는데..참 힘드네요...

    혹시 텍스트큐브에서 다음에디터를 사용할 수 있는 방법은 없을까요?
    • Walter E.
      Walter E.
      2015/02/06 15:54
      텍스트큐브 편집기는 플러그인 형태로 동작하는 것으로 알고 있습니다.

      티스토리에서 사용되는 것을 텍스트큐브에 그대로 이식시킬 수 있다면 사용할 수 있겠으나, 이 부분은 개발자분들께서 하셔야 하는 부분이라 저로서는 방법이 없습니다. ㅠㅠ

      하지만 텍스트큐브 에디터는 소스를 직접 수정하는 블로거에게 매우 유용합니다. 티스토리에서는 지원되지 않는 소스코드 보기와 위지윅에디터의 커서 연동이 되기 때문입니다. ^^

      나름대로 텍스트큐브 에디터만의 장점도 있습니다~