[Rectify] 에디터 Beta v0.4 - 메뉴바, 반응형

Beta v0.3

업데이트 내용

1. 메뉴바 추가

옵시디언 같은 메뉴바가 없는 깔끔한 에디터를 만들 예정이었지만 사용성이 좋지 않은 것 같아서 결국 메뉴바를 추가했다. 옵시디언에서는 마크다운 에디팅이 지원되기 때문에 메뉴바가 없어도 에디팅이 수월한데, WYSIWYG 에디터에서는 아무래도 키보드만으로는 모든 기능을 수행하기가 어렵다.

 

위치가 고정된 메뉴바 대신 노션처럼 마우스 커서에 따라 움직이는 버블 메뉴바를 추가했다. 기존에 콘텍스트 메뉴에 몰아두었던 기능들을 메뉴바에 분배하니 사용성이 조금 나아진 듯하다. 이미지, 차트 추가 등 커스텀 요소와 관련 있는 기능들은 콘텍스트 메뉴에 그대로 남겨두었고, 스타일 기능(볼드체, 기울임, 색상 등)들을 메뉴바로 옮겼다.

 

 

2. 반응형

기존에 막아두었던 작은 화면의 레이아웃을 추가했다. 기준은 768px로 잡았다.

에디터는 클릭, 터치, 스크롤, 가상키보드, 모바일 뒤로 가기 등 기기에 따라 고려해야 할 사항이 많다.

 

새로 추가한 메뉴바를 작은 화면에서 출력하는 과정이 쉽지 않다. 메뉴바를 아래 사진의 노션 모바일앱처럼 가상키보드 바로 위에 두려고 노력했는데

모바일 노션의 메뉴바

 

 

 

 

기기별, 브라우저별로 가상 키보드의 등장에 따른 리사이징 이벤트의 트리거 기준을 정리하는 게 쉽지 않았다. 정확히 정리가 되질 않아서 임시로 버블메뉴와 상단바로 나누어서 구현했다. 버블메뉴는 큰 화면에서의 메뉴와 동일하고, 상단바는 큰 화면에서의 콘텍스트 메뉴를 대체한다.

상단 메뉴바