NARADESIGN

웹표준, 웹접근성, 유니버설디자인, HTML, CSS, UI, UX, UD


국내외 유명 웹 에디터 ‘p, br’ 구현방식 벤치마킹.

본문 건너 뛰기

웹에서 마치 워드프로세서를 사용하는 것과 같은 편리함을 주는 글쓰기 도구를 우리는 통상 웹 기반의 위지윅 에디터라고 부릅니다. 오픈소스 XE 개발에 참여하며 오래전부터 심심치 않게 논쟁꺼리가 되어왔던 p, br, p margin 처리 방식을 고민하며 유명한 국내외 웹 에디터가 어떻게 구현되어 있는지 살펴 보았습니다.

인기있는 위지윅 에디터들의 p, br 구현방식
사용지역 에디터 이름 데모 <p>
keyboad
<br>
keyboard
<p>
margin
글로벌 CKEditor 있음 Enter Shift+Enter margin:1em 0
글로벌 TinyMCE 있음 Enter Shift+Enter margin:1em 0
글로벌 WYMeditor 있음 Enter Shift+Enter margin:1em 0
글로벌 widgEditor 있음 Enter Shift+Enter margin:1em 0
한국 SmartEditor Basic 있음 Enter Shift+Enter margin:1em 0
한국 Naver Smart Editor 없음 Enter Shift+Enter margin:0
한국 Daum Open Editor 있음 Enter Shift+Enter margin:0
한국 Xquerd 없음 Enter Shift+Enter margin:0
한국 Nate Editor 없음 Enter (p 대신 div 생성) Shift+Enter margin:0 (div 요소)

모든 웹 기반의 위지윅 에디터를 조사한 것은 아니지만 제가 간단하게 벤치마킹한 결과에 따르면 국내외를 막론하고 대부분의 제품들은 웹 브라우저가 기본으로 제공하는 처리 방식에 따라 p 요소에 Enter키를 맵핑해 두었고 br 요소에 Shift+Enter키를 맵핑해 두었습니다.

한편 글로벌 제품들은 p 요소에 브라우저가 제공하는 기본적인 상하 여백 {margin:1em 0} 스타일을 그대로 살려두는 방식을 채택했는데 국내 제품들은 p 요소에 브라우저가 제공하는 기본적인 상하 여백을 {margin:0} 으로 덮어쓰기 하는 방식으로 리셋 했습니다.

이를 통해서 우리는 다음과 같은 세 가지 사실을 알 수 있습니다.

  • 해외에서는 Enter키를 치면 단락을 변경하는 것으로써 단락 사이의 여백이 학습되어 있다. 행간 여백 없이 줄 바꿈을 하려면 Shift+Enter를 치면 된다.
  • 한국에서는 Enter키를 치면 단락을 변경하는 것이 아니라 단순히 줄 바꿈을 하는것으로 학습되어 있다. 단락을 구분하려면 Enter키를 두번 치면 된다. 문단 요소 p의 여백이 제거되어 있으므로 Shift+Enter를 알 필요도 없다.
  • 외국 사람과 한국 사람은 웹에서 선호하는 글쓰기 모양도 다르고 경험도 다르다. 외국 사람은 하나의 문장에 마침표를 찍더라도 다음 문장을 줄 바꿈 없이 이어쓰며 단락을 바꿀 때에만 Enter를 치는 경향이 있고 한국 사람들은 마침표를 찍으면 다음 문장을 쓰기 위해 줄을 바꾼다. 외국인이 생성하는 태그는 의미론적 관점에서 옳은 방향이나 한국인이 사용하는 방식은 편리하다.

외국인과 한국인의 습성이 다를 뿐만 아니라 글쓰기 교육 시간에 문단을 바꿀 때에만 개행하라고 배웠다 하더라도 한국 사람들의 글쓰기가 틀렸다고 보기는 어렵다고 생각합니다. 국민 모두가 한 방향으로 틀렸다면 그 방향이 우리 나라에서는 사실상 통용되는 표준이라고 인정해야 한다는 생각입니다. 따라서 우리의 고민은 다음과 같이 전개됩니다.

  • 한국에서 제품을 만들기 시작했지만 글로벌 시장에 진출하려면 사실상 국제 표준에 따라야 한다.
  • 글로벌 시장에 진출하더라도 한국 시장은 포기할 수 없다.
  • 우리 제품은 내수용과 수출용 구분이 따로 없다.

‘A’도 만족해야 하고 ‘B’도 만족해야 한다면 둘 다 만족 시켜주자라는 것이 중론인데요. 다음과 같은 제안들이 검토 대상에 올랐습니다.

  • p 요소는 Enter키로 생성하며 br 요소는 Shift+Enter키로 생성한다.
  • p 요소의 여백을 관리자 화면에서 원하는 방식으로 선택할 수 있도록 옵션을 제공한다. "[v] p 요소에 여백 제거"
  • p 요소의 여백을 글 쓰는 사람이 에디터에서 직접 선택할 수 있도록 옵션을 제공한다. "[v] p 요소에 여백 제거"
  • p 요소에 브라우저가 제공하는 기본 마진을 보존한 다음 Enter 한번은 br 요소를 생성하고 Enter 두번은 p 요소를 생성한다. (이 방법은 작년부터 제안되었으나 구현에 대한 난제가 있었던 것으로 지금은 정확히 기억이 나지 않네요)

글 쓰는 사람이 에디터에서 직접 선택할 수 있도록 옵션을 제공하는 방법은 개인적으로 반대하는 방법입니다. 개발자 또는 관리자가 해야 할 선택을 사용자에게 떠넘겨 UI를 복잡하게 만든다는 느낌을 지울 수가 없고 의미를 정확하게 간파하는 사용자도 드물꺼라 생각합니다. XE개발팀에서 XEED라는 새로운 에디터를 개발하며 이 문제를 어떻게 해결하는지 지켜봐주세요. 그리고 좋은 의견이나 경험담이 있으면 댓글로 함께 의견 나누시죠.

분류: 웹 기획,웹 표준 | 2011년 4월 6일, 4:26 | 정찬명 | 댓글: 22개 |
트랙백URI - http://naradesign.net/wp/2011/04/06/1461/trackback/

22개의 댓글이 있습니다.

  1. gonesama 댓글:

    몇가지 이유가 있을 거 같아요.
    1. 일단 우리나라 이용자 대부분이 p태그네 br태그네 이런 것에 별로 관심이 없다.
    2. 그리고 기본적으로 전역에 걸쳐 margin:0;padding:0; 으로 시작하는 일명 reset css의 영향…. 이 아닐까 싶습니다.

  2. 정찬명 댓글:

    @gonesama
    네, 말씀하신 것들이 이유가 될 수 있을것 같아요. 또는 워드나 한글 작성하던 경험을 웹에 고스란히 옮겨오고 싶었던 기획의도 였을 수도 있구요.

  3. guny 댓글:

    맨 마지막에 글 쓰는 사람이 에디터에서 직접선택할수 있도록 옵션제공을 반대하신다고 했는데요…그러면 관리자가 사용자 입장 고려없이 일방적으로 P, Br방식을 택해야 한단말이 아닌가요?

    제 생각은 줄간격 컴포넌트가 있듯이 사용자가 글쓸때 P를 margin-top과 margin-bottom을 0로 설정하고 글을 쓰게 하는 편이 글로벌화에도 문제 없을것 같네요.. 당연히 기본셋팅은 있어야 겟지만요…

  4. 오랜만의 포스팅 이시네요. 제안 4가지 중 1번째와 4번째는 저도 생각해봤던 내용이네요. 개인적으로 4번째 제안이 가장 좋은 방법 일 것 같아요. 힘들더라도 구현하도록 해보는 것도 좋을 것 같은데요. 제가 4번째 방법을 구현해 보았을 때는 엔터 두번으로 P 요소로 입력되도록 하는 것이 가능했지만 문제는 엔터 두번 후에 하나를 다시 지웠을 때의 문제점이 있었던 것으로 기억합니다. 굉장히 오래되서 기억은 잘 안나지만 ..
    그리고 개인적으로 사용자에게 옵션을 선택하도록 하는 것은 너무 불편한 방법 이라고 생각합니다. 기본 설정으로도 마음에 들게 사용할 수 있어야 할텐데 말이죠. 아무튼 개인적인 생각입니다. 저는 옵션 수정하는 걸 귀찮아 하거든요.
    아 그리고 XEED 는 기대하며 기다리고 있겠습니다.

  5. 김무건 댓글:

    1번은 글로벌 표준이라 필수불가결, 3번은 아는 사람이 드물어서 거의 결론이 난 것 같네요.
    1번 방식을 채택할 사이트중 상당수는 국내 웹 이라 생각합니다.
    그럼 1번 방식을 채택한 들 “제도적”인 표준을 지켰을지 언정 작성된 컨텐츠는 기존과 다를바가 없죠.
    따라서 1번 방법을 선택하면 국내 웹 환경을 위한 4번 방법도 빠질수가 없겠네요.
    2번 방법은 관리자 재량으로 선택할 문제구요.
    그럼 1, 2, 4번을 적용해야하는데 문제는 4번을 구현하는게 어렵다는 거네요.

    이미 전문가 분들은 토론으로 좋은 결론을 얻었으리라 생각합니다.
    아무튼 많이 고생 하시네요 -_-;;;;;

    ps. 포스팅 자주 보고 싶어요!

  6. 각 에디터들 데모사이트를 확인 하다가 알게 되었는데요.
    다음 에디터에서도 br 을 키보드로 지원하는 것 같습니다. 다른 에디터와 마찬가지로 shift + enter 이구요. 화면상으로는 p 의 margin 이 0 처리 되어서 같아 보였지만 소스를 보니 shift + enter 를 지원하고 있네요. 수정하셔야 할 것 같아요 ㅎㅎ

  7. 이나무 댓글:

    관리자가 선택한 기본 로케일 설정에 따르면 어때요?

  8. 정찬명 댓글:

    @마누
    고맙습니다. 다음 에디터 데모가 Chrome 브라우저에서 버그가 있었네요. 내용을 고쳐놨습니다.

  9. 정찬명 댓글:

    @guny @김무건
    의견 고맙습니다.

  10. 정찬명 댓글:

    @이나무
    저희 입장에서는 로케일과 에디터 구현이 연관이 있다고 판단할 수 있더라도 관리자나 사용자가 알아차릴 수 있을까 걱정이 되기도 합니다.

  11. 익명 댓글:

    전 외국사람일까요..선호도와 경험이 딱외국인이네요.

  12. 다라나 댓글:

    저도 이 문제를 고민해 본 적이 있습니다. 다만 저는 다른 쪽으로 결론을 내렸습니다. 글쓰기 교육을 받았다면 p가 맞습니다. 하지만 새로 진입하는 사람들은 눈에 익은 방식을 선택하기 마련이라서 br을 좋아하지요. 그렇게 되는 이유를 생각해 봤습니다. 아무래도 한글과 영어의 글자 모양이 다른 문제도 한 몫 하는 것 같습니다.

    현재 한글 글꼴이 대부분은 네모난 모양입니다. 비스타부터 맑은 고딕이 생겨서 좀 나아지긴 했지만 아직도 대부분 기본 글꼴인 굴림이나 돋움은 공병우 식의 빨래꼴 글꼴처럼 가독성이 좋지 않습니다. 또 왜 그런지 모르겠지만 textarea 안에서 글을 쓸 때 영어와는 달리 한글이 네모 글꼴일 때 기본 줄 간격(line-height)이 아주 좁아서 가독성에 치명적입니다. bbs 시절의 80자 제한의 영향도 아직 있는 것 같고요.

    제가 내린 결론은 textarea(혹은 div) 내에서 한글이 입력될 때 모습이 입력 후 보이는 화면과 같으면 제일 좋을 것 같다는 것입니다. 스타크래프트의 미니맵처럼 글쓰는 입력란 오른쪽에 윤곽선만 보이는 형태로 자신이 치는 글이 어떻게 나열되는지 보인다면 좀 더 낫지 않을까요. 저도 엔터를 누르면 p 요소가 들어가는 게 맞다고 생각합니다. 한국에서도 제대로 글쓰기를 배우면 이건 당연한 거니까요.

  13. 다라나 댓글:

    지금 여기 댓글 쓰는 곳만 해도 글 쓸 때와 글 쓴 후의 모습이 한글인 경우 좀 다릅니다.

    But how about it in English? In textarea, English is more readable than Korean, even in same line-height value. Because English letter is not squre type. This is test paragraph for English letter.

    textarea 내에서 영어로 쓴 윗 문단은 한글과 같은 크기를 지정했음에도 훨씬 가독성이 좋습니다. 정찬명 님의 댓글 쓰는 공간은 훨 낫습니다만, 대부분의 다른 댓글 쓰는 공간은 보는 화면보다 훨씬 좁습니다. 메인 글을 쓰는 공간과 보이는 공간도 그렇고요. 아마 포럼 형식인 외국과 게시판 형식인 한국의 차이 때문일 수도 있겠지만요.

  14. 세인트 댓글:

    한국에서도 글쓰기 교육은 외국과 똑같이 받습니다. 학년의 고저를 막론하고 숙제나 레포트를 쓸 때 문장 끝마다 엔터를 치는 사람은 거의 없을거에요.
    다만 인터넷 글쓰기 문화가 그렇게 자리를 잡힌 것입니다. 그게 왜 그런지는 저도 잘은 모르겠지만요…

    붙여쓰면 읽기 어렵다는게 한가지 이유인데… 사실 이것도 원래 그런게 아니라 다들 엔터를 치니깐 이젠 엔터를 안치면 읽기 어려워진 것일수도 있죠.

    큰 글씨를 채택하는 국내의 인터넷 신문은 전부 정상적인 글쓰기 방식을 따르고, 모두들 기사 잘 읽습니다… 하지만 제로보드를 위시한 9pt를 채택하는 국내의 많은 게시판들은 엔터가 없으면 읽기 어렵더라구요. 크기 때문일까요? 아니면 그냥 인터넷 신문에 적응했기 때문일까요?

  15. 정찬명 댓글:

    @다라나
    한글과 영문의 글꼴 모양이 다르기 때문이라는 설명이 납득할만 하네요. 위지윅이라는 말의 의미대로라면 쓰는 그대로 보이도록 만드는 것이 역시 제일 좋겠지요. 그런데 제가 스타크래프트를 안해봐서 이 부분은 이해를 잘 못했어요. ㅎㅎ

  16. 정찬명 댓글:

    @세인트
    글꼴 크기의 영향도 물론 있는것 같습니다. 이곳 본문의 글꼴 크기도 가독성을 고려해서 약 13px 정도의 크기를 유지하고 있는데 한국에서는 12px 크기를 가장 많이 사용하죠. 12px 글꼴을 사용하는 이유는 아마도 그 크기에서 그나마 봐줄만하고 가장 모양이 예쁘기 때문이 아닐까 생각합니다. 콘텐츠보다 외형을 중요하게 생각하는 디자이너 잘못이라고만 하기에는 좋은 글꼴을 제공해 주지 못하는 OS 탓도 있는듯 합니다.

  17. 다라나 댓글:

    미니맵 형태는 실제 보여질 화면의 wire-frame 이라고 생각하시면 좀 도움이 될 것 같습니다. 사실 중요한 점은 내가 textarea에서 쓴 문단의 왼쪽, 오른쪽 긑에 나타나는 글자와 등록한 후에 보이는 화면 문단의 왼쪽, 오른쪽 글자가 같아야 한다는 것이죠. 좌우 여백, 상하 여백도 제대로 넣어서요.

    그런데 이게 어렵더군요. 그래서 생각한 게 미니맵입니다. 댓글 쓰기란에서 글을 쓰면 오른쪽 빈 공간에 등록 후 보여질 화면의 1/4 모형 같은 게 나타나서 문단의 형태를 보여줄 수 있도록 하자는 거죠. 실제 구현은 생각을 못 했는데, 글씨 크기를 3pt 정도로 하면 아마 비슷하게 보이지 않을까 싶습니다.

    물론 textarea 내에서 글 등록 후 보여질 화면과 같으면 미니맵 같은 건 필요가 없지만요.

  18. 정찬명 댓글:

    @다라나
    아하~ 문단 모양 미리보기 같은 개념이었군요. 설명 고맙습니다.

  19. 정찬명 댓글:

    @익명
    저도 사실 외국사람입니다. ㅋ

  20. Na! 댓글:

    줄바꿈은 [shift+enter]
    문단 바꾸기는 [enter]
    문자열을 다루는 거의 모든 프로그램이 따르고 있는 건데..
    웹에디터라고 특별할 이유는 없다고 봅니다.

  21. 정찬명 댓글:

    @Na!
    네, 저희 팀에서도 공감하고 있고 다수의 의견이기도 한데요. 어떤 사용자는 그것을 알 필요도 없고 오히려 모르는 편이 좋다는 의견도 있어서 현재까지 많은 혼란이 있어왔습니다.

  22. 허니몬의 생각…

    » 국내외 유명 웹 에디터 ‘p, br’ 구현방식 벤치마킹. – NARADESIGN:BLOG…

댓글 쓰기

전송된 글이 나타나지 않는다면 필터링 된 것입니다. dece24앳gmail.com 으로 메일 주세요.
(X)HTML 코드 사용이 가능하지만 소스 코드 출력을 원하시면 <꺽쇠>는 [괄호]로 변환하여 작성해 주세요.

필수 아님

필수 아님