자유광장
커뮤니티 사람들과 자유롭게 소통할 수 있습니다. 질문이나 조언을 구하는 글은 [물어보기]를 이용해주세요.
조회 수 281 추천 수 4 댓글 14
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 댓글로 가기 첨부
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 첨부

안녕하세요.  

 

사실 개발자도 아니고 에디터에 대해 식견도 없습니다만, 기존 XE 에디터들의 iOS(애플운영체계)에서의 버그 때문에 대부분의 XE에 적용 가능한 에디터를 수개월간 집중적으로 사용 했습니다.

 

Froala Editor (이하 프로알라 에디터)는 포스타입을 통해 이런류의 에디터도 있다는 것을 처음 알게 되었지요. 생각해보면 그때도 라르게덴님 글이였던 것으로 기억합니다.

 

시간이 흘러 프로알라 에디터에 대해 라르게덴님이 거의 2년 이상 XE에 적용하기 위해 고생하다가 중단 되었던 것을 몇개월전부터 다시 재개했다는 글이 이곳 XETOWN에 올라왔었죠.

 

그 무렵이 클리앙 개편 시기와도 비슷해서 클리앙에 적용된 에디터로 많이 알고 계십니다.

 

일반적으로 사이트 제작업체나 의뢰하는 운영자 모두 에디터에 대해서는 비중을 크게 두지 않습니다.  그러나 막상 커뮤니티를 운영하다보면 다양한 접속환경과 기기에 따른 호환성. 실제 상호 소통형 게시물 작성을 위해선 에디터가 아주 중요하다는 것을 느끼게 됩니다.

 

이런 경험을 바탕으로 그누보드+Froala Editor의 클리앙 에디터와 XE(라이믹스)+Froala Editor 를 간단하게나마 비교해 보고자 합니다.

 

 

아직 라르게덴님 수정본의 Froala Editor 는 8월 공식 출시를 목표로 하고 있고 버그 및 마무리 작업등이 진행되고 있어 변경될 부분도 있으나 큰 틀에서는 이미 어느 에디터보다 뛰어난 상태이기 때문에 몇가지 사례와 함께 안내코저 합니다.

 

개인적으로 많은 시간을 두고 테스트 한 것은 아니고 대략적으로 10시간내외의 사용자 관점에서 훌어본 차이점과 라르게덴님의 작업량에 대해 아실 수 있을겁니다.

 


 

1. 기본적인 에디터 메뉴구성의 차이입니다.

 

스크린샷 2017-07-06 오후 10.16.05.png

기본 메뉴 구성 (상단) /  클리앙 적용 메뉴(하단)

 

스크린샷 2017-07-06 오후 10.18.20.png

 

클리앙 :

메뉴 구성은 굉장히 단순화 시켰습니다. 모바일용이라고 봐도 좋을 정도인데. 워낙 장사 잘되는 가게에 밑반찬 없어도 손님은 여전히 많이 오는 느낌이랄까요? 글쓰기에 기본적인 메뉴 구성입니다.  아마 클리앙 운영자가 작업자에게 아이콘을 지정해줬고 해당 되는 아이콘만 적용되었을겁니다.  (기능적으로 추가되거나 빠르게 변화가 있지는 않을겁니다)

 

Froala Editor 는 메뉴 추가 편집이 아주 쉽고, 기능추가가 계속 이루어지는게 장점인데. 여기 메뉴까지만 봐서는 Froala Editor 만의 장점을 찾기는 어렵고 안정적인 에디터? 깔끔한 메뉴 구성 정도로 평가 받을거 같습니다.

 

a222.jpg

 

위 편집은 제가 운영하는 사이트에 적용하려고 편집한 내용입니다.  기본 메뉴를 다 넣기에는 많고,  클리앙 메뉴는 좀 적고 적당히 절충했고 기존 운영하던 사이트에 적용해야 하기 때문에 A단락/B폰트/C폰트사이즈는 직관적인 눌림버튼으로 노출 되도록 옵션을 적용했습니다.

끝 부분에 보시면 프린터 마크가 있는데. 예, 맞습니다. 인쇄 기능을 에디터에서 지원합니다.

 

 

2. 기능적인 차이.  심한 다운 그레이드

 

게시물 작성시 나오는 에디터 안내문입니다.

 

스크린샷 2017-07-06 오후 10.26.39.png

 

주목할 부분은 업로드 부분인데. 드래그 업로드나 다중업로드가 안되는 부분은 일반적인 에디터보다 뒤떨어지는 기능입니다.

 

스크린샷 2017-07-06 오후 10.29.37.png

추정하기에 업로드 버튼을 구)에디터들과 같이 별도로 빼놔서 그런거 같은데. Froala Editor 기능중에서 파일업로드 부분을 심각하게 다운그레이드 했네요. 모바일에서 에디터 편집이 어려운 부분과 댓글상에서 에디터 메뉴 없이 단순 텍스트 입력만 가능한 것도 Froala Editor 기능과는 전혀 다릅니다.

 

기존 에디터와 이질감을 느끼지 않도록 하고 호환성이나 트래픽도 고려한 현실적인 선택이지만, Froala Editor 막강한 기능과 장점을 살리지 못하는 아쉬움이 있습니다.

 

3. 확장성과 기능 추가. 개발자 라르게덴님의 장점

 

Froala Editor 에디터는 약 3년전쯤 처음 알게 되었고 대형 커뮤니티에서는 클리앙 도입때 처음 본거 같습니다. 다른 곳도 있는데 제가 놓쳤을 수 있는데. 클리앙은 최초에는 ZB4 계열이였던거 같기도 하나, 수년전부터는 그누보드를 사용하고 있고 Froala Editor 도 그누보드 기반이라 XE사용자로서 부러운 부분이 있었습니다.

 

XE쪽 많은 레이아웃, 게시판스킨, 모듈, 에디터 제작자분들이 있고 실력이나 노하우는 그누보드등 어떤 CMS 보다도 뛰어나다고 생각합니다. 다만, 영역 자체가 좀 달라서인지 수익성이 없어서인지 에디터의 경우 제작자가 전무한 수준이였습니다.

 

Froala Editor 를 주목하고 부러움 속에서 그누보드에서 먼저 적용되니 XE 기반의 사용자이자 운영자로서 좌절감도 가득했는데. 현재 거의 유일한 XE쪽 에디터 전문가인 라르게덴님에게 거는 기대와 희망이 컸습니다.

 

제가 아는 라르게덴님의 Froala Editor 에 대한 공헌과 작업량에 대해 몇가지 언급하고자 합니다.

(내용 보시면 더이상 그누보드 Froala Editor 부러워하지 않으셔도 되고 XE=라이믹스용 Froala Editor (프로알라 에디터)를 기대하셔도 좋을겁니다.

 

- 다른 에디터들과 마찬가지로 XE에서 사용 가능한 에디터들이 해외 소스 기반이기 때문에 한글(자음,모음)에서만 나타나는 버그가 존재합니다. 이 것을 해외 개발자에게 말해봤자, 이해도 어렵고 개선해야 할 우선 순위로 배정 받지 못합니다.  약 2년전부터 Froala Editor 가 한국어 지원을 못할 시절부터 적극적으로 참여해 왔고 그 과정속에서 콘테스트에서 2위를 하기도 합니다.

스크린샷 2017-07-06 오후 10.41.13.png

 

- 클리앙의 경우 원래 Froala Editor 기능중에서 다운 그레이드 되었는데 라르게덴님의 XE용 Froala Editor 의 경우 본래 공식버전에 없는 기능들을 구현해내고 기능제안을 하고 있을 정도로 실력이 뛰어나고 대응 노하우가 넘쳐납니다.

 

그중에서 대표적인 기능이 화면 캡쳐후 에디터상에 붙혀넣기인데.  외부 또는 내부 이미지 경로로 저장 되어 실제 다른 게시물 열람자는 엑스박스 뜨던 것과 달리, 해당 서버내 이미지 파일로 저장 되어 빠르고 정확한 게시물 작성이 가능해집니다.

 

기본적으로 Froala Editor 에 캡쳐후 붙혀넣기시 PHP 서버단에서 처리 되게끔까지이고 실제 저장이나 반영이 안되는 상태이며 이는 현재 클리앙에 적용된 것도 마찬가지입니다.

 

스크린샷 2017-07-06 오후 10.45.09.png

 

 클리앙 뿐만이 아니라, 대부분 Froala Editor 기능중 제한이 걸려져 있고 이미지 편집 및 부가기능이 없습니다. Froala Editor 사이트에서도 아직 공식적으로 캡쳐후 붙혀넣기를 지원하지 않기 때문에 에디터상에는 머물지만, 실제 삽입은 되지 않고 저장되지 않는 이미지죠.

상기 이미지와 같이 업로드(완료)가 되지 않은 상태라 투명한 표시로 유지중입니다.

 

스크린샷 2017-07-06 오후 10.48.15.png

동일하게 에디터상에 라르게덴님의 Froala Editor (프로알라 에디터)에 적용된 경우이며 캡쳐후 붙혀넣기 이미지의 정상적인 업로드 및 저장, 그리고 부가적인 메뉴가 팝업 형태로 등장합니다.

 

주목할 부분은 우측 제일 아래부분의 포토에디터인데. 게시물 업로드 또는 캡쳐후 붙혀넣기로 에디터에 삽입후, 바로 에디터상에서 이미지 편집프로그램을 불러와서 수정후 저장하면 본문(원본)의 이미지에 적용이 되는 방식입니다.

 

- 그외에도 무수한 기능과 설정이 가능하고 사용자 관점에서 조정이 가능토록 매뉴얼 작업과 한글화 작업이 이루어지고 있습니다.

물론 유지/보수/지속발전의 의무가 없는 무료 에디터에 비해 적정한 유료 정책은 지속적인 기능추가와 안정적인 개선작업이 장점으로 작용할겁니다.  

 

스크린샷 2017-07-06 오후 10.48.45.png

 

기능적인 역할도 많고 ADOBE 계열의 프로그램이기 때문에 안정적이고 웹 포토프로그램으로선 아주 휼륭합니다.

 

- 현재 XE용 Froala Editor 는 크게 두가지 형태로 체험이 가능합니다.

 

일반적인 게시판의 글쓰기 형태인 에디터 모드,     https://romanesque.me/edit_demo

블로그 형태의 글쓰기를 위한 인라인 모드.    https://romanesque.me/inline_demo

 

본 글을 한줄 요약하면 이렇습니다.

 

클리앙 리뉴얼 통해서 그누보드에 Froala Editor 가 적용 되었는데 현재 XE(라이믹스)용 Froala Editor 는 몇배 더 기대해도 좋습니다.

 

 

  • profile
    기진곰 2017.07.06 23:42:40

    대부분의 위지윅 에디터에서 단락(문단) 선택 메뉴가 왼쪽 끝 제일 좋은 자리를 차지하고 있는 것에 대해 개인적으로는 아쉬움이 있습니다. 개인 블로그 등에 전문적으로 글을 쓰거나 시맨틱 웹에 대한 강한 신념(?)이 있는 분이라면 <h1>부터 <h6>까지 쫙 맞추고 싶어하실지도 모르겠지만, 대부분의 커뮤니티 사이트에 글이나 댓글을 쓸 때는 단락 구조 따위 신경쓰는 사람 아무도 없거든요. 꼭 사용한다 해도 저렇게 좋은 자리를 대문짝만하게 차지할 필요가 있을까 싶고... 그래서 현재 XE타운 댓글에 적용된 CKEditor "간단" 도구상자에서도 단락 선택 메뉴는 지워버렸어요. Froala Editor도 이게 없길래 와~ 깔끔하다~ 싶었는데 pock님은 도로 넣으셨네요 ㅋㅋ

  • ?
    pock 2017.07.07 12:05:38
    예. 저도 단락(문단)에 대한 무용론자입니다. 수천개 글을 적어도 사용해본적이 없습니다.

    대신 프로알라에디터의 경우 몇가지 장점이 있어서 잘 활용하면 잔짜 가치있게 쓸 수 있을거 같다는 판단에서입니다.

    1. 문단단락을 편집하기 쉬운 형태로 되어있고
    2. 편집 및 아이콘이든 눌림버튼이든 전환이 쉽기 때문에 단계적으로 적응기간을 주면서 대응이 효과적입니다.
    3. 문단 영역에 서식형태로 지정해서 삽입 할 수 있기 때문에 다른 아이콘 형태로 빠져 있는데 서식에 가까운 녀석들을 넣어서 최대 4-5개 이내에서 넣어 보고자 합니다.

    에디터 메뉴에 대해서는 실 사용자 중심으로 편집한 내용은 별도로 올릴 예정입니다.
  • profile
    기진곰 2017.07.07 12:07:52

    네, 단순히 <h1> ~ <h6> 태그 종류를 선택하는 것이 아니라 미리 만들어진 스타일을 빠르게 적용할 수 있는 기능이라면 기존의 에디터와는 전혀 다른 쓸모가 생길지도 모르겠습니다. 이런 자료를 보면 단락 선택 기능이 도움이 될 수도 있겠고요.

  • profile

    기능적인 면은 원본 froala에디터에다 라르게덴님이 신경쓰셔서 유용한 기능들을 더 추가하신걸로 알아서

    아마 기능자체만으로는 XE에디터중에는 최강이 아닐까.... (라고 해도 XE에서 쓸수 있는 에디터가 몇개 없잖ㅇ...... orz...)

    특히 전 포토에디터에 meme 만드는 기능같은거에 쪼끔 감동받았다능.... ㅎㅎ

    수정됨_다운로드.jpg

     

     

    살짝 궁금한건 froala에디터도 스킨(?)같은걸 바꿀수 있는지 궁금하네요.

    제가 지금 CK에디터에 적응되서 그런걸수도 있긴한데 

    지금 froala에디터는 개인적인 느낌으로 사이트에 살짝 떠 있는 느낌인거 같아서요.

    (froala에디터는 왠지 종이위에 붙인 포스트잇 같은 느낌이랄까.... 묘하게 약간 어긋나있는 기분같은게 들어서..)

    툴바배경색은 froala공홈에서 보니 바꿀수 있는거같고..

    클리앙 캡쳐사진 보면 FLAT한 느낌인거보니 가능한거 같긴한데..  

  • profile
    이온디 2017.07.07 03:59:55
    스타일 변경은 오히려 더 쉬울 거 같습니다.
  • ?
    pock 2017.07.07 12:08:08
    에디터 메뉴에 색상 지정도 가능하고 버튼별로도 설정이 가능한 것으로 압니다. 라르게덴님은 기능적인 부분과 안정성 부분에서 우선 작업이 진행중이기 때문에. 나중에 매뉴얼 작업이 끝나면 사용자가 손쉽게 가능하리라 봅니다. html 이나 php 모르는 저도  대부분 수정이 가능하니까요.
    1
  • profile
    아파치 2017.07.07 02:14:28
    새로운 에디터가 시험되고 있나 보군요....^^
  • profile
    라르게덴 2017.07.07 07:43:47
    워... 에디터 소개와 칭찬 고맙습니다. :p
    이 에디터의 우수한 점을 좀 더 많이 소개해드려야하는데 직업 일의 핑계로 그러지 못하고 있네요. ㅠㅠ
    하루 빨리 배포할 수 있도록 하겠습니다.
  • profile
    기진곰 2017.07.07 12:10:25
    아시겠지만 라이믹스에서 요즘 에디터와 관련하여 다양한 옵션을 추가하고 있습니다.
    작업하시는 데 걸리적거릴까 봐 살짝 걱정이 되기는 합니다만,
    코어의 에디터 설정과 연동하는 것이 좋겠다고 생각되시는 부분은 마음껏 연동하시고
    그렇지 않은 부분은 과감하게 무시하셔도 좋습니다^^
  • profile
    라르게덴 2017.07.07 12:17:23
    일단 다 되게 해야된다고 생각하고 있어요. 커버이미지 취소 기능 같은것도 구현되어야겠고요. 천천히라도 맞춰나갈 생각입니다. :)
  • profile
    기진곰 2017.07.07 12:31:15
    첨부파일 관리 기능이 에디터 툴바 안으로 흡수되는 것에 많은 기대를 걸고 있습니다. 첨부 (본문 자동삽입), 삭제 (본문 자동삭제), 첨부용량 제한 및 확장자 제한, 커버이미지 지정 및 취소 등 가져가야 할 기능이 한두 가지가 아니겠네요;;;
  • profile
    라르게덴 2017.07.07 12:49:10

    삭제(본문 자동삭제), 커버이미지 취소 빼곤 다 구현했습니다. 확장자 제한 기능은 MIME 표준의 플러그인을 개발해서 서버단에 가지 않고도 에디터 상에서 검사하고 있고 Input accept의 허용 확장자로도 연동해서 첨부하는 브라우저에서도 첨부 가능한 대상만 출력되도록 하고 있습니다. MIME 처리는 코어가 흡수되어야할 방법이라고 생각합니다. 나중에 제 사이트 도큐먼트를 참고해주세요.

    그외에 에디터 설정의 HTML편집 권한 등 각종 권한 설정에 대해서도 연동해뒀습니다. 현재 XE(라이믹스)에서 구현한 설정은 모두 구현되어있습니다. 그 외에 추가로 변화되는게 있다면 구현할 생각입니다.

  • profile
    해태맛동산 2017.07.07 11:05:28
    완전 기대중입니다!
    IOS 써글!!!!!!!!
  • ?
    pock 2017.07.07 18:22:35
    설정과 관련된 내용을 올렸습니다. 이미지 저장후 맞게 넣느라, 글 작성에 오래 걸렸네요.

    https://www.xetown.com/square/653073

    얼마나 설정이 빠르고 쉬운지 이해 되실겁니다. : )

서버에 요청 중입니다. 잠시만 기다려 주십시오...