나는 기업용 SNS (이하 SNS) 의 서버개발을 담당하고 있다.
이 SNS에 글을 작성할 때, 이미지, 파일, 투표, 지도, 클라우드 파일(구글드라이브, 드랍박스), 웹페이지 발췌정보를 첨부 할 수 있는데,
기존 구조는 페이스북 처럼 글 따로, 첨부자료 따로 삽입 되는 구조이다.
페이스북이 이런 구조와 동일하다.
이런 구조에서 Band 처럼 본문내 각종 자료를 첨부할 수 있는 구조를 이용하고 싶다는 Needs 가 있어서 이번에 Band 와 같이 본문내 자료를 첨부하는 구조로 변경을 했던 경험을 공유하고자 한다.
기존에는 글 작성중 자료를 첨부하면 아래와 같이 자료 영역에 자료가 삽입되었지만,
밴드처럼 바뀐 구조에서는 글 중간중간 자료가 삽입돼야 하기 때문에 글 작성중 자료 첨부의 구조가 아래와 같이 바뀌었다.
이런 구조가 가능하도록 하기 위해선 우선 WYSIWYG 에디터가 필요했다.
WYSIWYG 에 대해서 간략히 살펴보자.
위키피디아에는 아래와 같이 정의되어있고, 내가 생각하기에 이 한문장으로 WYSIWYG 이 완벽히 설명된다고 본다.
위지위그(WYSIWYG: What You See Is What You Get, "보는 대로 얻는다")는 문서 편집 과정에서 화면에 포맷된 낱말, 문장이 출력물과 동일하게 나오는 방식을 말한다.
보는대로 얻도록 하기위해서 WYSIWYG 에디터는 다른 웹페이지의 내용을 드래그해서 복사 후 붙여넣기하면 해당 내용의 HTML TAG 를 복사해서 붙여넣는다.
이대로 붙여넣어진 자료를 저장해서 잘 나오면 참 좋겠는데, 아쉽게도 그렇지가 않다. 다른 웹사이트에서 복사/붙여넣기 한 HTML TAG 가 웹페이지내 다른 HTML TAG 에 영향을 줘서 페이지 UI가 다 깨지고 심한경우엔 스크립트 오류가 나서 페이지가 아예 작동하지 않게 된다.
그렇기 때문에 실제로 에디터내에 삽입될 수 있는 HTML TAG 를 제한해야 할 수 밖에 없다. HTML TAG 를 제한할 때, 사용자가 어떤 TAG 를 어떤식으로 넣을지 알 수가 없기때문에 사실상 거의 모든 HTML TAG 를 제한할 수 밖에는 없다
WYSIWYG 에 대해서는 이정도로 각설하고..
기존에 사용하던 에디터는 NicEdit 라는 에디터였는데, 이 에디터를 다른 에디터로 교체해야겠다고 마음 먹었다.
이유는 여러가지가 있었는데
1. 지원되는 기능이 많지 않았고,
2. 관련자료나 문서가 너무 부실했으며
3. 에디터 내 글 작성시 HTML TAG 를 필터링하는 API 가 따로 제공되지 않아 라이브러리를 직접 수정해야하는 어려움, 번거로움이 있었다.
4. 2015년 이후로 개발이 중단되었다.
WYSIWYG 에디터면서 관련자료도 풍부하고 에디터 내 컨텐츠 필터링 기능도 지원하는 에디터를 찾아보니 모든 요건에 부합하는 에디터를 금새 찾을 수 있었다. 그 에디터는 바로 CKEditor4 이다.
조사해보니, 밴드도 이 에디터를 사용하고 있었다.
CKEditor4 를 고민할 여지도 없이 선택하게 된 이유는 아래와 같다.
1. Contents Filtering(ACF) 기능을 지원한다
- CKEditor 의 핵심기능 중 하나인데, 에디터 내 첨부될수 있는 컨텐츠를 Filtering 할 수 있는 방법을 아주 다양하고 디테일하게 설정 할 수 있다
2. Widget 기능을 지원한다
- 이 기능 역시 CKEditor 의 핵심 기능 중 하나인데, 에디터 내 자료 첨부 시 Widget 형태로 삽입하게 되면 에디터에서 제공하는 여러가지 부가기능을 적용할 수 있다. 예를들어 위젯 간 단락삽입 기능이 있다.
3. Plugin 기능을 지원한다
- CKEditor 는 부가기능을 Plugin 형태로 지원하기 때문에 원할때 원하는 Plugin 을 찾아서 추가하면 된다.
4. CKEditor 에서 제공하는 API 가 아주 친절하고 좋다
5. CKEditor 문서가 무척 잘되어있다.
변경하려는 구조가 Band 와 동일한데 Band 가 CKEditor 를 사용하고 있다.
사실 더 많은 장점이 있지만 핵심장점만 나열해 보았다.