1

주제: 진정한 WYSIWYG으로 가는 #15 개량제안

현재 trac에는 daybreaker님이 등록하신 티켓 #15가 있습니다. 이는 WISWIG 에디터에서 일정형식의 XHTML 폼(템플릿)을 제공하자는 것으로, 이를 이용하면 사용자는 이미 짜여진 다양한 HTML 구조를 쉽게 가져다 쓸 수 있게 됩니다. 영화감상 포스팅을 올릴 때 사용자는 보통 영화감상에만 사용하는 자신만의 반복형식을 마음 속에 가지고 있습니다. 이를 템플릿 형태로 제공해 편의를 도모하자는 것이 이 티켓의 취지입니다.

그런데, 이 티켓을 좀 더 확장할 수 있는 부분이 있는데, 이 티켓이 제안하는 템플릿은 XHTML 구조로써 화면에 보이는 모양과는 직접적인 관련이 없습니다. A 사용자와 B 사용자가 동일한 영화 템플릿을 이용하여 포스트를 작성했다고 해도 결과적으로 블로그에 출력되는 템플릿의 모양은 스킨이 지정해주는 CSS에 따라 천차만별로 달라지게 됩니다. 즉, 이 티켓이 제안하는 XHTML 템플릿은 스킨에 따라 모양이 바뀐다는 것이지요.

그래서 생각한 것이, WYSIWYG 에디터의 강화입니다. 장황한 말보다 제가 시험삼아 만들어본 수정본의 갈무리 화면을 보시죠.

[출력 화면 1]
http://www.beyondours.com/temp/output1.png

[에디터 화면 1]
http://www.beyondours.com/temp/wiswig1.png

[출력 화면 2]
http://www.beyondours.com/temp/output2.png

[에디터 화면 2]
http://www.beyondours.com/temp/wiswig2.png

...이겁니다. 진정한 WYSIWYG이죠.

구현방식은 이렇습니다.

1. 스킨 제작자가 스킨 제작시에 [##_article_rep_desc_##](포스트 본문)에 적용되는 CSS만 따로 파일에 저장합니다. 이 파일을 임시로 WYSIWYG.css라고 하겠습니다. 이 파일명은 index.xml에 추가됩니다.
2. 스킨 제작자는 스킨 묶음에 이 파일을 포함해 배포합니다.
3. 스킨을 받은 사용자는 스킨을 계정에 업로드하면서 WYSIWYG 파일만 따로 다른 곳에 위치한 에디터 CSS 파일 디렉토리(임시로 style/WYSIWYG이라고 하겠습니다)에 업로드합니다.
4. 사용자가 업로드된 스킨을 스킨관리자 화면에서 적용상태로 변환하면 index.xml에 적어놓은 WYSIWYG.css 파일이 에디터의 CSS가 되게 됩니다. 이 파일의 존재여부를 따져 없을 경우 default.css(현재 쓰이고 있는 에디터의 CSS처럼 단순화된)를 로딩하게 합니다.

어떨까요? 별로 구현은 어렵지 않습니다만, DB에 에디터 CSS 파일의 정보를 담을 필드 하나가 추가되어야 할 수도 있습니다.

사용자의 불만이 많은 에디터 기능을 하나 하나 손봐 나가는 것이 좋을 것 같아 작당을 꾸며봤습니다. 아직 생각지 못한 문제점이나 개선점이 있을 수 있으니 의견을 펼쳐 주시기 바랍니다.



PS. 일견 XHTML 방식의 스킨에서만 구현 가능한 것처럼 보일 수 있는데, 전혀 그렇지 않습니다. 왜냐하면 에디터 CSS가 적용되는 부분은 사용자가 입력할 부분만이기 때문이죠. 스킨이 table 방식으로 제작되었다고 해도 사용자가 XHTML 방식으로 포스팅을 작성하면 OK입니다. 설마 에디터에 위치 맞춘다고(물론 써야하는 경우도 있겠습니다만) 테이블 짜서 넣는 사용자는 없겠죠?

PS. 이 WYSIWYG을 위해서는 현재 에디터에서 <br />을 자동으로 입력해주고 있는 기능을 제거해야 합니다. WYSIWYG이니까 사용자가 보는 화면 구성 이외의 어떤 것도 태터툴즈 마음대로(마음이 있으려나?) 추가되어선 안 됩니다. 그러나, 이 기능이 빠지면 대부분의 사용자는 혼란을 겪게 될 것이라 문제입니다.

2

답글: 진정한 WYSIWYG으로 가는 #15 개량제안

아무도 관심이 없네, 쩝.

3

답글: 진정한 WYSIWYG으로 가는 #15 개량제안

이 경우 스킨을 바꿀 경우가 문제가 되겠군요...

덧) 생각해보니 별다른 문제도 없겠습니다 smile
     관심이 없는게 아니라 개념의 이해가 어려웠습니다;;;

덧2) 스킨에서 사용하는 css의 strict한 적용과 함께 관리자 화면의 다른 구조와의 충돌을 피하기 위하여 article을 하나의 div로 묶는 것이 필요할 것 같습니다. 관련 css 속성은 그 안에서만 변할 수 있도록 적용해야 하겠군요.

"Everything looks different on the other side."

-Ian Malcomm, from Michael Crichton's 'The Jurassic Park'

4

답글: 진정한 WYSIWYG으로 가는 #15 개량제안

inureyes 작성:

스킨에서 사용하는 css의 strict한 적용과 함께 관리자 화면의 다른 구조와의 충돌을 피하기 위하여 article을 하나의 div로 묶는 것이 필요할 것 같습니다. 관련 css 속성은 그 안에서만 변할 수 있도록 적용해야 하겠군요.

관리자 화면의 CSS 충돌은 없지 않을까요? 에디터는 iframe으로 구현되어 있고, 여기에 wisiwig.css 파일이 <link ...>로 연결되는 것이니까요. 그 자체로 하나의 완결된 CSS가 되는 거죠.

이렇게 되면 예를 들어 스킨이 다음과 같을 경우,

...
<div class="post-contet">
    [##_article_rep_desc_##]
</div>
...

같을 경우 CSS로는 ".post-content ..."으로 구현되게 되는데, 이것을 wisiwig 파일로 따로 저장할 때는 replace 기능을 이용해서 ".post-content " 부분을 삭제해야 합니다. 실질적으로 같은 내용을 두 번 써야 한다는 점에서 수정할 때 용이하지 않지만(한 가지를 수정하려고 해도 두 파일을 손 봐야 하므로) 제작시에는 스킨에서 사용하는 파일을 그대로 카피하여 replace 작업만 해주면 되므로 특별히 어려운 점은 없을 것 같습니다.


그리고 이렇게 사용자가 제작한 에디터용 CSS를 사용할 경우에 대비하여 워드 프레스와 비슷한 기능의 "태그상 현재 위치를 보여주는 기능"이 필요하다고 생각됩니다. 워드 프레스에서는 현재 에디터 안에 커서가 위치한 부분의 태그 상태를 하단 상태바에 표시해 주고 있습니다.

    div > p.mine > q > ins > del

이런 식으로요. 이 기능이 왜 필요한가 하면 현재 관리자 화면에서 사용하는 에디터용 CSS 파일의 경우, 여백을 적절히 포함하고 있어 태그의 내용이 비어 있더라도 커서를 클릭하여 태그에 접근할 수 있습니다. 에를 들어 more/less의 경우에 내용이 비어 있다고 해도 more/less 박스는 여백 때문에 박스로 보입니다. 내용이 없을 때 more/less에 클릭만으로 접근할 수 있도록 편의를 주기 위해 일부러 여백을 부여한 것이죠. 그러나 사용자 CSS에서는 이런 부분을 기대할 수 없으니 방향키로 이용하여 태그 위치를 찾거나 HTML 모드로 돌려 내용을 입력하고 에디터로 전환하는 수밖에 없습니다. 따라서 여백이 없는 태그에 접근할 수 있도록 상태바(이를 위해 최근 관리자 화면 업데이트에서 status-bar 항목을 추가했습니다)에 태그 상 위치를 보여줄 필요가 있다고 생각됩니다.

5

답글: 진정한 WYSIWYG으로 가는 #15 개량제안

그래피티에님...
TNF 에서 스킨 시스템과 관련해서 많은 논의가 되고 있다고 전해들었습니다 smile
TNC 에서 현행 스킨시스템의 개선(?)에 많은 고민이 펼쳐지고 있습니다.. 그래피티에님 고민을 이어받아서
좀 나이쓰한 녀석으로 만들어 보도록 하겠습니다. 요 이슈를 TNC 에 좀 던져 주시지요 smile

-노정석 드림

6

답글: 진정한 WYSIWYG으로 가는 #15 개량제안

rev.666에 추가되었습니다.

chester 작성:

그래피티에님...
TNF 에서 스킨 시스템과 관련해서 많은 논의가 되고 있다고 전해들었습니다 smile
TNC 에서 현행 스킨시스템의 개선(?)에 많은 고민이 펼쳐지고 있습니다.. 그래피티에님 고민을 이어받아서
좀 나이쓰한 녀석으로 만들어 보도록 하겠습니다. 요 이슈를 TNC 에 좀 던져 주시지요 smile

-노정석 드림

음... 어떻게 하면 될까요? 아무래도 TNC 분들은... 낯설어서...:| 아마 제가 누군지 모르는 분들이 태반일 듯...

7

답글: 진정한 WYSIWYG으로 가는 #15 개량제안

graphittie 작성:

rev.666에 추가되었습니다.

chester 작성:

그래피티에님...
TNF 에서 스킨 시스템과 관련해서 많은 논의가 되고 있다고 전해들었습니다 smile
TNC 에서 현행 스킨시스템의 개선(?)에 많은 고민이 펼쳐지고 있습니다.. 그래피티에님 고민을 이어받아서
좀 나이쓰한 녀석으로 만들어 보도록 하겠습니다. 요 이슈를 TNC 에 좀 던져 주시지요 smile

-노정석 드림

음... 어떻게 하면 될까요? 아무래도 TNC 분들은... 낯설어서...:| 아마 제가 누군지 모르는 분들이 태반일 듯...

관리자 화면스킨의 전환은 아직 따로 메뉴가 마련되어 있지는 않은거죠 ??
바꾸고 싶었는데 어떻게 바꾸어야 되는지 잘 보이질 않네용 smile

8

답글: 진정한 WYSIWYG으로 가는 #15 개량제안

chester 작성:
graphittie 작성:

rev.666에 추가되었습니다.

chester 작성:

그래피티에님...
TNF 에서 스킨 시스템과 관련해서 많은 논의가 되고 있다고 전해들었습니다 smile
TNC 에서 현행 스킨시스템의 개선(?)에 많은 고민이 펼쳐지고 있습니다.. 그래피티에님 고민을 이어받아서
좀 나이쓰한 녀석으로 만들어 보도록 하겠습니다. 요 이슈를 TNC 에 좀 던져 주시지요 smile

-노정석 드림

음... 어떻게 하면 될까요? 아무래도 TNC 분들은... 낯설어서...:| 아마 제가 누군지 모르는 분들이 태반일 듯...

관리자 화면스킨의 전환은 아직 따로 메뉴가 마련되어 있지는 않은거죠 ??
바꾸고 싶었는데 어떻게 바꾸어야 되는지 잘 보이질 않네용 smile

오늘 붙였는데요... 환경설정 최하단에 추가되었습니다. 몇몇 분이 오류가 있다고 하시는데 아직 손 보지는 못했습니다.