10년 된 에디터 코어를 Froala에서 Lexical로 교체하기
Summary
10년 묵은 에디터를 단 6주 만에? 포스타입이 AI와 함께 Lexical로 갈아탄 비결
높은 러닝 커브와 막대한 마이그레이션 비용을 '이해'가 아닌 '검증' 중심의 AI 협업으로 돌파한 프론트엔드 팀의 여정
포스타입 프론트엔드 팀이 기존 Froala 에디터의 구조적 한계를 극복하기 위해 Meta의 신규 에디터 프레임워크인 Lexical로 마이그레이션한 과정을 소개합니다. 거대한 스택 변경의 리스크를 줄이기 위해 아키텍처 범위를 한정하고, AI 에이전트를 개발 파트너로 삼아 '구현'은 AI에 맡기고 개발자는 '검증'에만 집중하는 새로운 개발 패러다임을 제시합니다.
- 01HTML 직접 제어 방식의 Froala에서 노드 트리 상태 기반의 Lexical로 전환하여 복잡한 인라인 댓글 기능 구현 기반 마련
- 02기존 데이터 포맷과 백엔드 인터페이스를 유지하여 프론트엔드 작업만으로 엔진 교체 범위를 축소하여 리스크 관리
- 03독립적인 플러그인/노드 단위로 마이그레이션 단위를 쪼개어 대규모 변경을 안전하게 점진적 통합
- 04Claude Code 등 최신 AI 에이전트를 적극 활용하여 구현 비용을 대폭 낮추고 개발팀은 검증(QA)에 화력 집중
- 053인의 프론트엔드 개발자가 그룹 코드 리뷰와 매일 스탠드업을 통해 AI 생성 코드를 함께 검증하는 'Compound Engineering' 프로세스 구축
RECOMMENDATION
대규모 레거시 교체 작업에서 러닝 커브와 인력 부족으로 고민하고 있다면, 기존 시스템을 '정답지'로 삼고 AI 에이전트에게 구현을 맡긴 뒤 개발팀은 검증 시스템 구축에 집중하는 'Compound Engineering' 방식을 적극 도입해 보기를 추천합니다.
The Problem
포스타입은 10년 동안 사용한 Froala 에디터의 HTML 직접 조작 방식 때문에 인라인 댓글 등 글 상태와 연동되어야 하는 고도화된 기능을 구현하는 데 한계를 겪고 있었습니다.
The Solution
상태 모델이 노드 트리 구조로 관리되어 확장이 용이한 Meta의 Lexical 에디터로 전환하되, 범위 최소화를 위해 백엔드 API와 저장 포맷은 유지한 채 AI를 활용해 구현하고 팀 전체가 검증 및 코드 리뷰에 집중했습니다.
The Result
기존에 리스크와 비용 문제로 포기했던 에디터 교체 작업을 프론트엔드 개발자 3명이 단 6주 만에 안정적으로 완료하였으며, AI 협업 과정을 통해 자연스럽게 기술을 습득했습니다.
Trade-off
엔진 교체 비용을 최소화하기 위해 기존의 비효율적인 저장 포맷과 백엔드 구조를 개선하지 않고 그대로 유지하는 타협안을 선택했으며, AI가 작성한 코드의 완벽한 이해보다는 정답지 기반의 검증에 의존했기 때문에 검증 단계에서 잡아내지 못한 미세한 에지 케이스가 존재할 위험이 있습니다.
