포럼

Froala Editor 체험판 사용중입니다.

버그나 질문의 경우 별도 체험 게시판을 통해 올리도록 하고 본 내용은 Froala Editor (이하 프로알라 에디터)에관심 있는 분들을 위해작성하는 내용입니다. 

저는 사회인 야구단 수준의 마이너 운영자입니다. PHP 언어도 모르고 FTP 업로드정도만 하는 수준인데. 대신 제로보드 시절부터 현재까지 10년 넘게 사용한 탓에 주관적으로 치명적인 약점을 두가지로 느끼고 있습니다.

첫번째는 기본 XE코어의 한계와 개발 부분이고 두번째는 모바일(아이폰등) 대응에서 취약한 에디터의 한계입니다.

다행히 첫번째 문제는 XE타운과 라이믹스 프로젝트 덕분에 아주 안정적이고 최적화가 이루어지고 있으나 두번째 문제인 모바일의 흐름을 놓친 에디터는 XE팀에서도 지원해줄리 없고 외주작업으로도 불가능한 영역으로 느껴졌습니다. 기존에 있던 XE에 적용 가능한 이지윅 에디터는 자음모음 분리등 모두 동일한 문제가 있었고 한글환경에서만 발생하는 특성상 한국에서 해결 되지 않고선 해결이 안되는 상황이였습니다.

시대의 흐름은 모바일로 전환 되었으나 글쓰기의 기본인데 반쪽짜리 에디터로 인한 데미지는 생각보다 크고 서서히 발생합니다. 유료 게시판 스킨과 레이아웃과 달리 아예 선택 할 수 있는 부분도 전무합니다.

그러다가 Froala Editor 의 존재를 알게 되었고 적용 가능한 부분을 알아보다가 국내 XE개발자중에서 거의 유일한 에디터 전문가 라르게덴님의 진행중이라는 것을 알게 되었습니다.

체험단 선정되고 개인적인 사정으로 다른 분들보다 늦게 설치했습니다. 사용자 관점에서 작성 체험과 달리 사이트 운영자로서 설치과정과 궁금한 부분에 대해 기록을 남기고 계속 갱신하고자 합니다.

이미지 첨부에 대해서는 조심스럽네요. 이미 공개된 부분들 위주로 추가토록 하겠습니다. 

변경이 예정되어 있거나 비공개 되어야 할 부분은 추가로 수정하거나 관리자님이 조치해 주셔도 괜찮습니다. 

설치 및 인증방식

도메인 입력후 난수의 코드가 인증코드로 부여되는 방식, 그 인증코드를 파일 하나에 삽입해주는 방식이라 설치 자체는 저 같은 초보자도 간단합니다. (멀티 도메인도 고려중이라는 소식)

에디터 설정

게시판 설정 > 추가 설정 항목에서 프로알라 에디터를 선택 > 

• 프로알라 기본서식이 제공됨
• 프로알라 서식의 경우 현재 적용된 테스트 문단과 동일해 보임
• 문단 간격이 조금 넓은 느낌이라, 라이믹스 기본서식으로 변경해봐도 이상 없음

프로알라 에디터 추가 설정

• 에디터 기본설정외 프로알라에디터의 추가 설정 메뉴가 있음
• 간단히 설명하면 에디터는 전체적용후 게시판마다 별도의 툴바(글쓰기메뉴) 설정을 세팅 할 수 있음
• PC 본문 추가설정 / 모바일 본문 추가설정 / PC 댓글 추가설정 / 모바일 댓글 추가설정 / 이상 4가지 항목별 구분이 되어 있어 입력후 체크를 해두면 기본 툴바 설정보다 먼저 기준으로 적용 됨
• 툴바의 기본 설정은 툴바 설정 및 선택 옵션 링크 영문사이트 참고해서 제거 및 순서 변경 가능
• 추가 설정 항목을 통해 해당 기능의 설정명만 알면 아주 손쉬운 교체가 가능하기 때문에 게시판별 설정이 쉽고 빨라짐
• 예를 들어 프로알라 에디터의 경우 이미지 삽입첨부가 기존 에디터의 하단 별도 버튼 형태가 아닌 툴바에 내장되었기 때문에 에디터 변경후 혼란 있을 분들을 위해 툴바의 제일 앞쪽으로 이미지 첨부 아이콘을 이동 시킬 경우  'insertImage' 부분만 제일 앞쪽으로 붙혀넣기 해주면 끝.
• 만약 편집시 중복 되는 경우 앞선 순위의 아이콘만 출력됨.
• 툴바에서 노출이 필요하지 않은 경우 해당 아이콘의 옵션만만 제거하면 됨.
• 추가 설정 입력창을 통해 툴바 노출여부의 세세한 세팅이 가능하지만, 브라우저와 모바일 기기등의 전체 가로사이즈에 따라 내용을 설정할 수 있는 기능도 가능.

프로알라 에디터의 본격적인 세팅

앞서 언급한 것과 같이 에디터의 추가 설정에 따라 사이트 성격이나 게시판 특성에 따라 사용자가 자유롭게 설정이 가능하며 대부분 설정 값은 4~5가지 이내일 것으로 생각되는데. 넉넉잡고 1시간 이내에 모든 조합이 가능할 것으로 판단 됨.

1. 먼저 에디터메뉴(툴바)에서 선호하는 아이콘 순서와 삭제 여부를 판단

       https://www.froala.com/wysiwyg-editor/examples/custom-image-button

       위와 같이 세팅할 경우 해당 영문옵션명만 남기고 삭제, 영문옵션명 위치를 메모장에서 정리후 프로알라 에디터 추가 설정 항목에 붙혀넣기후 추가 설정 사용항목을 체크 해서 반영토록 함.

    2. 추가 조건 값이 필요한 경우 다른 게시판으로 이동하여 동일 방법으로 프로알라 에디터 추가 설정 항목에 입력해주면 해당 게시판만 변경. 

(추가 설정에 대해 일괄 적용하는 기능은 아직 지원하지 않으며 가능 여부는 제작자님이 검토중_프로알라 기본 기능이라기보다 XE에 맞춰 제작자님 판단 사항.)

 2017년 7월 1일 기준으로 저는 여기까지 단계입니다.  

게시판 하나만 세팅 했고 설정 값은 두가지 정도면 될 거 같습니다. 사실 프로알라 에디터는 라르게덴님 말씀처럼 정말 선택 할 수 있는 기능도 많고 모듈이나 애드온상에서 추가로 가능했던 획기적인 기능들이 에디터에 상당수 녹아있습니다.  

안정성(호환성)과 기능성 양쪽을 만족 시키는 정말 보물 같은 에디터입니다. 처음에는 무슨 에디터가 유료냐 라고 생각 했으나 사실상 어떤 레이아웃, 게시판 스킨보다도 XE(라이믹스) 사이트라면 중요하게 생각해야 할 부분으로 "  현재 XE계열의 가장 중요한 이슈 에디터입니다. "   에디터가 반쪽짜리면 사이트 자체가 반쪽짜리가 됩니다.

추가적으로 테스트 및 보강 작성될 내용입니다.

1.

세부적인 툴바(에디터 메뉴)의 배치와 커스텀 작업.

기존 운영되던 사이트에 적용 되기 때문에 툴바의 배치에 따른 강조를 해줘야 합니다. 아직 확인 못했지만, 버튼별로 색상 지정이나 아이콘 변경이 가능할 것으로 생각되고 조치후 안내해줘야합니다.

(ex: 이미지첨부 아이콘 제일 앞쪽으로 이동. 눈에 뜨는 색상으로 아이콘 색 지정 또는 변경 / 폰트 선택 가로폭 늘리고 글꼴 또는 FONT 로 내용 변경 / 폰트 색상변경 아이콘도 흑백톤이라 컬러톤 변경 또는 폰트 컬러임을 알 수 있도록 변경)

2.

사용자(일반회원) 눈높이에서의 프로알라의 대표적인 기능과 변경부분에 접근이 중요.

현재 본 게시물은 사이트관리자(운영자) 입장에서인데. 동시에 일반회원의 시선에서 프로알라의 장점을 안내하면서 에디터 대체로 인한 낯선 거부감을 최소화 시킬 필요가 있습니다. 결국 회원들을 위한 작업이고 그 과정에서 일반회원들과 테스트하면서 불편하게 느끼는 부분들을 찾는 과정이 될 거 같습니다.

단순 불만이나 취향차이에서 오는 지적사항은 필터링하고 수정/반영이 가능한 부분은 체험단 활동으로 질문 및 건의 드릴 부분으로 정리하겠습니다.

3.

아직 발견하지 못한 프로알라의 기능과 가능성에 대한 보물찾기.

화면캡쳐후 바로 글작성에 첨부하는 것은 모듈과 애드온 조합으로도 불가능 했었는데 프로알라 에디터에서 가능해졌습니다. 몇개월전까지도 안되었던 부분인데 라르게덴님이 추가한 작업으로 모바일보다는 PC에서 강력한 기능이 될 수 있고 4~5단계의 과정을 줄여 줄 수 있기 때문에 전혀 기대하지 않은 선물로 생각되는 기능입니다.

현재 적용된 기능의 활용도 많겠지만, 프로알라 에디터에는 로그인 기능이 포함되어 있고 첨부이미지 편집 기능등 기존 애드온과 모듈의 각종 조합으로 일부 가능하던 기능들이 에디터에 내장되어 있습니다.

어찌보면 기존 XE 관점에서 보던 에디터가 아닌데 과거 초창기 제로보드 시절의 장점이였던 게시판 한가지만으로 헤더에 메뉴 붙혀주면 기본적인 사이트 틀이 만들어지던 느낌이랄까요?

프로알라 에디터를 기준으로 놓고 XE에 대한 재해석이 필요하다는 생각입니다. 작업량이나 버그 및 문제 해결과정을 지켜보면서 사실상 XE 계열에서 다른 에디터의 경쟁은 당분간 존재치 않을 것이며 격차가 워낙 크기 때문에 프로알라 에디터가 안정적으로 발전하길 기대하고 기원합니다.

---------------------------------------------------------------------------------------------------