피드로 돌아가기
Dev.toFrontend
원문 읽기
라이선스 제약 해결을 위한 TipTap 전환 및 Block 기반 구조 설계
TipTap is not broken. Your expectations are.
AI 요약
Context
TinyMCE 7의 라이선스 불일치 및 TinyMCE 6의 지원 종료로 인한 RTE 교체 불가피 상황 발생. 기존의 비구조적 HTML 마크업 의존성으로 인해 단순 도구 교체 시 데이터 정합성 및 렌더링 일관성 결여라는 병목 지점 노출.
Technical Solution
- ProseMirror 기반의 엄격한 Document Schema 도입을 통한 DOM 구조적 일관성 확보
- RTE 내부의 복잡한 스타일링/스크립트 삽입을 배제하고 Lean한 텍스트 처리 구조로 전환
- 복잡한 UI 요소(Button, Callout 등)를 RTE 외부의 별도 Block 모델로 분리하여 데이터 구조화
- Block 기반 설계를 통해 Editor-specific quirk를 제거하고 렌더링 층(View)에서 제어하는 추상화 계층 구축
- Community Package 형태의 Escape Hatch를 제공하여 대규모 코드베이스의 단계적 마이그레이션 경로 확보
실천 포인트
- RTE 내부에 Inline CSS나 Raw HTML 삽입 허용 여부 검토 및 차단 - 반복되는 복잡한 UI 패턴을 별도의 구조화된 Block Model로 정의했는지 확인 - 프론트엔드 CSS가 에디터의 기본 DOM 구조(예: li p)를 수용할 수 있도록 범용적으로 설계되었는지 점검 - 외부 라이브러리 교체 시 단순 기능 복제가 아닌 데이터 추상화 레이어 도입 고려