중요한 건 꺾이지 않는 마음: 스마트에디터의 도전
DEVIEW 2023 네이버 · YouTube
AI 핵심 요약
스마트에디터는 브라우저별 contenteditable 동작 차이와 멀티 디바이스 대응, 선택 영역·다국어 입력·붙여넣기 문제를 겪으며 문서 모델링과 가상 커서, 입력 버퍼를 거쳐 3세대 에디터를 개발했다. 3세대에서는 React·MobX의 DOM 동기화와 contenteditable의 직접 변경이 충돌하는 문제를 업스트림·다운스트림 흐름으로 나눠 제어했고, 기존 편집 기능을 유지하면서 브라우저의 입력 처리를 활용했다. 성능과 코드 복잡도를 개선하기 위해 부분 스냅샷 기반 실행 취소·다시 실행, 동적 크기 청크, 순차 실행·중단·실패를 다루는 액션 구조를 도입했으며, UI 커스텀에는 Dart Sass 모듈과 CSS 변수를 적용했다. 여러 세대의 시행착오를 통해 에디터의 사용성과 성능을 개선하고, 동시 편집에는 CRDT 기반 프로젝트를 추진하고 있다는 점을 공유했다.
- contenteditable을 React·MobX와 함께 쓸 때는 DOM 변경을 스토어로 올리는 업스트림과 스토어 변경을 DOM에 내리는 다운스트림을 분리해 동시 갱신을 막는다.
- 전체 문서 스냅샷 대신 변경된 부분만 기록하면 실행 취소·다시 실행 때 불필요한 컴포넌트 렌더링을 줄일 수 있다.
- 정적 청크는 항목 삽입·삭제 때 뒤쪽 청크까지 밀어내는 문제가 있으므로, 청크 크기를 범위로 두고 동적으로 나누거나 합치는 방식을 고려한다.
- 동기·비동기 처리, 중단, 실패 처리를 액션 블록과 데코레이터로 분리하면 복잡한 흐름을 조합 가능한 단위로 관리할 수 있다.
- Dart Sass 모듈과 CSS 변수를 활용하면 스타일의 참조 관계를 명확히 하고 서비스별 테마·다크 모드 커스텀을 단순화할 수 있다.
소개
[DEVIEW 2023] * 발표자 : 김성원, 이진(NAVER ETECH) * 발표제목 : 중요한 건 꺾이지 않는 마음: 스마트에디터의 도전 * DEVIEW 2023 바로가기: https://deview.kr/2023 #DEVIEW #DEVIEW2023 #데뷰 #데뷰2023
비슷한 학습 자료
컨퍼런스 DEVIEW 2023
UI 빌더를 지탱하는 레고 블록 같은 아키텍처 만들기
컨퍼런스 DEVIEW 2023
SSR환경에서의 Micro-Frontend 구현과 퍼포먼스 향상을 위한 캐시전략
컨퍼런스 DEVIEW 2023
WebtoonMe 개발기: 내가 웹툰 안으로 들어가면 여신강림 임주경 보다 이쁠까 안이쁠까?
컨퍼런스 DEVIEW 2023
사실적인 AR 오브젝트 렌더링을 위한 도전 : AR Viewer 개발기
컨퍼런스 DEVIEW 2023
싸늘하다, 메신저에 경보가 날아와 꽂힌다 - 네이버 검색 SRE 시스템 개선기
컨퍼런스 DEVIEW 2023