7월 달에 말씀드린대로 스프링노트의 편집기인 Xquared의 소스 코드를 정식으로 공개합니다(프로젝트 공식 홈페이지로 가기).


지난 달에 LGPL V2 기반으로 한 (가)오픈을 알리는 포스트를 제(강규영) 개인 블로그에 쓰기도 했었는데, 이번엔 GPL과의 호환성 등을 고려하여 라이선스를 LGPL V3로 올리고 그 동안의 기능 추가를 반영하여 정식으로 공개합니다.

아직 해야 할 일이 더 많고 많이 부족한 상태이지만, 혼자서 다 하겠다는 욕심을 버리고 빨리 공개하는 것이 오픈마루 스타일이라고 생각합니다.

1. Xquared는 자바스크립트로 만들어진 웹 기반 WYSIWYG 편집기 입니다.

자바스크립트로만 구현되었기 때문에 ActiveX 등을 별도로 설치하지 않고도 사용할 수 있으며, 따라서 윈도, 리눅스, 맥 등 다양한 OS를 지원하며, 인터넷 익스플로러, 파이어폭스, 사파리 등 여러 브라우저에서 동일하게 실행됩니다. (현재 사파리에서 일부 기능이 작동하지 않지만 조금씩 개선하고 있습니다)

2. Xquared는 유효한(valid) XHTML을 넘어서 의미 있는(meaningful) XHTML 문서를 만들어줍니다.

기존의 WYSIWYG 편집기들은 대부분 유효하지 않은 XHTML 문서를 만들거나, 유효한 문서를 만들더라도 태그를 의미적으로 올바르지 않게 사용한 문서를 만들어냅니다. Xquared는 다음과 같은 원칙을 지킵니다:

• <img>, <br>, <hr> 등은 <img />, <br />, <hr /> 등과 같이 표현되어야 합니다.
• 겹쳐진 <ol>, <ul> 은 <li>의 옆(sibling)이 아닌 아래(child)에 표현되어야 합니다.
  
• 들여쓰기를 표현하기 위해 blockquote(단락 인용을 뜻함) 같은 태그를 사용해서는 안됩니다. Xquared는 여백(CSS margin-left)을 사용하여 들여쓰기를 표현합니다. 그 밖에도 <b>, <i> 등과 같은 "표현"에 관련된 태그는 <strong>, <em>과 같은 "의미"에 관련된 태그로 변환해줍니다.
• 인라인/텍스트 요소와 블록 단위 요소가 인접하면 XHTML 문서를 (프로그램에 의해) 기계적으로 처리하기가 어렵습니다. Xquared는 인라인/텍스트 요소와 블록 단위 요소가 인접할 경우 자동으로 인라인/텍스트 요소를 블록 단위 요소로 래핑(wrapping) 합니다. 이로 인해 불필요한 블록 태그가 남발되는 것을 막기 위해, 래핑된 블록 태그가 필요 없어지는 상황에서는 자동으로 해당 태그를 제거하여 문서의 간결함을 유지합니다.
• XSS(Cross-Site Scripting) 해킹 등을 방지하기 위해 Xquared는 화이트리스트 기반 필터링을 수행합니다. (물론 어떠한 경우라도 클라이언트의 코드는 신뢰할 수 없기 때문에 서버 측 필터링을 다시 해주어야 하겠지요)

3. Xquared는 다양한 확장점을 제공합니다.

Xquared는 아래와 같은 다양한 확장점을 통해 쉽게 확장될 수 있습니다:

• 단축키 - 사용자가 마음대로 단축키를 추가/삭제/재정의 할 수 있습니다.
• 자동 완성 - CTRL+SPACE 등의 단축키를 눌렀을 때 단어 자동 완성, 링크 걸기 등 원하는 동작을 수행할 수 있습니다.
• 자동 변환 - 엔터키를 누르면 해당 라인의 패턴을 인식하여 미리 등록된 코드가 수행되게 할 수 있습니다. 스프링노트에서는 위키 마크업을 지원하기 위한 용도로 주로 쓰입니다.
• 컨텍스트 메뉴 - 마우스 오른쪽 버튼을 눌렀을 때 나타날 메뉴를 사용자가 임의로 지정할 수 있습니다. 물론 모든 경우에 사용자 정의 컨텍스트가 나오는 것은 브라우저 기본 컨텍스트 메뉴를 쓰고자 하는 사용자의 경험을 훼손할 수 있으므로 "특정 맥락에 따라" 서로 다른 컨텍스트 메뉴가 나오도록 할 수도 있습니다. 예를 들면 표에서 오른쪽 버튼을 누르면 표 관련 기능이 나오고, 나머지 위치에서 누르면 브라우저 기본 메뉴가 나오도록 할 수 있습니다.
• 템플릿 처리기 - Xquared는 미리 지정된 HTML 문자열인 템플릿을 삽입하는 기능을 제공합니다. 템플릿은 삽입되기 전에 템플릿 처리기에 의해 가공되는데(예를 들면 ${today}를 오늘 날짜로 치환한다거나), 사용자 정의 템플릿 처리기를 등록하면 템플릿 전처리(preprocessing) 과정을 마음대로 수정할 수 있습니다.
  

(확장 방법에 대한 간략한 예제는 튜토리얼을 참고하시기 바랍니다)

그 밖에도, 매크로, 에디틀릿, 사용자 정의 Validation 등 다양한 확장점이 추가로 제공될 예정입니다.

4. Xquared의 비전과 로드맵

Xquared의 단기적인 로드맵은 다음과 같습니다:

• 웹킷(사파리 3) 지원을 향상
• 툴바 API 향상
• 더 다양한 스킨을 추가
• 예제와 문서 보충
  

그 이후에는 다음과 같은 방향으로 발전하고자 합니다:

• 접근성 향상 - 기본 툴바의 접근성 향상, 자바스크립트가 없는 경우 <textarea> 등의 입력 수단 제공, 키보드 네비게이션 보강 등을 통한 접근성 향상
• 공통 대화상자 API 제공
• 매크로 기능 구현 - 매크로는 문서가 로딩될 때 수행되는 작은 프로그램 입니다. 이를 통해 문서 편집 중 YouTube 동영상을 재생할 수 있게 하거나, 자동으로 갱신되는 목차(ToC)를 만드는 등 여러 가지 기능을 구현할 수 있을 것입니다.
• 에디틀릿 기능 구현 - 에디틀릿은 편집기 안에 들어가는 작고 특화된 편집기 입니다. 표 편집이나 그림 편집 등의 컨텐츠는 범용적인 편집 인터페이스로 다루기 힘든 경우가 많은데, 이러한 컨텐츠에 대하여 특화된 편집 모드를 제공할 수 있도록 하는 기능입니다.

매크로와 에디틀릿이 구현되면 이를 기반으로 문서 내에 Microformat을 인식하고, 각 Microformat에 맞는 다양한 에디틀릿을 통해 Microformat을 편하고 안전하게 수정할 수 있는 기능을 구현할 수 있게 됩니다.

Xquared가 여러 서비스/프로젝트에 수용되어 풍부한 의미를 담고 있는 XHTML 문서들이 많은 사용자들에 의해 양산된다면 인터넷의 발전에 미약하게나마 기여할 수 있을 것으로 기대합니다.

5. 여러 개발자 분들의 참여를 기다립니다.

위에서 말씀 드린 바와 같이 Xquared는 이제 겨우 시작 단계일 뿐이고, 앞으로 해야 할 일이 훨씬 더 많이 남아 있습니다. 개발자 분들의 많은 참여가 절실히 필요합니다. (참여를 원하시는 분은 이 곳을 참고하세요. 질문이나 버그 신고 등은 에쿠스에 적어주시면 됩니다)

Xquared는 스프링노트의 영문 버전 오픈과 함께 전 세계의 개발자들에게 소개될 것입니다. 한국의 개발자들이 외국의 개발자들과 함께 소통하며 프로젝트를 지속적으로 발전시켜나갈 수 있는 그런 커뮤니티가 만들어지길 희망합니다.

6. 마치며

내일 오후에 JCO에서 Xquared를 주제로 발표가 있을 예정입니다. Xquared의 코드를 받아서 웹 사이트에 설치하고 원하는 기능을 추가하는 과정을 시연할 생각인데, 편집기 개발에 관심이 있는 개발자 분들이 많이 와주셨으면 좋겠습니다.

앞으로도 뭔가 소식이 생기면 (항상 그랬듯이) 오픈마루 블로그를 통해 알려드리도록 하겠습니다. 감사합니다.