1. 내가 구현한 웹 에디터의 문제.

나는 웹 에디터 구현에는 그다지 큰 노력을 들이지 않았었다. 간단하게 input 태그나 textarea 태그로 입력값을 받은 다음, state로 관리하여 데이터를 Cloud Firestore에 저장하는 구조로 간략하게만 구현했었다.

짧은 문장을 가지고 테스트를 했을 때 데이터가 정상적으로 저장되고 출력되는 것 까지 확인했었기에 한동안 웹 에디터에 대한 관심을 갖고 있지 않았었다. 그런데 글씨 크기 변경이나 폰트 변경 같은 추가적인 기능들을 구현하기 위해 자료를 찾아보는 과정에서 여러 문장을 입력해보거나, 아주 긴 하나의 문장을 입력하여 기존 웹 에디터에 대한 추가적인 테스트를 실행해보게 되었다. 그리고 내가 기존에 구현했던 웹 에디터는 이대로는 정상적인 사용이 불가능한 심각한 하자를 내포하고 있었다는 사실을 깨닫게 되었다.

하나, 에디터 상에서 Enter 키를 입력하였을 때 정상적으로 줄 바꿈이 이루어지는 것 처럼 보이지만 실제 글 데이터를 출력하는 과정에서는 줄 바꿈이 전혀 이루어지지 않는다.

둘, 아주 긴 하나의 문장을 작성하였을 때, 에디터 상에서는 다음 줄로 자동으로 넘어가는 것처럼 보이지만 실제 글 데이터를 출력하는 과정에서는 데이터가 게시글의 영역을 벗어나고 있었다.

2. 완전히 새로운, 제대로 된 웹 에디터 기능을 구현해야한다.

구글 등지에서 이 문제를 해결하기 위한 방법을 찾았을 때, 가장 먼저 발견한 것은 CSS의 word-break 속성과 word-wrap 속성 등을 이용하는 방법이었다.

word-break : 컨텐츠가 영역을 벗어났을 때 그 부분을 강제로 끊어 줄 바꿈 처리를 해주는 속성. (모든 언어를 포함)

word-wrap : 컨텐츠가 영역을 벗어났을 때 그 부분을 강제로 끊어 줄 바꿈 처리를 해주는 속성. (한국, 중국, 일본 언어는 포함하지 않음)

또한 테스트 시, 한글 문자와 영어 문자의 결과가 다르게 나타났는데 이는 한글 문자는 영역을 벗어났을 때 강제 개행이 일어나는 반면 영어 문자는 그렇지 않기 때문이라고 한다.

문제는 2가지인데, 이것들이 모두 해결되지 않고 하나만 해결되거나 아예 해결되지 않았다.

이렇게 되면 사용자가 글을 입력하는 시점에서 enter 입력을 인식하여 줄 바꿈 코드를 삽입하는 기능과 문장 길이가 특정 수치를 초과하였을 때 줄 바꿈 코드를 삽입하는 기능을 구현하는 방법. 이 두 가지 기능을 추가하는 수 밖에 없었는데, 잠시 연구를 해보았지만 지금 내 실력으로는 힘든 일이고 시간만 소모할 것이라 판단하였다.

웹 에디터 구현과 관련된 내용을 구글에서 살펴보았는데, 기능을 바닥부터 직접 구현하는 것 보다는 이미 만들어진 라이브러리를 활용하는 사례가 많았었다.

어차피 이외에도 제대로 된 웹 에디터를 구현하기 위해서 필요한 기능들이 많았으니 이번에는 라이브러리를 사용하여 기능을 구현해보기로 결정하였다.

============

3. 어느 라이브러리를 선택해야하는 가.

JavaScript 환경에서 사용하는 웹 에디터는 종류가 다양했다. 무엇을 선택해야하는지도 큰 고민이었는데 React.js의 개발사인 페이스북에서 만든 Draft.js가 평이 좋고 React.js에 친화적인 라이브러리하고 하여 Draft.js을 사용해보기로 결정하였다.

구글 등지에서 자료를 찾아 필요한 라이브러리를 설치하고 에디터를 화면에 출력하는데까지 성공하였으나..
크고 작은 문제점들이 발생하였다.

하나, 줄 바꿈 처리가 이루어지지 않는다.

둘, 폰트와 글자 크기 변경 기능들이 때때로 작동하지 않는다.

셋, 입력한 글 데이터를 화면에 출력하였을 때 글자와 문장의 간격이 너무 협소하여 글자가 서로 겹쳐보인다.

글 데이터를 입력하고 Firebase에 저장하는 것과 데이터를 반환받아 화면에 출력하는 것은 정상적으로 동작하지만 이대로는 제대로 된 웹 에디터라고 할 수는 없다.

아무래도 갈 길이 먼 듯 하다...ㅠ