[Rectify] 에디터 Beta v0.1 - 컨텍스트 메뉴, shortcutkey, 커스텀 노드

Beta v0.1

에디터만 베타 테스트 배포하기.
editor, graph view, calendar는 각각 패키지 출시를 꿈꾸며 독립적인 모듈로 제작할 예정이다.
 

1. top menu bar

노션과 옵시디언에는 티스토리 에디터와는 다르게 상단에 메뉴바가 없다. 내 수준에서는 어떤 이유인지 잘 모르겠지만 세계적인 UI/UX 전문가들의 화면이니 나도 따라 하기로 했다.
 
메뉴바 없이 버튼들을 어떻게 배치해야 되나 고민이 많았다. 찾기 좋은 곳에 몰아넣으면 그 많은 버튼 안에서 특정 버튼을 또 찾아야 한다는 불편함이 있었고, 적절히 공간을 나누자니 필요에 의한 분류가 아닌 디자인을 위한 분류가 되는 듯한 느낌이 들었다.
 
명확한 방향성은 아직 정하지 못했지만 우선 볼드체나 밑줄, 링크 등 기본적인 기능들은 콘텍스트 메뉴에 담았고(옵시디언), 테이블 셀의 조작이나 커스텀 노드(링크, 이미지 등)의 조작등에 필요한 기능은 마우스 클릭이나 hover에 의한 팝업창에 담았다(노션).
 
이렇게 구현했을 때 장점이라면 사용자의 시선을 최대한 콘텐츠 안으로 집중시킬 수 있다는 점이다. 특정 영역을 선택한 후 다시 상단의 메뉴바로 시선이 가지 않고 그 자리에서 바로 해결이 가능하기 때문이다. 그리고 사용자들에게는 바로가기 키(shortcutkey)의 사용을 유도하는 장점도 있는 것 같다.
 

컨텍스트 메뉴

 
 
 

커스텀노드 팝업

 

2. shortcutkey

에디터를 아무리 오래 써도 단축키를 안 쓰는 사람은 안 쓰는 것 같다. 나도 1시간만 투자해서 평소에 코드 편집기에서 안 쓰던  다양한 단축키를 한번 숙지해 놓으면 생산성이 많이 향상될 텐데, 이 한 시간을 쓰는 게 참 귀찮다.
 
단축키의 사용을 유도하기 위해 에디터 상단에 단축키를 노출시켰다. 의도는 괜찮은 것 같은데, 공간을 너무 크게 차지한다는 단점이 있다. 출시 때까지 이 문제를 해결할 UI가 떠오르지 않는다면 에디터 바깥쪽으로 치울 예정이다.
 
현재까지는 Ctrl + B (볼드체), Ctrl + I (기울임) 등 기본적인 단축키들을 구현했고, 커스텀 노드가 많아지면 렉티파이만의 단축키들도 추가할 예정이다.
 

단축키

 

3. 커스텀 노드

현재까지 링크와 버블메뉴, 이미지 컴포넌트만 추가한 상태이다. 에디터에서는 기본적으로 쓰이는 기능들만 꾸준히 추가하고, 렉티파이에서 에디터를 확장하여 PARA를 위한 커스텀노드들을 추가할 예정이다.

링크

 
 
 

버블메뉴

 
 
 

이미지

 

4. 성능

아직 복잡한 기능을 넣지 않았지만 현재까지는 만족스럽다. ProseMirror의 렌더링 플로우를 해치거나, 부담스러운 수준의 react 리랜더링은 없다. 현재로서 가장 신경 써야 하는 부분은 나중에 콜라보레이팅 기능을 추가할 때 에디터 내용의 실시간 반영을 어떤 방식으로 하느냐 하는 것이다. y.js의 스키마를 그대로 따르자니, 데이터베이스의 스키마를 그에 맞춰야 되어서 힘들고, 데이터베이스의 스키마를 기준으로 콜라보레이팅을 구현하자니, 에디터 콘텐츠의 스키마 구조를 건드려야 된다. 이 부분은 많은 고민이 필요할 것 같다.