기록을 더 편하게

글쓰기에서 몰입할 수 있는 환경은 무엇일까? 처음 Sprinters 기록 작성 페이지를 만들 때는 최소한의 정보만 노출을 하려고 노력했었다. 그게 기록에 온전히 집중을 할 수 있는 환경이라 생각했다.

그런데 계속 사용을 하다 보니까, 꼭 그런 것 같지만은 않더라. 어느 정도 도움을 주는 요소들이 필요하다는 생각이 들어서 조금씩 추가하기 시작했다. 그 과정에서 데스크톱 화면과 태블릿/모바일의 레이아웃을 다르게 가져가보면 어떨까라는 생각이 들었다.

보통 데스크톱이 태블릿/모바일보다 더 와이드한 가로 비율을 쓰는 경우가 많다. 그래서 데스크톱의 양옆 영역을 적극적으로 활용해보면 좋을 것 같았다. 따라서, 바텀에 있던 요소들을 양쪽의 사이드 영역에 배치했다. 왼쪽에는 사이드 패널 형식으로 만들어서 더 많은 정보들을 담을 수 있었고, 보기에도 더 편하다는 생각이 들었다.

첫 화면에서는 아이콘 레일 형태로 UI가 표시 되고, 각 아이콘을 클릭하면 사이드 패널이 생긴다. 순서대로 토픽, 목차, 에디터 가이드에 대한 내용이 담겨있다. 이제 작성 중에도 목차를 확인할 수 있게 됐다.

만약 작성 내용이 많아지면, 사이드 패널에서 목차 항목을 선택해 해당 영역으로 바로 이동할 수도 있다. 토픽의 경우, 추가한 항목들의 표시 강도가 약했었다. 하지만 지금은 좀 더 편하게 확인할 수 있다.

마지막은 에디터 가이드다. 원래는 바텀에서 단축키를 알려주는 툴팁 정도의 UI였는데, 좀 더 적극적인 메뉴로 활용을 했다. 해당 패널에는 플러스 버튼 메뉴, 키보드 단축키, 에디터 팁에 대한 내용이 담겨있다.

그리고 특히, 개인적으로 글자 수 표시 위치가 가장 마음에 들었다. 눈에 잘 띄지 않으면서도, 확인하고 싶을 때 자연스럽게 확인이 가능하다. 불편하지 않고, 부담스럽지 않다.

에디터 팁 첫 번째 항목에도 있는 내용인데, 이제 새 빈 문단에서 / 키를 누르면 플러스 버튼의 메뉴가 펼쳐진다. 그 상태에서 바로 키보드로 메뉴 조작이 가능하다. 이것도 직접 사용해보니 너무 편하고 추가하길 잘했다는 생각이 들었다. 기존에는 선택 버블 메뉴에서만 큰 제목, 작은 제목을 추가할 수 있었다. 그런데 이제는 플러스 메뉴에서도 큰 제목, 작은 제목을 추가할 수 있게 만들었다.

소소한 수정으로는 토픽 추가/제거에 대한 자동 저장 로직을 수정했다. 토픽 추가 시에는 변화를 감지하고 자동 저장을 하는데, 토픽 제거 시에는 자동 저장이 되지 않았었다. 이 부분을 수정했다.