side project: 뜨개질 도안 문서 편집기 사이트
text knit typer 개발
https://text.knitshare.link 로 들어가 접속할 수 있다
뜨개 도안을 더 간편하게 작성할 수 있는 방법은 없을까 고민하다가 wysiwyg 방식을 사용하면 더 간편하게 작성할 수 있지 않을까 하는 아이디어에서 부터 시작해서 만들게 되었다.
아이디어는 1-2년 전 부터 있던 것을 조금씩 구체화해 온것인데 기분전환겸 빠르게 구현할 수 있을 것 같아서 구현하기 시작했다.
하지만 중간에 에디터 라이브러리 선택에서 문제가 생겨서 갈아엎느라고 조금 더 걸렸다.
가장 처음에 고민한것
wysiwyg을 구현할까 vs 라이브러리를 쓸까
이런 고민을 한 이유는 뜨개질 도안을 항상 줄 정렬로 이루어지지는 않아서 조금 더 자유도가 필요하다고 생각했기 때문이다.
그래서 생각한거는 wisiwyg을 canvas api로 구현한 후 이후에 줄 자유도를 넣을 수 있는 틈을 마련하는 것이었다.
결과적으로 정리하자면 wysiwyg랑 drawing tool 사이의 무언가를 만들어 보고 싶은 욕심이 있었다. 그런데 이렇게 하면 짧게 마무리가 안될거 같아서 일단 기존의 에디터 라이브러리를 사용하기로 정했다.
가장 큰 실수는 wysiwyg 에디터 라이브러리를 고르는데 처음에 draft.js를 사용한 것이다.
https://draftjs.org/
draft.js를 사용하게 된 이유는 나름 여러 가지를 찾아봤는데
- 일단 페이스북에서 만들어진 라이브러리에 대한 호감도가 높았기 때문이다. (이미 여기서 부터 문제..)
- draft.js slate.js quill.js를 둘러 보았는데 이 중에서 가장 문서가 잘 되어 있다고 느꼈기 때문이다.
- 앞의 세가지 라이브러리를 둘러본 이유는 유명한 위지윅 에디터를 챗지피티로 찾았기 때문. 챗 지피티에 익숙해져서 따로 검색하지 않았다.(이것도 문제..)
- 나한테 필요한 기능, 지원 기능 등등을 고려하여 비교하며 최종적으로 draft.js로 결정
사실 큰 문제 없을 것이라고 생각해서 별로 세심하게 들여다보지는 않았던거 같기도 하다
그런데 완성을 하자 문제가 발생했다
draft.js는 모바일에서 한글 입력시 글이 밀리는 에러가 난다.
한글 입력 시 씹히거나 줄바꿈이 취소되는 문제였다. 한글이 자음 모음이 순차적으로 결합이 되기 때문에 생기는 문제 일까? 아무튼 한글에서만 생기는 문제인 듯하다. 테스트 용으로 배포까지 하고 핸드폰으로 확인해 보던중 뒤늦게 이런 문제가 생긴다는 것을 발견하게 된다. 다시 찾아보니 draftjs 측에서도 알고 있는 에러고 딱히 고쳐질 것 같지 않았다. 그래서 바로 다른 라이브러리를 찾아서 다시 만들게 되었다.
한국인이라면 draft.js는 안 쓰는 것이 맞다
다시 조사를 했고 toast editor(네이버서 개발)를 보다가(toast를 고려하지 않은 이유는 근본적으로 마크다운 에디터였기 때문이다 내가 만드는 것은 마크다운이 아니었고 방향성이 다르다고 생각했다) prose mirror 라이브러리라는 것을 찾게 되었다. 좀더 low 해 보이고 자유도가 높아 보여서 이걸 쓰고 싶었다. 나중에 내가 만들고 싶은 건 더 만들려면 자유도를 고려해야 했기 때문이다. 그런데 prose mirror 구조를 구경하다가 라이브러리 게시판에 react가 아니라 js라서 이걸 react로 사용하는데에는 좀 더 내공이 필요하다는 식으로 누가 조언해놔서 포기했다.
prose mirror기반으로 만들어진 wrapper인 tiptap 라이브러리가 있었고 이걸 기반으로 만들기로 했다. 일단 가장 큰 장점은 라이브러리가 정말 정말 잘 되어 있다. 예시가 많고 prose mirror 구조를 보다 와서 그런지 알아듣기 쉬웠다.
prose mirror 요약
tree구조로 데이터를 관리함.
문서 요소 하나하나가 다 노드.
문서노드(가장상위), 블록노드(단락,리스트) 인라인 노드(텍스트(마크로 텍스트 속성을 줌), 링크)
스키마는 문서 요소끼리의 상호작용 법칙, 문서의 구조, 마크구칙정의
트랜잭션은 문서수정의 단위
플러그인 은 입력처리 액션추적 랜더링 등등에 관여하여 기능추가를 할 수 있게 지원
커맨드 는 동작 정의 함수
키맵은 특정 입력의 커맨드 매핑
tiptap
빠른 완성을 위해서 예제를 기반으로 수정하는 방식으로 했고 한번 다른걸로 했어서 금방 완성함.
폰트 제작
폰트를 직접 만들어서 사용했다. figma로 뜨개질 기호를 그리고 fontello를 활용해서 폰트로 변환했다.
fontello
폰텔로는 폰트 생성 웹 도구인데 svg를 폰트로 변환할 수 있다.
svg는 html처럼 생긴 벡터 기판 이미지인데 이걸로 폰트로 만들고 매핑해준다.
근데 svg에 여러 속성이 있는데 fontello가 전부를 인식하지는 못하는 것 같았다.
그래서 도넛 모양(두 도형을 subtract한 형태)라던가 이런게 인식이 안되서 그냥 동그라미가 나온다거나 겹치는 부분이 subtract된다 던가 하는 문제가 생겼다.
폰트 폴백으로 아이콘 폰트 적용
유니코드
utf 폰트 자유영역 설정하기
U+E000 ~ U+F8FF: 이 영역은 유니코드의 개인 사용자 영역(Private Use Area, PUA)으로, 아이콘 폰트에서 많이 쓴다. 즉, 일반 텍스트나 기호와 겹치지 않고 아이콘을 저장할 수 있는 안전한 영역. 여기에 아이콘을 매핑하면 된다. 좀 적은거 아닌가?