우선 다음의 동영상부터 먼저 보시겠습니다.
위 동영상은 모바일 폰에서 Google Docs의 문서를 편집하는 기능에 대한 것입니다. 동영상을 본 느낌은 어떠신가요?
웹에서의 WYSIWYG 에디터에 대한 이야기를 하려면 먼저 에디터가 기본적으로 동작하는 방식에 대해 이해할 필요가 있습니다. 대부분의 리치 웹 에디터는 브라우저에서 제공하는 contenteditable (IE인 경우 designmode를 사용하는 경우도 있음) 프로퍼티를 설정하여 브라우저에서 특정 엘리먼트를 수정할 수 있는 상태로 만든 후 여기에 JavaScript등을 이용하여 고급 기능을 제공하는 형태로 만들어져 있습니다. contenteditable을 설정하더라도 기본적으로 제공해주는 기능에는 한계가 있기 때문에 이런 한계를 뛰어넘고자 JavaScript를 사용하는 것입니다. FCKEditor나 TinyMCE, SmartEditor basic도 모두 비슷한 방식을 사용하고 있습니다.
모바일 브라우저(정확히는 모바일 사파리입니다. 안드로이드에서는 테스트해보지 못했습니다.)에서는 이런 방법으로 리치 웹 에디터를 구현할 수 없습니다. contenteditable 속성을 사용하는 경우 브라우저에서 적절하게 표현해주지 못하기 때문입니다. 캐럿이 표시되지 않아 현재 위치를 사용자가 확인할 수 없으며 가상 키보드가 적절하게 표현되지 못하는 문제도 있습니다. 그래서 결국 input box나 textarea가 현재 모바일 브라우저상에서 사용자로부터 텍스트를 입력 받을 때 사용할 수 있는 방법입니다.
그런데 Google Docs의 경우 조금 다르게 구현되어 있습니다. 지난 4월 12일. Google에서는 새로운 Docs를 출시하였습니다. 우선 소개 동영상을 보시죠.
위 동영상에서 보는 편집 기능은 contenteditable을 사용하여 만든 경우 구현이 매우 어렵습니다. (사실 불가능할 수도 있지만 시도해보지 않았으니 매우 어렵다로 표현합니다.) 특히 동시 편집 기능은 거의 불가능에 가깝습니다. 실제로 옛 버전의 Google Docs의 경우에도 실시간으로 협업 편집이 불가능했습니다. 구글이 취한 방법은 바로 contenteditable을 사용하지 않는 것입니다. 그리고 일반적인 워드프로세서와 유사하게 사용자가 글자를 입력할 경우 글자의 크기 등을 계산하여 HTML 코드를 만든 후 그 결과를 화면에 표시한 것입니다. 다시 말하면 사용자가 입력할 수 있는 화면으로 생각하고 입력을 하고 있지만 실제로는 사용자가 입력할 수 있는 화면처럼 여기게끔 화면을 구성하고 실제 입력은 브라우저의 도움을 받지 않고 구현한 것입니다. 도움이라고 표현했지만 실제로는 브라우저의 방해를 받지 않게 된 것에 가깝습니다. (물론 이로 인해 전체적인 동작 속도가 느려진 면이 있지만 지속적인 최적화와 브라우저의 발전으로 빠른 시간 내에 해결이 될 것으로 예상됩니다.)
이렇게 구현된 Google Docs의 개념을 모바일에 적용한 것으로 보입니다. 다만 가상 키보드가 출력되어야 하므로 사용자가 입력할 때는 input box를 노출시킨 것으로 생각됩니다. 점점 더 발전하면 input box를 사용자가 볼 수 없는 곳에 위치시킨 채 입력을 받고 화면에는 input box를 노출시키지 않도록 변경될 것입니다. 그렇게 된다면 웹에서의 Google Docs와의 차이점은 더 구별할 수 없을 것입니다. 아직 구현되지 않았다는 것은 구현에 시간이 걸리거나 구현이 불가능하거나 둘 중에 하나일 듯 합니다.
하지만 첫 번째 동영상만 봐서는 아직 리치 모바일 웹 에디터라고 부르기에 부족한 점이 있습니다. 스타일을 지정할 수 없다는 점이 가장 큽니다. 하지만 그 가능성은 엿볼 수 있습니다. 37초 경에 나오는 부분을 유심히 보기 바랍니다. 점목록 중 하나를 일단 클릭한 후 엔터를 입력하여 다음 줄로 넘어갑니다. 그러면 동일한 스타일(점목록)이 유지됩니다. 일반적인 웹 에디터에서의 경험과 동일합니다. 어느 정도 리치 웹 에디터처럼 동작하고 있다는 것이라 볼 수 있습니다. 그렇다면 남은 것은? 다양한 기능을 추가하고 모바일 화면에 적절한 UI를 추가하여 원활한 편집이 되도록 하는 것입니다.
하지만 아직 남은 문제가 있습니다. 리치 웹 에디터의 기본적인 동작 방식은 크게 두 가지로 나뉩니다. 하나는 스타일을 설정하고 글을 입력하는 방식입니다. 다른 하나는 글을 입력하고 특정한 영역의 글을 선택하여 스타일을 설정하는 방식입니다. 두 가지 방식이 모두 사용되나 대체로 뒤쪽의 방식을 많이 사용합니다. 글을 쓰는 작업과 스타일을 적용하는 작업을 명확하게 분리할 수 있기 때문입니다. 그런데 모바일에서는 특정한 영역을 선택하는 일이 쉽지 않습니다. 일단 기기의 크기가 작기도 하거니와 PC의 마우스처럼 세밀하게 포인터를 움직일 수도 없기 때문입니다. 이를 보완하는 방법으로 iOS에서의 선택 영역을 지정하는 방법이 나왔습니다만 빈번하게 영역을 선택해야 하는 경우 이 방법도 편리하기만 한 방법은 아닙니다. 바로 이 부분을 어떻게 해결하느냐가 리치 모바일 웹 에디터에서 해결해야 할 핵심 문제 중 하나가 아닌가 하는 생각입니다.
Google Docs가 앞으로 어떻게 발전할지 - 이미 어지간한 리치 웹 에디터는 넘볼 수 없는 영역에 가있기는 합니다만 - 매우 기대됩니다.
반응형
