웹앱 에디터 개발, 예상치 못한 문제들을 해결하며 사용자 경험을 개선한 여정
by DD
7개월 전
조회수 12
웹앱 환경에서 에디터 개발의 기술적 어려움과 사용자 경험 개선의 필요성을 강조함
ProseMirror를 기반으로 블록 구조 설계 및 서버 데이터 저장 방식 결정
키보드 액션 및 Drag & Drop 시 발생하는 문제 해결을 위한 기술적 구현 과정 설명
블록 기반 에디터 아키텍처 설계
에디터는 블록 단위로 콘텐츠를 관리하며, 각 블록은 type과 데이터를 가진다. JSON 저장 방식의 단점을 보완하기 위해 필수 데이터만 추출하여 서버에 저장하고, 에디터에서 재구성하는 방식을 채택했다. 따라서 확장성 확보와 데이터 관리 유연성을 동시에 달성했다.
ProseMirror vs Tiptap: 기술 스택 비교
ProseMirror는 확장성이 뛰어나지만, 초기 진입 장벽이 높다. Tiptap은 빠른 개발이 가능하지만, 디버깅 복잡도와 패키지 의존성 문제가 있다. 따라서 장기적인 유지보수를 고려하여 ProseMirror를 선택하고, 초기 진입 장벽을 최소화하는 방향으로 개발했다.
웹앱 에디터 개발의 주요 난관과 해결
키보드 액션 시 의도치 않은 콘텐츠 삭제 문제를 해결하기 위해 ProseMirror 내부 동작을 이해하고, 커서 위치에 따른 예외 처리를 추가했다. Drag & Drop 시 스크롤 문제를 해결하기 위해 상대적인 스크롤 방식 대신 절대적인 스크롤(scrollTop)을 사용했다. 결과적으로 사용자 경험 개선을 이끌었다.
