상용 웹에디터 - damoEDITOR

퇴사하면서,

내가 만든 웹 에디터(damoEDITOR)가 잘되었으면 하는 마음으로 이 글을 작성한다.

영업자의 마인드로 작성된 소개서가 있지만

여기서는 개발자의 마인드로, 한가지 차이점을 중심으로 정리한다.

웹 에디터는 웹 브라우저에서 별도의 설치 없이 문서를 작성하게 하는 프로그램으로,

제법 많은 제품들이 있지만

오픈 소스로는 CKEditor와 NicEditor등이 대표적이고,

상용 제품으로 나모, Dext5, 태그프리 등의 3개 기업 제품이 있다.

NicEditor는 본 블로그에서 정리한 적이 있지만, 현재는 관리되지 않는 것 같다.

다양한 기능을 제공하는 CKEditor와 tinyMCE등의 오픈 소스 제품이 무료로 제공되어 폭넓게 사용되지만,

국내 공공 기관이나 대기업들에서는 상용 제품을 많이 사용한다.

상용이 조금 더 많은 기능을 제공하는 것도 있겠지만 기술 지원 등의 문제로 선호하는 것 같다.

상용은 나모, Dext5, 태그프리의 3개 기업 제품이 주도하는데,

아주 뒤늦게 우리 회사도 웹 에디터 시장의 한 귀퉁이를 파고 들면서 판매를 시작하였다.

(실제로는 자사 기업용 솔루션에서 사용하는 웹 에디터로 사용하였다.)

 

이 제품의 이름은 damoEDITOR (이름은 별로..)로 기존 상용 제품들과 거의 동일한 기능을 제공한다.

(기본 정보는 여기에서 확인할 수 있다.)

기존 상용 제품과 비교해 핵심 기능들은 동일하지만, 부가적인 기능에서 2% 부족하다.

이미지(IMG) 태그를 예로 들면,

기존 제품은 이미지 추가시 이미지 크기를 같이 입력해서 지정하지만,

damoEDITOR는 이미지를 추가하고 난 뒤에 마우스로 조절한다.

 

하지만 damoEDITOR는 한가지 차이를 가지고 제작되었고, 이 차이로 인해 몇 가지 장점이 있다.

 

대부분의 웹 에디터는(특히 상용은 모두) IFrame을 이용해서 제작되었다.

IFrame은 Inline Frame이라는 의미로 하나의 HTML문서내에서 다른 HTML문서를 보여주기 위해 사용한다.

IFrame은 웹 보안등의 문제로 사용을 제한하는 추세이지만,

오래 전에 개발된 웹 에디터는 IFrame으로 제작하는 것 외에는 방법이 없었다.

 

최근에는 IFrame 대신에 DIV로 개발하는 것이 추세가 되고 있다.

DIV로 제작할 경우 반응형 웹(Responsive Web) 페이지에 대응할 수 있는 장점이 있다.

이것이 damoEDITOR의 첫번째 장점이다.

웹 페이지(웹브라우저)의 크기에 따라 웹 에디터의 크기가 변하게 제작할 수 있다.

반면, IFrame을 기반으로 제작된 웹 에디터들은 크기 변화에 대응하는 것이 쉽지 않다.

최근(?)에 제작된 오픈소스 웹 에디터는 DIV를 이용하여 반응형 웹용으로 많이 제작되었다.

다만, 이 웹 에디터들은 제공되는 기능이 몇 가지 없다.

damoEDITOR는 다음 그림(우측 상단)에서 보는 것처럼

웹 브라우저의 크기에 따라 변할 뿐 아니라 제공되는 기능 버튼의 위치까지 변한다.

웹 에디터의 너비가 작아지면서 가려지는 버튼들을 보조 툴바를 이용해서 메뉴처럼 보여준다.

다음 그림과 같이 더 작아지면 메인 툴바를 한줄만 남기고,

가려진 버튼들은 모두 보조 툴바에서 사용 할 수 있다.

그림과 같이 모바일 전용으로 사용할 수도 있다.

 

두 번째 장점은 작성한 데로 보는 것이다.

IFrame내에서 호출되는 HTML은 IFrame 외부의 HTML과 격리되어 있다.

이 두 개의 HTML은 별개의 페이지로 전혀 다른 CSS가 사용된다.

즉, IFrame 외부의 HTML은 웹 에디터를 구매해서 사용하려는 기업의 웹 페이지이고,

IFrame 내부의 HTML은 웹 에디터의 영역으로 독립적인 영역이다.

따라서 두 개의 CSS가 사용되어 사용자에게 혼란을 야기한다.

 

HTML <a> 태그를 예로 하면,

웹 에디터에서 한 문장을 <a> 태그로 지정하면 밑줄(underline)이 생긴다.

만약, 사이트 전체에 <a> 태그의 CSS를 밑줄이 아닌 색상을 사용하도록 지정하면 

웹 에디터로 작성한 내용을 글 읽기로 볼 때, 다음 그림과 같이 다른 화면을 보게 된다.

(웹 에디터가 사용되던 초기에 이러한 문제로 클레임이 많았던 것으로 기억한다.)

위 그림은 일반 텍스트는 회색, 링크는 검은색으로 지정해서 사용한 사이트의 예제이다.

DIV로 개발한 제품은 

사용하는 웹 페이지의 CSS를 상속받아서 사용하기 때문에 이러한 문제가 생기지 않는다.

작성 화면과 조회 화면이 동일하게 보이는 것이다.

기존 제품들은 이문제를 해결하기 위해 웹에디터의 CSS에 자사 웹 페이지의 CSS를 수정해야 한다.

 

고려하지 못한 유사한 문제가 생길 경우

damoEDITOR는 damoEditor.css에서 수정하면 해당 기업의 CSS와 동일하게 맞출수 있다.

사용하는 웹 페이지가 <a> 태그에 밑줄도 색상도 아무것도 지정하지 않으면

웹 에디터 작성시 <a> 태그에 아무것도 나오지 않아 문제가 되기도 했다.

(링크에 아무런 표시를 하지 않는 사이트라면 UI에 대해서 고민을...)

이 경우 damoEditor.css에서 다음과 같이 지정해 주면 간단하게 해결된다.

.damoEditor a {
    text-decoration: underline 
}

이렇게 처리하고, 글읽기가 있는 경우 이상의 코드를 관련 부분에 수정해서 넣어줘야 한다.

그렇지 않을 경우, 글작성(웹에디터 사용)시에는 링크에 밑줄이 있는데,

글읽기에서는 없어서 혼란을 줄 수 있다.

 

다른 웹 에디터를 많이 사용해본 사람들에게는

이러한 기능이 오히려 혼동을 주기도 해서

기존 방식처럼 CSS가 별도로 운영되는 IFrame 방식도 제공한다. 

 

세 번째 장점은 제품에 포함된 damoEditor.css 파일을 수정해서

damoEDITOR를 사용하는 기업에서 마음 데로 디자인을 수정하고 개선할 수 있다는 것이다.

이것은 damoEDITOR만의 고유한 기능으로 CSS를 조금이라도 아는 사람(퍼블리셔)이 있다면,

자신의 웹 사이트에 맞춰서 다양하게 정의해서 사용할 수 있다.

이것은 damoEDITOR를 구성하는 거의 모든 디자인이 damoEditor.css에 있기 때문에 가능하다.

대부분의 웹 에디터에서 테마를 제공하지만, 

몇 가지 색상만 제공하기 때문에 

사이트 디자인과 웹에디터의 디자인이 맞지 않는 문제가 많이 있다.

 

더욱이 웹 에디터들은 딱딱한 기본 구성으로 제공되는데,

damoEDITOR는 사용하는 기업에 맞춰서 다양하게 사용할 수 있다.

 

다음 그림은 기본제공되는 사각형 색상 팔렛트를 간단한 CSS 수정을 통하여 원형으로 바꿔서 사용한 예제이다.

사용법은 개발자 메뉴얼에 정리되어 있다.

차후에는 이렇게 사용자 정의로 작성된 다양한 디자인을 정리해서 판매 옵션으로 넣는다면 좋을 것 같다.

 

이상으로 damoEDITOR의 세가지 장점을 정리하였다.

제품에 대한 설명과 체험은 여기에서 할 수 있다.

나름 GS 인증까지 받은 이 제품이 정말 많이 팔리기를 기원한다.