온라인 에디터의 진화
2015. 4. 8. 07:50ㆍUI 가벼운 이야기
이번 글에서는 최근에 새롭게 보여지는 온라인 에디터들에 대해 소개하려고 합니다.
웹은 빠른 속도로 진화하고 있어서 가끔씩 둘러보면 신기하다 할만한 것들이 넘쳐납니다. 하지만 그 중에서도 변화를 체감하기 힘든 것들이 있는데요, 온라인 에디터가 그 중 하나입니다. 사실 온라인 에디터는 인터넷에서 글을 작성하지 않는 이상 접하기 힘든 것인데요, pxd story도 마찬가지이고 블로그를 운영하거나 카페에 글을 써 본적이 있는 분들이라면 변화가 더딘 것에 공감하실겁니다. 그래서 글을 깔끔하게 작성하는 방법에 대한 노하우를 공유하는 글들도 많이 있죠.
웹의 뼈대는 html이라, 웹브라우저를 통해 보는 모든 것들은 html 문법으로 구성되어 있습니다. 블로그, 카페, 뉴스들도 마찬가지이죠. 그것들을 구성하는 글을 온라인에서 작성하는 도구인 온라인 에디터도 결국 html을 만드는 일인데요, 이것을 쉽게 하기 위해 온라인 에디터도 다양한 형태가 존재합니다. 그 중 주류를 이루는 것은 아래와 같은 형태를 가지고 있습니다.
Tistory 에디터
‘온라인 에디터’라고 한 것은 제가 임의로 지칭한 것인데, 정확한 영문 명칭은 ‘Online Rich-text editor’입니다. 위키피디아의 정의는 아래와 같습니다.
아래 사례들은 에디터의 모든 종류를 포함하고 있지는 않습니다. 최근에 제가 접했던 몇몇 에디터들만 소개하는 것입니다. ^^;
앞에서 말씀드린대로 보통의 온라인 에디터가 사용하는 방식입니다. 형태는 일반적인 워드프로세서와 비슷합니다. 주로 사용되는 스타일(굵게, 밑줄, 글자크기, 글꼴, 목록)과, html에 특화된 도구(링크, 더보기, 이미지넣기, header tag)등이 툴바에 존재합니다. (아… 티스토리에는 header tag가 없습니다..) 그래서 글을 작성할 때, 혹은 작성 중 필요한 부분을 선택하고 툴바를 통해 스타일을 적용합니다. 보통 글 작성 페이지와 결과 페이지가 다르게 존재합니다.
* Iframe이란 단어는 페이지 내에 또 다른 페이지가 frame안에 들어있다는 것을 의미합니다. 페이지 내에 독립적인 editor 페이지가 들어있다는 것을 뜻합니다.
Tistory Editor
Kickstarter에서 펀딩을 받으며 출시 전부터 유명해진 Ghost라는 블로그 서비스의 에디터입니다. Markdown이라는 문법을 사용하여, 좌측에서 그 문법을 사용하여 글의 소스를 적으면 우측에 문법을 적용한 결과화면이 나오는 구조입니다. 사실 Ghost가 처음 사용한 것은 아니고, 여러 Markdown Editor에서 사용하던 형태를 블로그 에디터에 적용한 것입니다. Markdown은 최근들어 점점 지원하는 서비스가 늘고 있는데요, 마우스가 필요없이 키보드 타이핑만으로 많이 사용되는 HTML스타일이나 태그를 적용할 수 있다는 것이 장점입니다. 그것도 HTML보다 훨씬 쉬운 방식으로 말이죠.
* Markdown에 대한 설명은 아래 링크를 통해 자세히 알아볼 수 있습니다.
Markdown:Syntax by John Gruber
Markdown editor example : Dillinger
Markdown editor example : Realms wiki
Ghost Editor
이 방식은 우리가 일반적으로 보는 웹페이지(결과 페이지)를 그 자리에서 수정하는 방식입니다. 진정한 WYSIWYG이라고 할 수 있죠. 결과 페이지의 특정 영역을 클릭하거나 편집 버튼을 누르면, 그 부분이 활성화되고 툴바가 생성되며 편집 모드로 진입하게 됩니다. 편집을 한 뒤 비활성 영역을 클릭하면 모드를 빠져나와 다시 그대로 결과 페이지가 되는 것이죠. 여기서는 편집 모드와 결과 페이지가 같은 포맷-스타일을 가지기 때문에 결과물의 변형에 대한 부담이 없이 편집을 할 수 있습니다. (사실 Inline editor의 장단점은 여러가지가 있지만 이 글에서는 스타일에 대해서만 설명했습니다) 최근에는 HTML 속성 중 'ContentEditable'이라는 것이 추가되어 더 손쉽게 구현할 수 있게 되었다고 합니다.
* Inline이라는 것은 페이지 내에 있다는 뜻으로, Iframe과 달리 페이지의 규칙과 스타일에 종속되어 이루어지는 것을 뜻합니다.
Inline editor example : CKEditor
Inline editor example : SnapEditor
Inline Editor : SnapEditor
'진지한 글쓰기'로 유명한 블로그 서비스인 Medium의 에디터입니다. iOS의 Select-Contextual menu방식을 쏙 빼닮은 형태이죠. 툴바가 항상 상단 고정 형태로 존재하는 대신, 이 방식에서는 우선 글을 작성하고 필요한 부분을 선택하면 그 부분에 적용할 수 있는 기능들이 표시되는 형태입니다. 장점이라면 백지에 글을 쓰듯, 아무런 도구표시 없이 글쓰기에 집중할 수 있고, 필요할 때만 원하는 위치에서 빠르게 기능을 사용할 수 있다는 것입니다. HTML을 사용할 때 가장 많이 사용되는 중요한 스타일 몇 가지만 제공하여 더 빠르고 쉽게 적용할 수 있는 장점도 있습니다.
Medium editor clone example : MediumEditor
Medium editor clone example : ZenPen
Medium Editor
가장 큰 변화의 이유는 사용자에게 글쓰기에 집중할 수 있는 환경을 만들어주기 위해서이지 않을까 합니다. 컴퓨터로 그래픽 작업을 하고 음악 작업을 하기 위해 컴퓨터 시스템 구조를 굳이 이해해야할 필요가 없어야 하듯, 웹상에 글을 쓰기 위해 html의 구조를 다 이해할 필요는 없습니다. 하지만 현재의 Ifrmae editor는 html구조를 모르면 꼬이기 쉬운 부분이 많이 있습니다. 텍스트 붙여넣기를 했는데 글꼴이나 크기가 다르게 붙는다던가 말이죠. 그렇게 되면 html소스를 편집하거나, 다시 전체에 스타일을 다시 적용하거나 해야합니다. 그리고 포스트 하나를 쓰는데 글자 크기를 8pt~36pt까지 다양하게 쓸 일도 별로 없고, 좌측-우측 정렬, 줄간격을 매번 다르게 지정할 일도 별로 없으니까요. 따라서 자주 쓰이지 않는 요소들은 최대한 숨기고, 사용자는 글의 내용을 작성하는데 집중할 수 있도록 돕는 것입니다.
비슷한 이유인데, 제목,본문,강조 등 중요한 몇 가지로 제한된 스타일을 통해 스타일 적용에서 불필요한 요소들을 제거하는 것입니다. 이를 통해 매번 일관된 스타일을 적용하고, 화려한 페이지가 아니라 글의 내용에 집중된 페이지를 만들도록 돕습니다.
html에는 글쓰기를 할 때 중요하고 빈번하게 사용되어 지정된 몇 가지의 태그가 있습니다. 제목(h1), 소제목(h2~), 강조(emphasis), 인용구(blockquote), 목록(li) 등이죠. 하지만 사용자가 다룰 수 있는 스타일이 너무 다양하다면, 잘못 적용할 수도 있습니다. 예를 들면, 모든 페이지에 동일한 형태로 제목-소제목을 입력하기 위해 h1,h2 태그가 있지만, 그것을 잘 모르면 익숙한 방식인 '글자 크기를 키우고 볼드체로 처리'로 스타일을 지정할 수 있습니다. 그러다보면 매 페이지마다 다른 스타일의 제목-소제목이 만들어질 수 있습니다. 이를 방지하기 위해 Medium이나 Ghost(Markdown문법)에서는 제한된 몇 가지의 스타일을 통해 여러 페이지에 동일한 스타일을 적용할 수 있도록 돕습니다.
위키피디아에서 WYSIWYG을 찾아보면, 그와 유사한 많은 약어들이 나옵니다. WYSIWYG의 한계를 풍자하는 것도 있고, 다르게 설명하는 것들도 있죠. 아래에 몇 가지를 적어봅니다.
- WYSIAWYG; what you see is almost what you get
- WYSIWYM; what you see is what you mean
- WYSYHYG; what you see you hope you get
이와같이 실제 에디터와 결과 페이지 사이에 차이가 존재할 수 있다는 이야기들이 많은데요, 이를 해결하기 위한 방법으로 결과 페이지에서 직접 수정하는 Inline editor라든가, 결과를 같이 보여주는 Markdown editor, 스타일을 최소화하는 Medium editor등이 발전되었다고 볼 수도 있습니다. 이것도 마찬가지로 꾸미기에 신경쓰지 않고 글쓰기에 집중할 수 있도록 도와주는 하나의 방안이기도 합니다. 물론 편집모드일 때와 결과 페이지가 약간 다를 수 있지만, 그 차이를 최소화해주는 형태로 발전하고 있습니다.
이렇게 온라인 에디터의 몇 가지 사례를 통해 왜 이런 변화들이 생겼을지에 대해 고민해보았습니다. 이 외에도 여러 글쓰기 서비스나 애플리케이션에서도 비슷한 형태의 진화들이 있습니다. 최종적으로는 다른 것 신경쓰지 않고 글을 잘 쓸 수 있는 환경을 만들어주자는 것인데, 우리가 접하는 대중적인 서비스에서는 아직 큰 변화가 없어 아쉬움이 있습니다.
글에서 고민한 내용은 대부분 글쓰기와 스타일에 대한 부분이어서, 이미지나 동영상 삽입, 그리고 그것들을 다 아우르는 CMS에 대한 관점은 빠져있습니다. Ghost나 Medium과 같은 새로운 블로그 서비스들은 글쓰기 외에도 CMS 측면에서도 새로운 것들이 많으니, 한번 사용해보시면 나중에 관련 프로젝트를 하는데 도움이 되리라 생각합니다.
* 최근 많은 사람들이 이용하는 Evernote도 웹페이지에서의 글쓰기 모드가 깔끔하게 바뀌었습니다. 한번 확인해보세요 ^^
웹은 빠른 속도로 진화하고 있어서 가끔씩 둘러보면 신기하다 할만한 것들이 넘쳐납니다. 하지만 그 중에서도 변화를 체감하기 힘든 것들이 있는데요, 온라인 에디터가 그 중 하나입니다. 사실 온라인 에디터는 인터넷에서 글을 작성하지 않는 이상 접하기 힘든 것인데요, pxd story도 마찬가지이고 블로그를 운영하거나 카페에 글을 써 본적이 있는 분들이라면 변화가 더딘 것에 공감하실겁니다. 그래서 글을 깔끔하게 작성하는 방법에 대한 노하우를 공유하는 글들도 많이 있죠.
웹의 뼈대는 html이라, 웹브라우저를 통해 보는 모든 것들은 html 문법으로 구성되어 있습니다. 블로그, 카페, 뉴스들도 마찬가지이죠. 그것들을 구성하는 글을 온라인에서 작성하는 도구인 온라인 에디터도 결국 html을 만드는 일인데요, 이것을 쉽게 하기 위해 온라인 에디터도 다양한 형태가 존재합니다. 그 중 주류를 이루는 것은 아래와 같은 형태를 가지고 있습니다.
Tistory 에디터
‘온라인 에디터’라고 한 것은 제가 임의로 지칭한 것인데, 정확한 영문 명칭은 ‘Online Rich-text editor’입니다. 위키피디아의 정의는 아래와 같습니다.
An online rich-text editor is an interface for editing rich text within web browsers, which presents the user with a "what-you-see-is-what-you-get" (WYSIWYG) editing area. The aim is to reduce the effort for users trying to express their formatting directly as valid HTML markup.
여기서 WYSIWYG이란 단어가 나오는데, 사실 온라인 에디터는 WYSIWYG을 정말 잘 구현하지는 못하고 있습니다. 그보다 Rich-text가 더 핵심일텐데요, 반대말은 Plain text입니다. 우리가 윈도우 메모장을 사용할 때 볼 수 있는, 아무런 스타일 없는 텍스트를 Plain text라고 합니다. Rich-text는 스타일이 적용된 텍스트를 말하죠. 웹에서는 html의 여러 태그를 활용해 꾸며지 텍스트를 말한다고 볼 수 있습니다. 아래 링크를 통해 관련 내용을 알아볼 수 있습니다.
http://en.wikipedia.org/wiki/Plain_text
http://en.wikipedia.org/w/index.php?title=Rich_Text_Format&redirect=no
http://en.wikipedia.org/wiki/Formatted_text
1. 에디터의 종류
아래 사례들은 에디터의 모든 종류를 포함하고 있지는 않습니다. 최근에 제가 접했던 몇몇 에디터들만 소개하는 것입니다. ^^;
1-1. Iframe Editor
앞에서 말씀드린대로 보통의 온라인 에디터가 사용하는 방식입니다. 형태는 일반적인 워드프로세서와 비슷합니다. 주로 사용되는 스타일(굵게, 밑줄, 글자크기, 글꼴, 목록)과, html에 특화된 도구(링크, 더보기, 이미지넣기, header tag)등이 툴바에 존재합니다. (아… 티스토리에는 header tag가 없습니다..) 그래서 글을 작성할 때, 혹은 작성 중 필요한 부분을 선택하고 툴바를 통해 스타일을 적용합니다. 보통 글 작성 페이지와 결과 페이지가 다르게 존재합니다.
* Iframe이란 단어는 페이지 내에 또 다른 페이지가 frame안에 들어있다는 것을 의미합니다. 페이지 내에 독립적인 editor 페이지가 들어있다는 것을 뜻합니다.
Tistory Editor
1-2. Markdown Editor
Kickstarter에서 펀딩을 받으며 출시 전부터 유명해진 Ghost라는 블로그 서비스의 에디터입니다. Markdown이라는 문법을 사용하여, 좌측에서 그 문법을 사용하여 글의 소스를 적으면 우측에 문법을 적용한 결과화면이 나오는 구조입니다. 사실 Ghost가 처음 사용한 것은 아니고, 여러 Markdown Editor에서 사용하던 형태를 블로그 에디터에 적용한 것입니다. Markdown은 최근들어 점점 지원하는 서비스가 늘고 있는데요, 마우스가 필요없이 키보드 타이핑만으로 많이 사용되는 HTML스타일이나 태그를 적용할 수 있다는 것이 장점입니다. 그것도 HTML보다 훨씬 쉬운 방식으로 말이죠.
* Markdown에 대한 설명은 아래 링크를 통해 자세히 알아볼 수 있습니다.
Markdown:Syntax by John Gruber
Markdown editor example : Dillinger
Markdown editor example : Realms wiki
Ghost Editor
1-3. Inline Editor
이 방식은 우리가 일반적으로 보는 웹페이지(결과 페이지)를 그 자리에서 수정하는 방식입니다. 진정한 WYSIWYG이라고 할 수 있죠. 결과 페이지의 특정 영역을 클릭하거나 편집 버튼을 누르면, 그 부분이 활성화되고 툴바가 생성되며 편집 모드로 진입하게 됩니다. 편집을 한 뒤 비활성 영역을 클릭하면 모드를 빠져나와 다시 그대로 결과 페이지가 되는 것이죠. 여기서는 편집 모드와 결과 페이지가 같은 포맷-스타일을 가지기 때문에 결과물의 변형에 대한 부담이 없이 편집을 할 수 있습니다. (사실 Inline editor의 장단점은 여러가지가 있지만 이 글에서는 스타일에 대해서만 설명했습니다) 최근에는 HTML 속성 중 'ContentEditable'이라는 것이 추가되어 더 손쉽게 구현할 수 있게 되었다고 합니다.
* Inline이라는 것은 페이지 내에 있다는 뜻으로, Iframe과 달리 페이지의 규칙과 스타일에 종속되어 이루어지는 것을 뜻합니다.
Inline editor example : CKEditor
Inline editor example : SnapEditor
Inline Editor : SnapEditor
1-4. Medium Editor
'진지한 글쓰기'로 유명한 블로그 서비스인 Medium의 에디터입니다. iOS의 Select-Contextual menu방식을 쏙 빼닮은 형태이죠. 툴바가 항상 상단 고정 형태로 존재하는 대신, 이 방식에서는 우선 글을 작성하고 필요한 부분을 선택하면 그 부분에 적용할 수 있는 기능들이 표시되는 형태입니다. 장점이라면 백지에 글을 쓰듯, 아무런 도구표시 없이 글쓰기에 집중할 수 있고, 필요할 때만 원하는 위치에서 빠르게 기능을 사용할 수 있다는 것입니다. HTML을 사용할 때 가장 많이 사용되는 중요한 스타일 몇 가지만 제공하여 더 빠르고 쉽게 적용할 수 있는 장점도 있습니다.
Medium editor clone example : MediumEditor
Medium editor clone example : ZenPen
Medium Editor
2. 에디터들의 변화 이유
2-1. 글쓰기에 집중하기
가장 큰 변화의 이유는 사용자에게 글쓰기에 집중할 수 있는 환경을 만들어주기 위해서이지 않을까 합니다. 컴퓨터로 그래픽 작업을 하고 음악 작업을 하기 위해 컴퓨터 시스템 구조를 굳이 이해해야할 필요가 없어야 하듯, 웹상에 글을 쓰기 위해 html의 구조를 다 이해할 필요는 없습니다. 하지만 현재의 Ifrmae editor는 html구조를 모르면 꼬이기 쉬운 부분이 많이 있습니다. 텍스트 붙여넣기를 했는데 글꼴이나 크기가 다르게 붙는다던가 말이죠. 그렇게 되면 html소스를 편집하거나, 다시 전체에 스타일을 다시 적용하거나 해야합니다. 그리고 포스트 하나를 쓰는데 글자 크기를 8pt~36pt까지 다양하게 쓸 일도 별로 없고, 좌측-우측 정렬, 줄간격을 매번 다르게 지정할 일도 별로 없으니까요. 따라서 자주 쓰이지 않는 요소들은 최대한 숨기고, 사용자는 글의 내용을 작성하는데 집중할 수 있도록 돕는 것입니다.
2-2. 스타일 통일하기
비슷한 이유인데, 제목,본문,강조 등 중요한 몇 가지로 제한된 스타일을 통해 스타일 적용에서 불필요한 요소들을 제거하는 것입니다. 이를 통해 매번 일관된 스타일을 적용하고, 화려한 페이지가 아니라 글의 내용에 집중된 페이지를 만들도록 돕습니다.
html에는 글쓰기를 할 때 중요하고 빈번하게 사용되어 지정된 몇 가지의 태그가 있습니다. 제목(h1), 소제목(h2~), 강조(emphasis), 인용구(blockquote), 목록(li) 등이죠. 하지만 사용자가 다룰 수 있는 스타일이 너무 다양하다면, 잘못 적용할 수도 있습니다. 예를 들면, 모든 페이지에 동일한 형태로 제목-소제목을 입력하기 위해 h1,h2 태그가 있지만, 그것을 잘 모르면 익숙한 방식인 '글자 크기를 키우고 볼드체로 처리'로 스타일을 지정할 수 있습니다. 그러다보면 매 페이지마다 다른 스타일의 제목-소제목이 만들어질 수 있습니다. 이를 방지하기 위해 Medium이나 Ghost(Markdown문법)에서는 제한된 몇 가지의 스타일을 통해 여러 페이지에 동일한 스타일을 적용할 수 있도록 돕습니다.
2-3. WYSIWYG 구현하기
위키피디아에서 WYSIWYG을 찾아보면, 그와 유사한 많은 약어들이 나옵니다. WYSIWYG의 한계를 풍자하는 것도 있고, 다르게 설명하는 것들도 있죠. 아래에 몇 가지를 적어봅니다.
- WYSIAWYG; what you see is almost what you get
- WYSIWYM; what you see is what you mean
- WYSYHYG; what you see you hope you get
이와같이 실제 에디터와 결과 페이지 사이에 차이가 존재할 수 있다는 이야기들이 많은데요, 이를 해결하기 위한 방법으로 결과 페이지에서 직접 수정하는 Inline editor라든가, 결과를 같이 보여주는 Markdown editor, 스타일을 최소화하는 Medium editor등이 발전되었다고 볼 수도 있습니다. 이것도 마찬가지로 꾸미기에 신경쓰지 않고 글쓰기에 집중할 수 있도록 도와주는 하나의 방안이기도 합니다. 물론 편집모드일 때와 결과 페이지가 약간 다를 수 있지만, 그 차이를 최소화해주는 형태로 발전하고 있습니다.
3. 마치며
이렇게 온라인 에디터의 몇 가지 사례를 통해 왜 이런 변화들이 생겼을지에 대해 고민해보았습니다. 이 외에도 여러 글쓰기 서비스나 애플리케이션에서도 비슷한 형태의 진화들이 있습니다. 최종적으로는 다른 것 신경쓰지 않고 글을 잘 쓸 수 있는 환경을 만들어주자는 것인데, 우리가 접하는 대중적인 서비스에서는 아직 큰 변화가 없어 아쉬움이 있습니다.
글에서 고민한 내용은 대부분 글쓰기와 스타일에 대한 부분이어서, 이미지나 동영상 삽입, 그리고 그것들을 다 아우르는 CMS에 대한 관점은 빠져있습니다. Ghost나 Medium과 같은 새로운 블로그 서비스들은 글쓰기 외에도 CMS 측면에서도 새로운 것들이 많으니, 한번 사용해보시면 나중에 관련 프로젝트를 하는데 도움이 되리라 생각합니다.
* 최근 많은 사람들이 이용하는 Evernote도 웹페이지에서의 글쓰기 모드가 깔끔하게 바뀌었습니다. 한번 확인해보세요 ^^