관련 지식
html, javascript, css, codemirror, ace editor
웹 에디터 개발은 저의 평소 업무와 전혀 상관이 없지만 구동방식이 궁금했던 에디터가 있어서 직접 개발을 시작하게 되었습니다. 에디터에 대한 노하우나 전문 지식이 없이 시작하였고, 다른 오픈소스의 소스를 분석하지 않고 실행된 결과값을 기준으로 분석하였기 때문에 문제 해결을 위한 접근 방식이 아예 틀렸을수도 있습니다.
다른 소스의 노하우를 그대로 베낀다기 보다는, ‘왜 그렇게 만들었을까’를 알고 싶어서 시작하였으므로 소스의 완성도는 매우 낮습니다. 저와 비슷한 입장에서 참고하시는 분들에게 도움이 되었으면 합니다.
게시판 에디터 방식
가장 친숙한 웹 에디터는 게시판이나 블로그 등에서 글을 쓸때 사용되는 웹 에디터일 것입니다.
먼저 티스토리에서 사용되는 웹 에디터는 어떤 형태로 동작하는지 보도록 하겠습니다.
위 이미지는 티스토리 블로그 게시물을 작성하는 에디터에 ‘글을 씁니다.’ 를 입력하고 개발자 도구로 확인을 한 것입니다.
먼저 <iframe> 태그가 쓰인것을 볼수 있습니다. 아마도 게시글을 작성하는 중 HTML을 직접 수정하면서 HTML 태그가 깨졌을때 전체 디자인에 영향을 주는것을 방지하기 위해 <iframe> 을 썼을것 같습니다. 아니면 글쓰기 폼의 디자인 적용을 쉽게 하기 위해 썼을수도 있겠네요.
중요한 것은 <body> 태그에 ‘contenteditable’ 속성을 사용했다는 것입니다. HTMLElement 요소에 적용할수 있는 ‘contenteditable’ 속성은 값이 ‘true’일 경우 화면에서 직접 요소를 수정할수 있게 됩니다.
참고
https://developer.mozilla.org/ko/docs/Web/API/HTMLElement/contentEditable
테스트를 해볼까요? 위 참고 사이트를 들어가면 <a> 태그가 적용된 부분 외에 마우스 커서로 클릭이 가능한 영역은 거의 없습니다. 특히 contentEditable 요소를 설명하는 내용중엔 더욱 없습니다. <body> 태그에 contentEditable 속성을 추가하면 어떻게 되는지 보겠습니다.
contentEditable 속성 추가 전)
contentEditable 속성 추가 후)
속성을 추가한 후 <a> 태그가 없는 곳을 클릭해보면 커서가 들어가는것을 보실수 있습니다. 키보드 타이핑을 하면 글자도 입력됩니다. 본문에서 두껍게 표시된 글자나 색깔이 적용된 텍스트를 복사(Ctrl+c)해서 붙여넣기(Ctrl+v) 해볼까요? 복사가 잘 되나요? 이것이 바로 게시판등에서 사용되는 에디터의 방식입니다. 게시판에서 ‘HTML 소스보기’ 기능을 가진 버튼을 클릭했을때 보이는 HTML 태그는 이렇게 만들어지는 태그들을 <textarea>에 복사해서 보여주는것 뿐입니다. 특정 영역의 텍스트의 폰트 크기를 바꾸거나 색깔을 바꾸는 기능은 별개로 구현을 해야하지만 이러한 기반에서 기능을 추가하면 됩니다.
CodeMirror 방식
CodeMirror 라는 이름은 처음 들어보더라도 JSFiddle 또는 CodePen 이라는 이름은 한번쯤 들어보셨을 겁니다. JSFiddle과 CodePen은 웹 페이지에서 HTML, CSS, Javascript를 작성하고 실행해볼수 있는 환경을 제공하는 플랫폼 입니다. 그때 HTML, CSS, Javascript를 입력하는 텍스트 에디터에 CodeMirror 에디터를 사용하고 있습니다. 그리고 코드미러는 contenteditable 속성을 사용하지 않습니다. 코드미러와 블로그에서 사용되는 웹 에디터는 어떤 차이가 있을까요?
가장 단순한 차이는 커서의 커스터마이징 입니다. 포커스가 들어갔을때 키보드 입력이 가능함을 보여주는 커서의 경우 수정이 불가능하지만 CodeMirror 방식에서는 브라우저에서 제공하는 커서를 사용하지 않고 디자인을 이용한 것이므로 다른 형태로 수정을 할수 있습니다. JSFiddle의 경우 커서 기본색상이 노란색인데 브라우저에서 제공하는 모양은 아니죠.
그외에 화면에 보이는 모든 요소를 디자인으로 핸들링 할수 있으므로 텍스트와 디자인 요소를 같이 처리하기에 매우 유용합니다. 위 이미지에서는 겨우 한줄인 <h1>글을 씁니다.</h1> 이지만 아래 이미지에서 보다시피 매우 많은 태그로 구성되어 있습니다.
하지만 ‘<’ 밑에 문법 오류를 표시하기 위한 _ 가 클래스 한개로 간단하게 적용되어 있습니다. 디자인을 직접 핸들링 할수 있다는것은 매우 많은것을 할수 있다는 것이겠죠?
코드미러와 웹 에디터의 가장 큰 기능의 차이 Syntax Highlight 입니다. 예를들어 웹 에디터는 텍스트의 일정 부분을 마우스의 드래그 등으로 선택하고 굵게/기울게 등등 여러 효과를 적용할 수 있습니다. 그러나 코드미러는 Java, Javascript, C++ 등의 언어 문법에 맞춰 자동으로 색깔, 기울기 등이 바뀝니다. 코드미러의 코드는 매우 복잡하기 때문에 처음에 contenteditable 속성을 알게 되었을때 그 방식에서도 Syntax Highlight 를 만들수 있지 않을까 생각했습니다. 그러나 테스트를 한 이후에 contenteditable 속성으로는 불가능하다고 판단했는데 아마 이 부분 때문에 불가능하다고 판단했던것 같습니다. (몇달전에 테스트를 했어서 기억이 잘 나질 않네요;)
이 다음글 부터는 제가 코드미러를 참고한 방식과 이해한 부분을 작성하도록 하겠습니다.
참고로 Splunk의 검색식 입력 필드에는 ACE editor를 사용하고 있습니다.
코드미러와 비교했을때 유사점이 많은데 아마 비슷한 노하우가 적용되었을것으로 생각되네요.
'쓸데없는 코딩하기' 카테고리의 다른 글
| Scroll Lock 키를 이용한 윈도우 화면 잠그기 (0) | 2019.08.22 |
|---|---|
| [에디터 제작기] 2.커서 포지션의 이슈 (0) | 2019.07.26 |
| Zero width space ​ (0) | 2019.07.10 |
| script와 css의 선언 위치는 어디가 좋을까 (0) | 2019.05.22 |
| 인터넷 익스플로러에서 sessionStorage, localStorage 를 사용할수 없을때 (0) | 2019.05.15 |