조 은, Eun Cho Front-End Lead at ZET Team - Dable [email protected]
옳은 결정이란 미래가 판단하기 때문에 현재 기술을 고를 때에도 철학이 있어야 합니다. Dable ZET 팀은 여러 국가 [1]를 대상으로 하고 있으며 한자, 한글, 히라가나, 가타카나 등 완성형 문자를 사용하는 국가에 중점을 두고 있습니다.
글자를 화면에 보여주기 위해서는 복잡한 과정을 거쳐야 하는데, 알파벳이나 숫자같이 키보드에 입력한 대로 바로 화면에 노출되는 글자에 비해서 완성형 문자들은 조합 과정을 거쳐야 하는 경우가 많기 때문에 입력 과정에서 발생하는 문제가 알파벳이나 숫자보다 많습니다.
기존에 개발된 편집기를 활용하여 서비스를 하는 방법도 있겠지만, ZET 팀은 빠르게 가는 가장 현명한 방법은 처음부터 제대로 하는 것이라 생각하고 있습니다. 단순히 편집기의 개발을 넘어 편집기를 만들기 위한 다양한 지식을 내포하는 것도 제품을 만드는 과정에서 중요한 과정입니다.
그리하여 글자 편집을 위한 다양한 경험을 내재화하여 기술로 쌓고, 그 기술을 바탕으로 더 다양한 시도를 할 수 있는 환경을 만들기 위해 ZET 팀은 조금 느리더라도 바퀴를 다시 발명하기로 결정했습니다.
WHATWG HTML 표준의 User Interaction 챕터를 기준으로 하였을 때, 현재 웹에서 텍스트를 입력하기 위해 사용할 수 있는 요소는 크게 네 가지입니다.
input 요소textarea 요소contenteditable 속성을 적용한 요소designmode 속성을 적용한 문서ZET 팀에서 개발하는 편집기는 WYSIWYG 에디터 [2]로 유저가 적용한 스타일을 화면에서 바로 확인할 수 있어야 하므로 글자에 스타일을 적용할 수 없는 Input 요소와 textarea 요소는 사용이 어렵다고 판단하였습니다. 만약 markdown 문법을 기반으로 편집기를 만들고 있다면 textarea 요소를 더 긍정적으로 검토했으리라 생각합니다.
이제 남은 건 designmode 와 contenteditable 중 하나를 선택하는 일인데, 문서 전체를 편집 영역으로 바꾸는 designmode 속성을 사용하게 되면 편집기 인터페이스 또한 편집 대상에 들어가기 때문에 사용이 어렵다고 판단하여 contenteditable을 채택하게 되었습니다.
<article contenteditable>
Text Something
</article>
해당 요소 내부에 존재하는 요소는 모두 편집 가능한 상태가 되므로 요구사항에 따라서 해당 요소 내부를 제어해야 합니다.
HTML에서 이미지를 넣을 때에는 <img> 요소나 <picture> 요소를 활용할 수 있습니다. 이미지를 삽입할 때에는 이미지 데이터를 불러와서 삽입해야 하며, 이를 위해서 여러가지 선택지를 택할 수 있습니다.