10년 된 에디터 코어를 Froala에서 Lexical로 교체하기

포스타입이 연간 100만 편 이상의 글이 게시되는 WYSIWYG 에디터를 10년 된 Froala에서 Meta의 Lexical로 교체한 과정을 다룬다. 프론트엔드 3명이 6주 만에 완료했으며, AI가 구현을 담당하고 팀은 검증에만 집중하는 분업 방식이 핵심 전략이었다.

핵심 포인트

Froala는 별도 상태 모델 없이 HTML을 직접 다루는 구조라 인라인 댓글 위치 어긋남 같은 문제가 구조적으로 해결 불가했다.
Lexical은 노드 트리 기반 상태 모델로 댓글을 노드에 연결하는 방식을 지원하고, Meta가 직접 관리해 React 생태계와의 장기 호환성이 보장된다.
AI에 설계·구현을 맡기고 팀은 검증에만 집중해 Lexical의 학습곡선이라는 비용을 우회했다.
정답지(기존 Froala 에디터)가 있었고, 각 기능이 낮은 결합도로 독립돼 있어 AI 위임과 단위 검증이 가능했다.
프론트엔드 3명의 Compound Engineering(그룹 코드 리뷰 + 문서화 + AI 전달)으로 6주 안에 완료했다.

상세 정리

문제 정의: Froala는 에디터 상태 모델 없이 HTML을 직접 다룬다. 인라인 댓글 기능에서 글 편집 시 댓글 위치가 에디터 상태와 독립적으로 움직이는 문제가 구조적 한계였다.
Lexical 선택 이유: 노드 트리 기반 상태 모델로 댓글을 노드에 연결 가능, 기존 RDB 저장 구조와 호환, 플러그인·노드 단위 기능 구성, Meta 직접 관리로 React 장기 호환 보장.
범위 제한: 이번 목표를 엔진 교체로만 한정. 저장 포맷과 백엔드 인터페이스는 건드리지 않아 백엔드 투입 없이 프론트엔드만으로 완료.
점진적 통합: Froala 플러그인을 Lexical 플러그인·노드에 하나씩 대응시켜 검증하는 방식으로 진행했다.
AI 분업 전략: Lexical의 학습곡선(노드 트랜스폼, 명령 기반 아키텍처, Reconciliation)을 이해 대신 검증으로 대체. AI가 구현하고 팀은 검증에만 집중.
검증 가능 조건 1 — 정답지: 기존 Froala 에디터를 정답 역할로 활용. 같은 입력에 Froala와 같은 결과가 나오는지 기준으로 두 에디터를 나란히 띄워 대조 QA.
검증 가능 조건 2 — 낮은 결합도: 이미지 노드는 목록 기능과 무관, 버튼 노드는 인용 기능에 영향 없는 독립 구조 덕분에 단위별 검증 가능, 오류 전파 없음.
검증 가능 조건 3 — 팀 협업: 프론트엔드 3명의 그룹 코드 리뷰, 매일 스탠드업 공유, 문제 해결 과정 문서화 후 AI에 전달. 검증 과정에서 자연스럽게 Lexical을 습득했다.
1년 전 중단 이유: AI 모델 정확도와 에이전트 코딩 도구 없이는 AI가 짠 코드를 사람이 일일이 다시 봐야 해 검증 집중 방식 자체가 성립하지 않았다.

왜 읽나대규모 에디터·리치텍스트 컴포넌트 교체를 계획 중인 프론트엔드 팀, 특히 AI 활용 대규모 리팩터링에서 구현/검증 분업 방식을 실제로 적용한 사례가 필요한 엔지니어에게 유용하다.

포스타입 블로그

원문은 여기서 이어서 읽을 수 있어요

원문 읽기

읽음 (0)

·takedown 요청

10년 된 에디터 코어를 Froala에서 Lexical로 교체하기

이 글과 비슷한

토스는 어떻게 광고 속에 게임을 넣었을까

RxJS로 우아하게 사이드 이펙트 통제하기

항공 프론트엔드 구축기 (7/10): 창구를 하나만 두었습니다