RESEARCH & STUDY

SEMINAR

Online Editor Analysis & Strategy

26 FEB 2017

온라인 에디터의 진화

웹의 뼈대는 HTML이기 때문에 우리가 웹브라우저를 통해 보는 모든 것들은 HTML문법으로 구성되어 있다. 블로그, 카페, 뉴스 컨텐츠도 마찬가지다. 그것은 모두 온라인 에디터(Online Rich-text editor)도구를 통해 작성되는데 이것은 여러가지 형태로 존재하고 발전해가고 있다. 작성의 관점에서 에디터가 변화하고 있는 과정을 소개한다.

“막강한 기능으로 무장했다, iframe Editor”

  • - 초기에 가장많이 사용했던 방식
  • - 형태는 일반적인 워드프로세서와 비슷
  • - 스타일(굵게, 밑줄, 글자크기, 글꼴, 목록)과 html에 특화된 도구(하이퍼링크, 더보기, 이미지넣기, header tag) 등이 막강한 툴바 제공
  • - 글을 작성할 때, 혹은 작성 중 필요한 부분을 선택하고 툴바를 통해 스타일을 적용
  • - 글 작성 페이지와 결과 페이지가 다르게 존재

“글 쓰면서 마우스를 사용해야되? Markdown Editor”

  • - 마크다운은 마크업 언어로 텍스트에 간단한 태그를 이용해서 스타일을 입힌다.
  • - 일반적으로 좌측에서 그 문법을 사용하여 글의 소스를 적으면 우측에 문법을 적용한 결과화면이 나오는 구조로 제공
  • - Markdown을 지원하는 서비스가 늘고 있는데, Tumblr 와 같은 블로그 플랫폼에서도 다크다운 언어를 기본으로 제공
  • - 마우스가 필요없이 키보드 타이핑만으로 HTML스타일이나 태그를 적용

“편집모드 따위 필요없어. Inline Editor”

  • - 우리가 일반적으로 보는 웹페이지(결과 페이지)를 그 자리에서 수정하는 방식.
  • - 결과 페이지의 특정 영역을 클릭하거나 편집 버튼을 누르면, 그 부분이 활성화되고 툴바가 생성되며 편집 모드로 진입. 비활성 영역을 클릭하면 그대로 결과 페이지가 된다.
  • - 편집 모드와 결과 페이지가 같은 포맷스타일을 가지기 때문에 결과물의 변형에 대한 부담이 없이 편집을 할 수 있다.

“단순한 것이 아름답다. Medium Editor”

  • - WYSIWYG 에디터, 심플한 디자인, 부가기능의 제한을 통해 독자들에게 글쓰기에 최대한 집중을 하고, 선택의 피로를 최소화
  • - 백지에 글을 쓰듯 아무런 도구표시 없이 글쓰기에 집중할 수 있고, 텍스트를 선택할 때만 서식 옵션이 나타난다.
  • - 가장 많이 사용되는 중요한 스타일 몇 가지만 제공하여 더 빠르고 쉽게 적용할 수 있다.

온라인 에디터는 실제 에디터와 결과 페이지 사이에 차이가 존재할 수 있다. 이를 해결하기 위한 방법으로 결과를 같이 보여주는 Markdown editor나 결과 페이지에서 직접 수정하는 Inline editor, 스타일을 최소화하는 Medium editor등이 발전되었다. 즉, 편집모드일 때와 결과 페이지 사이에 발생하는 차이를 최소화하고, 꾸미기에 신경쓰지 않고 글쓰기에 집중할 수 있도록 도와주는 형태로 에디터가 발전해가고 있다.

기존 에디터 툴 분석

기존에 제공하고 있는 에디터 툴을 크게 제작, 소비, 소통(확장) 세가지 관점으로 살펴보려한다. 일반 사용자가 주로 사용하는 메일, 게시판, 블로그, 위키, SNS 서비스에서 제공하는 에디터가 어떤 방식으로 제공되고 있는지 비교해보자.

MAIL / BOARD

  • - 제작 : 보내는사람과 받는사람의 주소를 직접입력, 글쓰기는 전형적인 iframe editor방식
  • - 소비 : 일회성 소비, 하이퍼링크는 새탭, 첨부파일은 따로 파일을 오픈해서 확인해야 함
  • - 소통(확장) : 게시판의 경우 댓글을 통해, 메일의 경우 답장, 전달을 통해 피드백 가능 (별개의 컨텐츠가 계속해서 생성되는 방식)

BLOG

  • - 제작 : iframe 방식에서 Medium editor방식으로 바뀌고 있는 추세이며, 외부 데이터 연동이 파워풀해지고 있다. (동영상, 지도, 일정 등)
  • - 소비 : 글, 이미지, 일정, 표, 소스코드 등 다양한 시각이미지와 외부 데이터를 현재 페이지에서 소비할 수 있다.
  • - 소통(확장) : 댓글과 공감(좋아요)를 통해 소통, 공유하기를 통해 컨텐츠가 분산된다.

WIKI

  • - 제작 : 위키텍스트 방식을 통해 입력, 하이퍼링크, 각주, 서명, 인용구(웹,뉴스,저널,서적), 표, 이미지, 파일 업로드
  • - 소비 : 문서를 소비하는 동시에 자유롭게 편집할 수 있으며, 토론에 참여할 수 있다. 문서 내 하이퍼링크가 걸려있는 키워드는 새탭으 로 확인가능하며, 내용을 추가해야할 키워드는 빨간색으로 표기되어 한번에 인지할 수 있다.
  • - 소통(확장) : 끊임없는 자발적 편집을 통한 피드백 (최조 작성자가 소유권을 가지지 않는다.), 편집이력 공개를 통한 신뢰구축

SNS

  • - 제작 : 사진/동영상, 기분/활동, 체크인 장소, 친구태그하기, 스티커를 통해 다양한 자신의 상황과 비언어적인 부분을 표현한다. 비교적 단문 메시지를 생산
  • - 소비 : 텍스트, 이미지, 동영상, 링크 썸네일, 함께있는 사람, 장소, 좋아요/댓글/공유 횟수 등을 소비한다.
  • - 소통(확장) : 좋아요, 댓글달기, 공유하기를 통해 실시간으로 소통한다.

메일이나 게시판은 수년간 똑같은 방식으로 계속되고 있다. 위키를 제외한 소통의 대부분은 댓글과 공감(좋아요), 컨텐츠 공유하기와 같은 소극적인 행위로 이루어지고 있다. 양방향 소통이라고 하기엔 2%부족한 느낌이다.

1. 쌍방향같은 쌍방향아닌 에디터

콘텐츠를 제작, 소비, 소통하는 측면에서 살펴보면 생산자와 소비자 사이에 양방향 소통을 지향하고 활발하게 이루어지고 있는 것 같지만, 사실 여전히 유저들은 단방향 소통에 익숙하다. SNS 유저 중 대다수가 일방적으로 전달하거나 정보를 습득하는데 사용하고 있으며, ’90-9-1 인터넷 법칙’을 통해 알 수 있듯이 90%는 관망, 9%댓글, 1%가 콘텐츠를 창출한다.(SERI,2011)

2. INPUT = OUTPUT

현재 주요 에디터 서비스는 콘텐츠 작성화면과 결과화면이 언제나 같다. 내가 작성한만큼’만’ 정직하게 전달된다. 추가로 정보를 덧붙이고 싶은 경우는 ‘하이퍼링크’를 활용해 나의 역할을 대신한다.

3. 하이퍼링크, 사용자의 맥락을 끊고 있다?

인터넷 소비습관, 디바이스 사용, 인터페이스 등이 바뀌고 클릭하는 방식이 바뀌었음에도 하이퍼링크를 소비하는 방식은 30여 년이 지났지만 여전히 파란색 밑줄로 존재한다. 우리는 인터넷에서 컨텐츠를 소비할 때 하이퍼링크를 통해 새로운 페이지를 오가며 파편적인 정보를 습득하는데 매우 익숙하다. “이해하기 못하는 것을 클릭하기에 인생은 너무 짧다”고 말한 제이콥 닐슨의 말처럼 사용자에게 링크가 유용하기 위해서는 즉각적으로 인식 할 수 있어야 하며, 여러 페이지를 넘나듬으로 인해 사용자의 맥락을 끊는 문제를 개선해야한다.

발전하는 에디터

발전하는 에디터는 콘텐츠를 제작하는 것 뿐만 아니라 콘텐츠를 어떻게 소비하고 소통하고 확장할 것인지에 대해 고민한다. 온라인 글쓰기 도구의 새로운 표준을 제시하고 있는 ‘Medium’과 새로운 방식으로 통합된 작업환경을 제공하고 있는 ‘Notion’의 사례를 통해 향후 에디터의 방향성에 대해 논의해 보고자 한다.

Medium

미디엄이 글을쓰는 화면을 캔버스라고 부르며 깨끗함과 단순한 화면을 시장에 선보인 후, 온라인 글쓰기의 새로운 표준을 제시했다. 이후 다른 온라인 퍼블리싱 플랫폼들도 미디엄의 길을 따라가고 있다.

  1. 1. 매끄러운 글쓰기 글쓰기에 집중하기 : 미디엄은 글을 타이핑할 때는 하얀 지면만 보이고 편집을 위해 블락을 씌울 때만 연관 메뉴가 뜬다.
    또한 편집하는 화면과 결과화면이 거의 같다.
  2. 2. 적극적인 소비 그냥 읽지마라 : Private Notes기능을 통해 개인적인 주석을 달기에 매우 편리한 방식을 사용한다. 컨텐츠를 읽다 개인적인 메모가 필요하다고 생각하는 부분을 하이라이트/개인메모를 달아놓거나 트위터로 공유할 수 있다.
  3. 3. 소셜 상호작용

    하이라이트로 소통한다 : 하이라이트 기능도 하나의 피드백(Response)로 본다. 인기있는 하이라이트 부분에는 ‘Top highlight’(최고의 하이라이트) 라는 문구 부여함으로써 하나의 소통수단으로 제공한다.

    그 부분에 대해 할 말 있어 : 우리에게 익숙한 일반 게시글에서는 코멘트을 달 때 글 아래에 작성하지만, 미디엄은 특정 단어나 문장을 선택해서 코멘트 또는 메모를 작성하는데, 이것은 작성자에게 피드백으로 작용한다. 기존 댓글에 비해 훨씬 소통하기 편리한 구조다. 피드백을 받으면 작성자는 그 의견의 공개여부를 결정하고, 공개를 결정하면 이 글의 공헌자(Thanks to) 명단에 이름을 오른다. 공개된 코멘트에 대해서는 누구나 댓글을 달 수 있다.

    댓글이 하나의 글이 된다 : 댓글이 피드형태의 하나의 글로써 제공한다. 과거의 학자들이 편지를 주고 받듯이 의견을 상호 교환하며 그 flow를 추적할 수 있다. 또한 글과 다른 글 간의 관계, 더 나아가서 독자와 생산자 간의 커뮤니티 형성에 최적화되어있다.

Notion

“노트, 위키, 업무 테스크를 위한 통합된 협업의 작업환경을 만드는 것”이 Notion의 생각.
Task관리를 위해 트렐로를 사용하고, 문서를 작성하기위해 구글 독스를 열고 메일을 확인한다. 그런데 굳이 에디터가 따로 있을필요가 있을까? Notion은 하나의 공간 안에서 다양한 형태의 컨텐츠를 원하는 방식으로 편집할 수 있도록 한다. 또한 그것을 팀과 함께 공유 및 협업할 수 있는 환경을 제공한다.

1. 글쓰기에 집중하고, 스타일을 통일한다

이전에는 막강한 기능을 가진 에디터가 주목을 받았지만, 모바일 세상의 변화로 불필요한 기능이 사라지고 추세다. 모바일에서의 웹 페이지 접속이 데스크톱에서의 접속 비율을 넘어선 지금, 이런 변화에서 본다면 만능의 에디터보다 글쓰기에 집중할 수 있도록 기능을 단순하게 바꾼 웹 앱이 인기를 끌고 있는 것은 자연스러운 현상일 지도 모른다. 자주 쓰이지 않는 요소들은 산만한 것들은 최대한 숨기고, 사용자는 글의 내용을 작성하는데 집중할 수 있도록 간결한 글 속성편집UI를 제공한다.

2. 적극적으로 소비한다

컨텐츠 생산자와 소비자 사이에서 일어날 수 있는 소통방식이 기존에는 댓글과 공감 정도였다면, 발전된 형태의 에디터에서는 컨텐츠를 소비하면서 동시에 구체적인 영역에 피드백을 주고 결과에 반영하는 등 활발한 양방향 소통이 가능하도록 돕는 다양한 기능들이 등장하고 있다.

3. 하나로 모든 것을 해결한다

우리는 Task관리를 위해 트렐로를 사용하고, 메모를 작성하기위해 구글Keep을 사용한다. 또 문서를 작성하기위해 구글 독스를 열고 메일을 보내기위해 메일 에디터를 사용한다. 그런데 이 많은 작업을 위해 정말로 그 많은 에디터 툴이 필요한 것일까. 각각의 에디터는 특별히 다른 기능을 가지고 있는 걸까. 이런 질문에서 시작해 하나의 에디터로 30가지 이상의 다른 컨텐츠를 생성해 낼 수 있는 Notion이 올해 출시되었다.

4. 문서가 살아 움직인다

기존의 문서는 완성된 형태로 존재했고, 그 형태 그대로 소비해왔다. 하지만 상호작용과 협업의 중요성이 높아지면서 ‘죽어있는’ 문서가 아니라 완결되지 않은 상태의 문서가 창조적인 피드백을 통해 계속해서 발전된 형태로 ‘진화하는’ 문서를 만드는 형태로 에디터가 진화하고 있다.

향후 에디터의 방향성

앞서 발전된 형태의 에디터에서 발견한 시사점을 통해 향후 에디터가 어떤 방식으로 제공되어야 하는지 논의해보자.

1. 지식의 확장성

메일을 위키처럼 만들 수는 없을까? 하나의 지식정보를 완결된 컨텐츠가 아니라 계속해서 진화하는 베타적 성격의 컨텐츠로 바라보자. 그렇다면 과연 어떤 방식의 상호작용을 통해 지식을 확장할 수 있을까?

2. 정보의 활용성

1년이 지난 업무메일이나 3년 전 밤새 작성한 조사자료는 지금 현재의 나에게 유용한 정보로 존재하고있는가. 어제의 정보가 오늘의 나에게 의미를 줄 수 있는 방법은 무엇이 있을까? 계속해서 최신결과 값으로 업데이트되어 제공하는 방법은?

3. INPUT < OUTPUT

INPUT(작성화면)과 OUTPUT(결과화면)은 항상 같아야할까? 작성자가 모든 정보을 담지 않아도 에디터의 결과화면의 내용은 풍성하게 만들어서 제공해줄 수 있는 방법을 생각해볼 수 있다. 예를들어 컨텐츠를 소비할 때 컨텐츠에서 자주사용한 키워드에 대한 위키피디아 검색결과값을 제공해준다거나 일정을 입력하면 그 날의 예상날씨를 결과화면에서 제공해주는 등의 기능을 통해서 말이다.

4. 끊기지 않는 리딩

우리는 인터넷에서 컨텐츠를 소비할 때 하이퍼링크를 통해 새로운 페이지를 오가며 파편적인 정보를 습득하는데 매우 익숙하다. 여러 페이지를 넘나듬으로 인해 사용자의 맥락을 끊는 현상을 막고, 매끄럽게 글을 소비하도록 돕기위해서는 어떤 방법이 필요할까?