바닥부터 시작하는 웹앱 에디터 개발기

간단 소개

당근모임 웹앱 환경에 에디터를 개발하며 겪은 기술적 도전과 해결 과정을 공유하고, 사용자 경험 개선을 위한 노력을 강조합니다.

AI Summary

웹앱 에디터 개발 배경
- 당근모임 서비스에서 사용자들은 기존 게시글 작성 방식의 제한(이미지/영상 자유 배치 불가)으로 불편함을 느낌
- 사용자들은 이미지 자유 배치, 리치 텍스트 기능 등을 원했고, 정보성 글쓰기 지원 위해 에디터 개발 결정
에디터 구조 및 기술 구현
- 블록 단위 콘텐츠 관리 방식으로 이미지와 텍스트 자유로운 배치 가능
- 서버에는 필수 데이터만 저장하고, 에디터에서 블록 구조 재구성하는 방식으로 확장성 확보
- ProseMirror 라이브러리 직접 활용, 초기 진입 장벽 최소화 및 확장성 유지
개발 과정의 주요 이슈 및 해결
- 웹앱 환경에서 키보드 액션으로 인한 의도치 않은 콘텐츠 삭제 방지
- 드래그 앤 드롭 시 스크롤 문제 해결 위해 스크롤 보정 로직 추가 및 스크롤 방식 변경