<aside> 📑

</aside>

이 글은 contentEditable 기반 커스텀 에디터가 키보드 입력, 커서 이동, 한글 IME, 소켓 이벤트, 리뷰(댓글) 등 모든 동작을 어떻게 처리하는지 흐름 중심으로 정리한 기술 문서입니다.

0. Narratix — 서비스 소개

Narratix는 취준생이 흩어진 경험을 구조화하고, 자기소개서를 작성·관리하며, 멘토와 실시간으로 첨삭을 주고받을 수 있는 협업 플랫폼입니다.

핵심 기능

• 경험 아카이빙: 업로드한 자료를 기업/문항 단위로 구조화해 재활용
• 문항 중심 편집: 자기소개서를 문항 단위로 작성하고 관리
• 실시간 협업 첨삭: 멘토(Reviewer)가 특정 문장에 리뷰를 달고, 작성자(Writer)가 실시간으로 확인하며 수정

Writer와 Reviewer

Narratix의 에디터에는 두 가지 역할이 존재합니다.

• Writer: 자기소개서를 작성하는 사람. 본문 텍스트를 직접 편집할 수 있고, Reviewer의 모든 첨삭 댓글을 볼 수 있습니다.
• Reviewer: 첨삭을 제공하는 멘토. 자신이 작성한 첨삭 댓글만 볼 수 있고, 특정 문장에 원문·수정 제안·코멘트를 남길 수 있습니다.

동시에 접속하는 사용자는 Writer 1명과 Reviewer 1명으로 제한됩니다.

왜 실시간 협업이 복잡한가

일반적인 채팅이나 댓글과 달리, Narratix의 첨삭은 특정 텍스트 구간에 리뷰가 달리는 구조입니다. Writer가 본문을 수정하면 리뷰가 달린 문장의 위치가 바뀌고, 서버는 이 위치를 항상 정확하게 추적해야 합니다. 이 요구사항이 에디터 설계 전반에 영향을 미칩니다.