Editus 프론트 앤드(front-end) 에디터.

인터넷과 웹 정보

오늘은 워드프레스에서 포스트(블로그) 작성을 위한 프론트 앤드(front-end) 에디터를 소개해 볼까한다. 그리고 그 중에서도 43Gear.com이 선택한 “Editus”라는 미래에서 온 것 같은 프론트 앤드 에디터를 소개해 보겠다.

워드프레스를 모르거나 또는 관심이 없는 사람이라면 프론트 앤드(front-end)라는 용어가 낯설거나 중요하지 않거나 하겠지만, 프론트 앤드는 아주 간단하게 말하자면 우리가 네이버 블로그 또는 티스토리를 통해 포스트를 작성하고 공개 할 때 사용하는, 즉 글을 작성하는 에디터라고 이해하면 되겠다. 하지만 불행히도 워드프레스란 시스템은 자체적으로 프론트 앤드 에디터를 제공하거나 포함하고 있지 않으며, 그 대신 대시보드라는 특별한 환경을 제공하고 있는데… 그래서 43Gear.com과 같이 회원가입을 열어놓은 사이트의 경우, 회원의 등급을 정해서 대시보드에 접근할 수 있게 허용하고 > 대시보드의 에디터를 이용하여 포스트(블로그) 작성을 할 수 있게 하는게 일반적이다.

그럼에도 불구하고 43Gear.com을 오픈 하면서부터 프론트 앤드 에디터에 관심을 가졌었고, 43Gear.com엔 언제나 프론트 앤드 에디터가 존재했던 이유는, 워드프레스엔 대시보드라는 특별한 환경이 있다고는 하지만, 사이트 관리자의 입장에서 누구나가 이 대시보드에 접근하게 하는것은 쉬운일도 쉬운 결정도 아니었기 때문이다. 그리고 43Gear.com을 오픈하고 지금까지 소셜 아티클(Social articles), 프론티어 포스트(Frontier Post), 프론트앤드 퍼블리싱(Frontend Publishing), 그리고 에디투스(Editus)까지 사용을 해 본 후 왜 43Gear.com은 에디투스(Editus)를 선택했는지, 그리고 에디투스(Editus)는 어떠한 시스템인지 소개해 보겠다.

지금부터 사용해본 프론트 앤드 에디터를 아주 간단하게 소개해 보겠다.

(1) 소셜 아티클(Social articles). 

소셜 아티클(Social articles)은 회원의 개인공간에 특화되어 회원의 공간에서 포스트 작성을 할 수 있게 해주는 에디터이다. 예를들면, 운영자인 내 페이지 주소는 “http://43gear.com/members/admin/“이며 내 페이지에서 포스트를 작성할 수 있게 해주는 플러그인인데 문제는 이미지 또는 사진첨부 방식이 드래그 앤 드롭 방식이란 점이다.
컴퓨터 어느곳에 있는 이미지 또는 사진이라 할 지라도 위 이미지와 같이 마우스로 드래그하면 이미지가 삽입이 된다. 하지만, 이미지를 중앙에 둘 수 없고, 작성한 포스트를 공개하지 않으면 글 작성자인 나조차도 이미지 또는 사진의 크기를 확인할 수 없는 문제가 있었다. 뿐만아니라 이 드래그 앤 드롭방식이 모바일 환경에선 어떻게 작동할까 심히 걱정이 되었는데 예상대로 모바일 환경에선 이미지 또는 사진을 첨부하거나 삽입할 수 있는 방법이 없었다. 이 문제는 이후 프론트앤드 퍼블리싱(Frontend Publishing)과 에디투스(Editus) 사이에서 무엇을 선택할지 고민하게 만든 데목이기도 한데, 이후에 다시금 언급하기로 하자. 

무료버전과 유료버전이 있으며 무료버전은 Featured image 삽입 이외에 이미지나 사진첨부는 불가능하다.

(2) 프론티어 포스트(Frontier Post). 

프론티어 포스트(Frontier Post)는 위 이미지에서 보여지는 바와같이 워드프레스의 대시보드 에디터 환경을 그대로 옮겨 놓은것같은 환경을 제공한다. 개인적으로는 로컬서버 환경에서만 테스트 해 보았지만 문제없이 잘 작동하며 워드프레스의 대시보드 환경과 동일한 만큼 사용상 특별히 언급할 부분은 없다. 

무료버전만 제공한다.

(3) 프론트앤드 퍼블리싱(Frontend Publishing).

최종적으로 에디투스(Editus)를 43Gear.com에 심고싶다 결정을 내리기까지 에디투스(Editus)와 프론트앤드 퍼블리싱(Frontend Publishing) 사이에서 고민의 고민을 거듭했었다. 그 이유는, 우선 에디투스(Editus)엔 없는 글의 형식(포맷: Formats)을 지정할 수 있는등 기능이 조금더 풍부했기 때문인데 물론 이 풍부한 기능은 유료버전을 구입해야만 가능하며 난 로컬서버 환경에서 무료버전만 사용을 해 보았다. 하지만 안정성과 속도 면에서 앞 서 언급한 프론티어 포스트(Frontier Post) 보다 뭔지 모르게 좋았고 안정적이었으며 글을 작성하는 그 작업환경도 매우 깔끔했기에 고민을 많이 했었다. 또한… 역시 앞 서 언급한 소셜 아티클(Social articles)의 경험상 드래그 앤 드롭 방식이 아닌것도 고민을 거듭한 하나의 이유다.

무료버전과 유료버전이 존재하며, 무료버전의 경우 몇가지 특별한 기능 예를 들면, 글 형식(포맷) 지정, 별점 시스템, 리치 텍스트 등을 제외하면  프론티어 포스트(Frontier Post)와 마찬가지로 워드프레스 대시보드 환경과 거의 동일한 모든 기능을 사용하며 글을 작성할 수 있다.

(4) 에디투스(Editus).

하지만 앞 서 언급한 몇몇 프론트 앤드 에디터의 장점들에도 불구하고 43Gear.com은 “에디투스(Editus)”라는, 마치 미래에서 온 것 같은 이 에디터를 43Gear.com의 프론트 앤드 에디터로 결정했다. 이제 43Gear.com에 로그인을 하게되면 위 이미지의 노란색 원 안 “에디투스(Editus)” 에디터 시스템이 자동으로 생성된다. 

개인적인 그 결정, “에디투스(Editus)” 에디터를 선택한 그 이유는 다음과 같다. 

a. 우선 43Gear.com은 기어들 각자가 작성한 블로그 포스트엔 기어들 각자의 애드센스 코드가 삽입되 기어들 각자의 수익창출활동을 할 수 있는 무대로 만들것이며, 왜 그러한 무대를 원하는지 43Gear.com이란 사이트의 정체성을 밝혔었다.

– [연재]43Gear의 꿈 4편: 수익을 창출하여 1인 창업가가 되자!

– [연재]43Gear의 꿈 5편: 수익창출을 위한 본질적 도구.

– [연재]43Gear의 꿈 7편: Let’s prepare the stage.

b. 따라서 기어들 각자가 작성한 블로그 포스트엔 기어들 각자의 애드센스 광고가 노출되는 만큼, 43Gear.com의 블로그 포스트 공간이 어떠한 공간인지 보이고 싶었고,

c. 에디투스(Editus) 에디터는 그러한 블로그 포스트를 작성하는 사람에게 글을 쓰는 재미를 선사하기 때문에 43Gear.com은 에디투스(Editus) 에디터를 선택했다.

"에디투스(Editus) 에디터는, 네이버 블로그의 에디터 화면이 존재하지 않는다. 에디투스(Editus) 에디터는, 티스토리와 같은 편집화면도 존재하질 않는다. 블로그 포스트를 작성한 후 보여지는 그 공간이 백지상태로 나타날 뿐이다. 따라서 내가 작성하고 있는 글이 어떻게 보여질지 계산하거나 프리뷰 할 필요도 없다."

에디투스(Editus) 에디터로 글을 작성하는 방법을 한 번 살펴보자.

위 이미지의 노란색 마크처럼, 로그인을 하면 자동으로 나타나는 에디투스(Editus) 에디터 아이콘에서…

오른쪽 ‘플러스’ 마크가 있는 아이콘을 클릭하면 >> 제목을 입력하는 필드가 나타나고 >> 제목을 입력후 ‘Create’ 버튼을 클릭하면…

새로운 글을 작성할 수 있는 환경으로 이동되어진다.

다른 프론트 앤드 에디터와 ‘무엇’이 다른지 알 수 있을려나… 

에디투스(Editus) 에디터는, 네이버 블로그의 에디터 화면이 존재하지 않는다. 에디투스(Editus) 에디터는, 티스토리와 같은 편집화면도 존재하질 않는다. 블로그 포스트를 작성한 후 보여지는 그 공간이 백지상태로 나타날 뿐이다. 따라서 내가 작성하고 있는 글이 어떻게 보여질지 계산하거나 프리뷰 할 필요도 없다. 그저 작성하기만 하면 된다. 그래서 실제로 에디투스(Editus) 에디터 설치후 글을 작성하는 재미가 훨씬 배가되었다. 내 경우의 이야기며 느끼고있는 점이다. 

그리고 위 이미지와 같이 파랑색 색인이 된 부분부터, 또는 파랑색 색인이 된 부분을 지우고 그 자리에 글을 작성하기 시작하면 된다. 아래 이미지와 같이…

에디투스(Editus)와 프론트앤드 퍼블리싱(Frontend Publishing) 사이에서 고민의 고민을 거듭한 가장 근본적인 이유는, 위 이미지에서 보여지는 이미지 또는 사진을 삽입하는 기능과 따옴표(인용: Quote) 처리를 하는 기능이 드래그 앤 드롭방식에 쓰라린 경험을 하게 한 소셜 아티클(Social articles)과 흡사한 시스템이었기 때문이다. 그래서 과연 모바일 환경에서 어떻게 작동할지 조심스러웠다.

믿는 구석이 없지는 않았다. 첫째는 에디투스(Editus) 에디터의 드래그 앤 드롭방식은 소셜 아티클(Social articles)과 같이 이미지 또는 사진을 드래그 앤 드롭하는 방식과는 달랐기 때문이다. 소셜 아티클(Social articles)이 이미지 또는 사진 그 자체를 드래그 앤 드롭형식으로 끌고와 삽입을 하는 방식이라면 에디투스(Editus)의 드래그 앤 드롭방식은 이미지 또는 사진 그 자체를 드래그 앤 드롭하여 삽입하는 것이 아닌, 단순히 이미지 또는 사진의 위치만 지정하는 방식이었기 때문이다.

위 이미지를 살펴보자. 에디투스(Editus) 에디터의 드래그 앤 드롭방식은 이미지 또는 사진을 어디에 삽입할 것인지 위치많을 지정한다. 위 이미지와 같이 이미지 또는 사진을 삽입하고 싶을때 이미지 또는 사진을 삽입하고 싶은 위치에 ‘카메라 아이콘’을 마우스로 드래그 앤 드롭하면 미디어 창이 열리고 원하는 이미지 또는 사진을 삽입하는 방식을 취하고 있다.

에디투스(Editus)의 이러한 방식은 이미지 또는 사진을 삽입하는 방법 이외에 따옴표(인용: Quote) 처러 문구를 만드는 개념도 동일하다.

"에디투스(Editus)는 다른 에디터엔 없는 글자색을 지정할 수 있었고 내가 꼭 필요로 하는 기능이었다."

믿는 구석이 또 하나 있었는데, 에디투스(Editus) 에디터 홈페이지를 통해 확인할 수 있는 데모 사이트를 모바일 환경에서 확인 한 후 만족스러운 환경이 되겠구나… 확신이 들었기 때문이다. 참고로 에디투스(Editus) 웹사이트 주소는 아래와 같다.

https://edituswp.com

웹사이트를 방문하면, 데모 페이지로 이동하여 에디투스(Editus)를 경험해 볼 수 있다.

마지막으로 에디투스(Editus) 에디터엔, 다른 에디터엔 없는 글자색을 자유롭게 지정할 수 있는 기능이 있었고 내가 꼭 필요로 하는 기능이었다.

43Gear.com이 에디투스(Editus) 에디터를 선택한 이유다.

몇가지 단점도 있다. 단점도 잠시 살펴보도록 하자.

(1) 우선, 여전히 모바일 환경에서 이미지나 사진, 또는 따옴표(Quote) 처리시 드래그 앤 드롭을 통해 위치를 선택하는 일이 쉽지가 않다. 이 부분은 이후 에디투스(Editus) 기능에 관한 블로그 포스트시 자세히 작성해 보려고 한다. 그리고 그때, 어떻게 하면 좀 더 쉽고 편하게 모바일 환경에서 작업할 수 있을지 알아보자.

(2) 역시 모바일 환경에서 불편한 부분이 한가지 더 있는데, 아래 세 개의 이미지를 살펴보자.

첫번째 이미지는 데스크탑 환경에서 에디투스(Editus) 에디터의 “All Posts” 아이콘, 즉 위 이미지의 노란색 테두리로 마킹된 부분을 클릭하면 나타나는 각각의 기어들이 작성한 블로그 포스트의 목차를 설명하기 위한 이미지이다.

두번째 이미지는 에디투스(Editus) 에디터의 “All Posts” 아이콘을 클릭했을때 나타나는 목차이다. 이때, 특별히 수정할 블로그 포스트가 없거나 또는 공개하지 않은 블로그 포스트가 없을때 “All Posts” 즉 목차의 바깥쪽을 마우스 클릭하면 목차는 사라진다.

세번째 이미지는, 그런데 모바일 환경에선, “All Posts” 아이콘을 클릭했을 경우 위 이미지와 같이 목차가 전체화면으로 나타난다. 따라서 수정을 해야할 블로그 포스트가 없을 지라도 사라지게 할 방법이 없다. 내 경우엔, “All Posts” 아이콘을 클릭하고 목차화면이 나타났다면 일단 하나의 포스트를 지정해 연다. 그런다음 홈으로 돌아가던, 그룹으로 돌아가던 하면 된다. 또는, 위 이미지의 노란색 테두리의 돌아가기(Back)를 클릭해 홈 화면으로 돌아가는 방법도 있겠다.

이상으로 43Gear.com이 선택한 프론트앤드(Frontend) 에디터 “에디투스(Editus)“를 알아보았다. 정말이지 감격스럽다… 글쓰는 재미가 쏠쏠하다. 오늘은, 창작소설 작업을 해야하는데, 뭔가 블로그 포스팅을 작성할 꺼리가 없나… 고민하게 만들고 자꾸만 뭔가를 하게 하려한다.

블로거인 나에게, 가장 이상적이고 갖고싶은 에디터는 글쓰는 재미를 만끽하게 해주는 에디터였다. 가만히 앉아서 로그인을 한 후, 에디투스(Editus)를 마주한채 뭔가를 쓰려하는 지금의 환경이 나를 설례이게 한다. 앞으로, 주기적으로, 에디투스(Editus) 에디터에 관한 소식을 전달해 볼까 한다. 에디투스(Editus)에 관한 새로운 뉴스나 이슈도 이따금씩 소개하면서 말이다. 우선, 다음편엔 에디투스(Editus) 에디터의 기능을 꼼꼼히 소개해 보도록 하겠다. 이 미래에서 온 것 같은 에디투스(Editus) 에디터가, 누군가에겐 너무 생소하고 낯 선 환경일지라도,, 아무라도 하루만 사용을 해 보아도 금새 푸~욱 빠져들고 말것이다. 누구라도 그 어색함이 금새 사라지리라 확신한다.

이 자리를 빌어, Hyun(현)님께 감사한다. 나처럼 특별히 아는게 없는, 그저 이상과 꿈만 가지고 있는 사람들은 원하는 환경을 만들어감에 있어서 많은 시행착오도 겪기 마련이다. 나 역시 그랬다… 처음 Hyun(현)님께 에디투스(Editus)가 내가 사용하는 테마에서 제대로 동작을 할지 어떨지, 문제가 발생한다면 스스로 문제를 해결할 수 있을지,, 걱정이 된다는 메일을 보냈었고, Hyun(현)님은 내가 사용하는 테마를 손수 확인해 주셨고, 문제가 있다면 문제를 모두 수정해 주셨다…

에디투스(Editus)에 관심이 있는 워드프레스 사용자라면 언제라도 Hyun(현)님께 문의를 해보면 좋을듯 싶다. Hyun(현)님은, 아메리칸 코리안이시기에 한글로 문의 메일을 작성해 보내도 답을 주실수 있는 분이시며, 에디투스(Editus) 에디터 개발자 분이시다. 이 의외의 인연이… 오래 지속되면 좋겠다…

이메일: hyunsupul@gmail.com

웹사이트: https://edituswp.com

Editus 프론트 앤드(front-end) 에디터.

-잼넷-