Froala Editor 장점중 운영자 입장에서는 가장 반가운게.  손쉽게 에디터 메뉴를 편집할 수 있다는 점입니다.

 

스크린샷 2017-07-07 오후 5.30.23.png

 

복잡해 보이나요?  저는 php 편집도 못하고 파일들 찾아가면서 수정은 더더욱 못합니다.  그러나 프로알라 에디터는 단어만 알면 그뒤로는 브라우저 상에서 아주 쉽게 바꿀 수 있습니다.

 

저를 포함해서 XE와 관련하여 지식이 많은 분들도 어지간해서는 에디터 메뉴를 건들이지도 못하고 잘못된줄 알면서도 겁나서 만지지 못합니다. 한편으로는 시간 투자할만큼 중요하지 않다. 라고 생각할지 모르겠지만, 결과적으로는 안만지거나 못만지는거나 같습니다.

 

 

예를 들어 폰트(글꼴) 사이즈가 에디터 마다 몇부터 시작하죠?  8 일겁니다.

어느 에디터든 그렇습니다.

 

10여년전에 굴림 9 사이즈.  모바일이 없던 시절 최대한 해상도에 가독성 있는 최소 사이즈로 9 정도가 적용 되었던 것으로 기억합니다.

 

요즘 모바일을 고려하면 15~16이 기본사이즈입니다.  그런데.  에디터상에서  8~9  도대체 왜 필요할까요? 이것을 어떻게 수정할까요?  그리고 시간이 얼마나 걸릴까요? 

 

한가지 더.

단락(문단)에 대해서 사용하는 분들이 얼마나 있을까요? 저도 써본 적이 없을 정도입니다. 해외 소스 그대로 들여와서 건들이지 못하니 그대로 유지 되는 것일겁니다.

 

H1 , H2 , H3 정확하게 어떤 크기인줄도 모르겠고. 드래그 하면서까지 찾을 필요도 없죠. 빼려고 해도 뭘 수정해야 할까요?

 

자,  폰트 사이즈 정리,  문단 형식 불필요 삭제 및 깔끔한 편집.  

Froala Editor 에서는 에디터도 필요없이 브라우저내에서 각기 1분내 해결됩니다. 

 

이미지와 함께 Froala Editor 설치후 회원(사용자) 관점에서 편집한 부분에 대한 설명입니다.

 

1. 이미지 업로드 버튼 위치 이동

 

기존 에디터와 같이 별도 버튼형 업로드가 아닙니다. 에디터 메뉴내 이미지업로드 아이콘이 위치를 하고 있고 기본 설정으로는 중간쯤에 위치합니다. 개인 사이트가 아닌 이상 기존 사용자들이 혼란으로 느낄 수 있는 부분이라, 이미지업로드 아이콘을 제일 앞쪽으로 위치 이동했습니다.  (조치 시간: 1분 이내)

 

스크린샷 2017-07-07 오후 5.07.19.png

 

스크린샷 2017-07-07 오후 5.30.34.png

 

insertimage 부분이 제일 앞으로 갔으니 제일 앞에 나옵니다. 순서 바꿔주면 그 아이콘이 먼저 나오고. 필요 없으면 삭제하면 됩니다. 노출하고 싶으면 해당 단어만 중간에 삽입해주면 끝나죠. 아주 쉽죠?  

 

 

2. 문단(단락) 삽입

 

저는 문단(단락)무용론자인데. 이번에 도입했습니다.   대신 편집이 쉽고 간단해서 제가 원하는 타입으로 1차 정리 했습니다.

 

대부분 에디터는 기본 소스 그대로 H!~H8 까지 개발자도 모르고 운영자도 모르고 회원들은 사용 안하는 나열 형태입니다.

많다고 좋은 것도 아니고 오히려 한정된 공간(영역)에서 애물단지로만 작용할겁니다.

 

그러나, 실제 사용될만한 문단 서식 형태로 지정해서 삽입하면 글자 크기를 일관된 상태로 빠르게 적용 시키며 글을 작성 시킬 수 있습니다.

 

 

스크린샷 2017-07-07 오후 5.09.42.png

위와 같이 문단 내용은 3가지로 정리 했고.  5개 이상인 경우 드롭버튼(눌림버튼)내 세로 스크롤이 등장하기 때문에 4~5개 이내가 제일 좋을거 같습니다. 프로알라 에디터에서는 인용이나 다른 형태의 기존 아이콘을 커스텀 형태로 드롭버튼내 삽입 할 수 있으니 문단서식으로 사용될만한 것을 2개 정도 나중에 추가하고자 합니다. (이건 html 과 css 설정을 해야 하는거 같기도 해서 정식 매뉴얼 나오면 시도..)

 

어찌 되었든 기본 단락중 불필요한거 다 제거하고 쓸만한 것으로 한글명 부여하는데 1분 정도 걸렸습니다. 관련 설정 창은 아래와 같습니다.

(푸른색 드래그 색상 영역)

스크린샷 2017-07-07 오후 5.47.40.png

 

 

3. 드롭버튼 옵션 설정 

 

눌림버튼 형태로 설정이 가능합니다.  깔끔하기는 기본 아이콘형 버튼이 좋습니다만, 오래된 사용자가 많고 기존과 많은 변화가 있으면 제대로 평가 받기전에 낯선 거부감으로 인해 혹평 받을 수 있습니다.   편집이 쉽지 않으면 처음부터 둘중 하나를 선택해야 합니다만, 저는 우선은 드롭버튼 형태로 가고, 익숙해지면 아이콘형으로 전환하려고 합니다.

 

스크린샷 2017-07-07 오후 5.50.15.png

 

설정이 얼마나 오래 걸리냐구요?   글쎄  10초쯤요?

 

스크린샷 2017-07-07 오후 5.30.44.png

 

해당 메뉴의 단어만 알면 됩니다. true 활성화를 붙혀주면 드롭버튼 메뉴가 되는 것이고 해당 줄이 없으면 기본 아이콘 형태의 출력입니다. 해당 단어만 메모장에 기입해두고.. 10초면 충분하겠죠?

 

 

4. 폰트(글꼴) 크기 설정

 

앞서 언급 했던 폰트 크기 설정과 관련된 내용입니다.  8~9와 같이 사용하지도 않고 사용할리도 거의 없는데 편집 못해서죠. 이건 얼마나 걸릴까요?   넉넉 잡아서 2분쯤?

 

스크린샷 2017-07-07 오후 5.10.11.png


우선 저는 최소 사이즈를 10 으로 잡았습니다. 스크롤바가 등장해서 안보이지만, 최대는 60 정도인가 그럴겁니다. 에디터상에서 장난 치지 않고서는 60 사이즈는 넘을리 없을거 같고. 실제 저정도 범위면 대부분 끝납니다.  최소 8 사이즈로 되어 있어 그건 제거 했고 이후 크기들은 제가 알아서 넣었답니다.

 

 

 

스크린샷 2017-07-07 오전 11.26.32.png

 

관련된 소스는 단 한줄입니다.  드래그 색 지정된 부분만 보시면 됩니다.

 

스크린샷 2017-07-07 오후 6.03.32.png

 

어떤지요?  숫자와 단어만 바꿔주고 위치만 이동해주면 끝납니다.  사실상 더 쉬울 수 없고 이정도면 어느 애드온 설정보다도 쉽습니다.  다양한 기능과 플러그인이 내장되어 있고 제가 알고 있는 것보다 더 많은 기능 설정이 가능하다고 합니다.

 

 

스크린샷 2017-07-07 오후 5.29.44.png

 

상기 내용은 PC접속용이고 모바일. 그리고 PC 댓글, 모바일 댓글 모두 네가지 타입으로 설정 가능하답니다.

사실 PC용 기준으로 아이콘만 줄이면 되니, 나중에 10분정도만 시간 투자하시면 이정도 수준은 다 끝낼 수 있을겁니다.

 

저처럼 세세한 설정은 원하는데 능력 안되서 그냥 주는대로 사용했던 운영자에겐 구성원(회원)들 스타일 고려해서 맞춤형으로 가능해지지 얼마나 반가운 설정인지 모릅니다. 

  • ?
    본 글을 작성하면서 캡쳐후 붙혀넣기가 안되어서 작성시간이 40~50분은 걸린거 같은데. 프로알라 에디터가 적용되어 있었다면 글 작성시간이 1/3 정도로 줄었을것이고 바탕화면에 이미지 파일 10여개도 없었을겁니다. 아주 쉬운 설정옵션과 캡쳐후 붙혀넣기. 이 두가지만으로도 정말 매력적인 에디터입니다.
  • ? profile
    저도 테스트 페이지에서 글 작성해 봤는데
    이미지 cop, paste 만으로 붙여 넣을 수 있는 기능이 굉장히 편하더군요.
    글 작성, 특히 이미지를 많이 사용하는 경우라면 효율성이 급상승할 듯 싶습니다.

    다만 어떤 방법으로든 첨부된 이미지 파일을 서버에서 지울 방법이 없네요.
    관리자 모드에서 사용되지 않는 파일 지우는 수 밖에는..
  • profile
    좋은 글 감사합니다. Froala Editor 체험판을 마찬가지로 사용하고 있는 입장에서, 모든 부분에서 공감합니다. 저는 최종사용자 입장에서 몇 가지 건의 사항을 피드백하는 정도였는데... 뭔가 대대적인 피드백을 해야 할 것 같은 책임감(?)이 드네요 ㅎㅎ