WYSIWYG vs. WYSIWYM

작년에 한 컨퍼런스에서 웹표준에 관해 강연한 후, 받은 질문 중에 이런 것이 있었습니다.

페이지를 아무리 구조적으로 만든다 해도, 사용자가 WYSIWYG 에디터를 써서 입력한 컨텐트는 구조화가 안되어있는데 이럴 때 웹표준 및 CSS를 어떻게 적용합니까?

어렵죠. 어려운 이야기입니다.
애초에 WYSIWYG란 Structure와는 동떨어진, Presentation을 위한 컨셉이니까요. WYSIWYG을 쓰면 웹표준과는 100% 안맞는다고 해도 틀린 말은 아닙니다.
사실, 웹에디터 모듈뿐만이 아니라, 웹페이지 제작시에도 Dreamweaver나 Namo같은 WYSIWG 도구를 쓰면 웹표준을 맞추는게 상당히 어려워집니다. Dreamweaver 최신 버전에서는 많은 기능향상이 있긴 했습니다만, 그럼에도 불구하고, 주의깊게 사용하지 않으면 웹표준을 적용하는 것이 쉽다고는 할 수 없습니다.

What You See Is What You Get.
말은 좋습니다만, 문제는 “보기 좋은 떡이 먹기 좋은 떡은 아닐 수 도 있다”는 것이지요.

이 문제가 1년 내내 화두처럼 머리속에 남아있게 되네요.

1년이 지나서 나름대로 얻은 해답은 WYSIWYM입니다.

What You See Is What You Mean. (실은 What You Get Is What You Mean쪽이 더 뜻이 통하는 것 같지만, 이미 굳어진 용어라서. :))

Lyx라는 LaTeX의 프론트엔드 프로그램이 있습니다. 이 Lyx에서 채택하고 있는 것이 WYSIWYM입니다. 보이는 그대로 똑같이 출력되는 것이 아니라, 출력될 결과와 “대충 비슷하게” 편집화면에서 보여줍니다. 똑같이 출력되지 않고 “대충 비슷한” 이유는 편집화면에서 보이는 것은 결과물의 외관이 아니라, 결과물의 구조를 보여주기 때문이지요. 구조만 편집하고, 결과는 별도로 정의된 포맷에 적용되어 보이게 됩니다.

이러한 개념이 웹에디터 모듈에도 적용되어야 하겠습니다.

현재 구현되어 있는 WYSIWYM 방식의 웹에디터모듈은 WYM이 있습니다. (데모보기)

완벽하진 않지만, 이를 통해 이상적인 WYSIWM 방식의 웹에디터모듈을 추측해 볼 수 있는데, 아마도 쓸만한 WYSIWYM 에디터가 되려면 이러한 것들이 있어야겠지요.

1) CSS를 Word의 Style처럼.
워드 프로그램들은 빼놓지 않고 “스타일”이라는 것을 가지고 있게 마련입니다. 대개 스타일들은 “대제목, 소제목, 목차, 본문, 인용, 주석…” 이런 식으로 구성되어있죠. 적용을 원하는 부분마다 해당 스타일을 적용시키고, 만약 수정이 필요하면 문서를 수정하는 것이 아니라, 스타일자체를 수정하는 방법을 사용합니다.
따라서 WYSIWYM 에디터에는 반드시 스타일 적용, 스타일 해제, 스타일 생성, 스타일 편집 기능이 들어있어야 합니다.

2) 비시맨틱 요소의 제거
그러니까, “배경색”이니, “문자색”이니 하는 버튼들은 모두 WYSIWYM에디터에서 빠져야 합니다. 필요하다면 “강조1″, “강조2″ 처럼 스타일을 생성하고, 자주 쓰는 스타일을 미리 에디터에 버튼으로 등록시켜 둘 수는 있겠죠.

3) 개인 CSS의 적용.
WYSIWYM에디터들은 사용자 CSS를 적용시킬 수 있도록 개인마다 준비된 CSS를 외부에서 불러들이거나, 업로드하거나 하는 방식을 지원해야 할 것입니다.

4) 다양한 포맷확장기능
microformat에 관해 글을 쓰다가 WYSIWYM 이야기를 빼놓을 수 없어서 이 글을 쓰게 되었는데요.
기존의 WYSIWYG 에디터에서는 microformat을 사용하는 것이 거의 불가능합니다.
알라딘의 TTB 서비스라든가, 이글루스의 LifeLog 기능들도 궁극적으로는 microformat으로 대치되길 간절히 바랍니다만, 어찌되었건 microformat을 WYSIWYG을 통해 입력하는 것은 거의 불가능. 따라서 WYSIWYM에서는 이런 microformat(혹은 비슷한 무언가들…)을 활용한 입력보조플러그인 기능들이 많이 활성화될 것입니다.
예를 들자면, “천하장사 마돈나 감상문”을 쓰려면, WYSIWYM에디터에서 “영화감상문” 포맷을 선택한 후, 빈자리들에 내용을 채워넣으면 보기좋게 영화리뷰 페이지가 만들어진다든가… 하는 방식으로요.

어쨌거나…
누군가는 좀 쓸만한 WYSIWYM 에디터를 완성해서 내놓아주면 참 좋을 텐데 말이지요. 구질구질하고 지저분한 WYSIWYG은 이제 좀 자제할 때도 되었잖아요?